웹마스터 팁

  2. Support
  3. 웹마스터 팁

자바스크립트 실행시점

2002.04.11 20:47

Jacylee

첨으로 강좌를 올리내요. 제 개인 사이트에 올린 강좌인데요. 도움이 되시길...


자바스크립트는 HTML내 어디에나 둘 수 있으나 "위치"는 자바스크립트의 처리시점을 결정한다. 즉 위에서 아래로 순차적으로 실행된다.
일반 프로그래밍 언어에서 프로그램제작時 헤더 부분에 변수의 초기화를 하는 것과 비슷하게 <HEAD></HEAD>태그 사이에 함수의 선언이나 변수의 초기화 같은 것을 둔다. 즉, 이 곳에 변수의 초기화와 함수의 동작을 정의하고 BODY내에서 정의된 변수와 함수의 결과값을 조작하거나 가져다 쓴다.

백문이 불여일견이다. 아래 두경우 코드를 실행하여 결과를 비교해보자.

경우 1)
[실행결과] 백구 사자 호랑이 거북이표범 물개

<head>
        <title>자바스크립트 코드 실행시점</title>
<script >
function jacy(){
document.write('거북이');
//document.write('<script>alert("dfdfdfdfd")</script>');

}
document.write('백구');
</script>
사자
</head>

<body>
호랑이
<script >
//alert('2');
jacy();
document.write('표범');
</script>
물개<br>
</body>

------------------------------------------------------------------------

경우 2
[실행결과] 거북이 ※ 또한 브라우져 페이지 제목 또한 사라짐
[분석]
onload의 실행시점은 html페이지가 위에서 아래끝까지 다 읽힌 시점(onload)
가 되므로 "거북이"가 된다. 그리고 한가지 눈여겨 볼 것은 document.write('어쩌고 저쩌고') 등은 코드가 불린 위치에 결과를 출력한다.
즉 일반 프로그래밍 언어에서처럼 함수는 결과를 코드가 실행된 위치에 돌려준다.

그러나 onload 이벤트에서 불려진 함수의 결과는 문서전체에 영향을 준다.
<head>
        <title>자바스크립트 코드 실행시점</title>
<script >
function jacy(){
document.write('거북이');
//document.write('<script>alert("dfdfdfdfd")</script>');

}
document.write('백구');
</script>
사자
</head>

<body onload="jacy()">
호랑이
<script >
//alert('2');
jacy();
document.write('표범');
</script>
물개<br>
</body>
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기