《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH02 JavaScript入門_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH02 JavaScript入門_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH02 JavaScript入門_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH02 JavaScript入門_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH02 JavaScript入門_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第2章JavaScript入門本章學(xué)習(xí)目標(biāo) 了解完整JavaScript實(shí)現(xiàn)的組成部分； 掌握J(rèn)avaScript的使用方式； 掌握J(rèn)avaScript的基本語法規(guī)則；掌握J(rèn)avaScript的變量聲明與命名規(guī)范。目錄2.1JavaScript的實(shí)現(xiàn)2.2JavaScript的使用2.3JavaScript語法2.4JavaScript變量2.5JavaScript彈窗2.1JavaScript的實(shí)現(xiàn)2.1.1ECMAScript2.1.2DOM2.1.3BOM2.1JavaScript的實(shí)現(xiàn)

完整JavaScript的實(shí)現(xiàn)是由以下三個(gè)部分組成：ECMAScript：核心標(biāo)準(zhǔn)。DOM：文檔對象模型。BOM：瀏覽器對象模型。2.1.1ECMAScriptECMAScript是JavaScript的核心標(biāo)準(zhǔn)，它描述了該語言的語法和基本對象。2.1.2DOMDOM指的是DocumentObjectModel（文檔對象模型），它是HTML的應(yīng)用程序接口。DOM將整個(gè)HTML頁面看作是由各種節(jié)點(diǎn)層級構(gòu)成的結(jié)構(gòu)文檔。2.1.3BOMBOM指的是BrowserObjectModel（瀏覽器對象模型），可以對瀏覽器窗口進(jìn)行訪問和操作處理。該模型最早是由IE3.0與NetscapeNavigator3.0提供的，目前所有的主流瀏覽器都支持BOM，但是會有各自獨(dú)立的實(shí)現(xiàn)內(nèi)容。2.2JavaScript的使用2.2.1內(nèi)部JavaScript2.2.2外部JavaScript2.2JavaScript的使用JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。2.2JavaScript的使用這兩種使用方式的效果完全相同，可以根據(jù)使用率和代碼量選擇相應(yīng)的開發(fā)方式。例如有多個(gè)網(wǎng)頁文件需要引用同一段JavaScript代碼時(shí)，則可以寫在外部文件中進(jìn)行引用，以減少代碼冗余。2.2.1內(nèi)部JavaScriptJavaScript代碼可以直接寫在HTML頁面中，只需使用<script>首尾標(biāo)簽嵌套即可。2.2.1內(nèi)部JavaScript相關(guān)HTML代碼語法格式如下：使用JavaScript代碼中的alert()方法制作一段簡單的示例：<script>//JavaScript代碼...</script><script>alert("HelloJavaScript!");</script>該語句表示打開網(wǎng)頁后彈出警告對話框，顯示的文字內(nèi)容為"HelloJavaScript!"。2.2.1內(nèi)部JavaScript【例2-1】內(nèi)部JavaScript的簡單應(yīng)用2.2.2外部JavaScript如果選擇將JavaScript代碼保存到外部文件中，則只需要在HTML頁面的<script>標(biāo)簽中聲明src屬性即可。此時(shí)外部文件的類型必須是JavaScript類型文件（簡稱為JS文件），即文件后綴名為.js。2.2.2外部JavaScript相關(guān)HTML代碼語法格式如下：以在本地js文件夾中的myFirstScript.js文件為例，在HTML頁面中的引用方法如下：<scriptsrc="JavaScript文件URL"></script><scriptsrc="js/myFirstScript.js"></script>引用語句放在<head>或<body>首尾標(biāo)簽中均可，與在<script>標(biāo)簽中直接寫腳本代碼的運(yùn)行效果完全一樣。2.2.2外部JavaScript【例2-2】外部JavaScript的簡單應(yīng)用2.3JavaScript語法2.3.1JavaScript大小寫2.3.2JavaScript分號2.3.3JavaScript注釋2.3.4JavaScript代碼塊2.3.1JavaScript大小寫在JavaScript中大小寫是嚴(yán)格區(qū)分的，無論是變量、函數(shù)名稱、運(yùn)算符和其他語法都必須嚴(yán)格按照要求的大小寫進(jìn)行聲明和使用。例如變量hello與變量HELLO會被認(rèn)為是完全不同的內(nèi)容。2.3.2JavaScript分號很多編程語言（例如C、Java和Perl等）都要求每句代碼結(jié)尾要使用分號（;）表示結(jié)束。而JavaScript的語法規(guī)則對此比較寬松，如果一行代碼結(jié)尾沒有分號也是可以被正確執(zhí)行的。2.3.3JavaScript注釋為了提高程序代碼的可讀性，JavaScript允許在代碼中添加注釋。注釋僅用于對代碼進(jìn)行輔助提示，不會被瀏覽器執(zhí)行。JavaScript有兩種注釋方式：單行注釋和多行注釋。2.3.3JavaScript注釋單行注釋用雙斜杠（//）開頭，可以自成一行也可以寫在JavaScript代碼的后面。例如：//該提示語句自成一行alert("HelloJavaScript!");或alert("HelloJavaScript!");//該提示語句寫在JavaScript代碼后面2.3.3JavaScript注釋多行注釋使用/*開頭，以*/結(jié)尾，在這兩個(gè)符號之間的所有內(nèi)容都會被認(rèn)為是注釋內(nèi)容，均不會被瀏覽器所執(zhí)行。例如：/*這是一個(gè)多行注釋

在首尾符號之間的所有內(nèi)容都被認(rèn)為是注釋

均不會被瀏覽器執(zhí)行*/alert("HelloJavaScript!");2.3.3JavaScript注釋利用注釋內(nèi)容不會被執(zhí)行的特點(diǎn)，在調(diào)試JavaScript代碼時(shí)如果希望暫停某一句或幾句代碼的執(zhí)行，可使用單行或多行注釋符號將需要禁用的代碼做成注釋。例如：//alert("HelloJavaScript1");//alert("HelloJavaScript2");alert("HelloJavaScript3");此時(shí)第一、二行的JavaScript代碼由于最前面添加了單行注釋符號，因此不會被執(zhí)行。當(dāng)調(diào)試完成后去掉注釋符號，代碼即可恢復(fù)運(yùn)行。2.3.2JavaScript代碼塊和Java語言類似，JavaScript語言也使用一對大括號標(biāo)識需要被執(zhí)行的多行代碼。2.3.2JavaScript代碼塊例如：varx=9;if(x<10){ x=10; alert(x);}上述代碼在if條件成立時(shí)，會執(zhí)行大括號里面的所有代碼。2.4JavaScript變量2.4.1變量的聲明2.4.2變量的命名規(guī)范2.4.3JavaScript關(guān)鍵字和保留字2.4.1變量的聲明JavaScript是一種弱類型的腳本語言，無論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱進(jìn)行聲明，其中關(guān)鍵詞var來源于英文單詞variable（變量）的前三個(gè)字母。2.4.1變量的聲明可以在聲明變量的同時(shí)對其指定初始值；也可以先聲明變量，再另行賦值。例如：varx=2;varmsg="HelloJavaScript!";varname;常見變量的賦值為數(shù)字或文本形式。當(dāng)變量的賦值內(nèi)容為文本時(shí)，需要使用引號（單引號、雙引號均可）括住內(nèi)容；當(dāng)為變量賦值為數(shù)字的時(shí)候，內(nèi)容不要加引號，否則會被當(dāng)作字符串處理。2.4.1變量的聲明JavaScript也允許使用一個(gè)關(guān)鍵詞var同時(shí)定義多個(gè)變量。例如：同時(shí)定義的變量類型可以不一樣，并且可為其中部分或全部變量進(jìn)行初始化。例如：varx1,x2,x3;//一次定義了三個(gè)變量名稱varx1=2,x2="Hello",x3;2.4.1變量的聲明由于JavaScript變量是弱類型的，因此同一個(gè)變量可以用于存放不同類型的值。例如可以聲明一個(gè)變量初始化時(shí)用于存放數(shù)值，然后將其更改為存放字符串。代碼如下：varx=99;//初始化時(shí)變量x存放的是數(shù)值99x="Hello";//將變量x更改為存放字符串"Hello"這段代碼從語法上來說沒有任何問題，但是為了良好的編程習(xí)慣不建議此種做法。應(yīng)該將變量用于保存相同類型的值。2.4.1變量的聲明變量的聲明不是必須的，可以不使用關(guān)鍵詞var聲明直接使用。例如：msg1="Hello"msg2="JavaScript";msg=msg1+""+msg2;alert(msg);//運(yùn)行結(jié)果為顯示HelloJavaScript上述代碼中的msg1、msg2和msg均沒有使用關(guān)鍵詞var事先聲明就直接使用了，這種寫法也是有效的。當(dāng)程序遇到未聲明過的名稱時(shí)，會自動使用該名稱創(chuàng)建一個(gè)變量并繼續(xù)使用。2.4.1變量的聲明【例2-3】JavaScript變量的簡單應(yīng)用2.4.2變量的命名規(guī)范一個(gè)有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號（$）；其他位置上的字符可以是下劃線（_）、美元符號（$）、數(shù)字（0-9）或字母（A-Za-z）。2.2.2變量的命名規(guī)范例如：varhello;//正確var_hello;//正確var$hello;//正確var$x_$y;//正確var123;//不正確，首位字符必須是字母、下劃線或者美元符號var%x;//不正確，首位字符必須是字母、下劃線或者美元符號varx%x;//不正確，中間的字符不能使用下劃線、美元符號、數(shù)字或字母以外的內(nèi)容2.2.2變量的命名規(guī)范常用的變量命名方式有Camel標(biāo)記法、Pascal標(biāo)記法和匈牙利類型標(biāo)記法等。Camel標(biāo)記法：又稱為駝峰標(biāo)記法，該規(guī)則聲明的變量首字母為小寫，其他單詞以大寫字母開頭。例如：varmyFirstScript、varmyTest等。Pascal標(biāo)記法：該規(guī)則聲明的變量所有單詞首字母均大寫。例如：varMyFirstScript、varMyTest等。匈牙利類型標(biāo)記法：該規(guī)則是在Pascal標(biāo)記法的基礎(chǔ)上為變量加一個(gè)小寫字母的前綴，用于提示該變量的類型，如i表示整數(shù)、s表示字符串等。例如：varsMyFirstScript、variMyTest等。2.4.3JavaScript關(guān)鍵字和保留字JavaScript遵循ECMA-262標(biāo)準(zhǔn)中規(guī)定的一系列關(guān)鍵字規(guī)則，這些關(guān)鍵字不能作為變量或者函數(shù)名稱。2.4.3JavaScript關(guān)鍵字和保留字全部關(guān)鍵字共計(jì)25個(gè)，如表2-1所示。2.4.3JavaScript關(guān)鍵字和保留字在ECMA-262中還規(guī)定了一系列保留字，這些字是為將來的關(guān)鍵字而保留的單詞，同樣也不可以作為變量或者函數(shù)的名稱。全部保留字共計(jì)31個(gè)，如表2-2所示。2.5JavaScript彈窗2.5.1警告對話框alert2.5.2提示對話框prompt2.5.3確認(rèn)對話框confirm2.5JavaScript彈窗JavaScript可以為網(wǎng)頁創(chuàng)建彈窗式的消息對話框，例如之前例2-1中使用的alert()就是彈出一個(gè)帶有確認(rèn)按鈕的警告對話框。當(dāng)彈窗對話框出現(xiàn)后，用戶必須關(guān)閉后才可以繼續(xù)瀏覽或操作網(wǎng)頁上的其他內(nèi)容。JavaScript彈窗共有三種形式：警告對話框、提示對話框、確認(rèn)對話框。2.5.1警告對話框alert警告對話框是最常用的對話框，可以用來顯示一段文本給用戶查看，只包含一個(gè)“確定”按鈕，用戶必須點(diǎn)擊按鈕后對話框方可消失。其語法結(jié)構(gòu)如下：window.alert("文本內(nèi)容");或alert("文本內(nèi)容");//window前綴可以省略不寫，簡寫為alert()即可2.5.1警告對話框alert例如：上述代碼表示打開網(wǎng)頁后彈出警告對話框，顯示的文字內(nèi)容為"你好！"。alert("你好！");2.5.2提示對話框prompt提示對話框自帶一個(gè)文本輸入?yún)^(qū)域，可以用于收集用戶輸入的內(nèi)容。當(dāng)用戶輸入某個(gè)值并點(diǎn)擊“確定”按鈕后就可以獲取到該值。需要注意的是，如果用戶點(diǎn)擊了“取消”按鈕，即使輸入了值也不會獲取，返回值為null空值。其語法結(jié)構(gòu)如下：mpt("提示內(nèi)容","默認(rèn)值");或prompt("提示內(nèi)容","默認(rèn)值");//window前綴可以省略不寫，簡寫為prompt()即可2.5.2提示對話框prompt其中默認(rèn)值為選填內(nèi)容，如果未填寫具體的值只留下一對引號則用戶會看到一個(gè)空白輸入框，否則會先顯示默認(rèn)值，再由用戶刪除自己重新填寫。2.5.2提示對話框prompt例如：varx=mpt("請輸入一個(gè)數(shù)字","");//這里默認(rèn)值未填寫內(nèi)容//用戶點(diǎn)了取消按鈕if(x==null){alert("您點(diǎn)了取消按鈕，因此未能獲取到填寫內(nèi)容");}//用戶點(diǎn)了確定按鈕else{alert("您填寫的數(shù)字是"+x);}上述代碼表示打開網(wǎng)頁后彈出提示對話框，嘗試獲取用戶填寫的值并賦值給x。2.5.3確認(rèn)對話框confirm確認(rèn)對話框有“確定”和“取消”2個(gè)按鈕，用于確認(rèn)用戶的行為，例如用戶點(diǎn)擊按鈕希望刪除某些數(shù)據(jù)時(shí)，可以使用確認(rèn)對話框進(jìn)行二次確認(rèn)以免操作。其語法結(jié)構(gòu)如下：window.confirm("提示內(nèi)容");或confirm("提示內(nèi)容");//window前綴可以省略不寫，簡寫為confirm()即可當(dāng)用戶點(diǎn)擊“確認(rèn)”按鈕

溫馨提示

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

評論

0/150

提交評論