概述
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作爲開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型編程、多範式的動態腳本語言，並且支持面向對象、命令式和聲明式（如函數式編程）風格。
功能：
（1）是一種解釋性腳本語言（代碼不進行預編譯）。
（2）主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行爲。
（3）可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行爲的分離。
（4）跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
（5）Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較複雜的信息處理。
一、javascript 使用方法
HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。通常的做法是把函數放入 head 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
語法
（1）內部js
<script>
alert("我的第一個 JavaScript");
</script>
（2）引用外部js文件
<script src="myjs.js"> </script>
那些老舊的實例可能會在 <script> 標籤中使用 type=“text/javascript”。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。
二、基礎知識
（1）輸出顯示
（2）基礎語法
（3）事件
（4）正則表達式
（5）異常處理
（6）調試工具
（7）this
（8）json
三、使用示例詳解
3.1 輸出顯示
在javascript中，沒有輸出函數提供良好的用戶交互，當想知道程序的運行結果的時候，javascript提供了以下四種方法：（1）彈框alert：
<script>
window.alert(“我是一個彈框”);
alert(“我也是一個彈框”);
</script>
（2）document.write() 方法將內容寫到 HTML 文檔中
/* 在HTML標準流文檔中加入新的元素 */
<h1>這是一個 h1標題</h1>
<p>這是一個段落。</p>
<script>
document.write("新寫入的頁面信息");
</script>
注意：若當頁面加載完畢的時候再執行document.write()方法，此時的HTML元素將被寫入的內容所替代，例如，點擊按鈕
<h1>在點擊按鈕之前，這是一個 h1標題</h1>
<p>在點擊按鈕之前，這是一個段落。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
document.write("點擊按鈕之後，頁面顯示的信息覆蓋之前的內容");
}
</script>
點擊前：
點擊之後：
（3）innerHTML 寫入到 HTML 元素。
/* 通過id值獲取到頁面元素，然後通過innerHTML修改元素顯示的內容*/
<p id="demo">修改之前</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
（4） console.log() 寫入到瀏覽器開發工具的控制檯
<script>
console.log("在控制檯打印的內容");
</script>
3.2 基礎語法
javascript的語法跟java語法類似。 注意：javascript嚴格區分大小寫。3.2.1 語句
（1）每條語句以 ; 結尾
a = 1;
a = 1 + 2;
c = "hello，javascript";
（2）語句塊包含在 { } 中 ，{...}中包含多條javascript語句，每條語句以分號結尾，代碼塊內的代碼應該進行縮進。
if (a>5){
a=a+c;
c=c+1;
}
3.2.2 註釋
（1）單行註釋使用： //
（2）多行註釋：/* xxxxx */
3.2.3 變量
提示：一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明。
（1）變量聲明：使用var關鍵字聲明變量
var a
（2）變量賦值：
//聲明和賦值分開
var a;
a = 1
//聲明的時候進行賦值
var a = 1;
//多變量聲明
var a=1,b=2,c=3;
var a=1,
b=2,
c=3;
3.2.4 數據類型
（1）字符串：String ，字符串是以單引號或雙引號括起來的任意文本
//聲明賦值
var x = new String("hello，world"); //不建議
var x = "hello，world";
//獲取字符串長度
len = x.length
//轉義字符
var x = "中國是我的家， china 與\"China（中國）\"同名。"
//換行，當字符串太長需要換行時使用 +
var x = "hello +
world";
//返回字符串中指定文本首次出現的索引（位置），找不到返回-1
var pos = x.indexOf("hello");
//返回指定文本在字符串中最後一次出現的索引,找不到返回-1
var pos =x.lastIndexOf("world");
//搜索特定值的字符串，並返回匹配的位置
var pos = x.search("hello")
//提取字符串的某個部分並在新字符串中返回被提取的部分
//該方法設置兩個參數：起始索引（開始位置），終止索引（結束位置）
//某個參數爲負，則從字符串的結尾開始計數,substring()方法不支持負數
//省略第二個參數，則該方法將裁剪字符串的剩餘部分
var res = x.slice(2,5);
var res = x.substring(2,5);
//用另一個值替換在字符串中指定的值：將 world 替換爲 china
var n = x.replace("world", "china");
//把字符串轉換爲大寫
var x2 = x.toUpperCase();
//把字符串轉換爲小寫
x3 = x.toLowerCase();
//刪除字符串兩端的空白符
var str = " Hello World! ";
str = str.trim();
//字符串拼接
var x = "hello" + "world";
// 將字符串轉換爲數組
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗號分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用豎線分隔
（2）數字類型：Number ，JavaScript不區分整數和浮點數，統一用Number表示。JavaScript 不會定義不同類型的數，比如整數、短的、長的、浮點的等等。JavaScript 數值始終以雙精度浮點數來存儲
整數（不使用指數或科學計數法）會被精確到 15 位。
小數的最大數是 17 位，但是浮點的算數並不總是 100% 精準
var new Number(123) //不建議
var x = 123; // 整數123
var x = 0.456; // 浮點數0.456
var x = 1.2345e3; // 科學計數法表示1.2345x1000，等同於1234.5
var x = -99; // 負數
var x = NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示
var x = Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示爲Infinity
// 進行運算時只有當兩個都是數字類型才能計算，否則會被當做字符串進行拼接
//確定某個值是否是數
var x = 100 / "Apple";
isNaN(x); // 返回 true，因爲 x 不是數
//Number()把 JavaScript 變量轉換爲數值：
x = "10"
Number(x); // 返回 10
NaN 屬於 JavaScript 保留字，指示數字並非合法的數字
（3）布爾值：Boolean
// 布爾（邏輯）只能有兩個值：true 或 false。
var x=true;
var y=false;
（4）null和undefined：
1）null表示一個“空”的值，它和0以及空字符串’‘不同，0是一個數值，’'表示長度爲0的字符串，而null表示“空
2）而undefined表示值未定義。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。
（5）數組：Array：數組是一組按順序排列的集合，集合的每個值稱爲元素。JavaScript的數組可以包括任意數據類型。（類型爲Object）
var x = new Array(1, 2, 3.14, 'Hello', null, true); //不建議
var x = [1, 2, 3.14, 'Hello', null, true];
//訪問數組元素
var y = x[0];
//修改數組元素
x[0] = 0;
//獲取數組長度
len = x.length;
//訪問完整數組
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; //Audi,BMW,porsche
//遍歷數組元素
for (i = 0; i <x.length; i++) {
console.log(x[i]);
}
//向數組中添加元素
//方法1
x.push("ceshi");
//方法2
x[x.length] = "ceshi";
//把數組轉換爲（逗號分隔）的字符串
x.toString();
//把數組轉換爲（任意符號分隔）的字符串
x.join(" * ") // 以 * 分隔
//從數組中刪除最後一個元素
x.pop()
var y=x.pop() //獲取刪除的元素
//（在數組結尾處）向數組添加一個新的元素
x.push();
//splice()方法，第一個參數（2）定義了應添加新元素的位置（拼接）
//第二個參數（0）定義應刪除多少元素。
//其餘參數（“abc”，“efg”）定義要添加的新元素
x.splice(2, 2, "Lemon", "Kiwi");
//通過合併（連接）現有數組來創建一個新數組
var y = [1,2,3,4,5,6]
var z = x.concat(y)
var m = x.concat(y,z)
//數組切片，從開始參數選取元素，直到結束參數（不包括）爲止
var y=x.slice(1, 3) //返回原數組中1,2位置的值
//以字母順序對數組進行排序，首字母的ASCII碼
x.sort();
//反轉數組中的元素
x.reverse();
（5）對象：Object，對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
//屬性的訪問
person.name;
person["name"];
//遍歷對象的屬性
for (i in person){
console.log(x[i]);
}
//從對象中刪除屬性,將會同時刪除屬性名和屬性值
delete person.age
3.2.5 函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。當調用該函數時，會執行函數內的代碼。可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），並且可由 JavaScript 在任何位置進行調用。
語法
function functionname(參數1, 參數 2, 參數 3) {
要執行的代碼
}
var x = myFunction(4, 3); // 調用函數，返回值被賦值給 x
function myFunction(a, b) {
return a * b; // 函數返回 a 和 b 的乘積
}
3.2.6 運算符
（1）算數運算符
當 y = 5
（2）賦值運算符
（3）比較運算符
當x=5
（4）邏輯運算符
（5）條件運算
variablename=(condition)?value1:value2
//滿足條件voteable=“年齡太小”，反之voteable=“年齡已達到”
voteable=(age<18)?"年齡太小":"年齡已達到";
3.2.7 控制語句
（1）條件語句：
//if 語句
if (time<20){
x="Good day";
}
// if else語句
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
//if else if else語句
if (time<10){
x = "早上好";
}
else if (time>=10 && time<18){
x = "下午好";
}
else{
x = "晚上好";
}
（2）switch語句：
// 變量d與switch中的case後的數字進行比較，匹配則執行後面的語句，並且使用break退出循環
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
//若匹配不到則會執行default後面的代碼
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default: x="期待週末";
}
（3）for循環語句
var cars=["BMW","audi","benc"]
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
//for in 循環，用於遍歷對象
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 爲屬性名
{
txt=txt + person[x];
}
（4）while循環
var x=15,i=3;
while (i<5){
x=x+i ;
i++;
}
//即使條件不滿足，也會執行一次do語句
var i = 3 , x = 20;
do{
x=x + i;
i++;
}
while (i<5);
（5）break與continue
break：跳出整個循環，剩下的循環不會被執行
continue：跳出當前循環，進入到下一循環。
3.2.8 類型轉換
（1）typeof：獲取變量的類型
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
（2） String() ：將數字轉化爲字符串
String(x) // 將變量 x 轉換爲字符串並返回
String(123) // 將數字 123 轉換爲字符串並返回
String(100 + 23) // 將數字表達式轉換爲字符串並返回
（3） Number()：將字符串轉換爲數字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
3.3 事件
HTML 事件可以是瀏覽器行爲，也可以是用戶行爲。以下是 HTML 事件的實例：HTML 頁面完成加載、HTML input 字段改變時、HTML 按鈕被點擊
3.4 正則表達式
正則表達式是由一個字符序列形成的搜索模式。當你在文本中搜索數據時，你可以用搜索模式來描述你要查詢的內容。3.4.1 語法
/正則表達式主體/修飾符(可選)
//runoob 是一個正則表達式主體 (用於檢索)。
//i 是一個修飾符 (搜索不區分大小寫)。
var patt = /runoob/i
3.4.2 字符串方法
（1）search()： 用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置
//在str中尋找 Runoob 串，並返回成功匹配的起始位置
//方法1：
var str = "Visit Runoob!";
var n = str.search(/Runoob/i); //6
//方法2：將正則表達式寫成字符串的形式，字符串參數會轉換爲正則表達式
var n = str.search("Runoob");
（2）replace()
//使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換爲 Runoob
var txt = str.replace(/microsoft/i,"Runoob");
var txt = str.replace("Microsoft","Runoob");
（3）匹配模式
（4）test()：test() 方法是一個正則表達式方法。test() 方法用於檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
//搜索字符串中是否存在字符 "e"
var patt = /e/;
patt.test("The best things in life are free!");
（5）exec()： 用於檢索字符串中的正則表達式的匹配。該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值爲 null
/e/.exec("The best things in life are free!");
（6）驗證表單實例
/*是否帶有小數*/
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校驗是否中文名稱組成 */
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定義驗證表達式*/
return reg.test(str); /*進行驗證*/
}
/*校驗是否全由8位數字組成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定義驗證表達式*/
return reg.test(str); /*進行驗證*/
}
/*校驗電話碼格式 */
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
/*校驗郵件地址是否合法 */
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
3.5 異常處理
當 JavaScript 引擎執行 JavaScript 代碼時，會發生各種錯誤。 可能是語法錯誤，通常是程序員造成的編碼錯誤或錯別字。可能是拼寫錯誤或語言中缺少的功能（可能由於瀏覽器差異）。可能是由於來自服務器或用戶的錯誤輸出而導致的錯誤當錯誤發生時，當事情出問題時，JavaScript 引擎通常會停止，並生成一個錯誤消息。
3.5.1 語法
try {
... //異常的拋出
} catch(e) {
... //異常的捕獲與處理
} finally {
... //結束處理
}
（1）try：存放我們正常的代碼邏輯。
//正常代碼
try{
var msg = "這是一條消息";
alert(msg);
}
（2）catch：若上述代碼在運行中出現錯誤，則執行本語句下的代碼，若無錯誤，不執行。
//此時不小心將 alert（）方法名寫錯了
try{
var msg = "這是一條消息";
alerts(msg);
}
//捕獲上述的代碼錯誤err 以及其錯誤信息err.message
//執行該段代碼
catch(err) {
var txt+="錯誤描述：" + err.message + "\n\n";
alert(txt);
}
（3）finally： 語句在 try 和 catch 語句之後，無論是否有觸發異常，該語句都會執行。
finally {
document.getElementById("demo").value = "test";
}
3.6 調試工具
代碼編寫過程中可能包含語法錯誤，邏輯錯誤，如果沒有調試工具，這些錯誤比較難於發現。通常，如果 JavaScript 出現錯誤，是不會有提示信息，這樣你就無法找到代碼錯誤的位置，所以需要用到調試工具。
瀏覽器啓用調試工具一般是按下 F12 鍵，並在調試菜單中選擇 “Console” 。
可以使用console.log() 方法在調試窗口上打印 JavaScript 值
a = 5;
b = 6;
c = a + b;
console.log(c);
設置斷點：
debugger 關鍵字用於停止執行 JavaScript，並調用調試函數。
這個關鍵字與在調試工具中設置斷點的效果是一樣的。
如果沒有調試可用，debugger 語句將無法工作。
開啓 debugger ，代碼在第三行前停止執行。
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
3.8 this關鍵字
面嚮對象語言中 this 表示當前對象的一個引用。在 JavaScript 中 this 不是固定不變的，它會隨着執行環境的改變而改變。
（1）在方法中，this 表示該方法所屬的對象。
（2）如果單獨使用，this 表示全局對象。
（3）在函數中，this 表示全局對象。
（4）在函數中，在嚴格模式下，this 是未定義的(undefined)。
（5）在事件中，this 表示接收事件的元素。
（6）類似 call() 和 apply() 方法可以將 this 引用到任何對象。
3.8.1 對象方法中的this
//this表示當前的person對象，可以通過this訪問對象的屬性，類似於python類中的self
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
3.8.2 函數中的this和單獨this
指向全局對象globe，例如在瀏覽器中指向window對象
3.9 json
JSON 是用於存儲和傳輸數據的格式。JSON 通常用於服務端向網頁傳遞數據 。
//使用 JavaScript 內置函數 JSON.parse() 將字符串轉換爲 JavaScript 對象
var text = '{ "name" : "joke", "age" : 12 }';
var obj = JSON.parse(text);
javascript:void(0) 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值
<a href="javascript:void(0)">單擊此處什麼也不會發生</a>
href="#"與href="javascript:void(0)的區別
默認的錨是#top 也就是網頁的上端。
而javascript:void(0), 僅僅表示一個死鏈接。
在頁面很長的時候會使用 # 來定位頁面的具體位置，格式爲：# + id。
如果你要定義一個死鏈接請使用 javascript:void(0) 。
<a href="javascript:void(0);">點我沒有反應的!</a>
<a href="#pos">點我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位點</p>
命名規則
一般很多代碼語言的命名規則都是類似的，例如:
變量和函數爲小駝峯法標識, 即除第一個單詞之外，其他單詞首字母大寫（ lowerCamelCase）
全局變量爲大寫 (UPPERCASE )
常量 (如 PI) 爲大寫 (UPPERCASE )