<!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으로 주는 방법을 썻는데요,
추천해주시는 방법은 뭐가 있는지 궁금합니다.
제가 쓴 방법은 결과만 궁여지책으로 나왔을 뿐이지 자바스크립트가 추구하는 최적의 방법은 아닌것 같아서요.
진짜 답안지가 없어서 헤맬때마다 미치겠지만 이렇게 공부를 시켜주시는 의도시기에 묵묵히 할뿐입니다 감사합니다..ㅠㅠ
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. 열심히 하는 만큼 배웁니다. 정답을 하는 것보다 공부하는 과정을 통해 성장합니다.