생활코딩 - 웹브라우저 Javascript (자바스크립트)
위 강의를 듣고 정리한 글입니다.
0. Object Model
웹브라우저의 구성요소들은 하나하나가 객체화되어 있다.
자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.
이 객체들은 서로 계층적인 관계로 구조화되어 있다.
BOM과 DOM은 이 구조를 구성하고 있는 가장 큰틀의 분류이다.
윈도우의 프로퍼티:
Document Object Model - <body>,<img>등의 테그 제어
Browser Object Model - 웹브라우저의 url, 페이지로드, 경고창 등 당담
JavaScript core - arrary, function
1. BOM
BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단.
BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다.
1.1 전역객체 Window
Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다.
Window 객체는 식별자 window를 통해서 얻을 수 있다.(window는 생략가능하다.)
Window 객체의 메소드인 alert을 호출하는 방법
<!DOCTYPE html>
<html>
<script>
alert('Hello world');
window.alert('Hello world');
</script>
<body>
</body>
</html>전역변수 a에 접근하는 방법
<!DOCTYPE html>
<html>
<script>
var a = 1;
alert(a);
alert(window.a);
</script>
<body>
</body>
</html>객체를 만든다는 것은 window 객체의 프로퍼티를 만드는 것과 같다.
<!DOCTYPE html>
<html>
<script>
var a = {id:1};
alert(a.id);
alert(window.a.id);
</script>
<body>
</body>
</html>전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드이다.
모든 객체는 사실 window에 소속되어있다.
이러한 특성을 ECMAScript에서는 Global 객체라고 부른다.
ECMAScript의 Global 객체는 호스트 환경에 따라서 이름이 다르고 하는 역할이 조금씩 다르다.
웹브라우저 자바스크립트에서 Window 객체는 ECMAScript의 전역객체이면서 동시에 웹브라우저의 창이나 프레임을 제어하는 역할을 한다.
1.2 사용자와 커뮤니케이션 하기
HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공함
alert
경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 사용한다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="alert" onclick="alert('hello world');" />
</body>
</html>confirm
확인을 누르면 true, 취소를 누르면 false를 리턴한다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="confirm" onclick="func_confirm()" />
<script>
function func_confirm(){
if(confirm('ok?')){
alert('ok');
} else {
alert('cancel');
}
}
</script>
</body>
</html>prompt
<!DOCTYPE html>
<html>
<body>
<input type="button" value="prompt" onclick="func_prompt()" />
<script>
function func_prompt(){
if(prompt('id?') === 'egoing'){
alert('welcome');
} else {
alert('fail');
}
}
</script>
</body>
</html>1.3 Location 객체
Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다.
이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.
현재 윈도우의 URL 알아내기
현재 윈도우의 문서가 위치하는 URL을 알아내는 방법
console.log(location.toString(), location.href);URL Parsing
location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공한다.
console.log(location.protocol, location.host, location.port, location.pathn아래 코드는 현재 문서를 http://egoing.net으로 이동한다.
location.href = 'http://egoing.net';location = 'http://egoing.net';아래는 현재 문서를 리로드하는 간편한 방법을 제공한다.
location.reload();1.4 Navigator 객체
1.4.1 크로스 브라우징이란?
크로스 브라우징 : 브라우저마다 다르게 작동하는 것
웹표준 : 표준화 기구가 스펙을 정의함
1.4.2 Navigator 객체
브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용한다.
아래 명령을 통해서 이 객체의 모든 프로퍼티를 확인할 수 있다.
console.dir(navigator);appName
웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시한다.
appVersion
브라우저의 버전을 의미한다.
"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"userAgent
브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용이다. appVersion과 비슷하다.
"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"platform
브라우저가 동작하고 있는 운영체제에 대한 정보다.
"Win32"기능 테스트
Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만, 기능 테스트를 사용하는 것이 더 선호되는 방법이다.
Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다.
이 메소드는 ECMAScript5에 추가되었기 때문에 오래된 자바스크립트와는 호환되지 않는다.
아래의 코드를 통해서 호환성을 맞출 수 있다.
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) { //Object가 keys를 가지고 있지 않을 경우 실행 (브라우저에 내장되어있지않다면 기능을 추가하는 로직)
Object.keys = (function () {
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
throw new TypeError('Object.keys called on non-object');
}
var result = [], prop, i;
for (prop in obj) {
if (hasOwnProperty.call(obj, prop)) {
result.push(prop);
}
}
if (hasDontEnumBug) {
for (i = 0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) {
result.push(dontEnums[i]);
}
}
}
return result;
};
}());
}1.5 창 제어
1.5.1 window.open()
window.open 메소드는 새 창을 생성한다.
현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다.
첫번째 인자 : 로드 할 문서 URL
두번째 인자 : 새 창의 이름
_self: 스크립트가 실행되는 창_blank: 새 창 열기
두번째 인자 : 창에 이름을 붙임
세번째 인자 : 새 창의 모양 속성 설정
<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
<li>
첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
<input type="button" onclick="open1()" value="window.open('demo2.html');" />
</li>
<li>
두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
<input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
</li>
<li>
_blank는 새 창을 의미한다. <br />
<input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
</li>
<li>
창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
<input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
</li>
<li>
세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
<input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
</li>
</ul>
<script>
function open1(){
window.open('demo2.html');
}
function open2(){
window.open('demo2.html', '_self');
}
function open3(){
window.open('demo2.html', '_blank');
}
function open4(){
window.open('demo2.html', 'ot');
}
function open5(){
window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>1.5.2 상호작용
새 창에 접근
아래 예제는 보안상의 이유로 실제 서버에서만 동작하고, 같은 도메인의 창에 대해서만 작동한다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />
<script>
function winopen(){
win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
}
function winmessage(msg){
win.document.getElementById('message').innerText=msg;
}
function winclose(){
win.close();
}
</script>
</body>
</html>
팝업 차단
사용자의 인터렉션이 없이 창을 열려고 하면 팝업이 차단된다.
<!DOCTYPE html>
<html>
<body>
<script>
window.open('demo2.html');
</script>
</body>
</html>