Chap 6. BOM

84471 ワード

公費課 JavaScript テキストリンク

BOM

Browser Object Modelブラウザオブジェクト

と略記

ブラウザ内の情報、URL情報、モニタ画面情報等を取得または制御するためのオブジェクト

ブラウザオブジェクトの最上位オブジェクト:windowオブジェクト

windowオブジェクトのサブオブジェクト:document、location、screen、history、navigator、階層的アクセス可能

document分類DOM(Documentオブジェクトモデル)

ウィンドウオブジェクト

JavaScriptで作成されたすべてのオブジェクトがwindowオブジェクトの子

にあります.

windowオブジェクトはブラウザウィンドウを設定できるオブジェクト

document、location、screen、history、navigatorなど多くのオブジェクト、およびその他の有用な関数

ウィンドウオブジェクトの各種関数

関数の意味open(url、name、specs、replace)1つの関数のsettimeout(関数、時間)一定時間後に関数/id値を実行cleartimeout(id)設定Timeout(関数、時間(ms)実行終了setInterval(関数、時間)一定時間毎に繰り返し実行関数/id値をcleartInterval(id)に戻す

オープン関数

高さと幅を入力して、別のウィンドウでページを開きます.
(高さと幅を入力せずに自動的に既定の寸法で開く)

👨‍🎓 作成方法
var ret = open(url,name,specs,replace);

-変数:

新しく作成したウィンドウオブジェクトを返します.

ウィンドウの作成に失敗した場合nullを返します.

新しいウィンドウを制御できます

1.url:「アドレス」(開くURLアドレス)

2.name：「開いているパス」

blank:新規タブ(デフォルト)

parent:親フレーム

self:現在ページ

XXXXXX:XXXXは任意の名前で新しいウィンドウを開きます(名前付き)

3.仕様：「形状」

height=値(px):指定高さ

width=値(px):幅を指定

menubar=yes|no|1|0:メニューバー

を使用するかどうかを指定

status=yes|no|1|0:ステータスバーを使用するかどうかを指定
※形態は数値により様々な形態が存在するが、ブラウザの各タイプは高さと幅以外はサポートされていない

4.replace:「履歴リスト」

true:現在の履歴を置換

false:履歴に新規エントリを作成

オブジェクトを開く

自分の親ウィンドウを開くことを示す

EX)親ウィンドウ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>open 함수</title>

    <style>
        #print {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>

</head>

<body>
    <button id="btn">open</button><button id="btn2">close</button>
    <br><br><br><br>

    <h2>부모창</h2>
    <div id="print"></div>

    <input type="text" id="inputData"><button id="forward">전송</button>

    <script>
        var newWindow;

        // open 함수 적용 함수
        document.getElementById("btn").onclick = function() {

            newWindow = window.open("211110-1(child).html", "_blank", "height=500px, width=500px");
        };

        // close 함수 적용 함수
        document.getElementById("btn2").onclick = function() {
            newWindow.close();
        };

        // 부모, 자식 창 간에 데이터 전송 함수
        document.getElementById("forward").onclick = function() {

            var inputData = document.getElementById("inputData").value;

            // 자식 객체의 출력 장소 정보 가져 오기
            var childElement = newWindow.document.getElementById("print");


            childElement.innerHTML += "<span style='color:red;'>부모 : " + inputData + "</span><br>";


            document.getElementById("print").innerHTML += "<span style='color:red;'>부모 : " + inputData + "</span><br>";
        };
    </script>
</body>

</html>

EX)サブウィンドウ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #print {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>

</head>

<body>
    <h2>자식창</h2>
    <div id="print"></div>

    <input type="text" id="inputData"><button id="forward">전송</button>

    <script>
        document.getElementById("forward").onclick = function() {

            var inputData = document.getElementById("inputData").value;

            // opener 객체 활용 부모 요소에 접근
            window.opener.document.getElementById("print").innerHTML += "<span style='color:blue;'>자식 : " + inputData + "</span><br>";


            document.getElementById("print").innerHTML += "<span style='color:blue;'>자식 : " + inputData + "</span><br>";

        };
    </script>

</body>

</html>

EX) setTimeout & clearTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout & clearTimeout</title>
</head>

<body>
    <button id="btn">동작</button>
    <button id="btn2">취소</button>

    <script>
        var id;

        document.getElementById("btn").onclick = function() {

            id = setTimeout(function() {
                alert("동작");
            }, 1000);

        };

        document.getElementById("btn2").onclick = function() {
            window.clearTimeout(id);
        };
    </script>

</body></html>

EX)setInterval&clearInterval&Dataオブジェクト->時間値の表示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>setInterval & clearInterval</title>
    <style>
        #print {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <h1>현재 시간 : <span id="time"></span></h1>

    <div id="print"></div>
    <button id="btn">동작</button>
    <button id="btn2">취소</button>

    <script>
        var id;
        var count = 0;

        document.getElementById("btn").onclick = function() {

            id = setInterval(function() {

                var date = new Date();
                var hour = ('0' + date.getHours()).slice(-2); // 현재 시간값 가져옴
                var minutes = ('0' + date.getMinutes()).slice(-2); // 현재 분 값 가져옴
                var second = ('0' + date.getSeconds()).slice(-2); // 현재 초 값 가져옴

                var element = document.getElementById("time");
                element.innerHTML = hour + ":" + minutes + ":" + second;

                if (hour == '12' && minutes == '17') {
                    document.getElementById("print").style.backgroundColor = 'yellow';
                } else {
                    document.getElementById("print").style.backgroundColor = 'white';
                }


            }, 1000);


        };

        document.getElementById("btn2").onclick = function() {
            clearInterval(id);
        };
    </script>

</body></html>


<br/><br/>

#### EX) window.onload 속성

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <style>
        #print {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <h1>현재 시간 : <span id="time"></span></h1>



    <script>
        window.onload = function() {

            setInterval(function() {

                var date = new Date();
                var hour = ('0' + date.getHours()).slice(-2); // 현재 시간값 가져옴
                var minutes = ('0' + date.getMinutes()).slice(-2); // 현재 분 값 가져옴
                var second = ('0' + date.getSeconds()).slice(-2); // 현재 초 값 가져옴

                var element = document.getElementById("time");
                element.innerHTML = hour + ":" + minutes + ":" + second;
            }, 1000);
        };
    </script>

</body>

</html>

screenオブジェクト

画面に関する情報を提供するオブジェクト

関数の意味heightスクリーン高さwidthスクリーン幅効果width実用化の面での利用可能幅効果height実用化の面での利用可能高さcordepth利用可能色数画素当たりのビット数

EX)screenオブジェクト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        #print {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>

    <p id="print"></p>
    <button onclick="load();">스크린정보 가져오기</button>

    <script>
        function load() {
            var print = document.getElementById("print");
            var str;
            str = "화면 높이값 : " + screen.height + "<br>";
            str += "화면 너비값 : " + screen.width + "<br>";
            str += "실사용 높이값 : " + screen.availHeight + "<br>";
            str += "실사용 너비값 : " + screen.availWidth + "<br>";
            str += "사용가능한 색상수 : " + screen.colorDepth + "<br>";
            str += "한 픽셀당 비트수 : " + screen.pixelDepth + "<br>";
            
            print.innerHTML = str;
            
        }
    </script>
</body>
</html>

位置オブジェクト

ブラウザのアドレスバー(URL)に関するオブジェクト

プロトコルタイプ、ホスト名、ドキュメントの場所などの情報を含む

locationオブジェクトのプロパティ

属性のハッシュされていないアンカー名(#~)-タグに移動(<a href="#..">と同じ)-<a name="이름">とタグ付けされ、位置.hash="名前"移動可能なホスト名とポート番号ホスト名ホスト名hrefドキュメントURLアドレスソースホスト名、プロトコル、ポート番号pathnameディレクトリパスポート番号プロトコルタイプ検索要求パラメータ(ex.naver.com/index.html?name=「洪吉童」&age=「20」)

EX) location.hash

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
        #print {
            width: 500px;
            height: 2000px;
            border: 1px solid black;
        }
    </style>
    <script>
        function move(hash) {
            location.hash = hash;
        }
    </script>

    <a name="top" /><button onclick="move('bottom')">아래로</button>
    <p id="print"></p>
    <a name="bottom" /><button onclick="move('top')">위로</button>
</body>

</html>

locationオブジェクトのメソッド

メソッド意味再ロード()現在のドキュメントを再ロード(「アドレス」)新しいページをロード(後退可能)-履歴保持置換(「アドレス」)現在のページを新しいページに置換(後退不可)-移動前にページのhistoryを削除

EX) location.reload(), location.assign(), location.replace()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function() {
            var id = document.getElementById("print");
            var date = new Date();
            id.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" +
                date.getSeconds();
        }

        function btn1() {
            location.reload();
        }

        function btn2() {
            var site = document.getElementById("site").value;

            // history 유지
            location.assign(site);
        }

        function btn3() {
            var site = document.getElementById("site").value;

            // history 삭제
            location.replace(site);
        }
    </script>
    <p id="print"></p>
    <button onclick="btn1();">reload 버튼</button><br>
    <input type="text" id="site" />
    <button onclick="btn2();">assign버튼</button>
    <button onclick="btn3();">replace버튼</button>
</body>

</html>

ナビゲータオブジェクト

ブラウザに関する情報と位置情報の値を有するオブジェクト

区別するためのappCodeNameブラウザコード名-ほとんどの最新ブラウザは互換性を理由に「Mozilla」として保存されています-通常のブラウザは、以前のMozillaから派生し、Mozilla Name appブラウザ名-FireFoxまたはChrome、Safari、IEの場合、Netscapeに出力されるappVersionブラウザバージョンプラットフォームで使用されているオペレーティングシステムのユーザーエージェントブラウザの完全情報(appCodeName+appVersion)クッキーが有効になっているかどうかクッキークッキーが有効になっているかどうかの地理的緯度と経度が出力言語ブラウザ言語製品ブラウザエンジン名->productGeckoとして表示されます.(ほとんどのブラウザではMozillaプロジェクトで開発されたレイアウトエンジン->Geckoを使用しています)

EX) geolocation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
        var latitude; //위도를 저장하는 변수
        var longitude; //경도를 저장하는 변수
        window.onload = function(){
        navigator.geolocation.getCurrentPosition(showYourLocation);
        };
        function showYourLocation(position){
            latitude = position.coords.latitude;
            longitude = position.coords.longitude;
        }
        
             
        function btn1(){
            console.log("위도 : " + latitude);
            console.log("경도 : " + longitude);
            window.open("https://www.google.co.kr/maps/@"
                        +latitude+
                        ","+longitude+",17z");
        }
    </script>

    <button onclick="btn1();">지도찾기</button><br>
</body>
</html>

履歴オブジェクト

historyオブジェクトブラウザのセッション履歴

にアクセスできます.

historyオブジェクトの方法

メソッドの意味backブラウザのアクセス履歴から後のページに移動できます.前のページのブラウザのアクセス履歴から前のページに移動できます.go入力数でページを移動できます.負数の後、負数の前

EX) back, forward, go

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <button onclick="back();">back 버튼</button>
    <button onclick="forward();">forward 버튼</button>
    <button onclick="go();">go 버튼</button>
    
    <script>
        function back(){
            history.back();
        }
        function forward(){
            history.forward();
        }
        function go(){
            history.go(2);
        }
    </script>
    
</body></html>

Reference

この問題について(Chap 6. BOM), 我々は、より多くの情報をここで見つけました https://velog.io/@woody_/Chap-6.-BOM

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ソフトウェア開発者クイズ

10.行列の加算