avascript，從“最被誤解的語言”，最后神奇地轉變成為“最流行的語言”，證明它經受得起時間的考驗。雖然單獨來看，它的交互設計有些失敗，但是加上Ajax的完美配合，javascript就成了一款輕便并且又實用的好語法。

如果想要更高效、更系統地學會javascript，最好采用邊學邊練的學習模式。

如果覺得javascript的學習難度較高，不易理解，建議采用視頻的方式進行學習：

Web前端開發零基礎入門HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

JavaScript概述

（1）簡稱JS

（2）一種腳本語言，腳本語言的特點

Java語言是一種非腳本語言，屬于編譯型語言。

JavaScript語言是一種腳本語言（解釋型語言），JavaScript的“目標程序”是以普通文本的形式保存。用記事本是可以直接打開的。瀏覽器打開就直接解釋執行了。

（3）JavaScript和JScript的關系

JavaScript是網景公司開發的，javascript之父是 布蘭登艾奇。JavaScript前身叫做LiveScript。當時網景公司開發JavaScript的目的是為了占領“瀏覽器”市場。網景公司有一個瀏覽器，當時非常著名：領航者瀏覽器Navigator。JavaScript語言是為領航者瀏覽器專門量身打造的。JavaScript只支持Navigator瀏覽器，其它瀏覽器不支持。這個時候微軟慌了，馬上組建團隊，開發了一種編程語言叫做Jscript，專門和JavaScript抗衡的，只支持IE瀏覽器。網景公司在某個歷史階段，和SUN公司有合作，SUN公司把LiveScript改名為JavaScript。

（4）JavaScript主要用來操作HTML中的節點，產生動態效果

JavaScript是一門編程語言，專門用來操作HTML頁面中的節點，讓網頁產生動態效果的。JavaScript中也有變量、數據類型、運算符、if語句、for循環、標識符、關鍵字等。

（5）JavaScript和Java的區別

JavaScript運行在瀏覽器當中，瀏覽器中有執行JS代碼的內核。

Java運行在JVM當中。JavaScript和Java沒有任何關系。

Java語言是SUN公司開發的，JavaScript這個名字是SUN公司給起的名。

JavaScript選擇是對的，真的搭上了Java的順風車！

JavaScript包括三塊：ECMAScript、DOM、BOM

（1）ECMAScript是ECMA制定的262標準，JavaScript和JScript都遵守這個標準，ECMAScript是JavaScript核心語法

（2）DOM編程是通過JavaScript對HTML中的dom節點進行操作，DOM是有規范的，DOM規范是W3C制定的。（Document Object Model：文檔對象模型）

（3）BOM編程是對瀏覽器本身操作，例如：前進、后退、地址欄、關閉窗口、彈窗等。由于瀏覽器有不同的廠家制造，所以BOM缺少規范，一般只是有一個默認的行業規范。（Browser Object Model：瀏覽器對象模型）

嵌入JS三種方式以及JS的注釋

• 行間事件

（1）<input type="button" value="hello" onclick="window.alert('hello js')" />

（2）JS是一種基于事件驅動型的編程語言，當觸發某個事件之后，執行一段代碼

（3）JS中的任何一個事件都對應一個事件句柄，例如鼠標單擊事件click，對應的事件句柄就是onclick，事件句柄都是以標簽的屬性方式存在。在事件句柄后面可以編寫JS代碼，當觸發這個事件之后，這段JS代碼則執行了。

（4）JS中的字符串可以使用單引號括起來，也可以使用雙引號括起來

（5）window是JS中的內置BOM頂級對象，代表當前瀏覽器窗口，window對象有一個alert()函數，該函數可以在瀏覽器上彈出消息框。

（6）JS中的一條語句結束后可以使用“;”結尾，也可以不寫。

（7）window.alert()中的window.可以省略。

• 頁面script標簽嵌入

（1）<script type="text/javascript">JS代碼</script>

（2）window.alert()的執行會阻塞當前頁面的加載

（3）一個頁面中可以寫多個腳本塊

（4）腳本塊的位置沒有限制

（5）暴露在腳本塊中的JS代碼在頁面打開的時候遵循自上而下的順序依次逐行執行

• 外部引入

（1）<script type="text/javascript" src="js文件路徑"></script>

（2）<script type="text/javascript" src="js文件路徑">這里不能寫JS代碼</script>

（3）這種寫法錯誤：<script type="text/javascript" src="js文件路徑"/>

標識符和關鍵字

（1）標識符命名規則和規范按照java執行

（2）關鍵字不需要刻意記

變量

• 變量的聲明與賦值

（1）變量未賦值，系統默認賦值undefined

（2）JS是一種弱類型編程語言，一個變量可以接收任何類型的數據

（3）一行上也可以聲明多個變量

• 函數的定義與調用

（1）函數類似于java語言中的方法，是一段可以完成某個功能的可以被重復利用的代碼片段

（2）定義函數的兩種語法

第一種：普通函數定義，這種方式較多

function 函數名(形式參數列表){

函數體;

}

例如：

function sum(a, b){
return a + b;
}

注意：

a和b是形式參數列表，也是兩個局部變量。

JS中的函數不需要指定返回值類型，因為JS是弱類型編程語言，變量可以接收任何類型的數據，也就是說JS中的函數可以返回任何類型的數據，當然也可以不返回任何數據。返回數據使用return語句。

JS中的函數在調用的時候，實參可以隨意，例如調用以上的sum函數，可以這樣調用：sum()，沒有傳任何實參的時候a和b變量沒有賦值，則a和b都是undefined。也可以這樣調用sum(10)，這樣就表示a變量賦值10，b變量仍然是undefined。還可以這樣調用：sum(1,2)，這樣則表示a是1，b是2。

第二種：如果是把函數的聲明當做類進行定義這種方式較多

函數名 = function(形式參數列表){

函數體;

}

例如：

sum = function(a, b){
return a + b;
}

（3）JS中的函數定義在腳本塊中，頁面在打開的時候，函數并不會自動執行，函數是需要手動調用才能執行的。

（4）由于JS是一種弱類型編程語言，所以函數不能同名，沒有重載機制

（5）這樣的代碼順序是可以的，頁面打開的時候會先進行所有函數的聲明，函數聲明優先級較高。

<script type="text/javascript">
sayHello();
function sayHello(){
alert("Hello JS");
}
</script>

（6）用戶點擊按鈕，調用函數

<script type="text/javascript">
function sayHello(){
alert("hello js");
}
</script>
<input type="button" value="hello" onclick="sayHello();"/>

• 局部變量和全局變量

（1）局部變量：函數的形參是局部變量，另外使用var關鍵字在函數體中聲明的變量是局部變量，函數執行結束之后，局部變量的內存就釋放了。

（2）全局變量：在函數體外聲明的變量屬于全局變量，另外不使用var關鍵字聲明的變量無論位置在哪，它都是全局變量，全局變量在瀏覽器關閉時銷毀。

JS數據類型

• typeof運算符
• JS中為什么會有typeof運算符
• typeof運算符怎么用，代碼怎么寫

語法格式是：

function sum(a, b){
if("number" === typeof a && "number"=== typeof b){
return a + b;
}
alert("數據格式不合法");
return 0;
}

typeof運算符的運算結果都是全部小寫的字符串

"undefined"

"number"

"string"

"boolean"

"object"

"function"

ES6版本之前的數據類型有6種

• Undefined

只有一個值undefined，變量聲明沒賦值，系統默認賦值undefined

• Number

（1）Number類型包括哪些值：0,1，-1,3.14,12,300，NaN，Infinity

（2）parseInt()函數

（3）parseFloat()函數

（4）Math.ceil()函數：向上取整

（5）isNaN()函數

• String

（1）可以使用單引號，也可以用雙引號

（2）JS中的字符串包括小String，也包括大String，小String屬于原始類型，大String是JS的內置對象，大String屬于Object類型。

（3）無論大String還是小String，它們的屬性和方法都是通用的。

（4）字符串中常用方法講一些，主要講解字符串的substr()和substring()的區別。

• Null

（1）該類型只有一個值：null

（2）typeof運算符的執行結果是"object"

• Boolean

（1）只有兩個值：true和false

（2）Boolean()函數

（3）JS中的if語句自動調用Boolean()函數。

• Object

（1）JS中如何定義一個類。

（2）JS中如何創建一個對象。

（3）JS中如何訪問對象屬性，調用對象的方法。

（4）JS中的一個函數，既是函數聲明，又是類的定義，同時函數名也可以看做構造方法名。直接調用函數表示普通函數調用，如果使用new運算符來調用該函數則會創建對象。

（5）使用prototype屬性動態的給對象擴展屬性以及方法。

• ES6版本及之后包括的數據類型有8種

除了以上6種類型之外，還有兩種類型分別叫做：Symbol和BigInt

null NaN undefined區別

（1）=、==、===三者的區別

（2）null NaN undefined三者類型不同，null和undefined的值可以等同

JS中的事件

• 常用事件

（1）blur失去焦點

（2）change下拉列表選中項改變，或文本框內容改變

（3）click鼠標單擊

（4）dblclick鼠標雙擊

（5）focus獲得焦點

（6）keydown鍵盤按下

（7）keyup鍵盤彈起

（8）load頁面加載完畢

（9）mousedown鼠標按下

（10）mouseover鼠標經過

（11）mousemove鼠標移動

（12）mouseout鼠標離開

（13）mouseup鼠標彈起

（14）reset表單重置

（15）select文本被選定

（16）submit表單提交

• 注冊事件的兩種方式

（1）在標簽中使用事件句柄的方式注冊事件

<body onload="sayHello()"></body>

（2）在頁面加載完畢后使用JS代碼給元素綁定事件

<script>
window.onload = sayHello;
</script>
 
<script>
window.onload = function(){
 
}
</script>

重點：通過事件注冊，理解回調函數的概念

• 代碼的執行順序

這是一種錯誤的寫法：

<body>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
<input type="button" id="btn" value="mybtn"/>
</body>

這樣寫：

<body>
<input type="button" id="btn" value="mybtn"/>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
</body>

或者這樣寫：

<body>
<script type="text/javascript">
window.onload = function(){
var elt = document.getElementById("btn");
}
</script>
<input type="button" id="btn" value="mybtn"/>
</body>

• 通過keydown事件演示回車鍵13，ESC鍵27

JS運算符之void

運算符就講這一個，告訴學生其它運算符和java一樣用。void主要講：javascript：void(0)的用法。

JS之控制語句

告訴學生控制語句和Java一樣用，課堂上不再講解。只講一下for..in語句的使用，使用for..in語句遍歷數組，以及遍歷一個對象的屬性。

JS內置對象

• Array

（1）創建數組

（2）JS中的數組特點

（3）JS中數組對象常用方法：push，pop，join，reverse等。

（4）數組遍歷

• Date

（1）new Date() 獲取當前系統時間

（2）new Date().getTime()獲取時間戳

（3）new Date().getFullYear()、getMonth()等方法。

BOM和DOM的區別與聯系

BOM: Browser Object Model（瀏覽器對象模型），通過BOM的對象和方法可以完成瀏覽器窗口的操作，例如：關閉瀏覽器，前進，后退，修改地址欄上的地址等，這些操作都屬于BOM。BOM的頂級內置對象是window。

DOM: Document Object Model（文檔對象模型），通過DOM的對象和方法可以完成網頁中元素的增刪改，讓網頁產生動態效果，DOM的頂級內置對象是document。

DOM編程案例

• innerHTML innerText操作div和span
• JS的正則表達式(Regular Expression)
• 正則表達式概述

（1）正則表達式是一門獨立的學科，不止用在JS中

（2）正則表達式專門用來做字符串格式匹配的

• 常用的正則表達式符號

參考30分鐘入門正則表達式：

^ 字符串開始

$ 字符串結束

\s 空白

* 0~N次

+ 1~N次

? 0或1次

{3} 3次

{3,} 3~N次

{3,5} 3~5次

(a|b) a或b

[a-z] a到z

[^abc] 不是abc

• 會寫簡單的正則表達式

（1）qq號正則

（2）必須由數字和字母組成，不能含有其它符號的正則

（3）給學生一些常用的正則表達式

• 會創建JS中的正則表達式對象

（1）var regExp = new RegExp("^[1-9][0-9]{4,}$");

（2）var regExp = /^[1-9][0-9]{4,}$/;

• 會調用JS中正則表達式對象的test()函數

寫一個校驗用戶名只能由數字和字母組成的案例

• 表單驗證

（1）用戶名不能為空

（2）用戶名必須在6-14位之間

（3）用戶名只能由數字和字母組成，不能含有其它符號（正則表達式）

（4）密碼和確認密碼一致，郵箱地址合法。

（5）統一失去焦點驗證

（6）錯誤提示信息統一在span標簽中提示，并且要求字體12號，紅色。

（7）文本框再次獲得焦點后，清空錯誤提示信息，如果文本框中數據不合法要求清空文本框的value

（8）最終表單中所有項均合法方可提交

• 復選框全選和取消全選

document.getElementById()

document.getElementsByName()

document.getElementsByTagName()

以上三個函數告知學生很重要

• 獲取下拉列表選中項的value

change事件

• 顯示網頁時鐘

window.setInterval()

window.clearInterval()

主要兩個函數

捎帶著提一下window.setTimeout()

• 拼接html的方式，設置table的tbody

<table>
<thead></thead>
<tbody id="userListTbody"></tbody>
</table>
<script>
var html = "";
html += "<tr>";
html += "<td>";
html += "zhangsan";
html += "</td>";
html += "<td>";
html += "2000-10-11";
html += "</td>";
html += "</tr>";
 
html += "<tr>";
html += "<td>";
html += "lisi";
html += "</td>";
html += "<td>";
html += "2001-10-11";
html += "</td>";
html += "</tr>";
 
var userListTbody = document.getElementById("userListTbody");
userListTbody.innerHTML = html;
<script>

• 要求學生在此之后會使用瀏覽器的F12

會使用F12調試面板：第一會調錯；第二會定位并查看HTML頁面元素。

BOM編程案例

• window.open()和window.close()
• window.alert()和window.confirm()
• 如果當前窗口不是頂級窗口，將當前窗口設置為頂級窗口

if(window.top != window.self){
window.top. location = window.self. location;
}

• 歷史記錄

window.history.back(); window.history.go(-1); window.history.go(1);

• window.location.href

提示一下document.location.href也可以完成同樣功能

JSON對象

• eval函數
• 怎么創建json對象以及訪問json對象的屬性
• json在開發中有什么用

數據交換作用

• 寫一個這樣的JSON

描述一個班級的總人數，另外包括描述班級中每個學生的信息，這樣的JSON怎么寫

• JS中[]和{}的區別

總結一下瀏覽器向服務器發送請求的常見方式

（1）直接在瀏覽器地址欄上寫URL，get請求。

（2）點擊頁面超鏈接，get請求。

（3）提交form表單，可以是get，也可以是post。

（4）window.open(url);

（5）window.location.href=url;

（6）document.location.href=url;