23.04.19 자바스크립트 내장객체 (*팝업창만들기)

자바스크립트의 내장 객체 3대장 :  window / Date / Math

웹 브라우저의 최상위 객체 :  window

*window 객체는 생략 가능 (ex. (window.)alert( ))

*console 창에 window를 입력했을때 f 라고 되어있는 것은 윈도우 함수이다. <-> f가 없는것은 윈도우 객체의 하위객체이다.

---

1. 팝업창 만들기

팝업창을 만들때 사용하는 함수는 open("불러올 파일", "팝업창 이름지정", "사이즈, 위치지정(px은 생략)" );

*주의 팝업창 이름을 지정해야 팝업창이 별도의 창으로 뜨게된다.

 

   window.open("popup.html", "이벤트팝업", "width=600 height=500  left=300 top=100");

 

 

2. 버튼을 클릭했을 때, 팝업창 뜨기

 

   버튼 클릭시 팝업창 뜨기

   const btn = document.querySelector("button");

   const popWidth = 600;

   const popHeight = 500;

  

   btn.addEventListener("click", () => {

   let left = (screen.availWidth - popWidth) / 2;   // screen 객체 : 실제보고있는 화면의 대한 정보를 가져오는 객체

   let top = (screen.availHeight - popHeight) / 2;     // 팝업창이 정중앙에 오도록 위치 설정

 

   window.open("popup.html", "pop1", `width=${popWidth} height=${popHeight} left=${left} top=${top}`);

   })