메뉴 건너뛰기

프로그램언어

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
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
  1. No Image 11Sep
    by
    2016/09/11 Views 5266 

    디자이너를 위한 레이어 탭 더 빠르게 만들기

  2. No Image 11Sep
    by
    2016/09/11 Views 5879 

    간단하게 우클릭 막는방법

  3. 11Sep
    by
    2016/09/11 Views 6165 

    JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소

  4. 11Sep
    by
    2016/09/11 Views 5439 

    이클립스 실행할때 자신이 원하는 JDK 지정하는 방법

  5. No Image 09Sep
    by
    2016/09/09 Views 7075 

    특정 HTML DOM 엘레멘트로 스크롤 이동하기

  6. No Image 01Sep
    by
    2016/09/01 Views 6745 

    모바일 홈페이지로 자동 이동하는 방법....

  7. No Image 01Sep
    by
    2016/09/01 Views 7166 

    이동 가능한 레이어팝업 소스

  8. No Image 01Sep
    by
    2016/09/01 Views 7277 

    jquery offset()을 이용한 부드러운 스크롤 이동

  9. 19Jun
    by 조쉬
    2015/06/19 Views 10871 

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

  10. No Image 19Jun
    by
    2015/06/19 Views 6958 

    iframe사용시 높이 자동 조절

  11. 19Jun
    by
    2015/06/19 Views 7712 

    [라디오버튼 오류 체크] 간단한 문제 예제

  12. 19Jun
    by
    2015/06/19 Views 10924 

    자바스크립트 아이디 기억하기 기능 구현 (쿠키저장)

  13. No Image 19Jun
    by
    2015/06/19 Views 14586 

    공백 검사 함수

  14. No Image 19Jun
    by
    2015/06/19 Views 9086 

    자바스크립트 API 문서

  15. 19Jun
    by
    2015/06/19 Views 6289 

    JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 )

  16. 19Jun
    by
    2015/06/19 Views 12222 

    창 크기 최대화 시키기

  17. 19Jun
    by
    2015/06/19 Views 6798 

    예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그)

  18. 19Jun
    by
    2015/06/19 Views 8523 

    Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성

  19. 19Jun
    by
    2015/06/19 Views 7297 

    창에 대한 정보얻기 (창 크기, 창 위치)

  20. No Image 19Jun
    by
    2015/06/19 Views 10741 

    핸드폰 번호 일부 마스킹크 작업 (정규식 이용)

쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 13 Next
/ 13

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

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