메뉴 건너뛰기

프로그램언어

Home 프로그램언어 JAVA javascript
✔ 뷰어로 보기
2015.06.19 13:02

이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload )

조쉬
조회 수 10886 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

페이지 로드후 이벤트 처리하기 1


예제보기)

 

 

  1.  <body>
  2.     <div id="myDiv">
  3.         페이지가 로드되고 난 후 배경색이 Yellow로 변경됩니다.
  4.     </div>
  5.  
  6.     <script type="text/javascript">
  7.         document.getElementById("myDiv").style.backgroundColor='yellow';
  8.     </script>
  9.  
  10.  </body>

 

 

결과보기)

 

 

 

페이지 로드후 이벤트 처리하기 2


예제보기)

 

  2.  <head>
  3.   <title> New Document </title>
  4.     <script type="text/javascript">
  5.     //배경색설정
  6.     //document.getElementById("myDiv").style.backgroundColor = 'yellow';
  7.     //위 문장 오류 발생.. 객체를 만들기전에 참조하려고하기때문에
  8.  
  9.     //페이지 로드시 자바스크립트 실행
  10.     window.onload = pageLoad;
  11.     function pageLoad(){
  12.         document.getElementById("myDiv").style.backgroundColor="green";
  13.         //가장 마지막에 적용된다.
  14.     };
  15.     </script>
  16.  
  17.  </head>
  18.  
  19.  <body>
  20.     <div id="myDiv">
  21.         페이지가 로드되고 난 후 배경색이 Yellow로 변경됩니다.
  22.     </div>
  23.  
  24.     <script type="text/javascript">
  25.         document.getElementById("myDiv").style.backgroundColor='yellow';
  26.     </script>
  27.  
  28.  </body>
  29. </html>
  30.  

 

결과보기)




 

페이지 로드후 이벤트 처리하기 3


예제보기)

 

 

  1. <html>
  2.  <head>
  3.   <title> New Document </title>
  4.     <script type="text/javascript">
  5.     //배경색설정
  6.     //document.getElementById("myDiv").style.backgroundColor = 'yellow';
  7.     //위 문장 오류 발생.. 객체를 만들기전에 참조하려고하기때문에
  8.  
  9.     //페이지 로드시 자바스크립트 실행
  10.     window.onload = pageLoad;
  11.     function pageLoad(){
  12.         changeColor();
  13.         changeSize();
  14.     };
  15.  
  16.     function changeColor(){
  17.         document.getElementById("myDiv").style.backgroundColor="green";
  18.        
  19.     }
  20.     function changeSize(){
  21.         document.getElementById("myDiv").style.height = "100px";
  22.         //사이즈를 변경하려면 대상의 사이즈가 설정되어있어야한다.
  23.     }
  24.     </script>
  25.  
  26.  </head>
  27.  
  28.  <body>
  29.     <div id="myDiv" style = "height:50px;">
  30.         페이지가 로드되고 난 후 배경색이 Yellow로 변경됩니다.
  31.     </div>
  32.  
  33.     <script type="text/javascript">
  34.         document.getElementById("myDiv").style.backgroundColor='yellow';
  35.     </script>
  36.  
  37.  </body>
  38. </html>

 

 

결과보기)

 

 

 

 

 

 

페이지 로드후 이벤트 처리하기 4 : [많이사용하는방법] : 익명함수 : anonymous function 스타일


예제보기)

 

 

 

  1. <html>
  2.  <head>
  3.   <title> window.onload : load 이벤트를 처리하는 onload 이벤트 처리기 </title>
  4.     <script type="text/javascript">
  5.     //배경색설정
  6.     //document.getElementById("myDiv").style.backgroundColor = 'yellow';
  7.     //위 문장 오류 발생.. 객체를 만들기전에 참조하려고하기때문에
  8.  
  9.     //페이지 로드시 자바스크립트 실행
  10.     //함수 지정
  11.     /*
  12.     window.onload = pageLoad;
  13.     function pageLoad(){
  14.         changeColor();
  15.         changeSize();
  16.     };
  17.     */
  18.    
  19.     //[많이사용하는방법] : 익명함수 : anonymous function 스타일
  20.     window.onload = function(){
  21.         changeColor();
  22.         changeSize();
  23.     };
  24.  
  25.  
  26.     function changeColor(){
  27.         document.getElementById("myDiv").style.backgroundColor="green";
  28.        
  29.     }
  30.     function changeSize(){
  31.         document.getElementById("myDiv").style.height = "100px";
  32.         //사이즈를 변경하려면 대상의 사이즈가 설정되어있어야한다.
  33.     }
  34.     </script>
  35.  
  36.  </head>
  37.  
  38.  <body>
  39.     <div id="myDiv" style = "height:50px;">
  40.         페이지가 로드되고 난 후 배경색이 Yellow로 변경됩니다.
  41.     </div>
  42.  
  43.     <script type="text/javascript">
  44.         document.getElementById("myDiv").style.backgroundColor='yellow';
  45.     </script>
  46.  
  47.  </body>
  48. </html>

 

결과보기)




Atachment
첨부 '4'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
List of Articles
번호 제목 날짜 조회 수
27 현재 날짜, 시간 ( Month + 1 에 대해서 ) 2021.03.25 231
26 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 339
25 default 매개변수(매개변수 기본값) 2021.03.26 218
24 페이지 이동 2021.03.26 201
23 DTREE 트리구조 만들기 file 2021.03.26 899
22 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 204
21 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 1463
20 split, join, replace, replace_all 2021.03.26 232
19 utf-8일때 alert 한글 깨짐 해결 2021.03.26 3606
18 자주쓰는 것들 2021.03.26 257
17 ajax 사용시 Internal Sever Error 뜨는 경우 2021.03.26 985
16 폼안에 태그명, 함수명 같을때 오류 2021.03.26 227
15 팝업창 맨위로 올라오게 하기 2021.03.26 911
14 3자리 마다 쉼표만 찍어주는 number_format 함수 2021.03.26 243
13 날짜 계산하기 (년/월/일 더하기, 빼기) 2021.08.20 2383
12 Date 객체로 원하는 날짜, 시간 표현하기 2021.08.20 244
11 월의 마지막 날짜 계산하기 2021.08.20 264
10 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 1591
9 시간 계산하기 (시/분/초/ 더하기, 빼기) 2021.08.20 1738
8 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) 2021.08.20 276
쓰기
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved