[두번째] JavaScript - Web Browser / BOM

Browser Object Model of Javascript

<3> BOM

1. 사용자와 커뮤니케이션

1) alert

경고창을 띄운다.

alert가 실행되고 있으면 다음 로직이 실행되지 않는다.

이건 confirm 이나 prompt도 마찬가지이다.

Debugging 용도로 많이 사용됬지만 요즘엔 개발자 도구의 발전으로 주로 console.log를 사용하여 Debugging한다.

2) confirm

예/아니오 를 묻는 대화상자를 띄운다.

예 일 경우에는 true를 return.

아니오 일 경우엔 false를 return.

 if(confirm('ok?')){

                  alert('ok');

                } else {

                  alert('cancel');

  }

이렇게 사용한다.

로직의 흐름을 분기시키는 역할.

3) prompt

대화상자 안에 텍스트 상자를 생성.

입력받을 수 있다.

if(prompt('id?') === 'egoing'){

                    alert('welcome');

                } else {

                    alert('fail');

                }

정말 간단한 로그인 format을 만들 수 있다.

같을 때 true 다를 때 false return

4) location

현재 윈도우의 URL을 알아낼 때 사용한다.

호스트 : 서비스를 식별하는 주소

포트 : 컴퓨터에서 돌아가는 소프트웨어를 식별하는 것.

http://opentutorials.org:80/WB_JS/basehtml.html

http: -> protocol

opentutorials.org -> host

:80  -> port

/WB_JS/basehtml.html  -> pathname

(전달한 값) ?id=1 -> search

(특정한 위치,북마크) #bookmark ->hash

URL을 변경한다.

다른 사이트로 이동시킨다.

location.href = '_주소_'

location만 입력해도 되지만 href를 함께 사용하는 것이 더 명시적

사이트를 reload 해주는 기능도 존재.

location.reload

= ( location.href = location.href )

5)  Navigator

브라우저의 정보(제품명)를 제공하는 객체

호환성 문제를 해결하기 위해서 사용한다.

- 크로스 브라우징 이슈?

IE, FF, Chrome, Safari, Opera 각각의 브라우저들

W3C (국제기구) ECMA기구 표준화 기구에서 정의한 스펙에 따라서 브라우저를 만든다.

브라우저 마다 다른 결과물을 출력할 가능성이 존재하는 것을 의미

(ch 넷스케이프가 자바스크립트를 만듬 / 마이크로소프트에서 IE를 번들로 출시 -> 브라우저 전쟁)

제각각의 메소드를 이용 -> 웹표준이라는 것이 만들어짐

console.dir(navigator.appName);

-> 웹브라우저의 이름을 출력

console.dir(navigator.appVersion);

-> 현재 브라우저의 정보를 출력(크롬, 버전)

- 기능 테스트

메소드가 브라우저 API에서 지원을 하는지 안하는지 파악

브라우저에 내장되있는 메소드를 쓰는게 속도도 빠르고 정석이다.

없는 기능이라면 추가해서 사용한다.

!object.keys : keys라는 메스탁 object라는 객체에 속하는가? 속하지 않는다면 이라는 뜻

생활코딩 이고잉님 감사합니다^^

-..-