JavaScript 1. JavaScript概述 1.1 JavaScript是什麼？有什麼作用？ HTML：就是用來寫網頁的。（人的身體） CSS：就是用來美化頁面的。（人的衣服） JavaScript：前端大腦、靈魂。（人的大腦、靈魂） JavaScript是WEB上強大的腳本語言。腳本語 ...

JavaScript

1. JavaScript概述

1.1 JavaScript是什麼？有什麼作用？

HTML：就是用來寫網頁的。（人的身體）

CSS：就是用來美化頁面的。（人的衣服）

JavaScript：前端大腦、靈魂。（人的大腦、靈魂）

JavaScript是WEB上強大的腳本語言。

腳本語言無法獨立運行，必須嵌入到其他語言中，結合使用。

作用： 控制頁面特效顯示。

例如：

JS可以對HTML元素進行動態的控制。

JS可以對錶單項進行校驗。

JS可以控制CSS樣式。

1.2 JavaScript入門案例

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script>
                //聲明變數a，並賦值
                var a = 10;
                //聲明變數b，並賦值
                var b = 20;
                //彈框變數a + 變數b的值
                alert(a + b);
            </script>
        </head>
        <body>
        </body>
    </html>

1.3 JavaScript的語言特征即編程註意事項

特征：

JavaScript無需編譯，直接被瀏覽器解釋執行。

JavaScript 無法單獨運行，必須嵌入到HTML代碼中運行。

JavaScript的執行過程由上到下一次執行。

註意：

JavaScript沒有訪問系統文件的許可權。

由於JavaScript無需編譯，是由上到下依次解釋執行，所以在保證可讀性的情況下，允許使用鏈式編程。

JavaScript和Java沒有任何關係。

1.4 JavaScript的組成

ECMAScript（核心）：規定了JS的語法和基本對象。

DOM文檔對象模型：處理網頁內容的方法和介面。

BOM瀏覽器對象模型：與瀏覽器交互的方法和介面。

2. JavaScript的引入方式

2.1 內部腳本

在當前網頁內部寫<script></script>標簽，script內部即可書寫JavaScript代碼。

格式：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                /*JavaScript代碼*/
            </script>
        </head>
        <body>
        </body>
    <html>

註：script標簽理論上可以書寫在HTML文件的任意位置。

2.2 外部引用

在HTML文檔中，通過<script src=""></script>標簽引入.js文件。

格式：

<script type="text/javascript" src="javascript文件路徑"></script>

示例：

<script type="text/javascript" src="demo.js"></script>

註：外部引用時script標簽內容體不能有script代碼，即使寫了也不會執行。

2.3 script標簽的放置位置

開發規範規定，script標簽的放置位置為：</body>結束標簽前。
如圖所示：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <h1>Hello</h1>
            <script>alert("Hello World
            ")</script>
        </body>
    </html>

優點：

保證HTML展示內容優先載入，最後載入腳本，增強用戶體驗性。

3. JavaScript語法及規則

3.1 註釋

單行註釋：//
多行註釋：/**/

示例：

    <script type="text/javascript">
        //單行註釋
        /*多行註釋*/
    </script>

3.2 變數

變數：標示記憶體中的一塊空間，用於存儲數據，且數據是可變的。

變數的聲明：

var 變數名;//變數賦予預設值，預設值為undefined。

變數的聲明和賦值：

var 變數名 = 值; //變數賦予對應的值。

在聲明JavaScript變數時，需要遵循以下命名規範：

必須以字母或下劃線開頭，中間可以是數字、字元或下劃線。

變數名不能包含空格等字元。

不能使用JavaScript關鍵字作為變數名。如：function。

JavaScript嚴格區分大小寫。

3.3 基本數據類型

類似於Java中的基本數據類型。

string 字元串類型。"" 和''都是字元串。JavaScript中沒有單個字元。

boolean 布爾類型。固定值為true和false。

number 數字類型。任意數字。

null 空。一個占位符。

undefined 未定義類型。該類型只有一個固定值，及undefined，便是變數聲明卻未定義具體的值。

註：因為undefined是從null中派生出來的，所以undefined == null。

JavaScript區別於Java，是弱類型語言，變數的使用不用嚴格遵循規範，所以一個變數聲明好之後，是可以賦予任意類型的值。

    <script type="text/javascript">
        var a ;
        a = 10;
        a = "10";
        a = true;
        alert(a);
    </script>

通過typeof運算符可以分辨變數值輸入哪種基本數據類型。

    <script type="text/javascript">
        var a ;
        a = 10;
        a = "10";
        a = true;
        alert(typeof(a));
    </script>

註:null屬於基本數據類型，typeof(null)->obj。

3.4 引用數據類型

引用數據類型通常叫做類（class），但在JavaScript中，因為不存在編譯過程，所以沒有類的概念，所處理的引用數據類型都是對象。

標準創建方式：

var str = new String(); //和Java相同

var str=new String;//JS獨有的方式

4. 運算符

4.1 比較運算符

運算符	描述	例子
==	等於	5 == 8為 false
===	全等（值和類型）	5 === 5 為 true； 5 === "5" 為 false
!=	不等於	5 != 8 為 true
>	大於	5 > 8 為 false
<	小於	5 < 8 為 true
>=	大於或等於	5 >= 8 為 false
<=	小於或等於	5 <= 8 為 true

== 邏輯等，僅僅比對值。

=== 全等。比對值並且比對類型，如果值和類型都相同則為true，否則為false。

4.2 邏輯運算符

運算符	描述	例子
&&	and	(5 >1 && 5 < 8)為 true
\|\|	or	(5 < 1 \|\| 5 > 8)> 為 false
!	not	!(5 == 8) 為 true

註：JavaScript邏輯運算符中沒有單個&、單個|。

5. 正則對象

5.1 RegExp對象的創建方式

var reg = new RegExp("表達式"); (開發中基本不用)

var reg=/^表達式$/; 直接量（開發中常用）

註：直接量存在邊界，即^代表開始，$代表結束。

5.2 test方法

正則對象.test(string)。

用來校驗字元串是否匹配正則。

全部字元匹配返回true;有字元不匹配返回false。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script>
                var reg = /^\s*$/;// 0~多個空格
                var flag = reg.test("  a  ");
                alert(falg);
            </script>
        </head>
        <body>
        </body>
    </html>

5.3 正則對象使用註意事項

/^表達式$/ 只要有無法成立正則的字元存在，即為false。全部符合為true。（檢查嚴格，適用於表單驗證）。

/表達式/ 只要有成立正則的字元存在，即為true。全部不符合為false。（檢查不嚴格，適用於查找，替換）。

6. JS數組對象

6.1 JS數組的特性

JS數組可以看作Java中的ArrayList集合。

數組中的每一個成員沒有類型限制，即可以存放任意類型。

數組的長度可以自動修改。

6.2 JS數組的四種創建方式

var arr=[1,2,3,"a",true];

//常用的JS數組。長度5.

var arr = new Array();

創建一個數組對象，數組長度預設為0。

var arr = new Array(4);

數組長度是4，相當於開闢了長度為4的空間，每個元素是undefined。（僅在顯示數組時進行處理，undefined為了方便顯示變成了空字元串的形式，其值本質仍然是undefined。）

var arr = new Array(1,2);

數組元素是1，2。

6.3 JS數組的常用屬性/方法

length	設置或返回數組中元素的數目
join()	把數組的所有元素放入一個字元串中，元素通過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                var arr = ['a','b','c','d'];
                var result = arr.join("+");
                alert(result);//a+b+c+d
                alert(arr.length);//長度4;
                var arr2 = arr.reverse();

                alert(arr2);//d,c,b,a

                var temp = arr.pop();

                alert(temp);//結果：a;

                var len = arr.push('e','f','g');//追加多個元素。
                alert(len);//長度：6。
            </script>
        </head>
        <body>
        </body>
    </html>

JavaWeb第三天--JavaScript