메뉴 건너뛰기

프로그램언어

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

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

조쉬
조회 수 10871 추천 수 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
번호 제목 날짜 조회 수
227 이메일 체크하기 2014.03.01 5205
226 input에 background-image 이벤트 2014.03.01 5356
225 주민등록번호 체크 file 2014.03.01 5922
224 마우스대면 글자 없어지는 검색창 2014.03.01 6226
223 check box 선택시 색상 변경 file 2014.03.01 6494
222 [jQuery] 실시간 검색어 순위 순서대로 보여주기 2014.03.01 12017
221 [jQuery] 상위부터 차례로 지역 선택하기 2014.03.01 46015
220 [jQuery] 탭 메뉴 2014.03.01 6399
219 jQuery 이미지 슬라이드 오버시 큰이미지 보여주기 소스 file 2014.03.01 6975
218 (소스)jqury 롤오버 버튼 쉽게 만들기 file 2014.03.01 5785
217 top 부분이 고정되는 슬라이딩 메뉴입니다 file 2014.03.01 5752
216 [jQuery] textarea 글자수 카운트 2014.03.01 7420
215 클릭위치로 레이어 띄우기 2014.03.01 6220
214 fckeditor 2.6.6 엄청 편해졌네 file 2014.03.01 5403
213 자바스크립트 소수점 자리수 계산 2014.03.01 6897
212 div 높이 가운데정렬 2014.03.01 5593
211 javascript 인쇄 미리보기, 출력, 페이지 설정 등 2014.03.01 32584
210 iframe 자동 리사이즈 2014.03.01 5992
209 활용예제 : 체크박스 전체선택 전체해제 /라디오버튼 2014.03.01 7020
208 자바스크립트, javascript, 간단한 파일 확장자 검사후 retur 2014.03.01 5434
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

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