본문
160113P(수)
웹브라우저 자바스크립트
HTML에서 JavaScript 로드
1. inline
직접 자바스크립트를 기술
태그가 연관된 스크립트가 분명하게 드러나지만, 정보와 제어가 섞여있다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
2. script
html태그와 js코드를 분리 가능하다.
유지보수 측면과 웹표준에 적합한 바람직한 코딩방법
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
3. 외부파일로 분리
보다 엄격하게 정보와 제어를 분리할 수 있다.
하나의 js를 여러 웹페이지에서 로드함으로써 js의 재활용성을 높일 수 있다.
캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="./script2.js"></script>
</body>
</html>
scipt2.js
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
scirpt 태그는 body뿐만 아니라 head에도 올 수있다.
하지만 권장되지 않는 방법이다.
scipt2.js
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수.
이벤트라고 한다.
Object Model
자바스크립트로 제어 가능하도록 웹브라우저의 구성요소들이 각각 객체화되어 있는 것
ex) http의 이미지를 제어하기 위해서는js가 쓸 수 있도록 객체화해야 한다.
val imgs = document.getElementsByTagName('img');
imgs[0]
window
전역객체
DOM(Document Object Model)
웹페이지의 내용을 제어
window.document에 할당된 Document 객체가 이러한 작업 담당
Document 객체의 프로퍼티는 문서내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.
특정 엘리먼트 객체를 획득할 수 있는 메소드도 제공
BOM(Browser Object Model)
웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화 시킨것
window.navigator 등
JavaScript Core
JavaScript 언어 자체에 정의되어 있는 객체들
BOM(Browser Object Model)
Window 객체
모든 객체가 소속된 객체이고 전역객체이면서 창이나 프레임을 의미
전역객체
Window객체는 window를 통해서 얻을 수 있다.
생략이 가능하다.
<!DOCTYPE html>
<html>
<script>
alert('Hello world');
window.alert('Hello world');
</script>
<body>
</body>
</html>
전역변수 접근
전역변수는 사실 window 객체의 프로퍼티였다!
<!DOCTYPE html>
<html>
<script>
var a = 1;
alert(a);
alert(window.a);
</script>
<body>
</body>
</html>
모든 객체는 사실 window의 자식!
객체를 만든다는것은 window 객체의 프로퍼티를 만드는 것과 같다.
<!DOCTYPE html>
<html>
<script>
var a = {id:1};
alert(a.id);
alert(window.a.id);
</script>
<body>
</body>
</html>
사용자와 커뮤니케이션 하기
alert
경고창
사용자에게 정보를 제공하거나 디버깅 용도
경고창이 실행되는 동안은 다음 코드가 실행되지 않는다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="alert" onclick="alert('hello world');" />
</body>
</html>
confirm
확인창
확인과 취소가 선택 가능하고 이에 따라 return 값이 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
입력창
사용자로부터 어떤값을 입력받아서 그 문자열을 return 받는다.
<!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>
Location 객체
현재 브라우저의 URL을 알려주는 프로퍼티
윈도우의 문서URL을 변경할 수 있고 위치와 관련해서 다양한 정보를 얻을 수 있다.
console.log(location.toString(), location.href);
URL을 의미에 따라 나누어 리턴받을수 있다.
console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)
hash는 북마크 정보
URL 변경
Location은 URL 변경도 가능하다.
location.href = 'http://egoing.net';
egoing.net으로 페이지 이동
location.reload();
현재 웹페이지 리로드
Navigator 객체
브라우저의 정보를 제공한다.
호환성 문제를 해결하기 위해 사용
Cross browsing
많은 종류의 브라우저들의 동작방법은 W3C, ECMA에서 정의한내용에 따르지만 각자 다른 스펙을 가지고 있다.
따라서 브라우저의 특성에 맞는 코딩을 해야한다.
웹브라우저의 모든 프로퍼티 열람
console.dir(navigator);
Navigator.appName
웹 브라우저 이름
Navigator.appVersion
브라우저의 버전
Navigator.userAgent
브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용
Navigator.platform
브라우저가 동작하고 있는 운영체제에 대한 정보
기능테스트
Navigator로 모든 브라우저에 대응하는것은 쉬운일이 아니다. 따라서 기능 테스트를 사용하는것이 더 선호된다.
창 제어
새 창 생성
window.open
<!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(){
// _self 자기 자신에서 새창이 열림
window.open('demo2.html', '_self');
}
function open3(){
// _black 매번 새로운 창이 열림
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>
상호작용
window.open()으로 새로 생기는 창의 객체가 리턴된다.
win.document.getElementById('message').innerText=msg;
새로 생긴 창의 객체를 사용해서 message의 내용을 바꾼다.
<!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>
'낡은 서랍장 > JavaScript' 카테고리의 다른 글
| 160115P(금) (0) | 2016.01.15 |
|---|---|
| 160114P(목) (0) | 2016.01.14 |
| 160106P(수) (0) | 2016.01.06 |
| 160104P(월) (0) | 2016.01.05 |
| 160101P(금) (0) | 2016.01.01 |
댓글