다음은 html의 body에 script로 html 코드를 주입한 예제이다.
document는 자바스크립트 빌트인 객체인데, 이는 브라우저에서 현재 보여지는 html 문서를 나타낸 객체이다.
그런데 head부분의 html 문서를 파싱할 때 document의 요소 객체인 body가 생성되기 전이므로,
head 시점에서 script로 해당 body의 컨텐츠를 나타내는 속성인 innerHTML에 주입하면
오류가 발생(아무것도 표현이 되지 않는다)하는 것이다.
|
<!DOCTYPE html> <html> <head> <title>변수</title> <meta charset="UTF-8"> <script> var list = ''; list += '<ul>'; list += ' <li>Hello</li>'; list += ' <li>JavaScript..!</li>'; list += '</ul>'; document.body.innerHTML = list; </script> </head> <body> </body> </html> |
이를 해결하기 위해서는 자바스크립트의 이벤트를 이용할 수 있다.
script가 읽혀지는 순간을 body를 모두 읽은 후로 바꿀 수 있는데, 이때 사용되는 것이 window.onload이다.
window는 브라우저 창을 객체화한 것이다. 자바스크립트 에서 제공되는 빌트인 객체 중에서 최상위 객체이다.
window 객체에서는 load라는 이벤트가 발생할 수 있는데, load 이벤트는 웹페이지의 로드가 완료되는 시점에서 발생한다.
자바스크립트에서 모든 이벤트는 해당 이벤트를 발생 시킬 수 있는 특정 객체에 소속된다.
즉 load 이벤트는 window 객체에 속해있다. 또한 각각의 이벤트를 발생 시킬 수 있는 객체는
해당 객체에서 발생할 수 있는 이벤트를 위한 이벤트 속성을 반드시 제공해주어야 한다.
이때 이벤트 속성은 on + 이벤트 이름 형식으로 이름이 결정되어 있다.
'JavaScript' 카테고리의 다른 글
| 자바스크립트 (JavaScript) - 10 : 변수의 특성과 자료형 검사 (0) | 2016.07.18 |
|---|---|
| 자바스크립트 (JavaScript) - 9 : 이벤트 2 (0) | 2016.07.18 |
| 자바스크립트 (JavaScript) - 7 : 변수 2 (Variable) (0) | 2016.07.18 |
| 자바스크립트 (JavaScript) - 6 : 변수 1 (Variable) (0) | 2016.07.18 |
| 자바스크립트 (JavaScript) - 5 : 부울 자료형 2 (Boolean) (2) | 2016.07.18 |