2015년 9월 29일 화요일

[JavaScript] 브라우져 객체 모델(BOM, Browser Object Model) - history 객체

history 객체는 현재 웹페이지를 표시하는 브라우져 윈도우의 방문기록을 저장하는 객체이다. history 객체는 window 객체의 프로퍼티 중 하나이기 때문에 다른 윈도우의 방문기록에는 접근하지 못한다. 또한 보안상의 이유로 history 객체에 저장된 url들에도 접근이 불가능하기 때문에, 오직 웹페이지 이동만이 가능하다.

history 객체는 length 프로퍼티를 가지는데 length 값은 history 스택의 길이이다. 즉 history.length 가 0이라면 이는 history 스택이 empty 상태란것을 말하게 된다.

history 객체의 go 메소드를 이용해 방문기록으로 이동이 가능하다.
go 메소드는 1개의 argument 를 받는다. 해당 argument 는 숫자 또는 문자열이 될 수 있으며 argument 의 타입에 따라 다른 결과를 낳는다.


//숫자를 argument로 전달할시
history.go(-1)//바로 전 페이지로 이동
history.go(-2)//전전 페이지로 이동
history.go(0)//현재페이지를 리로딩
history.go(1)//앞페이지로 이동

//문자(url)을 argument로 전달할시
history.go("google.com")//가장 최근의 google.com 페이지로 이동한다
history.go("naver.com")//가장 최근의 naver.com 페이지로 이동한다

go 메소드처럼 forward, back 메소드를 이용, 앞페이지, 전페이지로 이동이 가능하다.


history.back();
history.forward();

[JavaScript] 브라우져 객체 모델(BOM, Browser Object Model) - location 객체

브라우져 객체 모델을 구성하는 객체중 하나인 location 객체, location 객체는 현재 윈도우에 로드된 웹문서에 대한 정보를 제공한다. location 객체는 window.location, 또는 document.location으로 접근 가능하다. location 객체는 JavaScript 에서 유일무희하게 현재 웹페이지의 url에 접근 가능한 객체이다. location 객체의 property 들은 아래와 같다.

Property설명예) "http://muckycode.blogspot.kr/2015/05/javascript-prototype.html#tableContent" 기준
hashurl hash, # 문자가 없을경우에는 """#tableContent"
hostserver 이름과 port"muckycode.blogspot.kr"
hostnameserver 이름"muckycode.blogspot.kr"
href전체 url"http://muckycode.blogspot.kr/2015/05/javascript-prototype.html#tableContent"
pathname현재 url의 directory "/2015/05/javascript-prototype.html"
portport 넘버""
protocol프로토콜http:
search현재 url의 query string, ?로 시작하는 문자열""

location 객체를 이용해 url 조작하기

브라우져의 현재 위치는 다양한 방법에 의해 조작될 수 있다. 가장 쉬운 방법으로는 location객체의 assign 메소드를 이용하는것이다.


location.assign("http://google.com");
위 코드는 현재 페이지를 http://google.com 으로 리디렉트 한다.

또 다른 방법으로는 location.href 프로퍼티나 location 객체에 새로운 String 값을 어싸인 하는 법이 있다.


window.location = "http://google.com";
location.href = "http://google.com";

웹페이지 새로고침

location.reload 메소드를 이용하면 웹페이지를 리로딩 할 수 있다. reload 메소드는 별다른 argument를 필요로 하지 않으나, 경우에 따라 true 값을 전달하지 않을 시에 브라우져 캐시를 이용하여 페이지를 다시 로딩할 수도 있다.
만약 true 값을 argument로 전달한다면, 해당 웹페이지는 서버를 통해 reload 된다.


location.reload();//브라우져에 따라 cache를 통해 reload 할 수도 있다.
location.reload(true);//sever에 다시 연결새 reload 한다. 

2015년 9월 24일 목요일

[JavaScript] 브라우져 객체 모델(BOM, Browser Object Model) - window 객체

Browser Object Model, BOM은 ECMAScript, DOM(Document Object Model)와 함께 JavaScript를 구성하는 3가지 요소 중 하나이다. BOM은 웹페이지의 컨텐츠에 관계없이 브
라우져에 대한 정보를 제공해주는 객체이다.

window 객체와 global 스코프


이런 BOM의 중심에는 window 객체가 함께하고 있는데, 이 window 객체는 브라우져 윈도우의 정보를 저장함과 동시에 ECMAScript의 Global 객체의 역할을 수행하기도 한다. 즉, 우리가 작성하는 스크립트 내에서 선언되는 모든 객체, 변수, 함수들이 global 객체window 객체 내의 프로퍼티(property)로써 선언된다는 뜻이며, window 객체가 global scope의 역할을 수행한다는 말이다.

아래 코드를 보자.


var t = "test";

function printT(){
console.log(t); //test
}

printT();

console.log(window.t); //test
window.printT(); //test

console.log(delete window.t); //false
console.log(delete window.printT); //false 

window.g = "window";

console.log(g); //window
console.log(delete window.g); //true
console.log(window.g); //undefine
console.log(g); //error

선언된 변수 twindow 객체를 이용해 접근이 가능하기도, window 객체를 통하지 않고도 접근이 가능하다. 선언된 함수 printT 또한 window 객체를 이용해 접근이 가능하다.
이렇게 글로벌 스코프에서 선언된 함수들과 변수들이 window 객체의 프로퍼티가 되지만, 실제 window 객체의 프로퍼티로써 선언된 변수와 함수들과는 작은 차이를 가진다.

바로 delete 키워드를 이용해 객체의 프로퍼티를 삭제할 때의 경우인데, 이 경우에는 window 객체를 통해서 선언되지 않은 함수들과 변수들은 삭제가 불가능하다.
위의 코드에서 window 객체를 통하지 않고 선언된 변수 t 와 함수 printT의 경우에는 delete 키워드를 이용해 프로퍼티 삭제를 시도할 경우에 false 값을 반환하게 된다. 하지만 window 객체를 통해 선언된 프로퍼티 g 같은 경우에는 delete 키워드를 이용해 삭제를 시도할시 true 값을 반환하며 성공적으로 프로퍼티를 삭제하게 된다. 이는 var 키워드를 이용해 선언된 변수들의 configurable attribute(Property Attribute 중 하나, 참조글)가 false로 세팅되기 때문이다.


window 객체와 BOM(Browser Object Model)


HTML frame

웹페이지에 존재한는 모든 frame 태그들은 window.frames 프로퍼티를 통해 접근이 가능하다. window.frame 프로퍼티는 콜랙션 프로퍼티로 frame 태그들은 html 코드에 적힌 순서대로 frame 프로퍼티에 저장된다(window.frame[index], index는 0부터 시작한다).

window 객체와는 별개로 최상위 frame(Browser Window)를 참조하는 top 객체 또한 존재하는데, top 객체의 frames 프로퍼티를 이용해 하위 프레임에 접근하는 것도 가능하다.


<html>
    <head>
        <title></title>
    </head>
    <frame name="fr1" src="frame01.html"></frame>
    <frame name="fr2" src="frame02.html"></frame>
    <frame name="fr3" src="frame03.html"></frame>
    <body>
        <script type="text/javascript">
        var fr1 = window.frames[0];
        var fr2 = window.frames[1];
        var fr3 = top.frames[3];
        </script>
    </body>
</html>

Position

window 객체는 screenX 프로퍼티와 screenY 프로퍼티를 통해 현재 웹브라우저 윈도우의 위치를 제공한다.


window.screenX
window.screenY
//각각의 프로퍼티는 브라우져 최상단 좌측 픽셀의 위치를 알려준다.

Size

window 객체의 outherWidth, outherHeight, innerWidth, innerHeight 프로퍼티를 통해 브라우져 윈도우의 너비,높이와, 웹페이지가 표시되는 top frame의 너비,높이에 접근할 수 있다.


window.outerHeight
//1040
window.outerWidth
//1920
window.innerHeight
//955
window.innerWidth
//1153

Pop Up Window, 팝업 윈도우

window.open 메소드는 사용자가 새로운 팝업 윈도우를 열거나 특정 윈도우를 원하는 URL로 향할수있게 만들어준다.


window.open("http://google.com", "_blank");
//위의 코드는 아래의 html 코드와 같은 기능을 한다. 
<a href = "http://google.com" target = "_blank">

window.open 메소드는 3개의 String 아규먼트를 받는다. 3개의 argument 들은 모두 optional argument 이니, 이 argument들 없이도 window.open 메소드를 호출하는게 가능하다.
  1. 새로 오픈할 윈도우의 url
  2. 타겟 윈도우 프레임의 name 속성
    • _blank : 새로운 윈도우
    • _self : 현재 코드가 실행된 프레임
    • _top : 현재 코드가 실행된 프레임의 최상위 프레임
    • _parent : 현재 코드가 실행된 프레임 의 parent 프레임
    • 원하는 윈도우 프레임 이름 : 만약 해당 name 아트리뷰트를 가진 프레임이 존재하지 않을 경우에 _blank와 같이 새로운 윈도우가 실행되며, 실행된 윈도우 프레임의 name attribute 가 전달된 윈도우 프레임 이름으로 설정된다.
  3. full screen, height, width 등 각종 설정 옵션들을 모아 놓은 specification string, 설정 가능한 스펙들은 아래와 같다. 

설정 이름
height숫자새 윈도우의 height 값, 최소값은 100
width숫자새 윈도우의 width 값, 최소값은 100
location"yes" 또는 "no"location 바가 표시되어야 하는지, 기본값은 no
menubar"yes" 또는 "no"menu 바가 표시되어야 하는지, 기본값은 no
resizable"yes" 또는 "no"사이즈 조절이 가능한지, 기본값은 no
scrollbars"yes" 또는 "no"스크롤링이 가능한지, 기본값은 no
status"yes" 또는 "no"status 바가 표시되어야 하는지, 기본값은 no
toolbar"yes" 또는 "no"툴바가 표시되어야하는지, 기본값은 no
left숫자윈도우의 (0,0) 픽셀의 위치 x값, 최소값은 0
top숫자윈도우의 (0,0) 픽셀의 위치 y값, 최소값은 0

height 500, width 500 사이즈 윈도우를 화면의 (50,50)위치에서 열기위해서는

"height=500,width=500,top=50,left=50" 문자열을 3번째 argument로 전달해주면 된다.

System Dialog

alert, confirm, prompt 메소드를 이용해 알림창, 확인창, 입력창을 띄울 수 있다.

window.alert()

alert() 메소드는 알림창을 띄울때 사용된다.


window.alert("알림창입니다.")

alert 창

위의 코드는 이와 같은 창을 띄우게 된다.

window.confirm()

confirm 메소드는 확인창을 띄울때 사용한다.


var s = window.confirm("confirm 창입니다.")

confirm 창

confirm 메소드는 위와같이 확인창을 띄우며 user가 ok버튼을 누를시 true 값을 cancel 버튼을 누를시 false값을 리턴한다.

window.prompt()

prompt 메소드는 user로부터 문자열을 받아올 때 사용한다.


var s = window.prompt("prompt 창입니다.")

prompt 창

prompt 메소드를 호출할시 위와같은 창을 띄우게 되며, 사용자가 ok 버튼을 누를시에 입력된 문자열을, cancel 버튼을 누를시에 null 값을 리턴한다.