第13章 ブラウザオブジェクト
この章ではブラウザオブジェクトについて説明します。
homepage
# **ブラウザオブジェクト** *** ## **1.ブラウザオブジェクトとは** ブラウザ上の情報は、すべてオブジェクトとして扱うことができます。これらはオブジェクトを総称してブラウザオブジェクトと呼びます。 ### **おもなブラウザオブジェクト一覧** <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>オブジェクト名</td> <td>説明</td> </tr> <tr> <td>window</td> <td>すべてのブラウザオブジェクトの親となるオブジェクト</td> </tr> <tr> <td>location</td> <td>WebページのURLを情報として持つオブジェクト</td> </tr> <tr> <td>history</td> <td>Webページの閲覧履歴を情報として持つオブジェクト</td> </tr> <tr> <td>document</td> <td>Webページ上の部品の情報を持つオブジェクト</td> </tr> </table> <!--[graph13-1.png]--> <a href="https://i.loli.net/2019/08/27/ho4nJexqO6W2BdQ.png" target="_blank"> <img src="https://i.loli.net/2019/08/27/ho4nJexqO6W2BdQ.png" width="60%"> </a> <br> + **ポイント** + ブラウザオブジェクトのメソッドやプロパティを呼出すとき、オブジェクト名の頭文字は小文字にする。 + 先頭のwindow.は省略できる。 <br><br> ## **2.window オブジェクト** <br> ### **2-1.ブラウザのウインドウ全体の情報** windowオブジェクトはすべてブラウザオブジェクトの親となるオブジェクトで、ブラウザのウインドウ全体の情報を保持します。 #### **window オブジェクトの主なメソッド一覧** <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>メソッド</td> <td>概要</td> </tr> <tr> <td>alert</td> <td>警告用ダイアログボックスを表示する</td> </tr> <tr> <td>confirm</td> <td>確認用のダイアログボックスを表示する</td> </tr> <tr> <td>open</td> <td>サブウインドを開く</td> </tr> <tr> <td>close</td> <td>サブウインドを閉じる</td> </tr> </table> <br> ### **2-2.confirmメソッド** ダイアログボックスを表示します。confirmメソッドはOKとキャンセルの二つのボタンを表示し、どちらのボタンが クリックされたかを示す論理値を戻り値として返します。 ``` confirm("表示するメッセージ"); ``` 戻り値 true...OK/false...キャンセル #### **例** [sample13-1.html] ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> <script> function check() { var result = confirm("確認用のメッセージを表示します"); if (result) { document.write("OK"); } else { document.write("キャンセル"); } } </script> </head> <body> <button onclick="check();">クリック</button> </body> </html> ``` #### **実行結果** <!--[graph13-2.png]--> <a href="https://i.loli.net/2019/08/27/jGdMtBbK3loZwPT.png" target="_blank"> <img src="https://i.loli.net/2019/08/27/jGdMtBbK3loZwPT.png" width="40%"> </a> + 「OK」をクリック **実行結果** OK <br> + 「キャンセル」をクリック **実行結果** キャンセル <br><br> ### **2-3.openメソッドとcloseメソッド** openメソッドでブラウザの新規ウインドまたは新規タブを開き、closeメソッドで閉じます。 ウインドとタブのどちらが表示されるかはブラウザの設定に依存します。 <br> #### **openメソッド** ``` open("URL","ウインド名","オプション1=値, オプション2=値・・・");//第2引数以降は省略可能 ``` openメソッドメソッドのオプション一覧 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>オプション</td> <td>値</td> <td>説明</td> </tr> <tr> <td>width</td> <td>ピクセル値</td> <td>ウインドの幅</td> </tr> <tr> <td>height</td> <td>ピクセル値</td> <td>ウインドの高さ</td> </tr> <tr> <td>top</td> <td>ピクセル値</td> <td>デスクトップ画面の上端からウインドまでの距離</td> </tr> <tr> <td>left</td> <td>ピクセル値</td> <td>デスクトップ画面の左端からウインドまでの距離</td> </tr> </table> <br> #### **closeメソッド** ``` window.close(); ``` windowオブジェクトのcloseメソッドであることを明示するために、必ず「window.」は省略せずに記述します。 #### **例** [sample13-2A.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サブウィンドウ</title> </head> <body> <button onclick="open('sample13-2B.html',null,'width=300,height=150');">開く</button> </body> </html> ``` <br> [sample13-2B.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サブウィンドウ</title> </head> <body> <button onclick="window.close();">閉じる</button> </body> </html> ``` #### **実行結果** <!--[graph13-3.png]--> <a href="https://i.loli.net/2019/08/27/9Sbd82hPnqxtJIU.png" target="_blank"> <img src="https://i.loli.net/2019/08/27/9Sbd82hPnqxtJIU.png" width="40%"> </a> <!--[graph13-4.png]--> <a href="https://i.loli.net/2019/08/27/CBvgsWDHGAtcRpe.png" target="_blank"> <img src="https://i.loli.net/2019/08/27/CBvgsWDHGAtcRpe.png" width="40%"> </a> *** >**練習** >>**問題**[ex13-1.html] 「開く」ボタンを押下時、ポップアップウインドウでITJOBサイトを開いてください。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サブウィンドウ</title> </head> <body> <button onclick="open('http://itjob.co.jp/',null,'width=300,height=150');">開く</button> </body> </html>
content
戻る
