JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目2-1JavaScript數(shù)據(jù)類型與運(yùn)算符5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)什么是變量？變量使用的步驟是？變量里存的值可以更改嗎？只聲明不賦值，輸出時(shí)會(huì)出現(xiàn)什么情況？提問(wèn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)計(jì)算圓的周長(zhǎng)和面積重點(diǎn)：變量的數(shù)據(jù)類型分類數(shù)據(jù)類型的檢測(cè)數(shù)據(jù)類型的轉(zhuǎn)換運(yùn)算符知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型

1.1

變量的數(shù)據(jù)類型JavaScript是一種弱類型語(yǔ)言，不用提前聲明變量的數(shù)據(jù)類型。在程序運(yùn)行過(guò)程中，變量的數(shù)據(jù)類型會(huì)被自動(dòng)確定。強(qiáng)類型語(yǔ)言：如：Java、C弱類型語(yǔ)言：如：JavaScript在代碼運(yùn)行時(shí)，變量的數(shù)據(jù)類型是由JS引擎根據(jù)=右邊變量值的數(shù)據(jù)類型來(lái)判斷的，運(yùn)行完畢之后，變量就確定了數(shù)據(jù)類型。JavaScript擁有動(dòng)態(tài)類型，同時(shí)也意味著相同的變量可用作不同的類型。varx=18;//x為數(shù)字varx=‘bill’;//x為字符串示例代碼1.數(shù)據(jù)類型知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型

1.2數(shù)據(jù)類型分類JavaScript中的數(shù)據(jù)類型分為兩大類，基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型（也稱為引用數(shù)據(jù)類型）。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型

(1)

數(shù)字型JavaScript中的數(shù)字型可以用來(lái)保存整數(shù)或浮點(diǎn)數(shù)（小數(shù)）。varage=18;//整數(shù)varpi=3.14;//浮點(diǎn)數(shù)（小數(shù)）示例代碼常見(jiàn)的進(jìn)制：八進(jìn)制數(shù)：在數(shù)字開(kāi)頭加上0，八進(jìn)制數(shù)由0~7組成，逢8進(jìn)位十進(jìn)制數(shù)：是組成以10為基礎(chǔ)的數(shù)字系統(tǒng)，有0~9組成，逢10進(jìn)位十六進(jìn)制數(shù)：在數(shù)字開(kāi)頭加上0x，十六進(jìn)制數(shù)由0~9，a~f組成知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型范圍：數(shù)字型的最大值和最小值：最大值：Number.MAX_VALUE，輸出結(jié)果：1.7976931348623157e+308最小值：Number.MIN_VALUE，輸出結(jié)果：5e-324數(shù)字型的3個(gè)特殊值：Infinity和-Infinity和NaN，舉例：Infinity（無(wú)窮大）

：如Number.MAX_VALUE*2-Infinity（無(wú)窮?。?/p>

：如-Number.MAX_VALUE*2NaN（非數(shù)值）：如'abc'–100isNaN：用來(lái)判斷一個(gè)變量是否為非數(shù)字的類型，返回值為true表示非數(shù)字，false表示是數(shù)字知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型(2)

字符串型字符串是指計(jì)算機(jī)中用于表示文本的一系列字符，在JavaScript中使用單引號(hào)或雙引號(hào)來(lái)包裹字符串。varstr1='單引號(hào)字符串';varstr2="雙引號(hào)字符串";因?yàn)镠TML標(biāo)簽里的屬性使用的是雙引號(hào)，JS里更推薦使用單引號(hào)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型正確語(yǔ)法錯(cuò)誤語(yǔ)法varstr1='Iama"programmer"'; //Iama"programmer"varstr2="I'ma'programmer'"; //I'ma'programmer'varstr1='I'maprogrammer'; //單引號(hào)錯(cuò)誤用法varstr2="I'ma"programmer""; //雙引號(hào)錯(cuò)誤用法varstr3='Iamaprogrammer"; //單雙引號(hào)混用示例代碼單、雙引號(hào)嵌套：在單引號(hào)字符串中可以直接書寫雙引號(hào)在雙引號(hào)字符串中也可以直接書寫單引號(hào)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型轉(zhuǎn)義符：在字符串中使用換行、Tab等特殊符號(hào)時(shí)，可以用轉(zhuǎn)義符來(lái)進(jìn)行轉(zhuǎn)義，轉(zhuǎn)義符以“\”開(kāi)始。常見(jiàn)轉(zhuǎn)義符見(jiàn)下表。轉(zhuǎn)義符解釋說(shuō)明轉(zhuǎn)義符解釋說(shuō)明\'單引號(hào)\"雙引號(hào)\nLF換行，n表示newline\v跳格（Tab、水平）\tTab符號(hào)\rCR換行\(zhòng)f換頁(yè)\\反斜線（\）\b退格，b表示blank\0Null字節(jié)\xhh由2位十六進(jìn)制數(shù)字hh表示的ISO-8859-1字符。如“\x61”表示“a”\uhhhh由4位十六進(jìn)制數(shù)字hhhh表示的Unicode字符。如“\u597d”表示“好”知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型字符串長(zhǎng)度：字符串是由若干字符組成的，這些字符的數(shù)量就是字符串的長(zhǎng)度。通過(guò)字符串的length屬性可以獲取整個(gè)字符串的長(zhǎng)度。獲取str1的長(zhǎng)度varstr1='I\'maprogrammer';console.log(str1.length);示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型訪問(wèn)字符串中的字符：字符串可以使用“[index]”語(yǔ)法按照index（索引）訪問(wèn)字符，index從0開(kāi)始，一直到字符串的長(zhǎng)度減1，如果超過(guò)了index最大值，會(huì)返回undefined。varstr='I\'maprogrammer';console.log(str[0]);//輸出結(jié)果：Iconsole.log(str[1]);//輸出結(jié)果：'console.log(str[15]);//輸出結(jié)果：rconsole.log(str[16]);//輸出結(jié)果：undefined示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型字符串拼接：多個(gè)字符串之間可以使用“+”進(jìn)行拼接，如果數(shù)據(jù)類型不同，拼接前會(huì)把其他類型轉(zhuǎn)成字符串，再拼接成一個(gè)新的字符串。varstr='I\'maprogrammer';console.log('a'+'b');//abconsole.log('a'+18);//a18console.log('_'+true);//_trueconsole.log('12'+14);//1214console.log(12+14);//兩個(gè)數(shù)字相加，結(jié)果為26示例代碼注意：字符串的拼接，必須要有字符串和其他類型相拼接，最終的結(jié)果才能是字符串類型。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型“顯示年齡”案例：彈出一個(gè)輸入框，讓用戶輸入年齡。輸入后，單擊“確定”按鈕，程序彈出來(lái)一個(gè)警告框，顯示內(nèi)容為“您今年x歲了”，x表示剛才輸入的年齡。varage=prompt('請(qǐng)輸入您的年齡');//彈出一個(gè)輸入框，讓用戶輸入年齡varmsg='您今年'+age+'歲了';//將年齡與輸出的字符串拼接alert(msg);//彈出警告框，輸出程序的處理結(jié)果示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型案例分析交互變成的三個(gè)基本要素：彈出一個(gè)輸入框（prompt），讓用戶輸入年齡（用戶輸入）把用戶輸入的值用變量保存起來(lái)，把剛才輸入的年齡與要輸出的字符串拼接（程序內(nèi)部處理）用alert語(yǔ)句彈出警告框（輸出結(jié)果）知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型(3)

布爾型布爾型通常用于邏輯判斷，它有兩個(gè)值：true和false，表示事物的“真”和“假”。當(dāng)參與數(shù)學(xué)運(yùn)算時(shí)，布爾型和數(shù)字型相加，true的值為1，false的值為0.true會(huì)轉(zhuǎn)換成1false會(huì)轉(zhuǎn)換成0console.log(true); //輸出結(jié)果：trueconsole.log(false); //輸出結(jié)果：falseconsole.log(true+1); //輸出結(jié)果：2console.log(false+1); //輸出結(jié)果：1示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型(4)

undefined如果一個(gè)變量聲明后沒(méi)有賦值，則變量的值就是undefined。下面通過(guò)代碼演示undefined的使用。//演示undefined的使用console.log(true); //輸出結(jié)果：truevara;console.log(a); //輸出結(jié)果：undefinedconsole.log(a+'_'); //輸出結(jié)果：undefined_（字符串型）console.log(a+1); //輸出結(jié)果：NaN示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型當(dāng)然也可以給一個(gè)變量賦一個(gè)null值，下面通過(guò)代碼演示null值的使用。//演示null的使用varb=null;console.log(b+'_'); //輸出結(jié)果：null_（字符串型）console.log(b+1);//輸出結(jié)果：1（b轉(zhuǎn)換為0）console.log(b+true);//輸出結(jié)果：1（b轉(zhuǎn)換為0，true轉(zhuǎn)換為1）示例代碼(5)

null知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型可以利用typeof運(yùn)算符進(jìn)行數(shù)據(jù)類型檢測(cè)。console.log(typeof12); //輸出結(jié)果：numberconsole.log(typeofnull); //輸出結(jié)果：objectvara='12';console.log(typeofa=='string');//輸出結(jié)果：true示例代碼

1.3

數(shù)據(jù)類型檢測(cè)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型值得一提字面量，簡(jiǎn)單來(lái)說(shuō)，就是用字面量來(lái)表示如何在代碼中表達(dá)這個(gè)值，通過(guò)字面量，我們可以很容易地看出來(lái)它是哪種類型的值。例如數(shù)字字面量：7、8；布爾字面量：true、false等。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型

1.3

數(shù)據(jù)類型轉(zhuǎn)換

(1)

轉(zhuǎn)換為字符串型注意：null和undefined無(wú)法使用toSting()方式進(jìn)行轉(zhuǎn)換；對(duì)于數(shù)字型的變量，可以在toString()的小括號(hào)中傳入?yún)?shù)，來(lái)進(jìn)行進(jìn)制轉(zhuǎn)換。轉(zhuǎn)換為字符串型的3種常見(jiàn)的方式：利用“+”拼接字符串（最常用的一種方式）利用toString()轉(zhuǎn)換成字符串利用String()轉(zhuǎn)換成字符串知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型

(2)

轉(zhuǎn)換為數(shù)字型轉(zhuǎn)換為數(shù)字型的4種常見(jiàn)的方式：使用parseInt()將字符串轉(zhuǎn)為整數(shù)使用parseFloat()將字符串轉(zhuǎn)為浮點(diǎn)數(shù)使用Number()將字符串轉(zhuǎn)為數(shù)字型利用算術(shù)運(yùn)算符（-、*、/）隱式轉(zhuǎn)換知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型“計(jì)算年齡”案例，要求在頁(yè)面中彈出一個(gè)輸入框，提示用戶輸入出生年份，利用出生年份計(jì)算用戶的年齡。year是字符串需要進(jìn)行轉(zhuǎn)換varyear=prompt('請(qǐng)輸入您的年齡');varage=2020-parseInt(year);alert('您今年已經(jīng)'+age+'歲了');示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型“簡(jiǎn)單加法器”案例，要求在頁(yè)面中彈出兩個(gè)輸入框，分別輸入兩個(gè)數(shù)字，然后返回兩個(gè)數(shù)字相加的結(jié)果。使用parseFloat()將字符串轉(zhuǎn)為浮點(diǎn)數(shù)varnum1=prompt('請(qǐng)輸入第一個(gè)數(shù)：');varnum2=prompt('請(qǐng)輸入第二個(gè)數(shù)：');varresult=parseFloat(num1)+parseFloat(num2);alert('計(jì)算結(jié)果是：'+result);示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)據(jù)類型(3)

轉(zhuǎn)換為布爾型轉(zhuǎn)換為布爾型使用Boolean()，在轉(zhuǎn)換時(shí)，代表空、否定的值會(huì)被轉(zhuǎn)換為false，如空字符串、0、NaN、null和undefined，其余的值轉(zhuǎn)換為true。console.log(Boolean('')); //falseconsole.log(Boolean(0)); //falseconsole.log(Boolean(NaN));//falseconsole.log(Boolean(null));//falseconsole.log(Boolean(undefined));//falseconsole.log(Boolean('小白')); //trueconsole.log(Boolean(12)); //true示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符2.運(yùn)算符

2.1

算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于對(duì)兩個(gè)變量或值進(jìn)行算術(shù)運(yùn)算，與數(shù)學(xué)上的加、減、乘、除類似，常用的算術(shù)運(yùn)算符如下。運(yùn)算符運(yùn)算示例解釋說(shuō)明+加1+56-減8-44*乘3*412/除3/21.5%取余數(shù)（取模）7%52知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符算術(shù)運(yùn)算符的注意事項(xiàng)：進(jìn)行四則混合運(yùn)算時(shí)，運(yùn)算順序要遵循數(shù)學(xué)中“先乘除后加減”的原則在進(jìn)行取模運(yùn)算時(shí)，運(yùn)算結(jié)果的正負(fù)取決于被模數(shù)（%左邊的數(shù)）的符號(hào)，與模數(shù)（%右邊的數(shù)）的符號(hào)無(wú)關(guān)在開(kāi)發(fā)中盡量避免利用浮點(diǎn)數(shù)進(jìn)行運(yùn)算，因?yàn)橛锌赡軙?huì)因JavaScript的精度導(dǎo)致結(jié)果的偏差使用“+”和“-”可以表示正數(shù)或負(fù)數(shù)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符值得一提表達(dá)式是各種類型的數(shù)據(jù)、變量和運(yùn)算符的集合，最簡(jiǎn)單的表達(dá)式可以是一個(gè)變量或字面量。注意：表達(dá)式最終都會(huì)有一個(gè)返回值。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符2.2

遞增和遞減運(yùn)算符使用遞增（++）、遞減（--）運(yùn)算符可以快速地對(duì)變量的值進(jìn)行遞增和遞減操作，它屬于一元運(yùn)算符，只對(duì)一個(gè)表達(dá)式進(jìn)行操作。前置遞增（遞減）運(yùn)算符：遞增和遞減運(yùn)算符寫在變量前面，返回的是計(jì)算后的結(jié)果后置遞增（遞減）運(yùn)算符：遞增和遞減運(yùn)算符寫在變量后面，返回的是計(jì)算前的結(jié)果遞增和遞減運(yùn)算符的優(yōu)先級(jí)高于“+”“-”等運(yùn)算符知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符前置遞增/減和后置遞增/減小結(jié)單獨(dú)使用時(shí)，運(yùn)行結(jié)果相同與其他代碼聯(lián)用時(shí)，執(zhí)行結(jié)果會(huì)不同前置：先自加，后運(yùn)算（先己后人）后置：先原值運(yùn)算，后自加（先人后己）開(kāi)發(fā)時(shí)，大多使用后置遞增/減，并且代碼獨(dú)占一行，例如：num++，num--知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符

2.3

比較運(yùn)算符比較運(yùn)算符用于對(duì)兩個(gè)數(shù)據(jù)進(jìn)行比較，其結(jié)果是一個(gè)布爾值，即true或false，常用的比較運(yùn)算符及用法見(jiàn)下表。運(yùn)算符運(yùn)算示例結(jié)果>大于5>5false<小于5<5false>=大于或等于5>=5true<=小于或等于5<=5true==等于5=='5'true!=不等于5!=4true===全等5==='5'false!==不全等5!=='5'true總結(jié)：?jiǎn)?是賦值，雙=是判斷（判斷兩邊值是否相等，此時(shí)有隱式數(shù)據(jù)類型轉(zhuǎn)換），三=是全等（判斷兩邊的值和數(shù)據(jù)類型是否完全相同）。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符2.4

邏輯運(yùn)算符邏輯運(yùn)算符用于對(duì)布爾值進(jìn)行運(yùn)算，其返回值也是布爾值。在實(shí)際開(kāi)發(fā)中，邏輯運(yùn)算符經(jīng)常用于多個(gè)條件的判斷，常用的邏輯運(yùn)算符見(jiàn)下表。運(yùn)算符運(yùn)算示例結(jié)果&&與a&&ba和b都為true，結(jié)果為true，否則為false||或a

||ba和b中至少有一個(gè)為true，結(jié)果為true，否則為false!非!a若a為false，結(jié)果為true，否則相反短路運(yùn)算（邏輯中斷）：當(dāng)有多個(gè)表達(dá)式（值）時(shí)，左邊的表達(dá)式值可以確定結(jié)果時(shí)，就不再繼續(xù)運(yùn)算右邊表達(dá)式的值。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符邏輯與：表達(dá)式1&&表達(dá)式2如果表達(dá)式1的值為真，則返回表達(dá)式2如果表達(dá)式1的值為假，則返回表達(dá)式1邏輯或：表達(dá)式1||表達(dá)式2如果表達(dá)式1的值為真，則返回表達(dá)式1如果表達(dá)式1的值為假，則返回表達(dá)式2知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符值得一提位運(yùn)算符，用來(lái)對(duì)數(shù)據(jù)進(jìn)行二進(jìn)制運(yùn)算，將參與運(yùn)算的操作數(shù)視為由二進(jìn)制（0和1）組成的32位的串。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符2.5

賦值運(yùn)算符賦值運(yùn)算符用于將運(yùn)算符右邊的值賦給左邊的變量，常用的邏輯運(yùn)算符及示例如下。console.log(Boolean(''))//falsevarage=10;age+=5; //相當(dāng)于age=age+5;console.log(age); //輸出結(jié)果：15age-=5; //相當(dāng)于age=age-5;console.log(age); //輸出結(jié)果：10age*=10; //相當(dāng)于age=age*10;console.log(age); //輸出結(jié)果：100示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符常用的邏輯運(yùn)算符及示例見(jiàn)下表。運(yùn)算符運(yùn)算示例結(jié)果=賦值a=3;a=3+=加并賦值a=3;a+=2;a=5-+減并賦值a=3;a-=2;a=1*=乘并賦值a=3;a*=2;a=6/=除并賦值a=3;a/=2;a=1.5%=模并賦值a=3;a%=2;a=1+=連接并賦值a='abc';a+='def';a='abcdef'<<=左移位并賦值a=9;a<<=2;a=36>>=右移位并賦值a=-9;a>>=2;a=-3>>>=無(wú)符號(hào)右移位并賦值a=9;a>>>=2;a=2&=按位“與”并賦值a=3;a&=9;a=1^=按位“異或”并賦值a=3;a^=9;a=10|=按位“或”并賦值a=3;a|=9;a=11知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符

2.6

三元運(yùn)算符三元運(yùn)算符是一種需要三個(gè)操作數(shù)的運(yùn)算符，運(yùn)算的結(jié)果根據(jù)給定條件決定。語(yǔ)法說(shuō)明：先求條件表達(dá)式的值，如果為true，則返回表達(dá)式1的執(zhí)行結(jié)果；如果條件表達(dá)式的值為false，則返回表達(dá)式2的執(zhí)行結(jié)果。條件表達(dá)式?表達(dá)式1:表達(dá)式2語(yǔ)法格式知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)運(yùn)算符2.7

運(yùn)算符優(yōu)先級(jí)運(yùn)算符優(yōu)先級(jí)：是指表達(dá)式中所有運(yùn)算符參與運(yùn)算的先后順序，優(yōu)先級(jí)如下表。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)【案例】計(jì)算圓的周長(zhǎng)和面積代碼實(shí)現(xiàn)思路：編寫HTML表單，用于顯示圓的半徑、圓和面積。獲取用戶輸入的數(shù)據(jù)，然后進(jìn)行類型轉(zhuǎn)換與判斷。若判斷用戶輸入的數(shù)據(jù)不是數(shù)值，則利用警告框進(jìn)行提示。若判斷符合要求，則進(jìn)行計(jì)算并將其顯示到指定位置。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)總結(jié)：本章主要介紹了JavaScript中最基礎(chǔ)的語(yǔ)法知識(shí)，包括數(shù)據(jù)類型的概念及數(shù)據(jù)類型的轉(zhuǎn)換、運(yùn)算符的使用。

作業(yè)：完成計(jì)算圓的周長(zhǎng)和面積。1課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目2-2流程控制語(yǔ)句5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)共有幾種基本數(shù)據(jù)類型？分別是什么？如何檢測(cè)數(shù)據(jù)的類型？哪個(gè)函數(shù)可以將數(shù)據(jù)轉(zhuǎn)換為字符串？三元運(yùn)算符是什么意思？提問(wèn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)查詢水果價(jià)格打印金字塔重點(diǎn)：選擇結(jié)構(gòu)：if，if…else，if…elseif…,swich語(yǔ)句循環(huán)結(jié)構(gòu)：for，while，do…while語(yǔ)句實(shí)際案例講解知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制流程控制通過(guò)控制代碼的執(zhí)行順序來(lái)完成要實(shí)現(xiàn)的功能，流程控制的3種結(jié)構(gòu)如下：順序結(jié)構(gòu)是程序中最基本的結(jié)構(gòu)，程序會(huì)按照代碼的先后順序依次執(zhí)行分支結(jié)構(gòu)用于根據(jù)條件來(lái)決定是否執(zhí)行某個(gè)分支代碼循環(huán)結(jié)構(gòu)用于根據(jù)條件來(lái)決定是否重復(fù)執(zhí)行某一段代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制選擇結(jié)構(gòu)概念：選擇結(jié)構(gòu)語(yǔ)句需要根據(jù)給出的條件進(jìn)行判斷來(lái)決定執(zhí)行對(duì)應(yīng)的代碼。if…elseif…else多分支語(yǔ)句if單分支語(yǔ)句if…else雙分支語(yǔ)句switch多分支語(yǔ)句知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.1選擇結(jié)構(gòu)——if單分支語(yǔ)句流程圖if(條件表達(dá)式){//代碼段}語(yǔ)法結(jié)構(gòu)if語(yǔ)句也稱為條件語(yǔ)句、單分支語(yǔ)句，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.2選擇結(jié)構(gòu)——if…else雙分支語(yǔ)句if…else語(yǔ)句也稱為雙分支語(yǔ)句，當(dāng)滿足某種條件時(shí)，就進(jìn)行某種處理，否則進(jìn)行另一種處理。if(條件表達(dá)式){//代碼段1}else{//代碼段2}語(yǔ)法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.3選擇結(jié)構(gòu)——if…elseif…else多分支語(yǔ)句if…elseif語(yǔ)句也稱為多分支語(yǔ)句，可針對(duì)不同情況進(jìn)行不同的處理。if(條件表達(dá)式1){//代碼段1}elseif(條件表達(dá)式2){//代碼段2}...elseif(條件表達(dá)式n){//代碼段n}else{//代碼段n+1}語(yǔ)法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1.4選擇結(jié)構(gòu)——switch多分支語(yǔ)句switch語(yǔ)句也是多分支語(yǔ)句，功能與if…elseif語(yǔ)句類似，不同的是它只能針對(duì)某個(gè)表達(dá)式的值作出判斷，從而決定執(zhí)行哪一段代碼。switch(表達(dá)式){case值1

代碼段1;break;case值2

代碼段2;break;...default:

代碼段n;}語(yǔ)法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制循環(huán)結(jié)構(gòu)概念：所謂循環(huán)語(yǔ)句就是可以實(shí)現(xiàn)一段代碼的重復(fù)執(zhí)行。舉例：連續(xù)輸出1~100之間的數(shù)字。forwhiledo…while知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.1

for語(yǔ)句for語(yǔ)句是最常用的循環(huán)語(yǔ)句，它適合循環(huán)次數(shù)已知的情況。for(初始化變量;條件表達(dá)式;操作表達(dá)式){//循環(huán)體}語(yǔ)法結(jié)構(gòu)流程圖知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制案例：使用for語(yǔ)句輸出1~100范圍內(nèi)的數(shù)字初始化變量條件表達(dá)式操作表達(dá)式for(var

i=1;i<=100;i++){console.log(i);}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制代碼執(zhí)行流程：執(zhí)行“var

i=1;”初始化變量判斷“i<=100”是否為true，如果為true，執(zhí)行循環(huán)體，反之，結(jié)束循環(huán)執(zhí)行循環(huán)體，通過(guò)“console.log(i)”輸出變量i的值執(zhí)行“i++”，將i的值加1，此時(shí)i的值為2判斷“i<=100”是否為true，和第②步相同。只要滿足“i<=100”這個(gè)條件，就會(huì)一直循環(huán)。當(dāng)i的值加到101時(shí)，判斷結(jié)果為false，循環(huán)結(jié)束知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制斷點(diǎn)調(diào)試是指在程序的某一行設(shè)置一個(gè)斷點(diǎn)，調(diào)試時(shí)，程序運(yùn)行到這一行就會(huì)停住，然后就可以控制代碼一步一步的執(zhí)行，在這個(gè)過(guò)程中可以看到每個(gè)變量當(dāng)前的值。查看方式：在Chrome瀏覽器中，按F12鍵啟動(dòng)開(kāi)發(fā)者工具后，切換到“Sources”面板，界面效果如下圖所示，其中右欄是JavaScript調(diào)試區(qū)?！癝ources”面板知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制在中欄顯示的網(wǎng)頁(yè)源代碼中，單擊某一行的行號(hào)，即可添加斷點(diǎn)，再次單擊，可以取消斷點(diǎn)。例如，為for語(yǔ)句添加斷點(diǎn)，如下圖所示。斷點(diǎn)調(diào)試知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

for循環(huán)案例“重復(fù)執(zhí)行相同代碼”案例，重復(fù)執(zhí)行N次。var

num=prompt('請(qǐng)您輸入次數(shù)');for(var

i=1;i<=num;i++){console.log('重要的事情說(shuō)'+num+'遍');}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制“重復(fù)執(zhí)行不同代碼”案例for(var

i=1;i<=100;i++){if(i==1){//使用if條件判斷語(yǔ)句，根據(jù)i的不同，進(jìn)行不同處理console.log('當(dāng)前是第1次');}elseif(i==100){console.log('當(dāng)前是第100次');}}知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有整數(shù)“求和”和“平均數(shù)”案例varsum=0; //利用sum對(duì)計(jì)數(shù)器i進(jìn)行累加for(var

i=1;i<=100;i++){sum+=i; //相當(dāng)于sum=sum+i;}console.log('求和：'+sum);//計(jì)算結(jié)果：5050console.log('求平均值：'+(sum/100));//計(jì)算結(jié)果：50.5知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有整數(shù)“求偶數(shù)和”和“求奇數(shù)和”案例vareven=0;varodd=0;for(var

i=1;i<=100;i++){if(i%2==0){ //判斷i是奇數(shù)還是偶數(shù)even+=i;}else{odd+=i;}}console.log('1~100之間所有的偶數(shù)和是'+even);//計(jì)算結(jié)果：2550console.log('1~100之間所有的奇數(shù)和是'+odd);//計(jì)算結(jié)果：2500知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制1~100之間的所有能被3整除的整數(shù)之和案例varresult=0;for(var

i=1;i<=100;i++){if(i%3==0){result+=i;}}console.log(result); //計(jì)算結(jié)果：1683知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制自動(dòng)生成字符串案例var

num=prompt('請(qǐng)輸入星星的個(gè)數(shù)');var

str='';for(var

i=1;i<=num;i++){

str=str+'★';}console.log(str);知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

循環(huán)嵌套案例生成i行j列的星星圖案案例varrows=prompt('請(qǐng)輸入行數(shù)：');varcols=prompt('請(qǐng)輸入列數(shù)：');var

str='';for(var

i=1;i<=rows;i++){for(varj=1;j<=cols;j++){

str+='☆';}

str+='\n'; //換到下一行}console.log(str);星星圖案知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制生成三角形的星星圖案案例var

str='';for(var

i=1;i<=5;i++){for(varj=i;j<=5;j++){//j的初始值為i

str=str+'☆';}

str+='\n';}console.log(str);三角形圖案知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制生成九九乘法表案例var

str='';for(var

i=1;i<=9;i++){for(varj=1;j<=i;j++){

str+=j+'x'+i+'='+i*j+'\t';}

str+='\n';}console.log(str);九九乘法表知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)流程控制

2.2while語(yǔ)句while語(yǔ)句可以在條件表達(dá)式為true的前提下，循環(huán)執(zhí)行指定的