return false">탱구</a></li&gt

(1)

문서번호 W9_album2

V2_obj_click(소시 사짂첩 버젂 3으로 객체에서 마우스클릭을 확인하는 방법)

“a” 태그에서 마우스 클릭 사건을 확인하는 DOM 방법을 알아봅니다.

V1_href_text(이미지와 텍스트 바꾸기)에서 목록 부분만 보면 다음과 같습니다.

<ul>

<li><a href="images/taeyon_cp.jpg" title="태연-수영 길이 비교에서"

onclick="showpic(this); return false">탱구</a></li>

<li><a href="images/suyong_cp.jpg" title="태연-수영 길이 비교에서"

onclick="showpic(this); return false;">수영</a></li>

<li><a href="images/jessica_1.jpg" title=" 얼음공주 "

onclick="showpic(this); return false;"> 제시카 </a></li>

<li><a href="images/sunny_1.jpg" title="날로 예뻐지는?"

onclick="showpic(this); return false;">써니</a></li>

</ul>

문제는 HTML 언어와 자바스크립트 언어의 분리입니다. HTML 언어는 기본 구조를 이루며 태그와 내용(contents)로 이루어져 있습니다. 사건을 확인하고 그에 따라 명령을 하는 프로그램과 같은 표현이 서로 섞여 있습니다.

우리의 목표는 HTML 구조와 Javascript 언어(동적표현)와 CSS(꾸미기)를 분리하여 각각 단순화하 고 (생각과 표현 등의 단순화, 직곾화) 혹 다른 쪽이 잘못되더라도 최소한의 동작을 하도록 하는 것입니다(하위호홖성: 기본적인 HTML 의 최소한 동작하며 이러면 최소한의 내용 젂달이 가능하 도록).

다음에는 더 많은 자바스크립트가 태그 중에 나오는 것을 보며 다음 이야기로 넘어가려 합니다.

Javascript: pseudoprotocol 이란 말을 쓰는데 … 기본 HTML 클라이언트 언어는 자바스크립트이므 로 javascript 는 생략해도 문제는 없습니다.

구구단 태연 (구구단을 다 봐야만 볼 수 있다)

<html>

<head>

</head>

<body>

<a href="images/taeyon_cp.jpg"

onclick="javascript:

for(i=2;i<=9;i++){

for( j=1;j<=9;j++){

alert(i+'*'+j+'='+i*j)

(2)

} }">

태연

</a>

</body>

</html>

이를 해결하기 위한 방법으로

“a” 태그를 객체화하여(“a”객체에 DOM 방법으로 접근) 마우스 클릭 여부를 확인한 다음 클릭이 되면 showpic( ) 함수를 호출하여 실행시키면 됩니다.

(1) 먼저 “ul” 요소노드에 접근합니다.

var gall_o=document.getElementById(“gall”);

(2) “ul” 아래에 있는 “a” 태그에 태그 이름으로 접근하면 4개의 배열로 됩니다.

var link_o=gall_o.getElementsByTagName(“a”);

(3) link_o[ ] 배열 4개를 차례대로 호출하면서 마우스 클릭을 확인합니다.

for (i=0; i<link_o.length; i++) { link_o[i].onclick

}

(4) 마우스 클릭이면 showpic( ) 함수를 호출합니다.

link_o[i].onclick=showpic(this);

(5) 함수가 실행되면 링크를 따라가면 안되며 따라서 return false 를 넣어준다. 2 개 이상의 함수 를 동작시키기 위해(호출하기 위해) function ( ) { } 을 넣는다.

link_o[i].onclick=function () { showpic(this);

return false;

}

(6) 이러한 일을 하는 함수를 gall_click 으로 만든다.

(7) gall_click( ) 함수를 HTML 웹문서를 다 열어 본 후 자동으로 실행시키지 위해 window.onlaod = faunction () {

gall_click();

} 을 자바스크립트 처음에 넣는다.

(3)

물롞 <body onload=”gall_click()”> 해도 되나 HTML과 J/S 분리를 위해 사용하지 않는다.

젂체 소스를 살펴보면

<html>

<head>

window.onload=function () { gall_click;

}

function gallery() {

var gall_o=document.getElementById("gall");

var link_o=f_gall.getElementsByTagName("a");

for (i=0;i<link_o.length;i++) { link_o[i].onclick=function() { showpic(this);

return false;

} } }

function showpic(pic) {

var source=pic.getAttribute("href");

var picture1=document.getElementById("pic_show");

picture1.setAttribute("src", source);

var text1=pic.getAttribute("title");

var exp1=document.getElementById("exp");

exp1.firstChild.nodeValue=text1;

}

</script>

</head>

<body>

</ul>

(4)

사짂 설명은 여기에서...

</p>

</body>

</html>

2011-11-15, 곽노태

return false&#34;&gt;탱구&lt;/a&gt;&lt;/li&gt

return false">탱구</a></li&gt