<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>z-index 스타일 프로퍼티</title>
<style>
div { position : absolute; }
img { position : absolute; }
</style>
</head>
<body>
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div>
<img src="media/spade-A.png"
width="100" height="140" alt="스페이드A">
<img src="media/spade-2.png"
width="100" height="140" alt="스페이드2">
<img src="media/spade-3.png"
width="100" height="140" alt="스페이드3">
<img src="media/spade-7.png"
width="100" height="140" alt="스페이드7">
</div>
<script>
// z-index, left, top 모두 초기화
var imgArray = document.getElementsByTagName("img");
for(i=0; i<imgArray.length; i++) {
var obj = imgArray[i];
obj.style.zIndex=i;
obj.onclick = shuffle; // onclick 리스너 등록 //이부분이 질문입니다. 왜 obj.onclick="shuffle()"이 아닌거죠??
}
function shuffle() {
for(i=0; i<imgArray.length; i++) {
var obj = imgArray[i];
obj.style.zIndex++;
obj.style.zIndex %= imgArray.length;
}
}
</script>
</body>
</html>
384page 8장 실습문제5번 질문입니다.
- ?
-
?
obj.onclick = shuffle();가 shuffle 함수를 호출하는것이니깐
클릭시 shuffle함수가 호출되어야하므로
obj.onclick = shuffle; 이 아니라 obj.onclick = shuffle();가 되어야하는거 아닌가요? -
?
1. obj.onclick = shuffle; 의 뜻은 앞으로 클릭이 일어나면 shuffle 함수를 호출하도록 지금 등록하는 것입니다(지금 호출하는 것이 아니고).
미래에 클릭이 발생할 때의 행동을 등록하는 것이지요. onclick은 리스너의 주소나 코드를 저장하는 일종의 변수입니다.obj에 언젠가 클릭이 발생하면 웹브라우저는 obj의 onclick에 등록된 주소를 보고 그때
shuffle()을 호출합니다.
만일 obj.onclick="a=100"; 이라고 하면
a=100을 지금하는 것이 아니라, a=100이라는 코드를 저장해둡니다.
책 354페이지의 그림 8-6을 보세요.
2.
a = 3; 은 변수 a에 3을 넣는 것이고
function f() {
return 5;
}
a = f(); 는 함수 f()를 호출하고 그 결과인 5를 변수 a에 넣는 것입니다.
= 연산자는 항상 오른쪽 연산의 결과를 왼쪽에 저장하는 연산을 하지요.
그러므로 obj.onclick = shuffle(); 은 지금 shuffle() 함수를 호출하고 그 결과를 onclick 핸들러에 등록하는 것입니다.
shuffle() 함수가 아무것도 리턴하지 않는다면 click 핸들러에 등록되는 것은 없습니다.
그러면 클릭이 발생해도 아무 일도 일어나지 않습니다.
그래서 이 표현이 잘못되었다는 겁니다.
차분히 다시 생각해 보시고 또 질문 주세요. -
?
마지막으로 하나만 더 여쭙겠습니다.
obj.onclick=shuffle;이 지금 당장이 아닌 미래에 클릭이 발생할 때의 행동(함수)을 등록하는 것이라면,
교재 406페이지의 예제9-9에서 <input type="button" value ="계산" onclick="calculate()">에서
onclick="calculate()"가 아니라 onclick="calculate"가 맞지않나요?? -
?
예리한 관찰입니다.
하지만 문자열(" ")에 대한 주목할 필요가 있습니다.
태그 안에서는 속성에 다는 값을 모두 문자열로 지정하게 되어 있습니다. onclick 속성 역시 마찬가지이고요
그리고 문자열 속에 클릭이 일어나면 실행할 코드들(프로그램)을 작성하도록 되어 있습니다.
그래서 다음과 같이 합니다.
<input type="button" value ="계산" onclick="calculate(); alert('.....'); 여러 자바스크립트 프로그램 작성">그렇지만, obj.onclick 에는 다음과 같이 문자열이 아닌
obj.onclick = 문자열이 아닌 함수의 주소(함수 명);
참 설명하기 힘드네요.
-
?
정말 헷갈렸던 부분인데, 덕분에 잘 알아갑니다!
obj.onclick = shuffle; 는 shuffle 함수의 주소를 클릭 리스너에 등록합니다. 하지만,
obj.onclick = shuffle(); 는 shuffle 함수를 호출하고 shuffle()가 리턴한 값을 클릭 리스너에 등록합니다.
현재 우리가 필요한 것은 shuffle() 함수의 주소를 등록하는 겁니다.