JavaScript高級程序設計（第三版）

時間 2020-01-02

原文原文鏈接

一、JavaScript是一種專爲與網頁交互而設計的腳本語言；
由三個不一樣的部分組成：ECMAScript、文檔對象模型（DOM）、瀏覽器對象模型（BOM）；
在當前五個主要瀏覽器（IE、Firefox、Chrome、Safari、Opera）中都獲得了不一樣程度的支持。 html

二、向HTML頁面中插入JavaScript的主要方法，就是使用 <script> 元素。java

三、 <script> 元素會按順序被解析
傳統：全部的 <script> 元素都應該放在頁面的 <head> 元素中，（能夠用defer="defer"代替）延遲執行。最好只有一個，只適用於外部腳本文件。
現代：把所有的JavaScript引用放在 <body> 元素中頁面內容的後面（在解析JavaScript代碼以前，頁面內容將徹底呈如今瀏覽器中，用戶會感受打開頁面的速度變快了）。最佳選擇正則表達式

四、瀏覽器在遇到 <body> 標籤時纔開始呈現內容數組

五、async，異步加載頁面其餘內容，不保證.js文件執行的前後順序，確保多個.js文件之間互不依賴很是重要。瀏覽器

六、最好在html中儘量使用外部文件來包含JavaScript代碼，
優勢：可維護性、可緩存緩存

七、嚴格模式：一些不肯定的行爲將獲得處理，並且某些不安全的操做也會拋出錯誤
安全

function  doSomething (    ) {
    "use  strict"；
    //函數體
}

八、全局變量
異步

function  test (    ) {
    message = "hi"；    //全局變量
}

test()；
alert (message)；//hi

省略了 var 操做符，於是message就成了全局變量。這樣，只要調用過一次test( )函數，這個變量就有了定義，就能夠在函數外部的任何地方被訪問到。
async

九、類型顯示
ide

var massage = "this is my first";
alert(typeof massage);    --string
alert(typeof (massage));    --string
alert(typeof 95);       --number

十、逐個遍歷數組

 var myObject = new Object();
myObject.name = "lvhazhou";
myObject.age = "22";
myObject.phone = "13951245632"
for(prop in myObject){
window.alert("The property " + prop + " is " + myObject[prop]);
}

十一、向所取id的參數插入內容 innerHTML

function displayDate(){
    document.getElementById("demo").innerHTML=Date();
} 
<h1>個人第一個 JavaScript 程序</h1>
<p id="demo">這是一個段落</p>
<button type="button" onClick="displayDate()">顯示日期</button>

十二、點擊圖片，兩個圖片直接互相切換

function changeImage(){
    element=document.getElementById("myp_w_picpath");
    if(element.src.match("one")){
        element.src="java4_two.jpg";
    }
    else{
        element.src="java3_one.jpg";
    }
}

<img id="myp_w_picpath" onClick="changeImage()" src="java3_one.jpg" width="100" height="180">

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

13、聲明數組

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];

1四、聲明對象

var person={firstname:"John", lastname:"Doe", id:5566};

對象屬性的尋址方式：

name=person.lastname;
name=person["lastname"];

1五、聲明對象類型
當聲明新變量時，可使用關鍵詞 "new" 來聲明其類型：

var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;

JavaScript對象均爲變量，當聲明一個變量時，就建立了一個新的對象。

1六、兩種訪問屬性的方法

person.lastName;
person["lastName"];

1七、JavaScript變量的生存期
JavaScript變量的生命週期從它被聲明的時間開始，
局部變量會在函數運行之後被刪除，
全局變量會在頁面關閉之後被刪除。

1八、向未聲明的JavaScript變量分配值
若是把值賦給還沒有聲明的變量，該變量將會自動做爲全局變量聲明

    carname = 「voloe」 ;

將聲明一個全局變量carname，即便它在函數內執行。

1九、代碼將修改自身元素的內容

<button onclick="this.innerHTML=Date()">如今的時間是?</button>

20、常見的HTML事件
onchange           HTML元素改變
onclick 用戶點擊HTML元素
  用戶在一個HTML元素上移動鼠標
用戶從一個HTML元素上移開鼠標
onkeydown           用戶按下鍵盤按鍵
瀏覽器已完成頁面的加載

2一、絕對相等符號 ===

var x = "John";              
var y = new String("John");
(x === y)     // 結果爲 false，由於 x 是字符串，y 是對象

===爲絕對相等，既數據類型和值都必須相等

2二、跳出代碼塊

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list;
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 
}

2三、清空對象
你能夠設置爲 null 來清空對象:

var person = null;           
// 值爲 null(空), 但類型爲對象

你能夠設置爲 undefined 來清空對象:

var person = undefined;     
// 值爲 undefined, 類型爲 undefined

2四、JavaScript數據類型
5種數據類型：string、number、boolean、object、function
3種對象類型：Object、Date、Array
2種不包含任何值的數據類型：null、undefined

typeof "John"    // 返回 string 
typeof 3.14    // 返回 number
typeof NaN   // 返回 number
typeof false    // 返回 boolean
typeof [1,2,3,4]   // 返回 object
typeof{name:'John', age:34}  // 返回 object
typeof new Date()  // 返回 object
typeof function() {}   // 返回 function
typeof myCar   // 返回 undefined (若是 myCar 沒有聲明)
typeof null    // 返回 object

NaN數據類型是 number
數組（Array）數據類型是object
日期（Date）數據類型是object
null數據類型是object
未定義變量的數據類型是undefined

2五、constructor
constructor屬性返回全部JavaScript變量的構造函數

"John".constructor  // 返回函數 String()  { [native code] }
(3.14).constructor  // 返回函數 Number()  { [native code] }
false.constructor  // 返回函數 Boolean() { [native code] }
[1,2,3,4].constructor  // 返回函數 Array()   { [native code] }
{name:'John',age:34}.constructor  // 返回函數 Object()  { [native code] }
new Date().constructor  // 返回函數 Date()    { [native code] }
function(){}.constructor  // 返回函數 Function(){ [native code] }

能夠用constructor屬性查看對象是否爲數組

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

2六、將字符串轉換爲數字
空字符串轉換爲 0
其餘字符串會轉換爲NaN

Number("3.14") // 返回 3.14
Number(" ")  // 返回 0 
Number("")  // 返回 0
Number("99 88") // 返回 NaN

將布爾類型轉換爲數字

Number(false) // 返回 0
Number(true)  // 返回 1

2七、使用字符串方法

在JavaScript中，正則表達式一般用於兩個字符串方法：search( ) 和 replace( ) 。

search() 方法 用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置。

replace() 方法 用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。

search()方法使用正則表達式：
使用正則表達式搜索 "w3cschool" 字符串，且不區分大小寫：
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
輸出結果爲：6
replace()方法使用正則表達式：
使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換爲 w3cschool :

var str ="Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");

2八、正則表達式修飾符
i          執行對大小寫不敏感的匹配。
g           執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
m          執行多行匹配。

2九、正則表達式模式

方括號用於查找某個範圍內的字符
[abc]          查找方括號之間的任何字符。
[0-9]          查找任何從0至9的數字。
(x|y)          查找任何以 | 分隔的選項。

元字符是擁有特殊含義的字符
\d          查找數字。
\s          查找空白字符。
\b          匹配單詞邊界。
\uxxx      查找已16進制數 xxx 規定的Unicode字符。

量詞
n+         匹配任何包含至少一個n的字符串。
n*          匹配任何包含零個或多個n的字符串。
n?          匹配任何包含零個或一個n的字符串。

在 JavaScript 中，RegExp 對象是一個預約義了屬性和方法的正則表達式對象。

test() 方法是一個正則表達式方法。

test() 方法用於檢測一個字符串是否匹配某個模式，若是字符串中含有匹配的文本，則返回 true，不然返回 false。

exec() 方法是一個正則表達式方法。

exec() 方法用於檢索字符串中的正則表達式的匹配。

該函數返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

如下實例用於搜索字符串中的字母 "e":
/e/.exec("The best things in life are free!");
輸出：e

30、本身拋出異常

function myFunction(){
    try{
        var x=document.getElementById("demo").value;
        if(x==""){
            throw "值爲空";
        }
        if(isNaN(x)){
            throw "不是數字";
        }
        if(x>5){
            throw "太大";
        }
        if(x<5){
            throw "過小";
        }
    }
    catch(err){
        var y=document.getElementById("mess");
        y.innerHTML="錯誤：" + err + "。";
    }
}
 
<input id="demo" type="text">
<button type="button" onClick="myFunction()">測試輸入</button>
<p id="mess"></p>