웹마스터 팁
자바스크립트 실행시점
2002.04.11 20:47
첨으로 강좌를 올리내요. 제 개인 사이트에 올린 강좌인데요. 도움이 되시길...
자바스크립트는 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>
자바스크립트는 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>
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 원하는시간에 팝업창을 띄우고 원하는 시간에 닫어뻐리는;; [2] | 키르(絶對) | 2002.06.13 |
| 부드럽게 스크롤바를 따라다니는..+_+ [6] | 키르(絶對) | 2002.06.13 |
| 플래쉬 효과나는 신비 메뉴 - -? *수정+카피라이터~ [17] | ▩윤미 | 2002.06.09 |
자바스크립트 이해하기...3
[1]
 | Eccen | 2002.06.05 |
| 서서히 이미지를 변경시켜주는 환상적인 룰오버효과 [7] | ▩윤미 | 2002.05.31 |
|
마우스에 축구공 따라다니는 자바 스크립트..
[6]
| MR.HMH | 2002.05.30 |
| 어설픈 링크방지[정확한 경로로 오세요] [5] | 이성영 | 2002.05.30 |
|
자바스크립트 이해하기...2
[1]
| Eccen | 2002.05.30 |
|
자바스크립트 이해하기...1
[13]
| Eccen | 2002.05.26 |
| 폼안의 텍스트 입력시 실시간 카운팅 ? [8] | 카멜롯™ | 2002.05.20 |
| 링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..) [1] | ▩윤미 | 2002.05.19 |
| 글자가 커졌다가 작아졌다가.. [1] | Anice | 2002.05.17 |
| 텍스트박스안에서 춤추는글자 [1] | Anice | 2002.05.16 |
| 자바로 만든 퍼즐 겜^^; [8] | ☆봄비ㆀ | 2002.05.11 |
| 타이틀바 도, 움직인다! 캬하! (상태바 아님) [10] | ▩윤미 | 2002.05.06 |
| 웹브라우저, 언어, 운영체제 보여주기.. [3] | 이동기 | 2002.04.29 |
| 이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음) [8] | 조해성 | 2002.04.25 |
| 자바스크립트 실행시점 | Jacylee | 2002.04.11 |
| 배너 링크를 바로 클립보드로 카피하기(Legend님꺼 보충) [3] | 카멜롯™ | 2002.04.04 |
| 조그만한창 열기. ^.^ [5] | 아이쿠 | 2002.04.02 |