Object Model(자바스크립트 개요), BOM, DOM

2016. 11. 28. 12:25ㆍProgramming/JavaScript



<Object Model>


*document: <body>, <img> 등, 태그 이름 검색 기능 제공  getElementsByTagName()

*BOM(Browser Object Model): alert나 confirm, prompt, window.open 같은 것

*XMLHttpRequest(AJAX 통신의 주체)


1. BOM(브라우저 객체)


1) 새 창 열기

window.open()


2) 창 크기 조절

window.open(top,left,width,height 값 조절)


3) 새 창에 메시지 띄우기

test.document.write('메시지');


<window 객체 활용1>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3>window open(새 창 열기)</h3>
    <h4>새 창 열기: <button onclick="window.open()">window.open()</button></h4>
    <h4>새 창 열기(크기 조절): <button onclick=
"window.open('index.html','_blank','top=200,left=300,width=400,height=200')"
>window.open()</button></h4>
    <hr>
    <h4>새 창 변수에 담기: <button onclick=
"test=window.open('','testWindow','width=200,height=100')"
>window.open()</button></h4>
    <h4>새 창에 메시지 보내기: <button onclick=
"test.document.write('자식 창입니다.')"
>sendMsg</button></h4>
    <!-- var test는 자식 window 객체 -->
    <h4>자식창에서 부모창에게 메시지 보낼 준비:
    <script>var msg = 
    '<a href="#" onclick=
"window.opener.document.getElementById(\'openerTest\').innerHTML=\'자식이 보낸 msg\'"
>부모에게 msg 보내기</a>'
    </script>
        <button onclick="test.document.write(msg)">부모:답장 보내</button>
        <b id="openerTest"></b>
    </h4>
cs


<window 객체 활용2>

1
2
3
4
5
<h4>새창을 이동시키자: <button onclick="test.moveBy(250,250)">move</button></h4>
<h4>새창에 focus시키자: <button onclick="test.focus()">move</button></h4>
<h4>새창에 resize시키자: <button onclick="test.resizeTo(400,400)">move</button></h4>
<h4>새창을 조금씩 resize시키자: <button onclick="test.resizeBy(-100,-100)">move</button></h4>
<h4>새창 끄기: <button onclick="test.close()">close</button></h4>
cs


<window 객체 활용3: 페이지 이동>

1
2
3
4
5
6
7
8
<h3>window history</h3>
<h4>뒤로가기: <button onclick="history.back();">back</button></h4>
<h4>앞으로가기: <button onclick="history.forward();">forward</button></h4>
<hr>
<h3>window location</h3>
<h4>window.location: <script>document.write(location)</script></h4>
<h4>window.location.href: <script>document.write(location.href)</script></h4>
<h4>window.location.hostname: <script>document.write(location.hostname)</script></h4>
cs


<window 객체 활용4>

1
2
3
4
5
6
7
8
9
10
11
12
13
<h4>프롬프트 window로 id 받아 띄우기
        <script>
            var promptTest = function(){
                var checkId = window.prompt('id를 입력하세요','walker');
                if(checkId != null){
                    document.getElementById('promptMsg').innerHTML = checkId;
                }
            }
        </script>
        <button onclick="promptTest()">prompt</button>
        <b id="promptMsg"></b>
    </h4>
    <hr>
cs


<window 객체 활용5: 카운터>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h3>Timing Events</h3>
    <h4>window.setTimeout(function(){function},milliseconds)</h4>
    <h4>2초 후 alert창 띄우기 :
    <button onclick="test=setTimeout(function(){alert('경고')},2000)">setTimeout</button></h4>
    <h4>setTimeout 중지 시키기:
    <button onclick="clearTimeout(test);">중지</button></h4>
    <hr>
    <h4>window.setInterval(function(){function},milliseconds): 해당 시간마다 메소드 실행</h4>
    <h4> 1초마다 카운트하기 :
    <button onclick="test=setInterval(function(){count()},1000)">count</button>
    <b id="count"></b>
 
    //count 함수 구현
    <script>
    var i = 0;
    var count = function(){
        ++i; //호출될 때마다 1씩 증가
        document.getElementById('count').innerHTML = i;
    }
    </script>
cs


<window 객체 활용5: 카운터 종료, 시간 출력>

1
2
3
4
5
6
7
8
9
10
var clock = function(){
        var date = new Date();
        var time = date.toLocaleTimeString();
        document.getElementById('clock').innerHTML = time;
    }
    </script>
    </h4>
    <h4>count 종료: <button onclick="clearInterval(test2)">종료</button></h4>
    <h4>시간 출력: <button onclick="test2=setInterval(function(){clock()},1000)">time</button>
    <b id="clock"></b>
cs



2. DOM(문서 객체)


<선택자 이용법>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
    <li>HTML</li>
    <li class="css">CSS</li>
    <li id="js">JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    //클래스명으로: document.getElementsByClassName('css')
    //ID로: document.getElementById('js')
    //li 태그 중 첫번째 것만: document.querySelector('li')
    //li 태그 전부: document.querySelectorAll('li');
 
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
 
cs

 



'Programming > JavaScript' 카테고리의 다른 글

상속(prototype)  (0) 2016.11.27
AJAX 정리  (0) 2016.11.23
JSON 정리  (0) 2016.11.23
함수(Function)  (0) 2016.11.23
문자열, 배열 처리  (0) 2016.11.22

관련글

티스토리툴바