第3章 JavaScript基礎(chǔ)

1、3.1 JavaScript簡介3.2 JavaScript語言核心3.3 JavaScript操作DOM3.4 JavaScript操作BOM3.5 JavaScript常用框架庫3.6 JavaScript的其它應(yīng)用什么是JavaScript？JavaScript是一門高端的、動態(tài)的、弱類型的編程語言，非常適合面向?qū)ο蠛秃瘮?shù)式的編程風(fēng)格JavaScript被設(shè)計用來向HTML頁面添加交互行為html定義網(wǎng)頁的內(nèi)容css定義網(wǎng)頁的布局外觀js定義網(wǎng)頁的行為JS是可插入 HTML 頁面的編程代碼，但現(xiàn)在一般寫成單獨的js文件，有利于結(jié)構(gòu)和行為的分離跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多

2、種平臺下運行JavaScript與Java無關(guān)，ECMAScript是JavaScript的標(biāo)準(zhǔn)規(guī)范運行在瀏覽器JavaScript能干什么？可以讀寫html元素可以修改樣式可以對瀏覽器事件作出響應(yīng)可以在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)可以檢測用戶的瀏覽器信息可以控制cookies可以用于開發(fā)webapp還可以基于Node.js技術(shù)進(jìn)行服務(wù)器編程JavaScript怎樣和HTML文檔結(jié)合？在HTML中嵌入JavaScript，也叫內(nèi)部腳本HTML 中的腳本必須位于 與 標(biāo)簽之間。腳本可被放置在 HTML 頁面的 和 部分中。注：JavaScript 是所有現(xiàn)代瀏覽器以及 HTML5 中的默認(rèn)腳本

3、語言， 標(biāo)簽中可以不再使用 type=text/javascript在HTML中引入外部Javascript文件外部 JavaScript 文件的文件擴(kuò)展名是 .js。需在 標(biāo)簽的 “src” 屬性中設(shè)置該 .js 文件外部腳本不能包含 標(biāo)簽JavaScript語法結(jié)構(gòu)（一套說明如何使用語言的基礎(chǔ)規(guī)則）JavaScript 使用 Unicode 字符集JavaScript 對大小寫敏感關(guān)鍵字、變量、函數(shù)名和所有的標(biāo)識符都需要采用一致的大小寫形式，如關(guān)鍵字“while”不能寫成“While”或“WHILE”注意區(qū)分html是大小寫不敏感的標(biāo)識符必須以字母、 _ 或$符號開頭，數(shù)字不能做首字母Ja

4、vaScript 注釋/ 單行注釋 和 /* */塊注釋使用可選的“分號”把語句隔開如果一條語句獨占一行，分號可省略，但不建議省略JavaScriptJavaScript 使用 Unicode 字符集JavaScript 對大小寫敏感關(guān)鍵字、變量、函數(shù)名和所有的標(biāo)識符都需要采用一致的大小寫形式，如關(guān)鍵字“while”不能寫成“While”或“WHILE”注意區(qū)分html是大小寫不敏感的標(biāo)識符必須以字母、 _ 或$符號開頭，數(shù)字不能做首字母JavaScript 注釋/ 單行注釋 和 /* */塊注釋使用可選的“分號”把語句隔開如果一條語句獨占一行，分號可省略，但不建議省略JavaScript數(shù)據(jù)

5、類型JavaScript數(shù)據(jù)類型分為兩類：原始類型和對象類型原始類型數(shù)字、文本和布爾值兩個特殊的原始值：null 和undefined對象類型對象是屬性的集合，每個屬性都有key-value對組成，value可以是原始值也可以是對象普通的js對象是“key-value”對的無序集合，js還定義了特殊的對象-數(shù)組，即有序集合。Js還定義了一種特殊的對象-函數(shù)JavaScript數(shù)據(jù)類型數(shù)字不區(qū)分整型浮點型，所有數(shù)字采用浮點數(shù)值表示+、-、*、/、 %求余還可通過Math對象進(jìn)行復(fù)雜運算文本轉(zhuǎn)義字符：反斜線“”字符串處理，拼接、截取、分割、替換等等JavaScript數(shù)據(jù)類型文本JavaScrip

6、t數(shù)據(jù)類型布爾值true 和 false任意JavaScript的值都可以轉(zhuǎn)換為布爾值&、 |、！布爾值有toString方法JavaScript數(shù)據(jù)類型null用來描述空值typeof（null）返回“object”，說明可認(rèn)為null是一個特殊的對象undefined未定義，typeof(undefined)返回undefined“null = undefined 為true 不嚴(yán)格相等，進(jìn)行類型轉(zhuǎn)換null = undefined 為false 嚴(yán)格相等JavaScript數(shù)據(jù)類型類型轉(zhuǎn)換JS支持靈活的自動類型轉(zhuǎn)換如：10+”objects”“7”*”4”顯式類型轉(zhuǎn)換，讓代碼更清晰易讀N

7、umber(“3”)x + “” 等價于 String(x)!x 等價于Boolean(x)JavaScript數(shù)據(jù)類型對象對象是一種復(fù)合值，它將很多值聚合在一起，對象可看做屬性的無序集合，屬性是一個key-value對，屬性名是字符串對象是動態(tài)的，可以新增和刪除屬性對象還可從原型對象繼承屬性，對象的方法通常是繼承的屬性。JavaScript變量變量使用前要先聲明，使用var關(guān)鍵字聲明不使用var的為全局變量 變量類型會自己判斷一個好的編程習(xí)慣：在代碼開始處，統(tǒng)一對變量進(jìn)行聲明。變量可以為任何數(shù)據(jù)類型var i=10; 局部變量：在函數(shù)內(nèi)聲明，只能在函數(shù)內(nèi)部訪問全局變量：在函數(shù)外定義，網(wǎng)頁中所

8、有腳本和函數(shù)均可使用。全局變量是全局對象的屬性，var聲明的全局變量無法通過delete刪除JavaScript變量函數(shù)體內(nèi)，局部變量的優(yōu)先級高于同名的全局變量。var scope = global;function checkscope()var scope = “l(fā)ocal”;return scope;checkscope();JavaScript表達(dá)式和運算符表達(dá)式是js中的一個短語，js解釋器會將其計算出一個結(jié)果常量是一種表達(dá)式變量名也是一種表達(dá)式，它的值就是賦給變量的值函數(shù)表達(dá)式定義了一個函數(shù)，它的值就是這個新定義的函數(shù)運算符算術(shù)運算比較運算 相等：“=”可進(jìn)行類型轉(zhuǎn)換 嚴(yán)格相等：“

9、=”邏輯運算賦值運算A=1 and var a=1JavaScript語句聲明語句var、function聲明變量或函數(shù)，定義標(biāo)識符，是聲明語句條件語句：if、else、switch循環(huán)語句：while、do/while、for、for/in跳轉(zhuǎn)語句：break、continue、return、try/catch/finallyJavaScript函數(shù)function myFunction(a,b)return a*b;DOM（Document Object Model）當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型DOM所有的HTML元素都是元素節(jié)點所有 HTML 屬性都是屬性節(jié)點。文本插入

10、到 HTML 元素是文本節(jié)點。注釋是注釋節(jié)點。document 對象當(dāng)瀏覽器載入 HTML 文檔, 它就會成為document 對象。document 對象是HTML文檔的根節(jié)點與所有其他節(jié)點（元素節(jié)點，文本節(jié)點，屬性節(jié)點, 注釋節(jié)點）。document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。Document 對象屬性和方法示例：document.titledocument. getElementsByClassName()document.getElementById()document.getElementsByName()元素對象在 HTML DOM 中,元素對象

11、代表著一個 HTML 元素。元素對象 的子節(jié)點可以是元素節(jié)點、文本節(jié)點、注釋節(jié)點。NodeList 對象代表了節(jié)點列表，類似于 HTML元素的子節(jié)點集合。元素對象屬性和方法示例：element.attributeselement.childNodeselement.classlistelement.innerHTML屬性對象HTML屬性總是屬于HTML元素。屬性對象屬性和方法示例： attr.value 事件對象HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。鼠標(biāo)事件、鍵盤事件、框架/對象事件表單事件、剪貼板事件、打印事件拖動事件、多媒

12、體（Media）事件動畫事件、過渡事件、其它事件DOMJavaScript 能夠改變頁面中的所有 HTML 元素示例1JavaScript 能夠改變頁面中的所有 HTML 屬性示例1JavaScript 能夠改變頁面中的所有 CSS 樣式示例JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)示例BOM （B BrowserO ObjectMModel (BOM)）Window對象所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。全局變量是 window 對象的屬性。全局函數(shù)是 window 對象的方

13、法。甚至 HTML DOM 的 document 也是 window 對象的屬性之一：Window Screenwindow.screen 對象包含有關(guān)用戶屏幕的信息。寬度、高度Window Location獲得當(dāng)前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面Window History包含瀏覽器的歷史Window Navigator瀏覽器信息彈窗創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框alert() 、 confirm()、 prompt()計時事件一個設(shè)定的時間間隔之后來執(zhí)行代碼setInterval() 和 setTimeout()Cookies可以使用document.cookie

14、document.cookie屬性來創(chuàng)建 、讀取、及刪除 cookies3.5.1 JqueryjQuery是一個JavaScript函數(shù)庫。jQuery是一個輕量級的寫的少，做的多的JavaScript庫。jQuery庫包含以下功能：HTML 元素選取與操作CSS 操作HTML 事件函數(shù)JavaScript 特效和動畫HTML DOM 遍歷和修改AJAX 以及其它 Utilities3.5.1 Jquery開發(fā)版和發(fā)布版發(fā)布版是被精簡和壓縮的，部署方式放在自己的Web服務(wù)器上從CDN中載入jQuery3.5.1 JqueryjQuery語法Query 語法是通過選取 HTML 元素，并對選取

15、的元素執(zhí)行某些操作?；A(chǔ)語法：$(selector).action()美元符號定義 jQuery選擇符（selector）查詢和查找 HTML 元素jQuery 的 action() 執(zhí)行對元素的操作3.5.1 JqueryjQuery語法基礎(chǔ)語法：$(selector).action()實例:$(this).hide() - 隱藏當(dāng)前元素$(p).hide() - 隱藏所有 元素$(p .test).hide() - 隱藏所有 class=test 的 元素$(“#test”).hide() - 隱藏所有 id=“test” 的元素3.5.1 JqueryjQuery語法為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，所有 jQuery 函數(shù)需位于一個 document ready 函數(shù)中$(document).ready(function()/ jQuery methods go here.);3.5.1 JqueryjQuery選擇器元素選擇器：基于元素名選擇$(document).ready(function() $(button).click(function() $(p).hide(); ););#id 選擇器：通過 HTML 元素的 id 屬性選取指定的元素.class