본문 바로가기

WEB/JavaScript

Js - 브라우저 객체 2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 BOM</title>
</head>
<body>
    <h1>자바스크립트 BOM</h1>
    <h2>location</h2>
    <p>현재 브라우저에 표시된 문서의 url을 변경하거나 url에 대한 정보를 얻을 수 있음</p>

     <div>
        <button type="button" id="btn1">구글로 이동</button>
        <button type="button" id="btn2">네이버로 이동</button>
        <button type="button" id="btn3">오늘의 추천사이트</button>
    </div>

    <script>
        let url = location.href;  //문서 url
        let host = location.hostname;  // url의 호스트  (도메인, 서버)
        let path = location.pathname;  // url의 path
        let qrystr = url.split('?')[1];  // url의 querystring

        let luckys = ['naver.com', 'google.co.kr', 'daum.net','kakao.co.kr',
                    'ppomppu.co.kr', 'danawa.com','auction.co.kr'];

        const luckyDay = () => {
            let idx = Math.floor(Math.random() * luckys.length);
            location.href = 'http://' + luckys[idx];
        };


        document.write('url : ', url, '<br>');
        document.write('host : ', host, '<br>');
        document.write('path : ', path, '<br>');
        document.write('querystring : ', qrystr, '<br>');

        const btn1 =document.getElementById('btn1');
        const btn2 =document.getElementById('btn2');
        const btn3 =document.getElementById('btn3');

        btn1.addEventListener('click', ()=>{
           location.href = 'http://google.co.kr'
        } );
        btn2.addEventListener('click', ()=>{
           location.href = 'http://naver.com'
        } );
        btn3.addEventListener('click', luckyDay );
    </script>




    <h2>navigator</h2>
    <p>클라이언트의 브라우저 및 운영체제 정보를 알아냄</p>
    <script>
        let appname = navigator.appName;
        let codename = navigator.appCodeName;
        let appver = navigator.appVersion;
        let ua = navigator.userAgent;
        let pf = navigator.platform;

        document.write('브라우저 이름 : ', appname, '<br>' );
        document.write('브라우저 별칭 : ', codename, '<br>' );
        document.write('브라우저 버전 : ', appver, '<br>' );
        document.write('브라우저 정보 : ', ua, '<br>' );
        document.write('운영체제 : ', pf, '<br>' );
    </script>






</body>
</html>

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

Js - dropdown menu  (0) 2022.06.15
Js - modal  (0) 2022.06.15
Js - 브라우저 객체  (0) 2022.06.14
Js - 이벤트 핸들러  (0) 2022.06.13
Js - dom 문서 객체 모델  (0) 2022.06.13