javascript: 브라우저 객체

브라우저객체

: 브라우저에 내장되어 있는 객체

 

 

window 객체

: 객체는 일반적으로 대문자로 시작하지만, window객체는 소문자로 시작.

 

메서드

open("주소","윈도우창 제목","옵션");

옵션 : width,height,top,left,menubar=yes/no,status=yes/no,toolbar=yes/no,resizable=yes/no

단위 px은 생략

window.open("30-for-실습.html","popup","width=400,height=500,top=100,left=100");

 

* window.close();

<a href="#" onclick="window.close();">닫기</a>

 

alert() , prompt() , confirm()

        window.alert("설문이 시작됩니다");
        var userAge=window.prompt("당신의 나이를 입력하세요","");
        var result=window.confirm(userAge+"세, 입력한 나이가 정확합니까?"); // 확인: true, 취소: false
        
        console.log(result);
        
        if(result){ 
            // result=true 일때
            if(userAge>=20){
                document.write("설문 참여가 가능합니다");
            } else {
                document.write("설문 참여가 불가능합니다");
            }
        }
        else{
            // result=false일때
            document.write("처음부터 시작해주세요");
        }

 

setInterval

:일정간격으로 실행문을 반복해서 실행

 var 변수 = setInterval("함수명()",시간)

 var 변수 = setInterval(function(){스크립트명령어},시간)

 var 변수 = setInteval("스크립트 명령어",시간);

시간 :ms  1초=1000ms

        var i = 1;
        var timer = setInterval("console.log(i++)", 1000);

* clearInterval(변수): seInterval에 의해 실행되는것을 중지

    <button onclick="timer=setInterval('console.log(i++)',1000);">play</button>
    <button onclick="clearInterval(timer);">stop</button>
    <!-- 변수로 입력한 것만 취소 가능-->

 

setTimeout

: 일정한 시간후 실행문을 실행시키는것

setTimeout("함수명()",시간)

setTimeout("console.log('hello')",3000);

 

 

---

screen 객체

:사용자의 모니터에 대한 속성 정보 제공

        //스크린 해상도
        document.write("너비: "+screen.width,"<br>");
        document.write("높이: "+screen.height,"<br>");
        
        //사용 가능한 범위
        document.write("가용너비: "+screen.availWidth,"<br>");
        document.write("가용높이: "+screen.availHeight,"<br>");
        
        //컬러수 bit
        document.write("color: "+screen.colorDepth,"<br>");
        
        //한 픽셀 당 비트수
        document.write("비트수: "+screen.pixelDepth,"<br>");

 

 

location 객체

:브라우저의 주소창에 대한 속성 출력/변경

        document.write("브라우저의 주소줄: "+location.href,"<br>");
        document.write("호스트 이름: "+location.hostname,"<br>");
        document.write("호스트: "+location.host,"<br>");
        document.write("프로토콜: "+location.protocol,"<br>");

<button onclick="location.reload();">새로고침</button>

 

navigator 객체

: 방문자의 브라우저 정보와 운영체제 정보

        //브라우저 코드명
        document.write(navigator.appCodeName,"<br>");
        
        //브라우저명
        document.write(navigator.appName,"<br>");
        
        //브라우저 버전
        document.write(navigator.appVersion,"<br>");
        
        //방문자의 사용언어
        document.write(navigator.language,"<br>");
        
        //브라우저의 엔진
        document.write(navigator.product,"<br>");
        
        //브라우저 운영체제
        document.write(navigator.platform,"<br>");
        
        //전체 종합
        document.write(navigator.userAgent);

 

실습

        //브라우저의 정보 얻어오기
        var total = navigator.userAgent.toLowerCase();
        console.log(total);

        //Windows, Android, iPhone, Macintosh
        //total 안에 windws/macintosh 있는지 찾기 → 접속 브라우저 설정
        console.log(total.indexOf("windows")); //13
        console.log(total.indexOf("iphone")); //-1

        if (total.indexOf("windows") >= 0 || total.indexOf("macintosh") >= 0) { //pc 접속
            location.href = "http://gia.dothome.co.kr/pc-index.html"
        } else { //mobile
            location.href = "http://gia.dothome.co.kr/mobile-index.html"
        }

 

history 객체

 

 

 

 

* 속성은 괄호 불필요, 동작은 괄호 필수