onload이벤트
인터프리터에 의해 웹브라우저는 html의 처음부터 해석을 하게 된다. 하지만 스크립트 코드가 head에 있기 때문에 body태그에 스타일 적용을 하지 못한다. 이를 위해 onload이벤트를 사용한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>window.onload 이벤트</title>
<script type="text/javascript">
//[1]페이지 로드시 함수로 지정한 자바스크립트 실행
/* window.onload = pageLoad;
function pageLoad() {
changeColor();
changeSize();
}; */
//[2] 익명 함수 : anonymous function 스타일
window.onload = function() {
changeColor();
changeSize();
};
function changeColor(){
document.getElementById("myDiv").style.backgroundColor="red";
}
function chageSize() {
document.getElementById("myDiv").style.height="100px";
}
</script>
</head>
<body>
<div id="myDiv" style="height:50px;">
페이지가 로드 되고 난 후 배경색이 yellow로 변경됩니다.
</div>
<script type="text/javascript">
document.getElementById("myDiv").style.backgroundColor="yellow";
</script>
</body>
</html>
'Programming > Javascript' 카테고리의 다른 글
| 자바스크립트 내장 객체 (0) | 2013.01.04 |
|---|---|
| 스타일객체 (0) | 2013.01.03 |
| 이벤트 정리 (0) | 2013.01.01 |
| 폼 유효성 검사2(submit&button 비교) (0) | 2013.01.01 |
| 폼 유효성 검사(아이디, 비밀번호) (0) | 2013.01.01 |
