<!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 = 문자열이 아닌 함수의 주소(함수 명);
참 설명하기 힘드네요.
-
?
정말 헷갈렸던 부분인데, 덕분에 잘 알아갑니다!
QnA
공부하면서 궁금했던 것을 질문해보세요.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18283 |
| 303 |
예제 2-21 질문입니다.
1
|
열공이 | 2022.12.23 | 117 |
| 302 |
1장 그림1-14
2
|
000 | 2020.04.14 | 119 |
| 301 | 실제로 사용해봤습니다 ! ㅠㅠ 1 | 갱자데쓰 | 2018.02.06 | 120 |
| 300 | 실습문제 1 | 키보드 향기 | 2020.06.07 | 120 |
| 299 | URL 과 IP 주소 2 | tc0712 | 2021.09.14 | 120 |
| 298 | 4장 9번 이론문제 2 | 궁금해요 | 2022.09.07 | 121 |
| 297 | 실습 문제 4장 4번 문제에 대해서 질문드립니다. 1 | ㅇㅇ | 2020.10.11 | 122 |
| 296 | 5장 실습문제 8번 2 | 쿠웨이트 | 2022.04.12 | 122 |
| 295 | 예제2-11 1 | 포도 | 2018.04.05 | 123 |
| 294 | 예제3-8 1 | 새싹 | 2018.04.22 | 123 |
| 293 | 챕터 3의 10번 문제 1 | 컴공과 입문 | 2018.03.20 | 125 |
| 292 |
인터넷 익스플로러 재질문이요
2
|
021 | 2020.04.13 | 125 |
| 291 | 이벤트 관련 질문 3 | 왕초보 | 2020.05.24 | 125 |
| 290 |
안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다.
1
|
김현우 | 2020.11.02 | 125 |
| 289 | Image 객체 2 | 초보 | 2020.05.14 | 126 |
| 288 | 예제5-9와 예제 5-14 3 | 궁금해요! | 2018.04.20 | 127 |
| 287 | 423쪽, 예제9-20 1 | 사랑나눔 | 2019.06.27 | 127 |
| 286 | 버튼 태그에 대해서 궁금한게 있습니다!! 1 | 아이디가뭐였지 | 2021.03.22 | 128 |
| 285 | 예제에 필요한 그림이나 동영상 같은 자료파일은? 1 | donghee | 2017.09.15 | 130 |
| 284 | 357쪽 예제 8-2 윗부분 2 | 칼잡이최제잘 | 2018.02.12 | 130 |
obj.onclick = shuffle; 는 shuffle 함수의 주소를 클릭 리스너에 등록합니다. 하지만,
obj.onclick = shuffle(); 는 shuffle 함수를 호출하고 shuffle()가 리턴한 값을 클릭 리스너에 등록합니다.
현재 우리가 필요한 것은 shuffle() 함수의 주소를 등록하는 겁니다.