본문 바로가기
HTML, CSS, JS

2022-09-30 이벤트 Window객체

by HTT 2022. 10. 4.

이벤트

 


: 웹브라우저에 마우스나 키보드의 여러 움직임을 발생시키는 것, 사용자가 웹페이지에서 하는 모든 것 


- 이벤트핸들러이용


▶ on + 이벤트명
<태그명 on이벤트명 = "함수호출문 or 자바스크립트 명령문">
ex) onclick


- 이벤트핸들러로 호출하는 경우 반드시 함수의 호출문 명시!
onclick = "test()"  .../>

   

 

 


   

 

 


Window 객체

 



: 브라우저객체의 상위 객체


(1) 대화상자관련된 메소드

window객체명은 생략이 가능
- alert
- confirm
- prompt  
      


(2) popup

- open() : 새 창을 실행
▶ window.open(경로, 이름, 옵션)
                ----  ----     ----
                  |     |         |____________ 오픈될 창의 크기, 위치, 구성요소등
                  |     |_팝업창의이름        left,top,width,height....
                  |        이름을 주면 항상 동일한 창에 출력될 수 있도록
                  |_ 오픈될 팝업창의 path
- close() : 창을 닫기
- opener객체 : popup창을 실행시켜준 부모창   

 


   (3) 데이터처리

   parseInt : 숫자모양을 한 문자열을 숫자로 변환
   isNaN : 입력한 문자열이 숫자인지 문자인지 판단(데이터타입을 판단하는 게 아니라)
   eval : 매개변수로 전달된 메세지를 실제로 실행
   trim : 공백을 제거

 


   (4) 자동실행   

- 자바스크립트 함수나 명령문을 일정한 시간이 지난 후에 자동으로 한 번 실행하거나
- 반복해서 실행하는 경우


1. setTimeout
작업내용을저장할변수 = window.sewtTimeout.("실행할자바스크립트명령문 or 함수명", millisecond)
               ---------------- 

                  ㄴ> 함수를 정의하는 경우 함수명만 정의 : 함수명() <- XX
=>매개변수로 저장한 millisecond가 경과하면 자동으로 첫 번째 매개변수에 정의한 함수나 자바스크립트 명령문이 실            행(한 번만 실행)
    실행될 때 실행되는 정보에 대한 구분값이 발생하는데 변수에 저장하고 작업을 해제
    한 번만 실행되므로 사용 안 함 


2. serInterval
작업내용을저장할변수 = window.sewtTimeout.("실행할자바스크립트명령문 or 함수명", millisecond)
               ---------------- 

                  ㄴ> 함수를 정의하는 경우 함수명만 정의 : 함수명() <- XX

 

=> 매개변수로 저장한 millisecond가 경과하면 자동으로 첫 번째 매개변수에 정의한 함수나 자바스크립트 명령문이 실행.정의한 millisecond 간격으로 반복해서 실행
실행될 때 실행되는 정보에 대한 구분값이 발생하는데 변수에 저장하고 작업을 해제
                    ------------

                            ㄴ> id (반복실행을 멈추기 위해서 필요)


3. clearInterval
clearInterval(해제할 작업의 id가 저장된 변수)
=> 매개변수로 전달된 id에서 참조하는 자바스크립트 실행을 종료
      

 

 

 

 

 

 

 


form객체

 


(1) test - test상자에 입력한 문자열 추출, 문자열 셋팅하기

윈도우객체.도큐먼트객체.폼객체명.텍스트상자객체.value
----------------
     ㄴ생략가능
window.document.myform.id
   
   

(2) checkbox, radio

=> 자바스크립트에서 체크박스의 선택된 항목들을 배열로 관리
=> checkbox객체의 선택값이 배열로 관리되므로 전체 checkbox들을 엑세스하기 위해서 for문을 이용해서 처리
=> checkbox객체의 선택 유무를 체크하기 위해서 checked속성이용
     체크된 상태 : true
     체크 해제된 상태 : false
=> checkbox의 문자열은 : value

댓글