메뉴 건너뛰기

조회 수 320 댓글 2

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h3>아이템을 클릭하면 1.3배 크기로</h3>
  <hr>
  <p>여름 방학 때 하고 싶은 것들</p>
  <ul>
    <li>자전거로 대한민국 일주</li>
    <li>책 100권 읽기</li>
    <li>철인 3종 경기 준비</li>
    <li>자바스크립트 정복</li>
  </ul>
  <script>
  var liArray = document.getElementsByTagName('li');
  for (i=0; i<liArray.length; i++){
    //liArray[i].addEventListener("click", size, false);
    liArray[i].addEventListener("click", size, false);
    }

  function size(){
    for(i=0; i<liArray.length;i++){
      liArray[i].style.fontSize="1em";
    }
    this.style.fontSize="1.5em";
  }
  </script>
</body>
</html>
 

 

우선 제가 푼 코드입니다.

책의 문제에는 head 위쪽의 스크립트에서 작성하라고 해서 한참을 헤매다가

결국 코드 제일 밑으로 옮기니 정상적으로 되더라구요.

onload를 사용하라는 의도였던건지는 모르겠네요ㅠ

그때문인지 head에서 스크립트 작성시 li 배열에 이벤트리스너를 넣어도 함수 작동이 잘되지 않더라구요.

 

구글검색해도 많이 나오지만 스크립트를 헤드위에 넣을때와 아닐때의 명확한 이유를 교수님이나 관리자님의 정의를 듣고싶습니다.

 

그리고 클릭 이벤트가 발동되기전 for문으로 모든 li태그의 폰트 사이즈를 다시 1em으로 주는 방법을 썻는데요,

추천해주시는 방법은 뭐가 있는지 궁금합니다.

제가 쓴 방법은 결과만 궁여지책으로 나왔을 뿐이지 자바스크립트가 추구하는 최적의 방법은 아닌것 같아서요.

 

진짜 답안지가 없어서 헤맬때마다 미치겠지만 이렇게 공부를 시켜주시는 의도시기에 묵묵히 할뿐입니다 감사합니다..ㅠㅠ

 

 

?
  • profile
    황기태 2018.10.24 10:20

    1. 책의 실습문제 구성은 홀수번을 풀면서 짝수번을 푸는 열쇠를 얻도록 하는 것입니다.
    7번 문제를 풀면서 span 태그에 이벤트가 발생하는데 span 객체에 이벤트 리스너를 달면 되지,
    왜 window 객체에 이벤트 리스너를 단 것일까? 라고 생각해보지 않았어요?
    8번 문제도 동일한 유형을 가지고 있습니다.
    head 부분에 자바스크립트 코드(이벤트 리스너)를 두기 위해서
    7번 처럼 window 객체에 onclick 이벤트 리스너를 달고 리스너 코드에서 li 태그를 구분해내는 것입니다.
    한 번 다시 작성해보세요.

    이렇게 하면 각 태그들에 발생하는 이벤트의 처리를 한 군데서 모두 작성할 수 있는 장점이 있습니다.

    자바스크립트 코드를 HTML 텍스트의 곳곳에 둘 수도 있지만, HTML 페이지가 복잡하고 길면 나중에 코드를 분석하는 것이 힘듭니다.

    그래서 한 곳에 모아 두는 것이 좋고 head 부분에 넣는 것이 좋지요.

    특별히 자바스크립트 코드를 .js 파일에 만들어 두고 head 태그에서 불러와서 사용하면,
    자바스크립크 코드와 HTML 텍스트가 섞여 작성되지 않기 때문에
    웹 페이지가 깔끔해지는 등 여러 장점이 있습니다.


    2. window.onclick = ... 을 사용하여 문제 7의 코드와 비슷하게 작성하면, 질문하신 분이 작성한 것보다 매우 깔끔하게 될 것입니다.
    대신, 이전에 클릭한 객체를 기억해두어야 합니다. 지난번 질문에서 last를 사용한 것을 기억하십시오.
    현재 클릭된 li 객체에 대해서는 다음과 같이 하고
    e.target.style.fontSize = "1.3em";

    이전에 클릭된 것을 체크하기 위해 다음과 같이 하면 됩니다.
    if(last != null) // 이전에 클릭된 것이 있다면
    last.style.fontSize = "1em";

    그리고 현재 객체가 이전 객체로 기억하기 위해 다음과 같이 합니다.
    last = e.target;

    힌트를 많이 드렸는데 해보세요.

    3. 열심히 하는 만큼 배웁니다. 정답을 하는 것보다 공부하는 과정을 통해 성장합니다.

  • ?
    muuum 2018.10.25 07:56

    긴 장문의 세세한 답변 감사드립니다! 이 책을 통해서 포기할 뻔 했던 프로그래밍 공부를

    다시 하게 되었습니다. 정말 너무 많은 것을 배우고 있습니다. 감사합니다!

    <script>
    var last;
    window.onclick = function(e) {

    if (last != null) // 이전에 클릭된 것이 있다면
    last.style.fontSize = "1em";

    if (e.target.tagName.toLowerCase() != "li") return;
    e.target.style.fontSize = "1.3em";
    last = e.target;

    }
    </script>


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 692
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 350
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로