Javascript window 객체

웹 브라우저와 관련된 객체의 집합이다.
대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다.

 

window 객체

     -브라우저의 내장 객체 중 최상위 객체
     -모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함
     -모든 전역 변수는 window 객체의 속성이 됨
     -모든 전역 함수는 window 객체의 메서드가 됨
     -window를 생략한 형태로 window 객체와 메서드를 사용 가능
     -적용하기 위한 공식적인 표준은 없으나, 주요 브라우저들에서 지원되고 있음

 

브라우저 객체 모델 ( BOM ) - Browser Object Model

 

screen 객체 ( 반응형 웹 주로 사용)

    -운영체제의 화면에 대한 정보를 가지고 있는 객체
    - window 객체의 한 부분으로써 window.screen.속성을 통해 접근
    - window는 생략 가능
    - 방문자의 화면을 고려해 적당한 사이즈의 팝업창을 제공 가능

 

location 객체

     -현재 URL에 대한 정보를 가지고 있는 객체
     -window 객체의 한 부분으로써 window.location 속성을 통해 접근
     -window는 생략 가능

 

*<a href = "링크"> == location='링크';

*페이지 새로고침 =>  location.reload();   또는  location.href=location.href;

 

Navigator 객체

    -웹 문서를 실행하고 있는 브라우저에 대한 정보를 가지고 있는 객체
    -window 객체의 한 부분으로써 window.navigator 속성을 통해 접근
    -window는 생략 가능

      var infoBrowser;
      infoBrowser = '브라우저의 이름 : ' + navigator.appName + '\n\n';
      infoBrowser += '브라우저의 코드명 : ' + navigator.appCodeName + '\n\n';
      infoBrowser += '브라우저의 버전 : ' + navigator.appVersion + '\n\n';
      infoBrowser += '운영체제 환경 : ' + navigator.platform;
      infoBrowser += '자바 사용 여부 : ' + navigator.javaEnabled();

      alert(infoBrowser);

 

History 객체

       -브라우저 방문 기록(history)에 대한 정보를 가지고 있는 객체
       - window 객체의 한 부분으로써 window.history 속성을 통해 접근
       - window는 생략 가능
       - 사용자들의 사생활을 보호하기 위해, JavaScript를 통해 접근하는데 제한이 있음

     .back()  => 히스토리 리스트 안에서 이전 URL 로드(브라우저의 “뒤로 가기” 버튼 클릭)
     .forward() => 히스트로 리스트 안에서 다음 URL 로드(브라우저의 “앞으로 가기” 버튼 클릭)
     .go()  =>  히스토리 리스트의 특정 URL로 이동

 

문서 객체 모델 ( DOM ) - Document Object Model

   - 문서에 접근하기 위한 표준으로, W3C (World Wide Web Consortium)에서 정의
   - Core DOM, XML DOM, HTML DOM으로 나뉘어짐
   - 웹 문서를 로드할 때, 브라우저는 구성 요소들을 객체화하여 트리 구조의 DOM을 생성
   - HTML DOM은 HTML 구성요소들을 획득, 변경, 추가, 삭제하기 위한 표준
   - HTML 문서를 브라우저에서 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄

document 객체

   - HTML 문서와 관련있는 객체
   - window 객체의 핚 부분으로써 window.document 속성을 통해 접근
   - window는 생략 가능
   - 좁은 의미의 문서 객체 모델 : document 객체와 관련된 객체의 집합
   - 로드된 문서에 단 하나의 document 객체 존재
   - HTML 문서 객체 접근의 시발점

   *노드(계층) => 요소노드(태그의 계층) 와 텍스트노드(텍스트)로 구분됨.

   * 

   *window.onload = function(){ // DOM 조작 } =>  body 의 계산을 완료 후 가장 나중에 계산 **

     => 사용자지정 함수를 만들어 html 에서 호출할 때 window.onload로 감싸져 있고 script 가 head 태그 안에 작성되

           어 있으면 script를 넘어가고 body 먼저 계산하기 때문에 script 태그를 body 마지막에 작성하는걸 권장하고 있다.

   

   *문서 객체의 innerHTML 속성 => 해당요소에 자식으로 문자화된 태그를 실제 html로 처리해주는 속성

    window.onload = function(){ // head 태그에 위치한다면 body 계산 후 마지막에 계산하게 해주는 객체
        var output ='';
            output += '<ul>';
            output += '<li>JavaScript</li>';
            output += '<li>jQuery</li>';
            output += '<li>Ajax</li>';
            output += '</ul>';
            document.body.innerHTML = output;
            document.body.innerHTML += '<h2>document 객체</h2>';
    };

 

Javascript 를 이용해 태그 html 태그 생성하기

       window.onload = function(){
        var output ='';
        var gtitle=['html','css','javascript'];
        var gsrc=['./gallery/images/img1.jpg','./gallery/images/img2.jpg','./gallery/images/img3.jpg'];
        var gdt=['제목글1','제목글2','제목글3'];
        var gdd=['내용글1','내용글2','내용글3'];

        output += '<ul>'
            for(var i=0; i<gtitle.length; i++){
                output+= '<li>';
                    output+='<h3>'+ gtitle[i] +'</h3>';
                    output+='<img src="'+ gsrc[i] +'" alt="">';
                    output+='<dt>'+ gdt[i] +'</dt>';
                    output+='<dd>'+ gdd[i] +'</dd>';    
                output+= '</li>';
            }
        output += '</ul>' 
            document.body.innerHTML += output;
       };

예제

사원들의 월급여 정산 차트 만들기

window.onload = function(){

        var output ='';

        var name =['홍길동1','홍길동2','홍길동3','홍길동4','홍길동5'];
        var grade =['과장','대리','사원','사장','부장'];
        var num =['01','02','03','04','05'];
        var department =['인사부1','인사부2','인사부3','인사부4','인사부5'];
        var pay1=[200,300,400,500,600];
        var pay2=[20,30,40,50,60];
        var pay3=[30,40,50,60,70];
        var tdarr =['사번','성명','직급','부서','본봉','수당','보너스','월급여'];
        var total=0;

        output += '<h3>&lt;사원의 월급여 정산&gt;</h3>';
        output += '<span>-단위 (만원)</span>';
        output += '<table>';
            output +='<thead;>';
                output +='<tr>';
                    for(i=0; i<tdarr.length; i++){
                        output += '<th scope="col">'+ tdarr[i] + '</th>';    
                    };
                output +='</tr>';
            output +='</thead;>';
            output +='<tbody>';
                for(i=0; i<5; i++){
                    
                        output +='<tr>';
                                output +='<td>'+ num[i] +'</td>';
                                output +='<td>'+ name[i] +'</td>';
                                output +='<td>'+ grade[i] +'</td>';
                                output +='<td>'+ department[i] +'</td>';
                                output +='<td>'+ pay1[i] +'</td>';
                                output +='<td>'+ pay2[i] +'</td>';
                                output +='<td>'+ pay3[i] +'</td>';
                                output +='<td>'+ (pay1[i]+pay2[i]+pay3[i]) +'</td>';
                        output +='</tr>';
                        total += pay1[i]+pay2[i]+pay3[i]
                            }
            output += '</tbody>';
        output += '</table>';
                            
        output += '<span> 총 급여:'+ total +' 만원 입니다</span>';

        document.body.innerHTML += output;
    };

객체배열 사용 변형

window.onload = function(){
    var output= '';
    var total = 0;
    
    var job =[
        {num:01, name:'홍길동', grade:'대리', department:'인사부', pay1:200, pay2:50, pay3:30},
        {num:02, name:'양진성', grade:'계약직', department:'인사부', pay1:30, pay2:3, pay3:4},
        {num:03, name:'박진선', grade:'사원', department:'총무부', pay1:150, pay2:20, pay3:30},
        {num:04, name:'손현호', grade:'대리', department:'총무부', pay1:200, pay2:30, pay3:40},
        {num:05, name:'김진아', grade:'신입', department:'인사부', pay1:150, pay2:20, pay3:30}
    ];
    
output +='<h3><사원의 월급여 정산></h3>';
output +='<span>-단위(만원)</span>';
output +='<table>';
output +='<thead>';
output +='<tr>';
output +='<th scope="col">사번</th>';
output +='<th scope="col">성명</th>';
output +='<th scope="col">직급</th>';
output +='<th scope="col">부서</th>';
output +='<th scope="col">본봉</th>';
output +='<th scope="col">수당</th>';
output +='<th scope="col">보너스</th>';
output +='<th scope="col">월급여</th>';
output +='</tr>';
output +='</thead>';
output +='<tbody>';
    for(var i=0; i<job.length; i++){
        output+='<tr>';
            output+='<td>'+job[i].num+'</td>';
            output+='<td>'+job[i].name+'</td>';
            output+='<td>'+job[i].grade+'</td>';
            output+='<td>'+job[i].department+'</td>';
            output+='<td>'+job[i].pay1+'</td>';
            output+='<td>'+job[i].pay2+'</td>';
            output+='<td>'+job[i].pay3+'</td>';

            total+=job[i].pay1+job[i].pay2+job[i].pay3;
            output+='<td>'+(job[i].pay1+job[i].pay2+job[i].pay3)+'</td>';
        output+="</tr>"
    };
output +="</tbody>";
output +="</table>";
output +="<span>총급여 :" +total+" 만원</span>";

document.body.innerHTML += output;
};

요소에 접근하기

  -하나의 요소 노드를 리턴하는 메서드
     getElementById('id')   -> 가장 많이 사용
     querySelector('css선택자') -> 일치하는 요소들중 첫번째 요소만 리턴한다.  ex)querySelector('li.hot')

 -하나 혹은 그 이상의 요소를 리턴하는 메서드 - 리턴된 객체가 배열로 처리된다 ( 객체가 하나일때도 배열 호출문을 사용한다 )
     getElementsByClassName('클래스명')  -> ie9부터 지원
     getElementsByName('name값')
     getElementsTagName('태그명') 
     querySelectorAll('css선택자') => ie8부터 지원

 

ex)

1) document.getElementById('아이디명');

<script>
    window.onload = function(){
        var header1 = document.getElementById('header_1');
        var header2 = document.getElementById('header_2');
		
        header1.innerHTML = '첫번째 타이틀 입니다';
        header2.innerHTML = '두번째 타이틀 입니다';
        
        // 약식 = document.getElementById('header_1').innerHTML = '첫번째 타이틀 입니다'
        // 약식에서 getElementById() 메소드 뒤에 . 문법을 사용할 수 있는 이유는 메소드 내에서
        // 리턴값으로 h1 을 할당받아 document.getElementById 까지가 객체가 된다
        
        header1.innerHTML += '<h2>첫번째 타이틀 입니다</h2>'; // 태그는 문자화 해서 사용
        header1.innerHTML += '<p>단락요소2입니다</p>';
        header1.innerHTML += '<img src="./gallery/images/img1.jpg">';
        header2.innerHTML = '두번째 타이틀 입니다';
        
    };
</script>
    //script
<body>
<h1 id="header_1">Heading</h1>
<h2 id="header_2">Heading</h2>
</body>
	//html

2) 객체배열 사용 nav 만들기

window.onload = function(){
    var header1 = document.getElementById('header_1');
    var header2 = document.getElementById('header_2');

    var output = '';

    var menu = [
        {title : 'html', link : './html.html'},
        {title : 'css', link : './css.html'},
        {title : 'javascript', link : './javascript.html'},
        {title : 'php', link : './php.html'},
        {title : 'sql', link : './sql.html'}
    ];

    output += '<ul>';

    for(var i=0; i<menu.length ; i++){
        output += '<li><a href="'+ menu[i].link+'">'+ menu[i].title +'</a></li>';
    }

    output += '</ul>';

    header1.innerHTML += output;
    header2.innerHTML += '두번째 계층의 타이틀 입니다';
    //js
<div id="header_1">
<h3>Quick 메뉴</h3>
</div>
<div id="header_2">Heading 2</div>
	//html

3) document.querySelector('css선택자');

window.onload = function(){
    var head1 = document.querySelector('#head1');
    var head2 = document.querySelector('.head2');
    var head3 = document.querySelector('p');
    head1.innerHTML = 'GOOD DAY';
    head2.innerHTML = 'HAPPY DAY';
    head3.innerHTML = '단락수정';
}
//js
<h3 id="head1">좋은날</h3>
<h3 class="head2">행복한날</h3> //querySelector 로 선택됨
<h3 class="head2">행복한날1</h3> //querySelector 로 선택안됨
<h3 class="head2">행복한날2</h3> //querySelector 로 선택안됨
<h3 class="head2">행복한날3</h3> //querySelector 로 선택안됨
<p>1</p> //querySelector 로 선택됨
<p>2</p> //querySelector 로 선택안됨
<p>3</p> //querySelector 로 선택안됨
//html

4) document.getElementsByTagName();

window.onload = function(){
    var headers = document.getElementsByTagName('h2');
    headers[0].innerHTML = '두번째 타이틀 1입니다';
    headers[1].innerHTML = '두번째 타이틀 2입니다';
    headers[2].innerHTML = '두번째 타이틀 3입니다';
}
//js
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
//html

5) document.querySelectorAll('css 선택자');

window.onload = function(){

    var headers = document.querySelectorAll('.head');
    headers[0].innerHTML = '두번째 타이틀 1입니다';
    headers[1].innerHTML = '두번째 타이틀 2입니다';
    headers[2].innerHTML = '두번째 타이틀 3입니다';

    var head2 = document.querySelectorAll('#head2');
    head2[0].innerHTML = '두번째 타이틀 4 입니다';

    var p1 = document.querySelectorAll('p');
    p1[0].innerHTML = '단락 1 입니다';
    p1[1].innerHTML = '단락 2 입니다';
    p1[2].innerHTML = '단락 3 입니다';

    var p2 = document.querySelectorAll('p:nth-of-type(2)');
    p2[0].innerHTML = '단락 2 수정되었습니다';

    var span = document.querySelectorAll('div span');
    span[0].innerHTML = '인라인 수정되었습니다'; 
    }
    //js
    <h2 class="head">Heading 2</h2>
    <h2 class="head">Heading 2</h2>
    <h2 class="head">Heading 2</h2>

    <h2 id="head2">Heading 1</h2>

    <p>단락</p>
    <p>단락</p>
    <p>단락</p>

    <span>인라인요소입니다</span>
    <div><span>인라인요소입니다</span></div>
    //html

* javacsript 로 css 조절하기

• var 객체 = document.getElementById('id값');
• 객체.style.css처리속성 = '값';  => 속성 카멜 표기
• 객체.style['css속성'] = '값';  => 속성 '-' 표기
• 객체.className = '클래스명'; => class 명을 생성하거나 수정할수 있는 속성

ex) 1

window.onload = function(){
    var header = document.getElementById("header");

    header.style.border = '10px solid Black'; // css 와 다르게 camel 표기법 사용
    header.style.color = 'orange';
    header.style.fontFamily = 'Helvetica';
    header.style.backgroundColor = '#0f0';
    header.style.fontSize = '100px';
};

<h1 id="header">Header01</h1>

ex) 2

window.onload = function(){
    var header = document.getElementById("header");

    header.style['border'] = '2px solid black';
    header.style['color'] = '#fff';
    header.style['font-family'] = 'Helvetica';
    header.style['background-color'] = '#00f';
    header.style['font-size'] = '50px';
};

요소의 속성에 접근하기

ex) 1

window.onload = function(){
    var img1 = document.getElementById("img1");
    var cnt = 1;
    var link ='';
    var des ='';

    cnt=i;
    if(cnt==1){
        link = './gallery/images/img1.jpg';
        dse = '이미지1 설명';
    }else if(cnt==2){
        link = './gallery/images/img2.jpg';
        dse = '이미지2 설명';
    }else if(cnt==3){
        link = './gallery/images/img3.jpg';
        dse = '이미지3 설명';
    }else if(cnt==4){
        link = './gallery/images/img4.jpg';
        dse = '이미지4 설명';
    }

    img1.src = link; // img1['src'] = link; 와 같다 ( [] 사용시 - html 문법 사용 )
    img1.alt = des; // img1['alt'] = des; 
    };
//js    
<h1>이미지 교체</h1>
<img id="img1" src="./gallery/images/img1.jpg" alt="">
//html

문서 객체 제거  removeChild(child)

직계부모객체.removeChild(자식객체);

•  HTML 요소가 객체화된 문서 객체 제거
•  부모 노드로 이동하여 부모 노드에서 자식 노드 삭제

window.onload = function(){
    var box = document.getElementById('box');
    var willRemove = document.getElementById('will_remove');
    box.removeChild(willRemove);
};

<h1>자바스크립트&제이쿼리</h1>
<div id="box">
<p id="will_remove">자바스크립트로 동적인 웹 사이트를 구현해 보자.</p>

시계만들기

window.onload = function(){
    var clock = document.getElementById('clock');

    setInterval(function(){
        var now = new Date();
        clock.innerHTML = now.toString();
    },1000);
};

<h2>시계</h2>
<div id="clock"></div>

시계 만들기2

window.onload = function(){
    var clock = document.getElementById('clock');

    var h,m,s;

    clock.style.fontSize = '50px';
    clock.style.color = 'red';

    function clock1(){
        var now = new Date();

        h = now.getHours();
        m = now.getMinutes();
        s = now.getSeconds();

        clock.innerHTML = h +':'+ m +':'+ s;
    }

    setInterval(clock1,1000); // clock1 함수 호출시 함수 호출문 ( 함수명() ) 이 아닌 함수 명만 작성
};

시계 만들기3

window.onload = function(){
    var clock = document.getElementById('clock');

    var h,m,s;

    clock.style.fontSize = '50px';
    clock.style.color = 'red';

    function clock1(){
        var now = new Date();
        var AP = ''; 

        h = now.getHours();
        m = now.getMinutes();
        s = now.getSeconds();

        if(h<12){
            AP='AM';                    
        }else{
            AP='PM';
        }

        if(h<10){
            h +='0';
        }
        if(m<10){
            m +='0';
        }
        if(s<10){
            s +='0';
        }

        clock.innerHTML = AP+' ' + h +':'+ m +':'+ s;
    }

    setInterval(clock1,1000);
};

랜덤광고

        window.onload = function(){
            var img1 = document.getElementById('img1');
            var link ='';
            var des ='';
            var cnt = 1;
            
            function change(){
                // cnt =Math.floor(Math.random()*4)+1;
            
                cnt++;
                if(cnt==4){
                    cnt=1;
                };
                
                if(cnt==1){
                    des ='이미지설명1';        
                }else if(cnt==2){
                    des ='이미지설명2';
                } else if(cnt==3){
                    des ='이미지설명3';
                }else if(cnt==4){
                    des ='이미지설명4';
                }
                img1.src = './gallery/images/img'+ cnt +'.jpg';
                img1.alt = des;
            }

            setInterval(change,1000);

        };
        
    <h3>5초마다 자동으로 바뀌는 이미지 광고 4컷</h3>
    <div>
        <img id="img1" src="./gallery/images/img1.jpg" alt="이미지설명1">
    </div>