Web 前端開發(fā)技術(shù) 教案 項(xiàng)目七 JavaScript 基礎(chǔ)_第1頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目七 JavaScript 基礎(chǔ)_第2頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目七 JavaScript 基礎(chǔ)_第3頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目七 JavaScript 基礎(chǔ)_第4頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目七 JavaScript 基礎(chǔ)_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論