HTML5網(wǎng)頁前端設(shè)計（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上)_第1頁
HTML5網(wǎng)頁前端設(shè)計（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上)_第2頁
HTML5網(wǎng)頁前端設(shè)計（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上)_第3頁
HTML5網(wǎng)頁前端設(shè)計（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上)_第4頁
HTML5網(wǎng)頁前端設(shè)計（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上)_第5頁
已閱讀5頁，還剩74頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第4章JavaScript基礎(chǔ)（上）主講人：XX老師本章學(xué)習(xí)目標(biāo)了解JavaScript的使用方式；了解JavaScript的基本語法規(guī)則；熟悉JavaScript的變量聲明與命名規(guī)范；掌握J(rèn)avaScript的基本數(shù)據(jù)類型。目錄4.1JavaScript的使用4.2JavaScript語法4.3JavaScript變量4.4JavaScript基本數(shù)據(jù)類型4.5JavaScript運算符4.6JavaScript條件語句4.7JavaScript函數(shù)4.1.1內(nèi)部JavaScript4.1.2外部JavaScript4.1JavaScript的使用4.1JavaScript的使用JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。這兩種使用方式的效果完全相同，可以根據(jù)使用率和代碼量選擇相應(yīng)的開發(fā)方式。例如有多個網(wǎng)頁文件需要引用同一段JavaScript代碼時，則可以寫在外部文件中進行引用，以減少代碼冗余。4.1.1內(nèi)部JavaScriptJavaScript代碼可以直接寫在HTML頁面中，只需使用<script>首尾標(biāo)簽嵌套即可。4.1.1內(nèi)部JavaScript相關(guān)HTML代碼語法格式如下：使用JavaScript代碼中的alert()方法制作一段簡單的示例：<script>//JavaScript代碼...</script><script>alert("HelloJavaScript!");</script>該語句表示打開網(wǎng)頁后彈出警告對話框，顯示的文字內(nèi)容為"HelloJavaScript!"。4.1.1內(nèi)部JavaScript【例4-1】內(nèi)部JavaScript的簡單應(yīng)用4.1.2外部JavaScript如果選擇將JavaScript代碼保存到外部文件中，則只需要在HTML頁面的<script>標(biāo)簽中聲明src屬性即可。此時外部文件的類型必須是JavaScript類型文件（簡稱為JS文件），即文件后綴名為.js。4.1.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)簽中直接寫腳本代碼的運行效果完全一樣。4.1.2外部JavaScript【例4-2】外部JavaScript的簡單應(yīng)用4.2.1JavaScript大小寫4.2.2JavaScript分號4.2.3JavaScript注釋4.2.4JavaScript代碼塊4.2JavaScript語法4.2.1JavaScript大小寫在JavaScript中大小寫是嚴(yán)格區(qū)分的，無論是變量、函數(shù)名稱、運算符和其他語法都必須嚴(yán)格按照要求的大小寫進行聲明和使用。例如變量hello與變量HELLO會被認(rèn)為是完全不同的內(nèi)容。4.2.2JavaScript分號很多編程語言（例如C、Java和Perl等）都要求每句代碼結(jié)尾要使用分號（;）表示結(jié)束。而JavaScript的語法規(guī)則對此比較寬松，如果一行代碼結(jié)尾沒有分號也是可以被正確執(zhí)行的。4.2.3JavaScript注釋為了提高程序代碼的可讀性，JavaScript允許在代碼中添加注釋。注釋僅用于對代碼進行輔助提示，不會被瀏覽器執(zhí)行。JavaScript有兩種注釋方式：單行注釋和多行注釋。4.2.3JavaScript注釋單行注釋用雙斜杠（//）開頭，可以自成一行也可以寫在JavaScript代碼的后面。例如：//該提示語句自成一行alert("HelloJavaScript!");或alert("HelloJavaScript!");//該提示語句寫在JavaScript代碼后面4.2.3JavaScript注釋多行注釋使用/*開頭，以*/結(jié)尾，在這兩個符號之間的所有內(nèi)容都會被認(rèn)為是注釋內(nèi)容，均不會被瀏覽器所執(zhí)行。例如：/*這是一個多行注釋

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

均不會被瀏覽器執(zhí)行*/alert("HelloJavaScript!");4.2.3JavaScript注釋利用注釋內(nèi)容不會被執(zhí)行的特點，在調(diào)試JavaScript代碼時如果希望暫停某一句或幾句代碼的執(zhí)行，可使用單行或多行注釋符號將需要禁用的代碼做成注釋。例如：//alert("HelloJavaScript1");//alert("HelloJavaScript2");alert("HelloJavaScript3");此時第一、二行的JavaScript代碼由于最前面添加了單行注釋符號，因此不會被執(zhí)行。當(dāng)調(diào)試完成后去掉注釋符號，代碼即可恢復(fù)運行。4.2.4JavaScript代碼塊和Java語言類似，JavaScript語言也使用一對大括號標(biāo)識需要被執(zhí)行的多行代碼。4.2.4JavaScript代碼塊例如：varx=9;if(x<10){x=10;alert(x);}上述代碼在if條件成立時，會執(zhí)行大括號里面的所有代碼。4.3.1變量的聲明4.3.2變量的命名規(guī)范4.3.3JavaScript關(guān)鍵字和保留字4.3JavaScript變量4.3.1變量的聲明JavaScript是一種弱類型的腳本語言，無論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱進行聲明，其中關(guān)鍵詞var來源于英文單詞variable（變量）的前三個字母。4.3.1變量的聲明可以在聲明變量的同時對其指定初始值；也可以先聲明變量，再另行賦值。例如：varx=2;varmsg="HelloJavaScript!";varname;常見變量的賦值為數(shù)字或文本形式。當(dāng)變量的賦值內(nèi)容為文本時，需要使用引號（單引號、雙引號均可）括住內(nèi)容；當(dāng)為變量賦值為數(shù)字的時候，內(nèi)容不要加引號，否則會被當(dāng)作字符串處理。4.3.1變量的聲明JavaScript也允許使用一個關(guān)鍵詞var同時定義多個變量。例如：同時定義的變量類型可以不一樣，并且可為其中部分或全部變量進行初始化。例如：varx1,x2,x3;//一次定義了三個變量名稱varx1=2,x2="Hello",x3;4.3.1變量的聲明由于JavaScript變量是弱類型的，因此同一個變量可以用于存放不同類型的值。例如可以聲明一個變量初始化時用于存放數(shù)值，然后將其更改為存放字符串。代碼如下：varx=99;//初始化時變量x存放的是數(shù)值99x="Hello";//將變量x更改為存放字符串"Hello"這段代碼從語法上來說沒有任何問題，但是為了良好的編程習(xí)慣不建議此種做法。應(yīng)該將變量用于保存相同類型的值。4.3.1變量的聲明變量的聲明不是必須的，可以不使用關(guān)鍵詞var聲明直接使用。例如：msg1="Hello"msg2="JavaScript";msg=msg1+""+msg2;alert(msg);//運行結(jié)果為顯示HelloJavaScript上述代碼中的msg1、msg2和msg均沒有使用關(guān)鍵詞var事先聲明就直接使用了，這種寫法也是有效的。當(dāng)程序遇到未聲明過的名稱時，會自動使用該名稱創(chuàng)建一個變量并繼續(xù)使用。4.3.1變量的聲明【例4-3】JavaScript變量的簡單應(yīng)用4.3.2變量的命名規(guī)范一個有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號（$）；其他位置上的字符可以是下劃線（_）、美元符號（$）、數(shù)字（0-9）或字母（A-Za-z）。4.3.2變量的命名規(guī)范例如：varhello;//正確var_hello;//正確var$hello;//正確var$x_$y;//正確var123;//不正確，首位字符必須是字母、下劃線或者美元符號var%x;//不正確，首位字符必須是字母、下劃線或者美元符號varx%x;//不正確，中間的字符不能使用下劃線、美元符號、數(shù)字或字母以外的內(nèi)容4.3.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ǔ)上為變量加一個小寫字母的前綴，用于提示該變量的類型，如i表示整數(shù)、s表示字符串等。例如：varsMyFirstScript、variMyTest等。4.3.3JavaScript關(guān)鍵字和保留字JavaScript遵循ECMA-262標(biāo)準(zhǔn)中規(guī)定的一系列關(guān)鍵字規(guī)則，這些關(guān)鍵字不能作為變量或者函數(shù)名稱。4.3.3JavaScript關(guān)鍵字和保留字全部關(guān)鍵字共計25個，如表4-1所示。4.3.3JavaScript關(guān)鍵字和保留字在ECMA-262中還規(guī)定了一系列保留字，這些字是為將來的關(guān)鍵字而保留的單詞，同樣也不可以作為變量或者函數(shù)的名稱。全部保留字共計31個，如表4-2所示。4.4.1Undefined類型4.4.2Null類型4.4.3String類型4.4.4Number類型4.4.5Boolean類型4.4JavaScript基本數(shù)據(jù)類型4.4JavaScript基本數(shù)據(jù)類型JavaScript有五種原始類型分別是：Number（數(shù)字）、Boolean（布爾值）、String（字符串）、Null（空值）和Undefined（未定義）。JavaScript提供了typeof方法用于檢測變量的數(shù)據(jù)類型，該方法會根據(jù)變量本身的數(shù)據(jù)類型給出對應(yīng)名稱的返回值。語法格式如下：typeof變量名稱4.4JavaScript基本數(shù)據(jù)類型對于指定的變量使用typeof方法，其返回值是提示數(shù)據(jù)類型的文本內(nèi)容。4.4.1Undefined類型所有Undefined類型的輸出值都是undefined。當(dāng)需要輸出的變量從未聲明過，或者使用關(guān)鍵詞var聲明過但是從未進行賦值時會顯示undefined字樣。例如：alert(y);//返回值為undefined，因為變量y之前從未使用關(guān)鍵詞var進行聲明或varx;alert(x);//返回值也是undefined，因為未給變量x進行賦值4.4.1Undefined類型【例4-4】JavaScript基礎(chǔ)數(shù)據(jù)類型Undefined的簡單應(yīng)用4.4.2Null類型null值表示變量的內(nèi)容為空，可用于初始化變量，或者清空已經(jīng)賦值的變量。例如：varx=99;x=null;alert(x);//此時返回值是null而不是994.4.2Null類型【例4-5】JavaScript基礎(chǔ)數(shù)據(jù)類型Null的簡單應(yīng)用4.4.3String類型在JavaScript中String類型用于存儲文本內(nèi)容，又稱為字符串類型。為變量進行字符串賦值時需要使用引號(單引號或雙引號均可)括住文本內(nèi)容。例如：varcountry='China';或varcountry="China";4.4.3String類型如果字符串內(nèi)容本身也需要帶上引號，則用于包圍字符串的引號不可以和文本內(nèi)容中的引號相同。例如字符串本身如果帶有雙引號，則使用單引號包圍字符串；反之亦然。例如：vardialog='Todayisagift,thatiswhyitiscalled"Present".';或vardialog="Todayisagift,thatiswhyitiscalled'Present'.";4.4.3String類型String對象中包含了一系列方法，常用方法如表4-4所示。4.4.3String類型1.字符串長度在字符串中，每一個字符都有固定的位置，其位置從左往右進行分配。以單詞hello為例，其位置規(guī)則如圖4-6所示。首字符H從位置0開始，第二個字符L是位置1，以此類推，直到最后一個字符O的位置是字符串的總長度少1。4.4.3String類型1.字符串長度【例4-6】JavaScript獲取字符串長度的簡單應(yīng)用4.4.3String類型2.獲取字符串中的單個字符在JavaScript中可以使用charAt()方法獲取字符串指定位置上的單個字符。其語法結(jié)構(gòu)如下：例如：charAt(index)其中index參數(shù)值填寫需要獲取的字符所在位置。varmsg="HelloJavaScript";varx=msg.charAt(0);//表示獲取msg中的第一個字符，返回值為H4.4.3String類型2.獲取字符串中的單個字符如果需要獲取指定位置上單個字符的字符代碼，可以使用charCodeAt()方法。其語法結(jié)構(gòu)如下：例如：charCodeAt(index)varmsg="HelloJavaScript";varx=msg.charCodeAt(0);//表示獲取msg中的第一個字符的字符代碼，返回值為72其中index參數(shù)值填寫需要獲取的字符所在位置。4.4.3String類型2.獲取字符串中的單個字符【例4-7】JavaScript獲取字符串中單個字符的應(yīng)用4.4.3String類型3.連接字符串在JavaScript中可以使用concat()方法將新的字符串內(nèi)容連接到原始字符串上。其語法結(jié)構(gòu)如下：例如：concat(string1,string2...,stringN);varmsg="Hello";varnewMsg=msg.concat("JavaScript");alert(newMsg);//返回值為"HelloJavaScript"該方法允許帶有一個或多個參數(shù)，表示按照從左往右的依次連接這些字符串。4.4.3String類型3.連接字符串也可以直接使用加號（+）進行字符串的連接，其效果相同。因此上述示例代碼可改為：varmsg="Hello";varnewMsg=msg+"JavaScript";alert(newMsg);//返回值為"HelloJavaScript"4.4.3String類型3.連接字符串【例4-8】JavaScript連接字符串的簡單應(yīng)用4.4.3String類型4.查找字符串是否存在使用indexOf()和lastIndexOf()方法可以查找原始字符串中是否包含指定的字符串內(nèi)容。其語法格式如下：indexOf(searchString,startIndex)或lastIndexOf(searchString,startIndex)其中searchString參數(shù)位置填入需要用于對比查找的字符串片段，startIndex參數(shù)用于指定搜索的起始字符，該參數(shù)內(nèi)容如果省略則按照默認(rèn)順序搜索全文。4.4.3String類型4.查找字符串是否存在indexOf()和lastIndexOf()方法都可以用于查找指定內(nèi)容是否存在，如果存在，其返回值為指定內(nèi)容在原始字符串中的位置序號；如果不存在，則直接返回-1。區(qū)別在于，indexOf()是從序號0的位置開始正序檢索字符串內(nèi)容的，而lastIndexOf()是從序號最大值的位置開始倒序檢索字符串內(nèi)容。4.4.3String類型4.查找字符串是否存在【例4-9】JavaScript檢查字符串是否存在的簡單應(yīng)用P1354.4.4Number類型在JavaScript中使用Number類型表示數(shù)字，其數(shù)字可以是32位以內(nèi)的整數(shù)或64位以內(nèi)的浮點數(shù)。例如：varx=9;vary=3.14;Number類型還支持使用科學(xué)計數(shù)法、八進制和十六進制的表示方式。4.4.4Number類型1.科學(xué)計數(shù)法對于極大或極小的數(shù)字也可以使用科學(xué)記數(shù)法表示，寫法格式如下：上述格式表示數(shù)字后面跟指數(shù)e再緊跟乘以的倍數(shù)，其中數(shù)值可以是整數(shù)或浮點數(shù)，倍數(shù)可以允許為負(fù)數(shù)。例如：數(shù)值e倍數(shù)varx1=3.14e8;varx2=3.14e-8;變量x1表示的數(shù)是3.14乘以10的8次方，即314000000；變量x2表示的數(shù)是3.14乘以10的-8次方，即0.0000000314。4.4.4Number類型1.科學(xué)計數(shù)法【例4-10】JavaScript科學(xué)計數(shù)法的簡單應(yīng)用4.4.4Number類型2.八進制與十六進制數(shù)在JavaScript中，Number類型也可以用于表示八進制或十六進制的數(shù)。八進制的數(shù)需要用數(shù)字0開頭，后面跟的數(shù)字只能是0-7（八進制字符）之間的一個。例如：varx=010;//這里相當(dāng)于十進制的84.4.4Number類型2.八進制與十六進制數(shù)十六進制的數(shù)需要用數(shù)字0和字母x開頭，后面跟字符只能是0-9或A-F（十六進制字符）之間的一個，大小寫不限。例如：varx=0xA;//這里相當(dāng)于十進制的10或varx=0xa;//等同于0xA雖然Number類型可以使用八進制或十六進制的賦值方式，但是執(zhí)行代碼時仍然會將其轉(zhuǎn)換為十進制結(jié)果。4.4.4Number類型2.八進制與十六進制數(shù)【例4-11】八進制與十六進制的表達(dá)方式

4.4.4Number類型3.浮點數(shù)要定義浮點數(shù)，必須使用小數(shù)點以及小數(shù)點后面至少跟一位數(shù)字。例如：如果浮點數(shù)類型的小數(shù)點前面整數(shù)位為0可以省略。例如：varx=3.14;vary=5.0;varx=.15;//等同于0.154.4.4Number類型3.浮點數(shù)浮點數(shù)可以使用toFixed()方法規(guī)定小數(shù)點后保留幾位數(shù)。其語法格式如下：其中參數(shù)digital換成小數(shù)點后需要保留的位數(shù)即可。例如：toFixed(digital)varx=3.1415926;varresult=x.toFixed(2);//返回值為3.144.4.4Number類型3.浮點數(shù)該方法遵照四舍五入的規(guī)律，即使進位后小數(shù)點后面只有0也會保留指定的位數(shù)。例如：varx=0.9999;varresult=x.toFixed(2);//返回值為1.004.4.4Number類型3.浮點數(shù)需要注意的是，在JavaScript中使用浮點數(shù)進行計算，有時會產(chǎn)生誤差。例如：varx=0.7+0.1;alert(x);//返回值會變成0.7999999999999999，而不是0.8這是由于表達(dá)式使用的是十進制數(shù)，但是實際的計算是轉(zhuǎn)換成二進制數(shù)計算再轉(zhuǎn)回十進制結(jié)果的，在此過程中有時會損失精度。此時使用自定義函數(shù)將兩個加數(shù)都乘以10進行計算后再除以10還原。4.4.4Number類型3.浮點數(shù)【例4-12】JavaScript浮點數(shù)的簡單應(yīng)用4.4.4Number類型4.特殊Number值在JavaScript中，Number類型還有一些特殊值，如表4-5所示。4.4.4Number類型4.特殊Number值(1)InfinityInfinity表示無窮大的含義，有正負(fù)之分。當(dāng)數(shù)值超過了JavaScript允許的范圍就會顯示為Infinity（超過上限）或-Infinity（超過下限）。例如：varx=9e30000;alert(x);//因為該數(shù)字已經(jīng)超出上限，返回值為Infinity4.4.4Number類型4.特殊Number值(1)Infinity在數(shù)字比較大小時，無論原數(shù)據(jù)值為多少，結(jié)果為Infinity的兩個數(shù)認(rèn)為相等，而同樣兩個-Infinity也是相等的。例如：varx1=3e9000;varx2=9e3000;alert(x1==x2);//判斷變量x1與x2是否相等，返回值為true上述代碼中變量x1與x2的實際數(shù)據(jù)值并不相等，但是由于它們均超出了JavaScript可以接受的數(shù)據(jù)范圍，因此返回值均為Infinity，從而判斷是否相等時會返回true（真）。4.4.4Number類型4.特殊Number值(1)Infinity在JavaScript中使用數(shù)字0作為除數(shù)不會報錯，如果正數(shù)除以0返回值就是Infinity，負(fù)數(shù)除以0返回值為-Infinity，特殊情況0除以0的返回值為NaN（非數(shù)字）。例如：varx1=5/0;//返回值是Infinityvarx2=-5/0;//返回值是-Infinityvarx3=0/0;//返回值是NaN4.4.4Number類型4.特殊Number值(1)InfinityInfinity不可以與其他正常顯示的數(shù)字進行數(shù)學(xué)計算，返回結(jié)果均會是NaN。例如：varx=Numer.POSITIVE_INFINITY;varresult=x+99;alert(result);//返回值為Na

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論