網絡編程技術：第3章 JavaScript基礎_第1頁
網絡編程技術：第3章 JavaScript基礎_第2頁
網絡編程技術：第3章 JavaScript基礎_第3頁
網絡編程技術：第3章 JavaScript基礎_第4頁
網絡編程技術：第3章 JavaScript基礎_第5頁
已閱讀5頁，還剩40頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第3章JavaScript基礎3.1JavaScript簡介3.2JavaScript語言核心3.3JavaScript操作DOM3.4JavaScript操作BOM3.5JavaScript常用框架庫3.6JavaScript的其它應用3.1JavaScript簡介什么是JavaScript？JavaScript是一門高端的、動態的、弱類型的編程語言，非常適合面向對象和函數式的編程風格JavaScript被設計用來向HTML頁面添加交互行為html定義網頁的內容css定義網頁的布局外觀js定義網頁的行為JS是可插入HTML頁面的編程代碼，但現在一般寫成單獨的js文件，有利于結構和行為的分離跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行JavaScript與Java無關，ECMAScript是JavaScript的標準規范運行在瀏覽器3.1JavaScript簡介JavaScript能干什么？可以讀寫html元素可以修改樣式可以對瀏覽器事件作出響應可以在數據被提交到服務器之前驗證數據可以檢測用戶的瀏覽器信息可以控制cookies可以用于開發webapp還可以基于Node.js技術進行服務器編程……3.1JavaScript簡介JavaScript怎樣和HTML文檔結合？在HTML中嵌入JavaScript，也叫內部腳本HTML中的腳本必須位于<script>與</script>標簽之間。腳本可被放置在HTML頁面的<body>和<head>部分中。注：JavaScript是所有現代瀏覽器以及HTML5中的默認腳本語言，

<script>標簽中可以不再使用type="text/javascript"在HTML中引入外部Javascript文件外部JavaScript文件的文件擴展名是.js。需在<script>標簽的“src”屬性中設置該.js文件外部腳本不能包含<script>標簽3.2JavaScript語言核心JavaScript語法結構（一套說明如何使用語言的基礎規則）JavaScript使用Unicode字符集JavaScript對大小寫敏感關鍵字、變量、函數名和所有的標識符都需要采用一致的大小寫形式，如關鍵字“while”不能寫成“While”或“WHILE”注意區分html是大小寫不敏感的標識符必須以字母、_或$符號開頭，數字不能做首字母JavaScript注釋//單行注釋和/**/塊注釋使用可選的“分號”把語句隔開如果一條語句獨占一行，分號可省略，但不建議省略3.2JavaScript語言核心JavaScriptJavaScript使用Unicode字符集JavaScript對大小寫敏感關鍵字、變量、函數名和所有的標識符都需要采用一致的大小寫形式，如關鍵字“while”不能寫成“While”或“WHILE”注意區分html是大小寫不敏感的標識符必須以字母、_或$符號開頭，數字不能做首字母JavaScript注釋//單行注釋和/**/塊注釋使用可選的“分號”把語句隔開如果一條語句獨占一行，分號可省略，但不建議省略3.2JavaScript語言核心JavaScript數據類型JavaScript數據類型分為兩類：原始類型和對象類型原始類型數字、文本和布爾值兩個特殊的原始值：null和undefined對象類型對象是屬性的集合，每個屬性都有key-value對組成，value可以是原始值也可以是對象普通的js對象是“key-value”對的無序集合，js還定義了特殊的對象---數組，即有序集合。Js還定義了一種特殊的對象---函數3.2JavaScript語言核心JavaScript數據類型數字不區分整型浮點型，所有數字采用浮點數值表示‘+’、‘-’、‘*’、‘/’、‘%’求余還可通過Math對象進行復雜運算文本轉義字符：反斜線“\”字符串處理，拼接、截取、分割、替換等等3.2JavaScript語言核心JavaScript數據類型文本3.2JavaScript語言核心JavaScript數據類型布爾值true和false任意JavaScript的值都可以轉換為布爾值&&、||、！布爾值有toString方法3.2JavaScript語言核心JavaScript數據類型null用來描述空值typeof（null）返回“object”，說明可認為null是一個特殊的對象undefined未定義，typeof(undefined)返回"undefined“null==undefined為true不嚴格相等，進行類型轉換null===undefined為false嚴格相等3.2JavaScript語言核心JavaScript數據類型類型轉換JS支持靈活的自動類型轉換如：10+”objects”“7”*”4”顯式類型轉換，讓代碼更清晰易讀Number(“3”)x+“”等價于String(x)!!x等價于Boolean(x)3.2JavaScript語言核心JavaScript數據類型對象對象是一種復合值，它將很多值聚合在一起，對象可看做屬性的無序集合，屬性是一個key-value對，屬性名是字符串對象是動態的，可以新增和刪除屬性對象還可從原型對象繼承屬性，對象的方法通常是繼承的屬性。3.2JavaScript語言核心JavaScript變量變量使用前要先聲明，使用var關鍵字聲明不使用var的為全局變量變量類型會自己判斷一個好的編程習慣：在代碼開始處，統一對變量進行聲明。變量可以為任何數據類型vari=10;局部變量：在函數內聲明，只能在函數內部訪問全局變量：在函數外定義，網頁中所有腳本和函數均可使用。全局變量是全局對象的屬性，var聲明的全局變量無法通過delete刪除3.2JavaScript語言核心JavaScript變量函數體內，局部變量的優先級高于同名的全局變量。varscope="global";functioncheckscope(){varscope=“local”;returnscope;}checkscope();3.2JavaScript語言核心JavaScript表達式和運算符表達式是js中的一個短語，js解釋器會將其計算出一個結果常量是一種表達式變量名也是一種表達式，它的值就是賦給變量的值函數表達式定義了一個函數，它的值就是這個新定義的函數運算符算術運算比較運算相等：“==”可進行類型轉換嚴格相等：“===”邏輯運算賦值運算A=1andvara=13.2JavaScript語言核心JavaScript語句聲明語句var、function聲明變量或函數，定義標識符，是聲明語句條件語句：if、else、switch循環語句：while、do/while、for、for/in跳轉語句：break、continue、return、try/catch/finally3.2JavaScript語言核心JavaScript函數functionmyFunction(a,b)

{

returna*b;

}3.3JavaScript操作DOMDOM（DocumentObjectModel）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型DOM所有的HTML元素都是元素節點所有HTML屬性都是屬性節點。文本插入到HTML元素是文本節點。注釋是注釋節點。3.3JavaScript操作DOM

document對象當瀏覽器載入HTML文檔,它就會成為

document對象。document對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點,注釋節點）。document對象使我們可以從腳本中對HTML頁面中的所有元素進行訪問。Document對象屬性和方法示例：document.titledocument.getElementsByClassName()document.getElementById()document.getElementsByName()3.3JavaScript操作DOM

元素對象在HTMLDOM中,

元素對象代表著一個HTML元素。元素對象的

子節點可以是元素節點、文本節點、注釋節點。NodeList對象

代表了節點列表，類似于HTML元素的子節點集合。元素對象屬性和方法示例：element.attributeselement.childNodeselement.classlistelement.innerHTML3.3JavaScript操作DOM

屬性對象HTML屬性總是屬于HTML元素。屬性對象屬性和方法示例：attr.value3.3JavaScript操作DOM

事件對象HTMLDOM事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。鼠標事件、鍵盤事件、框架/對象事件表單事件、剪貼板事件、打印事件拖動事件、多媒體（Media）事件動畫事件、過渡事件、其它事件3.3JavaScript操作DOMDOMJavaScript能夠改變頁面中的所有HTML元素示例1JavaScript能夠改變頁面中的所有HTML屬性示例1JavaScript能夠改變頁面中的所有CSS樣式示例JavaScript能夠對頁面中的所有事件做出反應示例3.4JavaScript操作BOMBOM（Browser

Object

Model(BOM)）Window對象所有瀏覽器都支持window對象。它表示瀏覽器窗口。所有JavaScript全局對象、函數以及變量均自動成為window對象的成員。全局變量是window對象的屬性。全局函數是window對象的方法。甚至HTMLDOM的document也是window對象的屬性之一：3.4JavaScript操作BOMWindowScreenwindow.screen對象包含有關用戶屏幕的信息。寬度、高度WindowLocation獲得當前頁面的地址(URL)，并把瀏覽器重定向到新的頁面WindowHistory包含瀏覽器的歷史WindowNavigator瀏覽器信息3.4JavaScript操作BOM彈窗創建三種消息框：警告框、確認框、提示框alert()、confirm()、prompt()計時事件一個設定的時間間隔之后來執行代碼setInterval()和setTimeout()

Cookies可以使用

document.cookie

屬性來創建、讀取、及刪除cookies3.5JavaScript常用框架庫3.5.1JqueryjQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。jQuery庫包含以下功能：HTML元素選取與操作CSS操作HTML事件函數JavaScript特效和動畫HTMLDOM遍歷和修改AJAX以及其它Utilities3.5JavaScript常用框架庫3.5.1Jquery開發版和發布版發布版是被精簡和壓縮的，部署方式放在自己的Web服務器上<scriptsrc="jquery-1.10.2.min.js"></script>從CDN中載入jQuery<scriptsrc=/jquery/1.10.2/jquery.min.js></script>3.5JavaScript常用框架庫3.5.1JqueryjQuery

語法Query語法是通過選取HTML元素，并對選取的元素執行某些操作。基礎語法：

$(selector).action()美元符號定義jQuery選擇符（selector）"查詢"和"查找"HTML元素jQuery的action()執行對元素的操作3.5JavaScript常用框架庫3.5.1JqueryjQuery

語法基礎語法：

$(selector).action()實例:$(this).hide()-隱藏當前元素$("p").hide()-隱藏所有<p>元素$("p.test").hide()-隱藏所有class="test"的<p>元素$(“#test”).hide()-隱藏所有id=“test”的元素3.5JavaScript常用框架庫3.5.1JqueryjQuery

語法為了防止文檔在完全加載（就緒）之前運行jQuery代碼，所有jQuery函數需位于一個documentready函數中$(document).ready(function(){

//jQuerymethodsgohere...

});3.5JavaScript常用框架庫3.5.1JqueryjQuery

選擇器元素選擇器：基于元素名選擇$(

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論