bom이란
브라우저 객체모델로 브라우저 전체를 객체로 관리한다.
막간복습 ! dom은 문서객체모델이다. 자바스크립트를 통해 브라우
저 창을 관리할 수 있도록 브라우저 요소를 객체화해놓은 것이다. 자주 등장하는 브라우저 내장 객체는 몇가지가 있다.
window객체
: 웹브라우저의 상태를 제어. 자바스크립트의 모든 객체는 window객체에 포함됨.
window 객체에서 사용하는 함수는 아주많다.
그중 내가 배운건
open() : 새로운 창을 연다.
window. open( "http://navercom" , "_self") // sef는 현재창열기.
window. open( "http://navercom" , "" , "left=0, top=0, widdth=300, height=300") // 알림창의 크키를 지정. ""은 새창열기
resizeBy() , resizeTo()
var newWin = window.open("", "", "width=300, height=300") --> 창의 크기 변경
newWin.resizeBy(-100, -100) //100만큼 줄이기
newWin. resizeTo(200,2000) // 창의 최종크기 지정. 200픽셀로 지정 , 음수값 불가
moveBy() , moveTo()
열려있는 알림창의 위치 조절
moveBy() 현재위치를 기준으로 가로x픽셀, 세로 y픽셀만큼
moveTo() 화면왼쪽 위 모서리를 기준으로 가로x픽셀, 세로y픽셀
팝업창 표시프로그램 만들기
open 함수를 만든뒤 한가지 더 체크해야 할 것이 있다.
크롭웹브라우저가 기본으로 팝업을 차단하기 때문에 팝업차단 상태인지 확인해야함
window.onload = openPop // 브라우저가 실행되자 마자 팝업창이 열려야 한다. 따라서 onload이벤트 처리기 사용
원인은 오타였고, javascript .window 가 아니라 javascript:window 였다. 모두 나와같은 실수 안하길...
navigator 객체
웹브라우저와 관련된 정보가 담겨 있다. 웹브라우저 버전을 비롯해 웹 브라우저에 어떤 플러그인이 설치되어 있는지, 웹브라우저가 온라인 상태인지 오프라인 상태인지 등 다양한 정보가 있다.
이런 정보를 이용하여 프로그램을 만들 시 방문자의 접속 브라우저에 맞줘 자바스크립트를 적용할 수 있다.
렌더링 엔진 : navigator객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별한다. 렌더링 엔진이란 브라우저에서 웹문서를 화면에 표시하기 위해 웹문서의 태그와 스타일을 해석하는 프로그램이다.
웹브라우저마다 내장되 렌더링 엔진이 다르기 때문에 html이나 css를 해석하는 방법이 다르다. 렌더링 엔진은 레이아웃이라고도 한다.
참고 : https://developer.mozilla.org/ko/docs/web/api/navigator/ 두잇자바스크립트 도서
useragent 속성 : 사용자의 웹 브라우저 버전은 물론 어떤 자바스크립트 엔진을 사용하는지 등의 정보도 알 수 있다. 서버에서는 이 정보를 보고 브라우저 종류를 확인한 후 그 브라우저에 맞게
웹페이지를 표시한다. 이 정보는 navigator.useragent에 포함되어 있다.
우리가 이 객체를 왜 알아야 하는가 : 웹사이트를 제작하는 경우 인터넷 익스플로러 사용자가 웹사이틍에 접속했을 때 사용자에게 크롭 브라우저로 접속하라고 사이트에서 알려줘야
한다면, 인터넷 익스플로러 사용자 에이전트 문자열이 어떤것인지 알고있어야 한다.
브라우저 종류확인하기
1. userAgent 를 모두 소문자로 전환 - toLowerCase()
2. userAgent에 해당 문자열이 있는지 확인 - indexOf("triden"), 아닐시 -1 반환, 값이 있으면 해당 문자열 반환
그외 배운것들
if 문에 관한 고찰
if ( ㉠) {
if ( ) ;
else{
if ( ) ;
else if ( ) ;}
}
이런 함수를 어떻게 해석해야할까 고민하였다.
하지만 단순히 생각해보면 ㉠이 true 면 다음 조건문으로
false 면 탈출. 혹은 else로 가면된닫.
단순하게 생각하자!!
오늘의 퀴즈
답안
다행이 필요한 기능을 수행하긴 했지만 답안이 좀더 간결한 코드를 사용했다.
onload이벤트를 사용하여 따로따로 하지 않고 이벤트 안에 함수를 모두 때려박았다.
이런 방법도 있는걸 배운다. 변수 선언이 무조건 적인 방법이 아님을 배웠다.
