자바스크립트 Window 객체 활용

(2019-04-14)

Window 객체의 메소드, 대화상자 메서드

1.  Window 객체 (BOM 모델) 내 메서드웹브라우저 창(window) 객체에 적용 가능한 메소드
2. 대화상자 메서드

  ㅇ alert()   : 사용자에게 경고 메세지를 보여주고, 대기하다가, 확인 버튼을 누르면 다음 진행
  ㅇ prompt()  : 사용자에게 입력 대화상자를 보여주고, 확인 버튼을 누르면, 
                 사용자 입력 문자열을 반환
     - 형식 : prompt("사용자에게 알릴 문자열","초기 입력 값");
        . var resultText = prompt(titleText, defaultText);
  ㅇ confirm() : 사용자에게 확인 대화상자를 보여주고, 확인/취소 버튼을 누르면 불리안 값 반환
     - 형식 : confirm("사용자에게 알릴 문자열");


3. 새 창(자식 창) 열고 닫기 메소드

  ㅇ open(URL, name, options, replace)
     - URL : 웹문서가 있는 URL (생략하면 빈 화면이 나타남)
     - name : 창의 이름
     - options (선택적) (문자열) : 창의 속성(프로퍼티)
        . 형식 : 컴마로 구분된 1 이상의 'key1=value1,key2=value2, ...' 쌍 형식으로 지정 가능
        . 크기 : height (픽셀 단위의 창 높이), width (픽셀 단위의 창 넓이),
        . 위치 : left (좌단에서 픽셀 단위의 거리), top (상단에서 픽셀 단위의 거리)
        . 크기조절,상태표시줄,주소줄,스크롤바,메뉴바 등 여부 (yes/no)
           .. resizable (창의 크기 조절 여부)
           .. status (창 하단 상태 표시줄 보이기 여부)
           .. location (주소 표시줄 보이기 여부)
           .. scrollbars (스크롤바 보이기 여부)
           .. toobar (도구 모음 보이기 여부),
           .. menubar (창 상단 메뉴바 보이기 여부)
     - replace (선택적) (논리값)
        . true => 새로운 창이 현재 창을 대체
     - 반환값 : 새롭게 열린 창의 Window 객체를 반환

  ㅇ close()

  ※ 새 창을 여는 이벤트 관련
     - 대부분의 웹브라우저는, 임의로 팝업창 열기를 금지함
     - 다만, 사용자가 링크(a 요소)를 클릭하거나 폼을 전송할 때의 경우에서 만,
        . 새 창을 열기가 가능


4. 창에 포커스 주기 메소드

  ㅇ blur()  : 창이 뒤로 가려짐
  ㅇ focus() : 창을 맨 앞으로 오게 함


5. 창의 조절 메소드 (이동,크기,스크롤 등)

  ㅇ moveBy(오른쪽,아래쪽)
     - 창을 설정한 픽셀 수 만큼 오른쪽,아래쪽으로 이동
  ㅇ moveTo(좌단,상단)
     - 창을 좌단,상단으로부터 정한 픽셀 수 만큼 특정 위치로 이동
  ㅇ resizeBy(너비,높이) 
     - 창의 너비,높이를 현재에서 정한 픽셀 단위 만큼 변경
  ㅇ resizeTo(너비,높이)
     - 창의 너비,높이를 정한 픽셀 단위 만큼 설정
  ㅇ scrollBy(오른쪽,아래쪽)
     - 문서를 설정한 픽셀 수 만큼 오른쪽,아래쪽으로 스크롤
  ㅇ scrollTo(좌단,상단) : 문서를 좌단,상단으로부터 정한 픽셀 수 만큼 스크롤


6. HTML 요소 접근하기

  ㅇ 유형별 컬렉션 객체 
     * 웹브라우저가 웝문서를 읽고 DOM 트리를 생성한 후에는,
        . 모든 HTML 태그들을 유형별로 자동으로 모아서 제공하는 집합체

  ㅇ 유형 구분
     - anchors[] : a 요소들을 순차적으로 접근 가능
     - images[] : img 요소들을 순차적으로 접근 가능
     - forms[] : form 요소들을 순차적으로 접근 가능
     - elements[] : form 요소 내 자식 요소들을 순차적으로 접근 가능


[JS Window 객체] 1. Window 객체 2. Window 객체 활용

 
        최근수정     요약목록     참고문헌