BOM (Browser Object Model)

BOM (Browser Object Model)
웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들.
자바스크립트를 통해서 새 창, url 정보 등을 알아낼 수 있도록 한다.


alert

alert("웃지마")

경고창이 실행하는 동안은 다음 소스가 실행되지 않는다.

confirm

function cfm(){
if(confirm("확인?")){
alert("확인!");
}else{
alert("취소ㅠ");
}
}
cfm()

prompt

function prpt(){
if(prompt("이름이 머야?") === "김찡찡이"){
alert("찡찡이");
}else{
alert("누구세요??")
}
}
prpt()


Location
현재 창의 url을 알려줌.

location.href 
location.toString()

결과는 똑같지만 href를 선호한다.

alert(location); 
url이 텍스트로 출력됨. alert의 인자로 들어오는 값이 문자여야 하기 때문에 값도 문자화 시켜서 보여줌.

location.protocol : http: , https:
location.port     : 컴퓨터에서 돌아가는 서버, 소프트웨어를 식별하는 그런..? 것..?
location.pathname : 웹 서버가 가지고 있는 정보 중에 구체적인 부분
location.host
location.search
location.hash     : 위치지정. 북마크

http://opentutorials.org:80/module/1?id=1#hash

http://
protocol

opentutorials.org
host

:80/
port

module/1
pathname

?id=1
search

#hash
hash

해당 url로 이동
location.href = "http://daum.net";
location = "http://daum.net";

새로고침
location.href=location.href;
location.reload();


w3c(html,css), ecma(javascript) 표준화 기구에서 정의한 스펙에 따라 브라우저를 만들게 되는데
정의되지 않은 부분은 업체마다 다르게 구현하기 때문에 브라우저마다 결과가 다르게 보여질 수 있다. 
이러한 이슈를 크로스브라우징 이슈라고 한다.

최초의 브라우저 - 팀 버너스 리
상용화된 성공적인 브라우저 - 네스케이프
네스케이프가 경쟁력 향상을 위해 도입한 것 - 자바스크립트 (자바스크립트는 네스케이프에서 만든 것)

마이크로소프트는 브라우저가 중요한 플랫폼이 될 것을 알고,
인터넷 익스플로러를 만들어서 자사의 운영체제에 넣어서 배포.

네스케이프 vs 인터넷 익스플로러
스크립트, 태그를 협의 없이 독점적으로 추가하여 기능 경쟁을 함.

ex) addEventListener , attachEvent

그래서 생겨난 개념이 웹 표준. 표준화 기구가 스펙을 정의하고 그에 따라 브라우저를 개발하는 벤더들이 표준을 준수할 수 있도록 한 것.


Navigator 객체
실행되고있는 브라우저의 제품명과 버전을 알수있다.

consloe.dir(navigator)

navigator.appName    // Netscape = ff, chrome
navigator.appVersion // 브라우저 정보
userAgent            // 브라우저가 서버에게 필요한 정보를 요청할 때 서버에게 브라우저에 대한 정보를 전달한다. appVersion이랑 같지만 다름..
platform             // 브라우저가 동작하고 있는 운영체제에 대한 정보

navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니기 때문에 
기능 테스트를 사용하는 것이 더 선호되는 방법이다.



window.open 메소드
새 창을 생성한다.

window.open("test.html"); 
새 창에 로드할 문서 url, 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.

window.open("test.html","_self");

window.open("test.html", "ot");
두번 째 인자는 새 창의 이름. open을 재실행 했을 때 동일한 이름의 창이 있다면 그 곳으로 문서가 로드된다.

window.open("test.html", "_blank", "widtn=200, height=200, resizable=yes");
세 번째 인자는 새 창의 모양과 관련된 속성들.


새 창에 접근
<input type="button" value="open" onclick="winopen();">
<input type="text" onkeypress="winmessage(this.value);">
<input type="button" value="close" onclick="winclose();">

function winopen(){
win = window.open("test.html", "ot", "width=300px, height=500px";)
}
function winmessage(msg){
win.docuemnt.getElementById("message").innerText=msg;
}
function winclose(){
win.close();
}