文章目錄

一、JS的定義

JS（JavaScript）是一種描述語言，基於對象和事件驅動的腳本語言。

二、JS的特點

腳本語言（一種輕量級的編程語言）
一種解釋性語言（無需預編譯）
被設計爲向 HTML 頁面添加交互行爲
運行於客戶端

三、JS的組成

ECMAScript（核心）
ECMAScript 定義了腳本語言的所有屬性、方法和對象，包括語法、類型、關鍵字、保留字、運算符、對象等。除了 JS 外，同時也是 Nombas 的 ScriptEase 和 Flash 腳本 ActionSctipt 的基礎。
DOM（Document Object Model，文檔對象模型）
HTML 和 XML 的應用程序接口（API），即描述處理網頁內容的方法和接口，把整個頁面規劃爲層級式的節點結構。
BOM（Browser Object Model，瀏覽器對象模型）
描述與瀏覽器進行交互的方法和接口，包括①彈出新的瀏覽器窗口、②移動、關閉瀏覽器窗口及調節瀏覽器窗口大小、③獲取用戶屏幕分辨率的屏幕對象、④WEB瀏覽器詳細的定位對象。
對象舉例：Windows 對象、Navigator 對象、Screen 對象、History 對象、Location 對象。

三、JS的基本結構

<script type="text/javascript">
	// 此處寫JS代碼
</script>

四、引用JS

HTML標籤中引用
<script>標籤中直接書寫
通過<script>標籤的 src 屬性引入外部 JS 文件

五、JS語法

5.1 常用的輸入/輸出/確認（JS的三種彈框）

5.1.1 輸出：alert()

alert("提示信息");

提示信息框,瀏覽器處於阻塞狀態，代碼在alert這個位置停止並等待。

5.1.2 輸入：prompt()

prompt("提示信息","輸入框的默認信息");
prompt("請輸入姓名","張三");	// 默認信息爲"張三"
prompt("請輸入姓名");

需要在輸入框中輸入信息。

5.1.3 確認：confirm()

confirm("確定信息？");

確定則返回 true，取消則返回 false。

5.1.4 示例

<head>
    <meta charset="utf-8"/>
    <title>js支持的三種彈框，實現和用戶交互</title>
    <script type="text/javascript">
		alert("你好，二階堂");
		var username = prompt("請輸入用戶名","劉德華");
		alert(username);
		var flag = confirm("確定嗎？");
		alert(flag);
    </script>
</head>
<body>
    <h1>你好，html</h1>
</body>

5.2 註釋

註釋方法與Java一致，有 // ，/* */ 。

5.3 變量聲明與使用

var num1 = 10;
var str1 = "JS";
var num2 = 12, str = "js";	// 一次聲明多個
num3 = 100;	// 省略 var語句，相當於 window.num3 = 100; 不推薦
var str2 = str1 + "學習";

JS的變量聲明，是通過 var 語句來聲明的，無需指定數據類型。
JS變量用於保存值、保存表達式。
變量必須以字母或下劃線或美元符$開始，不能使用關鍵字作爲變量名。
變量對大小寫敏感。

關於 window 屬性：

<head>
   <meta charset="utf-8"/>
    <title>window對象</title>
    <script type="text/javascript">
        console.log(window);

        bb="44"; // 在最外層聲明的變量，就是window的屬性
        function test(){
            alert(bb);   // 44
            var aa="12";
            bb="24"; // 這種聲明方式就是直接window.bb=24;
            alert(bb);   //24
        }
        test();
        // console.log(aa);     // aa is not defined
        console.log(bb);    // 24
    </script>
</head>
<body>

</body>

5.4 數據類型

5.4.1 Undefined

未定義或定義未賦值。

5.4.2 Null

表示尚未存在的對象，與 undefined 值相等。

5.4.3 Number

var num1 = 23;	 // 整數
var num2 = 23.0;	// 浮點數

5.4.4 Boolean

true 和 false。

5.4.5 String

一組被引號（單引號或雙引號）括起來的文本。

5.4.6 tupeof運算符

檢測變量的返回值，爲字符串類型。
返回值如下：

undefined：變量被聲明後，未被賦值
string：用單引號或雙引號來聲明的字符串
boolean：true 或 false
number：整數或浮點數
function：函數方法
object：對象或數組或 Null 類型

5.4.7 數據類型轉換

轉換函數：

parseInt()：字符串→整數
parseFloat()：字符串→浮點數
toString()：返回字符串

強制類型轉換：

Boolean()：轉化爲邏輯值
Number()：對象→數字
String()：對象→字符串

5.5 運算符號

=：賦值
= =：判斷值相等
===：判斷值和類型都相同

5.6 條件語句、循環語句

與 Java 類似。

5.7 函數

5.7.1 作用

一組可隨時隨地運行的語句。將腳本編寫爲函數以避免頁面載入時執行該腳本。

5.7.2 分類

5.7.2.1 系統函數

常用的系統函數舉例：

parseInt()：解析一個字符串並返回一個整數
parseFloat()：解析一個字符串並返回一個浮點數
isNaN()：檢查某個值是否是數字，返回 true 或 false
eval()：計算 JS 字符串，並把它作爲腳本代碼來執行
如：var n1=1,n2=1,w="+"; 則eval(num1+w+num2)的值爲2。

5.7.2.2 自定義函數

5.7.3 具體運用自定義函數

5.7.3.1 定義

function 函數名(參數1,參數2,...){
	// 函數代碼塊
}
// 或
// 聲明一個匿名函數將地址傳遞給變量
var 函數名=function(參數1,參數2,...){
	// 函數代碼塊
}

5.7.3.2 調用

function sayHello(name){
	alert(name+"說了句hello");
}

sayHello("Tom");	// 調用

5.7.3.3 返回值

function sayHello(name){
	return (name+"說了句hello");
}

var str = sayHello("Tom");
alert(str);

5.7.3.3 變量的作用域

全局變量：任何地方都可被調用，公共的。應儘量避免使用全局變量，以免與團隊開發變量衝突。
局部變量：只能在函數內部調用，私有的。

5.8 事件

5.8.1 頁面中常見的事件

onFocus：獲得焦點的時候觸發的事件。例如在鼠標點過其它地方後點擊文本框時，向 Web 控制檯輸出一條消息"1"。
onBlur：失去焦點的時候觸發的事件。例如再鼠標點擊過文本框後點擊其它地方時，向 Web 控制檯輸出一條消息"2"。
onChange：當數據發送改變的時候觸發的事件。例如在文本框輸入一些文字，點擊其他地方時，向 Web 控制檯輸出一條消息"3"。

事件通常與函數配合使用，當事件發生時去調用函數。

5.8.2 舉例

5.8.2.1 舉例1

<head>
    <meta charset="utf-8"/>
    <title>事件的介紹</title>
    <script type="text/javascript">
       function aa(item){
            console.log(item.value);
       }
    </script>

    <style  type="text/css">
        #div1{
            width:100px;
            height:100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="javascript:alert('bb')"> </div>
    <input type="button" value="按我" onclick="aa(this);" />
</body>

效果：

當鼠標移到 div 圖層時，彈出警告框"bb"。
當點擊按鈕時，向 Web 控制檯輸出一條消息"aa"。

5.8.2.2 舉例2

<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript">
       
    </script>
</head>
<body>
    <input type="text" 
    onfocus="javascript:console.log('1')" 
    onblur="javascript:console.log('2')" 
    onchange="javascript:console.log('3')" 
    />
    <br>
    <select onchange="javascript:console.log(this.value)">
        <option value="1">玩具</option>
        <option value="2">文具</option>
        <option value="3">書籍</option>
    </select>
</body>

效果：

在鼠標點過其它地方後點擊文本框時，向 Web 控制檯輸出一條消息"1"。
在鼠標點擊過文本框後點擊其它地方時，向 Web 控制檯輸出一條消息"2"。
改變文本框內容並點擊其它地方時，向 Web 控制檯輸出一條消息"3"。
在下拉框換選項時，向 Web 控制檯輸出該選項的 value 值。

5.8.2.3 舉例3

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>新浪</h1><input type="button" value="改變層內容" id="btn1" />
    <br />

    <input type="text" name="session" />
    <input type="text" name="session" />
    <input type="text" name="session" />
    <input type="text" name="session" />

    <br />
    <input type="button" value="顯示所有input元素的內容" id="btn2" />
    <input type="button" value="顯示所有session內容" id="btn3" />

    <hr />
    <p id="pshow"></p>

    <script type="text/javascript">
       var inputs=document.getElementsByTagName("input");
       var sessions=document.getElementsByName("session");
       var hs=document.getElementsByTagName("h1");

       btn1.onclick=function(){
           hs[0].innerHTML="搜狐";
       }
       btn2.onclick=function(){
            pshow.innerHTML="";
            for(var i=0;i<inputs.length;i++){
               pshow.innerHTML=pshow.innerHTML+" "+inputs[i].value;
            }
       }
       btn3.onclick=function(){
            pshow.innerHTML="";
            for(var i=0;i<sessions.length;i++){
               pshow.innerHTML=pshow.innerHTML+" "+sessions[i].value;
            }
       }
    </script>
</body>

效果：

點擊"改變層內容"時，改變大標題內容爲"搜狐"：

在四個文本框中輸入內容，點擊"顯示所有input元素內容"時：

點擊"顯示所有session元素內容"時：

5.8.2.4 舉例4

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h2>選擇你的愛好：</h2>
    <ul>
        <li><input type="checkbox" name="all" id="all" value="全選" />全選<br /></li>
        <li><input type="checkbox" name="select" value="音樂" />音樂<br /></li>
        <li><input type="checkbox" name="select" value="閱讀" />閱讀<br /></li>
        <li><input type="checkbox" name="select" value="打球" />打球<br /></li>
        <li><input type="checkbox" name="select" value="游泳" />游泳<br /></li>
        <li><input type="checkbox" name="select" value="其他" />其他<br /></li>
    </ul>
    <hr />
    <input type="button" value="查看我選擇的愛好" id="btn" />
    <p id="show"></p>

    <script type="text/javascript">
       var sl=document.getElementsByName("select");
       var sh=document.getElementById("show");

       all.onclick=function(){
           if(this.checked){
               for(var i=0; i<sl.length; i++){
                   sl[i].checked=true;
               }
           }else{
               for(var i=0; i<sl.length; i++){
                   sl[i].checked=false;
               }
           }
       }
       btn.onclick=function(){
           sh.innerHTML="";
           for(var i=0; i<sl.length; i++){
               if(sl[i].checked){
                   sh.innerHTML+=" "+sl[i].value;
               }
           }
       }
    </script>
</body>

效果：

選擇愛好並點擊"查看我選擇的愛好"時：

5.9 程序調試

5.9.1 分類

語法錯誤
邏輯錯誤

5.9.2 異常處理

try{
	// 在此運行代碼
}catch(err){
	// 在此處理錯誤
	// err.message, message包含錯誤信息
}

5.9.3 調試方法

註釋調試法
輸出調試法
alert() 調試法
document.write() 調試法
console 對象調試法
調試工具
Firebug、瀏覽器自帶開發窗口

六、Window對象

6.1 定義

BOM（瀏覽器對象模型）使得 JS 能與瀏覽器進行對話，主要是有 Window 對象的操作。

Window 對象表示瀏覽器中打開的窗口。

通常把 JS 程序寫在 window.onload 函數體中，目的是在窗
口加載完成時再執行 JS 代碼，如：

window.onload = function(){
	// 代碼
}

6.2 特點

Window 對象是全局對象，可直接調用其方法和屬性
Window 對象的一些方法和屬性可省略不寫
如 window.document 等同於 document
window.alert() 等同於 alert()

6.3 Window對象常用屬性

6.4 history屬性

history 屬性就是 History 對象的引用。

方法：

back()：加載上一個瀏覽的文檔
forward()：加載下一個瀏覽過的文檔
go(n)：n爲整數，跳轉第n個瀏覽過的文檔
n==0 則刷新當前頁面
n>0 則向前跳轉到第n個文檔
n<0 則向後跳轉到第n個文檔

6.5 location屬性

location 屬性就是 Location 對象的引用。

屬性：

host：設置或返回主機名和當前 URL 的端口號
hostname：設置或返回當前的 URL 的主機名
href：設置或返回完整的 url，可用於設置跳轉
hash：設置或返回從井號(#)開始的 URL（錨)
search：設置或返回從問號(?)開始的 URL（查詢部分）

方法：

reload()：重新加載當前的文檔，刷新頁面
replace()：新的文檔替換當前文檔

示例：

<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <input type="text" id="address" />
    <input type="button" value="跳轉" id="btn" />

    <script type="text/javascript">
       // console.log(location);
       // 1、獲取元素
       var add=document.getElementById("address");
       var btn1=document.getElementById("btn");
       // 2、操作元素
       btn1.onclick=function(){
           // 2.1 獲取文本框的內容
           var a=add.value;
           // 2.2 文本框中的內容作爲瀏覽器中的地址
           location.href="https://"+a;
       }
    </script>
</body>

效果：

在文本框中輸入網址，點擊跳轉按鈕，即可跳轉至輸入的網址。

6.6 document屬性

每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象,利用它可對 HTML 頁面中的所有元素進行訪問。

常用屬性：

title：返回或設置當前文檔的標題

常用方法：

write()：向文檔寫 HTML 表達式或 JS 代碼
getElementById()：返回對擁有指定 id 屬性的第一個對象的引用
getElementsByTagName()：返回帶有指定標籤名稱的對象集合
getElementsByName()：返回帶有指定 name 屬性的對象集合

6.7 Window對象常用方法

6.8 open() 方法

open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。

// 語法
newWIn = window.open("彈出窗口的url", "窗口名稱", "窗口特徵")

// 示例
var newWin = window.open(
	"https://www.baidu.com",
	"百度",
	"height=380, width=320, toolbar=0, scrollbars=0, location=0, status=0,menubar=0, resizable=0"
);

彈出固定大小窗口，並且無菜單欄等，注意第三個參數的書寫格式。

窗口特徵：

6.9 close() 方法

用於關閉瀏覽器窗口。

//新開一個窗口
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'");

//關閉窗口
myWindow.close();

某個窗口可以通過調用self.close() 或只調用close() 來關閉其自身。
只有通過JavaScript 代碼打開的窗口才能夠由JavaScript 代碼關閉。

6.10 定時函數

6.10.1 setInterval (fn，millisec) 方法

可按照指定的週期（以毫秒計）來調用函數或計算表達式，循環執行多次。

6.10.2 setTimeout (fn，millisec) 方法

用於在指定的毫秒數後調用函數或計算表達式，只執行一次。

6.10.3 clearInterval (timer) 方法

可取消由 setInterval() 設置的 timeout。

6.10.4 clearTimeout (timer) 方法

可取消由 setTimeout() 方法設置的 timeout。

6.10.5 定時函數的不同寫法

//函數
var n = 0;
function fn( ) { document.title = n++; }
//方法1：
var timer = window.setInterval( "fn()" , 1000);
//方法2：
var timer = window.setInterval( fn , 1000 );
//方法3：
var timer = window.setInterval( function(){	  // 以匿名函數作爲參數
	fn()
}, 1000);

6.10.6 示例1（倒計時）

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>10</h1>
    <input type="button" value="開始" onclick="start()" />
    <input type="button" value="停止" onclick="stop()" />

    <script type="text/javascript">
        var h=document.getElementsByTagName("h1")[0];
        var timer=null;

        function start(){
            if(timer==null){
                timer=setInterval(function(){
                    var t=h.innerHTML;
                    if(t==0){
                        stop();
                        alert("時間到！");
                    }
                    else{
                        t--;
                        h.innerHTML=t;
                    }
                },1000);
            }
           
       }

       function stop(){
           if(timer!=null){
                h.innerHTML=10;
                clearInterval(timer);
                timer=null;
           }
       }
    </script>
</body>

效果：

與常見計時器功能一致。

6.10.6 示例2（秒錶）

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>0</h1>
    <input type="button" value="開始" onclick="start()" />
    <input type="button" value="暫停" onclick="pause()" />
    <input type="button" value="停止" onclick="stop()" />

    <script type="text/javascript">
       var h=document.getElementsByTagName("h1")[0];
       var timer=null;

       function start(){
            if(timer==null){
                timer=setInterval(function(){
                    var t=h.innerHTML;
                    t++;
                    h.innerHTML=t;
                },1000);
            }
       }

       function pause(){
            if(timer!=null){
                clearInterval(timer);
                timer=null;
            }
       }

       function stop(){
            pause();
            h.innerHTML=0;
       }
    </script>
</body>