Web 前端開發技術（HTML5+CSS3+JavaScript+jQuery） 課件 項目七　 JavaScript 基礎_第1頁
Web 前端開發技術（HTML5+CSS3+JavaScript+jQuery） 課件 項目七　 JavaScript 基礎_第2頁
Web 前端開發技術（HTML5+CSS3+JavaScript+jQuery） 課件 項目七　 JavaScript 基礎_第3頁
Web 前端開發技術（HTML5+CSS3+JavaScript+jQuery） 課件 項目七　 JavaScript 基礎_第4頁
Web 前端開發技術（HTML5+CSS3+JavaScript+jQuery） 課件 項目七　 JavaScript 基礎_第5頁
已閱讀5頁，還剩28頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

JavaScript基礎Web前端開發技術篇3：JavaScript技術

本項目介紹JavaScript的概念和引入方式,以及JavaScript的數據與運算符。通過學習JavaScript編程的語法規則,引導學生養成遵守規章制度的習慣,理解做人做事都需要遵守規則,同時了解Web前端開發的多種編程語言和技術,認識到事物之間的內在聯系,正確認識世界。序言目錄CONTENTSJavaScript概述JavaScript引入方式JavaScript編程基礎01020303JavaScript數據與運算符01JavaScript概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.JavaScript概述JavaScript是一種輕量級直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分。它是廣泛用于客戶端的腳本語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態功能。在HTML基礎上,使用JavaScript可以開發交互式Web頁面。JavaScript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系,使網頁包含更多活躍的元素和更加精彩的內容。1995年,JavaScript由Netscape公司(已被AOL公司收購)的BrendanEich(布蘭登·艾奇)在網景導航者瀏覽器上首次設計實現。最初命名為LiveScript,后來Netscape公司與Sun公司進行合作,將LiveScript改名為JavaScript。JavaScript在設計之初受到了Java的啟發,因此在語法上與Java有很多類似之處,并借用了許多Java的名稱和命名規范。JavaScript概述JavaScript概述一個完整的JavaScript實現由3個部分組成:核心(ECMAScript)、文檔對象模型(DocumentObjectModel,DOM)和瀏覽器對象模型(BrowserObjectModel,BOM)。JavaScript代碼可以采用任何文本編輯器編寫。常用的JavaScript代碼編寫工具有Notepad、Notepad++、AdobeDreamweaver、EditPlus等。純文本編輯器Notepad、Notepad++適用于編寫少量腳本,借助瀏覽器的調試窗口進行調試(按快捷鍵F12即可打開調試窗口);AdobeDreamweaver、EditPlus等專業編輯工具適用于編寫大量腳本,提供代碼自動生成、智能感知、調試等功能,其效率較高。本書對開發工具不作特定要求。具有JavaScript代碼的網頁,如果不涉及和服務器交互,則只需瀏覽器軟件便可以運行查看效果。JavaScript概述02JavaScript引入方式Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.行內式行內式是將JavaScript代碼作為HTML標記的屬性值使用。在HTML標記中,有些具有事件處理的屬性,如onclick、onload事件,可以在事件處理中編寫JavaScript代碼,其基本語法格式如下。<html標記事件="JavaScript語句或函數">例如,下面的語句表示在<button>標記中,設置了onclick事件屬性,關聯了alert(?ok?)語句。鼠標在單擊按鈕時,會彈出警告提示框,警告提示框顯示文本“ok”。<buttononclick="alert('ok')">JavaScript引入方式嵌入式在HTML文件中放置JavaScript代碼,在頁面載入的同時載入腳本代碼。這種方式需要用<script>標記來聲明腳本語言,其基本語法格式如下。<scripttype="text/javascript"language="javascript">JavaScript語句……</script><script>標記中的type和language屬性可以省略不寫。內嵌JavaScript代碼可以位于HTML網頁文件的任何位置。在同一個HTML網頁文件中,允許在不同位置放入多段JavaScript代碼。由于HTML內容和程序腳本分離的形式便于網頁的維護,所以建議盡可能地將內嵌的JavaScript、函數寫在<head>……</head>頭部區域。JavaScript引入方式件采購匯總表JavaScript引入方式外鏈式外鏈式是將所有的JavaScript代碼放在一個或多個擴展名為.js的外部腳本文件中,通過<script>標記將這些文件進行引用,其基本語法格式如下。<scripttype="text/javascript"src="路徑/js文件.js"></script>03JavaScript編程基礎Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.語法規則JavaScript程序是由若干條語句組成的,語句是編寫程序的指令。一條語句由一個或多個表達式、關鍵字或運算符組成。作為一種腳本編程語言,JavaScript的基礎語法規則對區分大小寫、語句分隔符、注釋、代碼塊、符號做出了說明。1.區分大小寫JavaScript是一種嚴格區分大小寫的語言。在JavaScript程序中,變量、函數、關鍵字等標識符都必須采取一致的大小寫形式進行聲明和使用。2.語句分隔符JavaScript程序中的語句可以使用分號進行分隔。如果語句沒有使用分號結束,則JavaScript默認將語句后的換行符作為結束標志。這種默認的處理方式,有時會產生錯誤。因此建議養成良好的編程習慣,規范使用分號作為語句之間的分隔符。JavaScript編程基礎語法規則3.注釋JavaScript程序中有單行注釋和多行注釋兩種注釋方式。單行注釋以“//”開始,直到一行結束;多行注釋以“/?”開始,到“?/”結束,可以跨行使用,包含多行注釋內容,但不能嵌套使用。4.代碼塊在JavaScript中,代碼塊是一組在單個作用域內執行的語句。代碼塊可以用于創建局部變量,這些變量只在代碼塊內有效,且不會污染全局作用域。代碼塊是使用花括號“{}”定義的。5.符號JavaScript程序中的符號,如單引號、雙引號、括號等,都必須是英文半角形式的符號,否則顯示結果會出錯。JavaScript編程基礎常用輸出方式為了方便講解代碼和查看代碼運行效果,需要先介紹JavaScript中的常用輸出、輸入方式。這些方式涉及的概念、語法及應用,在后面的項目中將進行詳細介紹。JavaScript程序的運行結果,可以輸出到提示框或網頁文檔中。常用的輸出方式有警告提示框、document.writeln()方法和document.write()方法。1.警告提示框警告提示框用于顯示提示信息以警告用戶。警告提示框出現后,用戶需要單擊“確定”按鈕才能繼續運行后續代碼,其基本語法格式如下。alert(提示內容);提示內容可以是字符串文本或變量。字符串文本要用引號括起來。2.document.writeln()方法JavaScript編程基礎常用輸出方式document.writeln()方法用于向HTML頁面寫入內容并添加換行符,其基本語法格式如下。document.writeln(輸出內容);3.document.write()方法document.write()方法用于向HTML頁面寫入內容,其基本語法格式如下。document.write(輸出內容);JavaScript編程基礎常用輸入方式在網頁上輸入數據,可以采用提示對話框或表單輸入數據的方式。頁面上輸入的數據,都是字符串類型。1.提示對話框提示對話框用于提示用戶輸入數據。用戶輸入數據后,如果單擊“確定”按鈕,則返回輸入的數據;如果單擊“取消”按鈕,則返回null值,其基本語法格式如下。prompt("提示文本","默認輸入數據");2.表單輸入數據在網頁上用表單輸入的數據,可以通過多種方法獲得。這里介紹通過document文檔對象層次結構方式訪問表單元素數據的方法,其基本語法格式如下。document.表單名.元素名.value采用這種方法,需要先在表單及表單元素標記中定義name屬性。JavaScript編程基礎04JavaScript數據與運算符Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.數據類型數據類型是編程語言中的一個重要概念,它是一種機制,用來描述數據存儲的格式、范圍和操作方式。JavaScript中的數據類型可分為數值型(Number)、字符串型(String)、布爾型(Boolean)、空值型(Null)、未定義類型(Undefined)、對象類型(Object)6種類型。JavaScript是弱類型語言,因此在變量聲明時無須指定變量的數據類型,只需要用var關鍵字聲明即可。同時,JavaScript也是一種動態類型語言,在運行時可以根據需要改變和調整代碼的行為,變量可以在需要時給其賦各種類型的值。1.數值型JavaScript中數值型數據包括整數和浮點數。整數支持十進制、八進制(以0開頭)和十六進制(以0x開頭)的數據表示形式。八進制和十六進制的數據,經JavaScript處理后轉換為十進制形式。浮點數可以采用小數形式或科學記數法(數值e指數)形式。JavaScript數據與運算符數據類型2.字符串型字符串型數據是用單引號(′′)或雙引號("")括起來的字符組合。單引號括起來的字符串中可以包含雙引號,雙引號括起來的字符串中可以包含單引號,但是字符串中的引號不能和字符串的開始與結尾引號相同。字符串中的每個字符按位置從左到右依次編號,編號從0開始。在字符串型數據中,有一種稱為轉義字符的特殊字符。當字符串中含有轉義字符時,JavaScript會將轉義字符解析為其對應的含義。JavaScript常用的轉義字符及說明如表7-1所示。JavaScript數據與運算符數據類型3.布爾型布爾型是一種只含有true和false這兩個值的數據類型,通常來說,布爾型數據表示“真”或“假”。在實際應用中,布爾型數據常用在比較、邏輯等運算中,運算的結果往往就是true或false。例如,1<2的比較結果是true,而3==4的比較結果是false。此外,布爾型變量還常用在控制結構的語句中,如if語句等。在JavaScript中,通常采用true和false表示布爾型數據,但也可將它們轉換為其他類型的數據。例如,可將值為true的布爾型數據轉換為整數1,將值為false的布爾型數據轉換為整數0。但不能用true表示1或用false表示0。4.空值型在JavaScript中,空值型是一種特殊的數據類型,也稱為空類型,此類型只有一個值即null,表JavaScript數據與運算符數據類型示“無值”,什么也不表示。null除了表示空值型數據,也可用在表示其他類型的數據中,如對象、數組和字符串等。當變量不再使用時,可將它賦值為null,以釋放存儲空間。5.未定義類型在JavaScript中,undefined也是一類特殊的值,它表示變量未定義或未賦值。當聲明一個變量但未對它進行賦值時,它的值就是“undefined”。它與null值的不同之處在于:null值表示已經對變量賦值,只不過賦的值是“無值”;而undefined表示變量不存在或沒有賦值。使用未定義的變量也會顯示undefined,但通常會造成程序錯誤。6.對象類型對象類型是一種復合的、復雜的數據類型,是屬性和方法的集合。屬性用于描述對象的相關數據,而方法是對象中可以執行的動作。JavaScript數據與運算符常量常量是給數據存儲空間聲明的一個標識符,程序中使用該標識符訪問數據。在程序運行過程中,常量表示的值不能更改。JavaScript中的常量通常用const聲明并賦值,其基本語法格式如下。const常量名=值;例如,下面的語句定義了常量x,并將其賦值為1。constx=1;JavaScript數據與運算符變量變量是給數據存儲空間聲明的一個標識符,程序中使用該標識符訪問數據。在程序運行過程中,變量存儲的數據值可以改變。在使用變量時,JavaScript不僅可以自動完成數據類型的轉換,也可以進行數據類型的強制轉換。JavaScript中用var關鍵字聲明變量。聲明變量的同時可以使用賦值運算符“=”給變量賦值。變量聲明的基本語法格式如下。var變量名;var變量名1,變量名2……;var變量名=值;JavaScript中變量可以不聲明就直接使用。一個var關鍵字可以聲明多個變量,用逗號分隔。同一語句聲明的多個變量,可以存儲不同類型的數據。如果只是聲明了變量,但未對其賦值,則默認值是undefined。變量在使用過程中數據類型可以改變。JavaScript數據與運算符運算符和表達式用運算符可以對一個或多個數據進行某種功能的操作,從而得到一個結果值。運算符運算的對象是操作數。運算符和操作數的組合稱為表達式。JavaScript中的運算符分為賦值運算符、算術運算符、比較運算符、邏輯運算符、位運算符和條件運算符等。1.賦值運算符賦值運算符“=”可以將運算符右邊的值賦給左邊的變量、數組元素或對象屬性。新賦的值會覆蓋原有的值。賦值運算符可以為多個變量連續賦值。賦值運算符和操作數組成的表達式稱為賦值語句。2.算術運算符算術運算符可以對數值型數據進行數學算術運算。算術運算符和操作數的組合是算術表達式,表達式結果就是算術運算的結果。算術運算符的用法如表7-2所示。JavaScript數據與運算符運算符和表達式其中,使用加法運算符“+”時,若操作數是數值型數據,則做加法運算;若操作數中有字符串,則做字符串的連接操作。算術運算符的操作數應該是數值型數據,其他類型的數據只有轉換為數值型數據才能進行算術運算。JavaScript數據與運算符運算符和表達式完全由數字字符組成的字符串,可以自動轉換為數值型數據進行運算。當操作數為布爾型數據時,true自動轉換為數字1,false自動轉換為數字0。若不能自動轉換為數值型數據,則需要用強制類型轉換方法轉換為數值型數據后,才能進行算術運算,否則運算結果為NaN。賦值運算符和算術運算符可以進行組合,其組合形式及說明如表7-3所示。JavaScript數據與運算符運算符和表達式3.比較運算符比較運算符用于比較運算符兩端的值,確定兩者的大小關系。比較運算符和操作數構成比較表達式。如果比較表達式關系成立,則結果為true;如果比較表達式關系不成立,則結果為false。比較運算符的用法如表7-4所示。JavaScript數據與運算符運算符和表達式數值型數據的比較,是按照數學中數據的大小進行比較的;字符串型數據的比較,是按照從左至右依次對相同位置字符的編碼大小進行比較的。不同類型的數據比較,需要先進行類型轉換,再進行同類型數據的比較。不同類型的數據比較規則如下。(1)如果字符串型數據和數值型數據比較,則將字符串型數據轉換為數值型數據后再進行比較;如果字符串型數據不能正確轉換為數值型數據,則結果為false。(2)如果操作數是布爾型數據,則將true轉換為1,false轉換為0后再進行比較。(3)如果一個操作數是對象,則將對象轉換為另一個操作數的類型再進行比較。如果對象和對象比較,則必須引用的是同一個對象才相等,否則不相等。(4)null和undefined比較,結果相等;null和null比較,結果相等;undefined和undefined比較,結果相等;NaN和NaN比較,結果不相等。JavaScript數據與運算符運算符和表達式(5)全等于和非全等于運算符在比較時,既要對值進行比較,又要對數據類型進行比較。4.邏輯運算符邏輯運算符用于對操作數執行布爾運算。邏輯運算符和操作數組成邏輯表達式,表達式結果為true或

溫馨提示

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

評論

0/150

提交評論