Javascript外部對象

Window 瀏覽器：

- location：地址
- history：歷史
- Document：文檔
- screen：視窗
- navigator：幫助

> 1.外部對象就是瀏覽器提供的API -- **BOM**
> 2.這些對象由w3c規定，由瀏覽器開發者設計並開發
> 3.這些對象分為2部分，其中BOM包含了DOM
> 4.我們可以通過js訪問這些對象



# 外部對象

> BOM (Browser Object Model)
    瀏覽器對象模型，用來訪問和操縱瀏覽器視窗，是JavaScript有能力與瀏覽器對話。
> DOM (Document Object Model)
    文檔對象模型，用來操作文檔。

##1.對話框
- alert(str)
    - 提示對話框，顯示str字元串的內容
- confirm(str)
    - 確認對話框，顯示str字元串的內容
    - 按"確定"按鈕返回true，其他操作返回false

>案例
    
    //調用window對象的屬性或方法，可以省略"window."
    //1.彈出框
        //1)彈出框
        function f1(){
            alert("你好，小俊子");
        }
        //2)確認框
        function f2(){
            var v = confirm("你吃了嗎？");
            //點擊確定返回true,否則返回false
            console.log(v);
        }
        //3)輸入框
        function f3(){
            var p = prompt("你吃的什麼？");
            //點擊取消返回null
            console.log(p);
        }

## 2. 定時器
- 多用於網頁動態時鐘，製作倒計時，跑馬燈效果
- 周期性時鐘
    - 以一定的間隔執行代碼，迴圈往複
    - setInterval(exp,time);
    - 返回已經啟動的定時器對象
- 停止啟動的定時器
    - clearInterval(tID) 
    - tID:啟動的定時器對象
- 一次性時鐘
    - 在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後執行
    - setTimeout(exp,time);
- 停止啟動的定時器
    - clearTimeout(tID) 
    - tID:啟動的定時器對象

> 案例 

 1)周期性定時器
        //每隔N毫秒執行一次函數，反覆執行，直到達到停止條件位置。
        function f4(){
            var n = 5;
            //啟動定時器，返回定時器的ID，用來停止定時器 
            var id = setInterval(function(){
                console.log(n);
                
                switch(n%4){
                    case 0: btn1();break;
                    case 3: btn2();break;
                    case 2: btn3();break;
                    case 1: btn4();break;
                    
                    default: ;
                }
                n++;
            },100);
            //啟動定時器就相當於啟動了一個支線程，當前方法f4相當於主線程。
            //2個線程併發執行，不互相等待，
            //因此主線程在啟動完支線程後立刻向下執行，而支線程卻需要在1秒後才執行
            console.log("蹦");
        }
    
    
    2)一次性定時器 
        //推遲N毫秒執行一次函數，執行完之後，自動停止，
        //也可以在未執行前手動停止
    var id;
    function f5(){
        //啟動定時器,若想在未執行定時器前就將它停止，需要使用id
        id = setTimeout(function(){
            console.log("叮叮叮");
            f4();
        },3000);
    }
    
    function f6(){
        //若定時器已經執行，則取消無效; 若定時器還未執行，則可以取消
        clearTimeout(id);
        console.log("已停止！");
    }
   

## 3. 常用屬性
- screen 對象
    - 包含有關客戶端顯示屏幕的信息
    - 常用於獲取屏幕的解析度和色彩
    - 常用屬性：
        - width height
        - availWidth availHeight

-  history對象
    -  包含用戶訪問過的URL
        -  length屬性：瀏覽器歷史列表中的URL數量
    - 方法：
        - back();
        - forwird();
- location對象
    - 包含有關當前URL的信息
        - 常用於獲取和改變當前瀏覽的網址
    - href屬性：當前視窗正在瀏覽的網址地址
    - 方法
        - reload():重新載入當前網址，相當於刷新    
- navigator 對象
    - 包含有關瀏覽器的信息
        - 常用於獲取客戶端瀏覽器和操作系統的信息 

> 案例

//Location對象
    function f1(){
        var b = confirm("你真的要離開我嗎？");
        if(b){
            location.href = "http://www.tmooc.cn";
        }
        
    }
    //刷新頁面
    function f2(){
        location.reload();
    }
    //screen 對象： 獲取屏幕寬高
    function f3(){
        console.log(screen.width);
        console.log(screen.height);
        console.log(screen.availWidth);
        console.log(screen.availHeight);
    }
    //history對象 
    function f4(){
        history.forward();
    }
    //navigator對象
    function f5(){
        console.log(navigator.userAgent);
    } 

## DOM
### DOM操作
- 查找節點
- 讀取節點信息
- 修改節點信息
- 創建節點信息
- 刪除節點

### 讀取、修改
- 節點信息
    - nodeName:節點名稱
    - nodeType:節點類型
- (1) 讀取節點
    - 讀取節點的名稱，類型
            
            <p id="p1">1.<b>讀寫</b>節點</p>
            <p id="p2">2.<b>查詢</b>節點</p>
            <p id="p3">3.<b>增刪</b>節點</p>

            var p1 = document.getElementById("p1");
            console.log(p1.nodeName);
            console.log(p1.nodeType);
    - 讀寫節點的內容
         - 雙標簽中間的文本叫內容，任何雙標簽都有內容
         - innerHTML：包括子標簽信息
         - innerText：忽略子標簽
                 
                console.log(p1.innerHTML);
                p1.innerHTML="1.<i>讀寫</i>節點";

                console.log(p1.innerText);
    - 讀寫節點的值
        - 表單控制項中的數據叫值，只有如下表單控制項才有值：
        - input
        - select
        - textarea