메뉴 건너뛰기

황기태2018.10.24 09: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. 열심히 하는 만큼 배웁니다. 정답을 하는 것보다 공부하는 과정을 통해 성장합니다.

파일 첨부

여기에 파일을 끌어 놓거나 파일 첨부 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )
위로