外部物件：BOM和DOM

BOM：瀏覽器物件模型：
            提供了訪問和操作瀏覽器各元件的方式。
            將瀏覽器比喻成一個物件-window(網頁初始化時會自動建立)，可以通過該物件靈活的操作瀏覽器。
DOM：文件物件模型：
            將HTML文件比喻成一個物件，-document，可以靈活的操作網頁上的內容，該物件屬於window的屬性之一，使用時不用             宣告。提供了訪問和操作HTML標記的方式。圖片標記, 表格標記, 表單標記。  

1. window物件(BOM模型)：在js中表示瀏覽器視窗，也是JS中最大的物件, 其它物件都是它的子物件  
   Window下的屬性和方法在使用的過程中，可以省略window，而直接使用屬性和方法。window物件是最頂層物件, 可以省略。
         location: 位址列
         histroy: 瀏覽記錄
         screen: 顯示器螢幕 獲取螢幕的相關資訊
         navigator: 瀏覽器軟體 判斷客戶用的什麼瀏覽器軟體
         document: 網頁

2. window方法：程式碼如下

<script>
    // 1. alert() 彈出一個警告對話方塊
    var a = window.alert('這是一個警告對話方塊!')
    // 沒有返回值：undefined
    console.log(a)    

    // 2. prompt() 彈出一個輸入對話方塊
    var b = window.prompt('這是一個輸入對話方塊!')
    // 接受輸入框輸入的引數，點選取消返回值為：null
    console.log(b)

    // 3. confirm() 彈出一個確認對話方塊
    var c = window.confirm("確認刪除嗎?")
    // 點選"確定"按鈕，返回true。其它所有的操作一律返回false。
    console.log(c)

    // 4. close() 關閉視窗
    window.close();

    // 5. print() 列印視窗
    window.print();

    // 6. open()  開啟一個新的瀏覽器視窗
    var newWinOptions = "width = " + 400 + ", height = " + 200 + ", left = " + (screen.availWidth - 400) / 2 + ", top = " + (screen.availHeight - 200) / 2 + ", menubar = no, toolbar = no, location = no"
    var winObj = window.open("https://www.baidu.com/", "你好",newWinOptions, '_self');
    // 往新視窗輸入字串
    winObj.document.write("Hello, world!");
    // 6秒自動關閉
    winObj.setTimeout("window.close()", 6000);
</script>

<div  class="c2" onclick="window.open('pairing.html');">開啟</div>
<img class="c1" src="/imgs/sj_gz.png" onclick="window.open('season_rules.html');">

<script>
    // 補充
    open(url, name, options)
       url: 顯示的檔案路徑, 可以為空
       name: 新視窗的名字, 給<a>標記使用
       options: 新視窗的規格
          width: 新視窗的寬度
          height: 新視窗的高度
          left: 新視窗距離左邊的距離
          top: 新視窗距離右邊的距離
          menubar: 是否顯示選單欄
          toolbar: 是否顯示工具欄
          status: 是否顯示狀態列
    onload事件: 當網頁載入完成, 當body標記中的所有內容都載入完成, 才觸發該事件 
    // 1. url
    var newWinUrl = "";
 
    // 2. name
    var newWinName = "win2";

    // 3. options
    // 新視窗的寬度
    var newWinWidht = 400;
 
    // 新視窗的高度
    var newWinHeight = 600;
 
    // 顯示螢幕的寬度
    var screenWidth = screen.availWidth;
    // document.write(screenWidth);
 
    // 顯示螢幕的高度
    var screenHeight = screen.availHeight;
    // document.write(screenHeight);
 
    // 新視窗距離螢幕左邊的寬度
    var x = (screenWidth - newWinWidht) / 2;
	 
    // 新視窗距離螢幕上邊的寬度
    var y = (screenHeight - newWinHeight) / 2;
	 
    var newWinOptions = "width = " + newWinWidht + ", height = " + newWinHeight + ", left = " + x + ", top = " + y + ", menubar = no, toolbar = no, location = no"
	
    // 開啟一個新的視窗
    // var winObj = window.open("https://www.baidu.com/", "你好",newWinOptions, '_self');
    var winObj = window.open(newWinUrl, newWinName, newWinOptions);
    
    // 往新視窗輸入字串
    winObj.document.write("Hello, world!");
 
    // 6秒自動關閉
    winObj.setTimeout("window.close()", 6000);
</script>
 

3. window屬性：程式碼如下

<script>
    1. screen屬性：獲取客戶端顯示器的相關資訊
    // width  屬性聲明瞭顯示瀏覽器的螢幕的寬度，以畫素計。
    console.log(screen.width)        //1920
    // height 屬性聲明瞭顯示瀏覽器的螢幕的高度，以畫素計。
    console.log(screen.height)       //1080
    // availWidth  屬性聲明瞭顯示瀏覽器的螢幕的可用寬度，以畫素計。
    console.log(screen.availWidth)   //1920
    // availHeight 屬性聲明瞭顯示瀏覽器的螢幕的可用高度，以畫素計。
    console.log(screen.availHeight)  //1040
    // innerWidth: 內寬 (不含選單欄, 工具欄, 位址列, 狀態列)
    console.log(window.innerWidth)   //1321
    // innerHeight: 內高 (不含選單欄, 工具欄, 位址列, 狀態列)
    console.log(window.innerHeight)  //897
    // name: 瀏覽器視窗的名字
    window.name = "lisi";
    console.log(window.name)         //lisi
</script>