7. BOM, window.open, screen 객체, resizetTo, moveTo, setInterval, clearInterval, setTimeout, clearTimeout, history

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

 - BOM(Browser Object Model; 브라우저 객체 모델)은 웹 브라우저와 관련된 객체의 집합을 말한다.

 

▲예제 1. 팝업창 띄우기

 - window.open("url", "창 이름", "옵션 설정")

 - 팝업창을 띄우는 메서드

 

 

▲예제 2. screen 객체

 - screen.width : 현재 해상도의 너비 값

 - screen.height : 현재 해상도의 높이 값

 - screen.availWidth : 현재 해상도의 너비에서 작업 표시줄을 제외한 값

 - screen.availHeight : 현재 해상도의 높이에서 작업 표시줄을 제외한 값

 - screen.colorDepth : 모니터에서 표현 가능한 컬러 비트 수

 

 

▲예제 3. moveTo(), resizeTo(), moveBy(), resizeBy()

 - moveTo(x, y) : 지정한 창을 x, y 좌표로 옮긴다.

 - moveBy(x, y) : 지정한 창을 x, y 만큼 이동한다.

 - resizeTo(x, y) : 지정한 창의 크기를 x, y로 바꾼다.

 - resizeBy(x, y) : 지정한 창의 크기를 x, y 만큼 바꾼다.

 - setInterval(fn() {}, ms) : 지정한 ms마다 fn()을 실행한다.

 

▲예제 3의 작동 화면

 

 

▲문제 1. moveTo()와 setInterval() 활용 

 

▲문제 1의 작동 화면

▲예제 4. 인라인 스크립트, 버튼 활용

 - 팝업창.focus() 하면 연동된 함수가 작동할 때 해당 창이 맨 위로 올라온다.

 

▲예제 4의 작동 화면

 

▲예제 5. clearInterval()

 - clearInterval(var) : 변수 var에 저장된 setInterval을 제거한다.

 

▲예제 5의 작동화면

▲예제 6. setTimeout()

 - setTimout() : 지정한 ms가 지난 후 실행문을 한 번 실행한다.

 

 

▲예제 7 - 1. history 객체 예시 1페이지

 

▲예제 7 - 2. hitsory.back() forward()

 - history.back() : 방문 기록의 이전 페이지로 이동한다.

 - history.back() : 방문 기록의 다음 페이지로 이동한다.

 

▲예제 7 - 3. history.go()

 - history.go(x) : x만큼 방문 기록의 페이지를 이동한다.

 

 

▲예제 8. JavaScript로 내용 꾸미기

 - <script> 태그가 페이지가 다 로드된 후에 작동돼야 하므로 작성한 HTML 태그 밑에다 스크립트를 작성한다.

 

 

▲예제 9. DOM 활용 예시

 

▲예제 9의 작동 화면

 

 

▲예제 10. 인라인 스크립트와 DOM 활용 예시

▲예제 10의 작동 화면