JavaScript項目式實例教程（第2版）課件 項目1、2 對話框和頁面輸出 初步體驗-簡單計算器 判斷結(jié)構(gòu)_第1頁
JavaScript項目式實例教程（第2版）課件 項目1、2 對話框和頁面輸出 初步體驗-簡單計算器 判斷結(jié)構(gòu)_第2頁
JavaScript項目式實例教程（第2版）課件 項目1、2 對話框和頁面輸出 初步體驗-簡單計算器 判斷結(jié)構(gòu)_第3頁
JavaScript項目式實例教程（第2版）課件 項目1、2 對話框和頁面輸出 初步體驗-簡單計算器 判斷結(jié)構(gòu)_第4頁
JavaScript項目式實例教程（第2版）課件 項目1、2 對話框和頁面輸出 初步體驗-簡單計算器 判斷結(jié)構(gòu)_第5頁
已閱讀5頁，還剩60頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目一對話框和頁面輸出——初步體驗有兩張網(wǎng)頁，每張網(wǎng)頁上都有一個”問候”按鈕。在第一張網(wǎng)頁上點擊該按鈕，彈出對話框“張三向您問好！”，點擊對話框上的“確定”按鈕后，緊接著在該網(wǎng)頁上打印“張三歡迎您光臨本站！”。在第二張網(wǎng)頁上做同樣的操作，顯示結(jié)果相同，只不過信息中把“張三”顯示為了“李四”。項目要求代碼的復(fù)用性和可維護性良好。項目情境熟悉JavaScript腳本內(nèi)嵌在HTML中的書寫方法熟悉JavaScript腳本的執(zhí)行時機。初步了解事件觸發(fā)的概念。初步了解函數(shù)和函數(shù)調(diào)用的方法。熟悉JavaScript腳本文件的編寫和引入的方法。學(xué)習(xí)目標打開頁面，立即彈出一個問候?qū)υ捒?。任?wù)1彈出對話框1、在HTML中，任何標簽都可以看成是一個對象，例如body就是一個對象。這些對象一般都有屬性、事件和方法。其相關(guān)內(nèi)容將在后面的章節(jié)闡述。2、如果要想在頁面被引導(dǎo)后執(zhí)行一個任務(wù)，可以給<body>標簽添加一個onload事件（關(guān)于事件將在后續(xù)章節(jié)詳細介紹），此事件在body對象被加載完成后被觸發(fā)，寫法形如：onload="要執(zhí)行的代碼";3、alert("參數(shù)")功能是彈出一個對話框，對話框中的內(nèi)容就是該函數(shù)中設(shè)置的參數(shù)。4、JavaScript對大小寫是敏感的，所以alert()必須全部小寫?！鞠嚓P(guān)知識】在<body>標簽內(nèi)部輸入以下代碼：<bodyonload="alert('你好！')">【任務(wù)實現(xiàn)】在網(wǎng)頁上打印一串歡迎詞。任務(wù)2在頁面上打印歡迎詞1、document表示的是文檔對象，每個載入瀏覽器的HTML文檔都會成為Document對象。（關(guān)于該對象在后續(xù)章節(jié)會詳細介紹）2、document對象有很多方法，write方法是其中之一，表示在文檔中打印信息內(nèi)容?！鞠嚓P(guān)知識】在<body>標簽內(nèi)部輸入以下代碼：<bodyonload="document.write('歡迎光臨本站！')">【任務(wù)實現(xiàn)】先彈出問候?qū)υ捒蛟僭陧撁嫔洗蛴g迎詞任務(wù)3先彈對話框再打印

在JavaScript中，如果功能塊有多個語句，這些語句中間用分號隔開。實際上，每一個完整的功能語句結(jié)束處都應(yīng)該寫上分號，哪怕只有一條語句，也應(yīng)該寫上?！鞠嚓P(guān)知識】在<body>標簽內(nèi)部輸入以下代碼：<bodyonload="alert('你好！');document.write('歡迎光臨本站');">【任務(wù)實現(xiàn)】頁面上有一個按鈕，點擊此按鈕后，彈出問候?qū)υ捒颍陧撁嫔洗蛴g迎詞。任務(wù)4點擊按鈕執(zhí)行任務(wù)3document.write()執(zhí)行時，將重寫當(dāng)前頁面。所以，頁面上原有的內(nèi)容將全部消失，只留下document.write()寫下的內(nèi)容。在本任務(wù)中，頁面中最后看不到原來的“問候”按鈕就是這個原因?！鞠嚓P(guān)知識】在<body>標簽對中編寫按鈕代碼，并在按鈕代碼中添加onclick事件屬性，并編寫執(zhí)行任務(wù)代碼：<inputtype="button"name="button"id="button"value="問候"onclick="alert('你好！');document.write('歡迎光臨本站！');"/>【任務(wù)實現(xiàn)】仍然實現(xiàn)任務(wù)4的需求，但是要求把任務(wù)執(zhí)行代碼模塊化，以便隨時調(diào)用。任務(wù)5任務(wù)模塊化1、代碼模塊化。

將代碼“打包”為函數(shù)的形式2、Javascript與HTML混編

<script></script>標簽的使用3、注釋

//……....注釋單行

/*…….*/注釋多行【相關(guān)知識】1、在<body>標簽對中編寫按鈕代碼：<inputtype="button"name="button"id="button"value="問候"onclick="hello()"/>站！');"/>2、在頁面的<head></head>標簽內(nèi)部編寫代碼：<scripttype="text/javascript">//下面定義了一個函數(shù)hellofunctionhello(){ alert('你好！'); document.write('歡迎光臨本站!');}</script>【任務(wù)實現(xiàn)】仍然完成任務(wù)5的需求，但是要求增加代碼的靈活性。例如改變對話框和頁面打印的信息，但是不需要修改函數(shù)模塊代碼。任務(wù)6調(diào)用靈活化在任務(wù)4中，我們將代碼“打包”為一個函數(shù)，實現(xiàn)了模塊化，但是還不夠靈活。例如要改變顯示的內(nèi)容，就必須要修改函數(shù)體中的代碼。又例如，如果再增加一個按鈕，點擊這個按鈕也需要調(diào)用函數(shù)hello(),但是要顯示的內(nèi)容又有不同，則無法實現(xiàn)，只能另外編寫一個函數(shù)供其調(diào)用。這樣的程序缺乏了可擴展性，代碼的復(fù)用性也比較差。程序設(shè)計中常常通過在編寫函數(shù)模塊時定義參數(shù)（一般是用逗號隔開的變量列表），而在調(diào)用函數(shù)時傳入具體的數(shù)值的方法實現(xiàn)函數(shù)功能的靈活性和可擴展性。有關(guān)變量的概念以及函數(shù)參數(shù)的具體內(nèi)容將在后面章節(jié)闡述?！鞠嚓P(guān)知識】1、在<body>標簽對中編寫按鈕代碼：<inputtype="button"name="button"id="button"value="問候"onclick="hello('你好','歡迎光臨本站！');"/>2、在頁面的<head></head>標簽內(nèi)部編寫代碼：<scripttype="text/javascript">functionhello(str1,str2){alert(str1);document.write(str2);}</script>【任務(wù)實現(xiàn)】任務(wù)7“項目一”的實現(xiàn)1、js文件擴展名為js的文件是用JavaScript編寫的客戶端腳本文件，它不是一般的網(wǎng)頁文件，一般不能直接運行打開，而是配合網(wǎng)頁來使用。它常常用來實現(xiàn)某些功能，這些功能代碼可以被多個不同的網(wǎng)頁調(diào)用。在js文件中編寫JavaScript腳本時，不要用<script>標簽對包括。2、引用js文件在頁面中，只有引入js文件才能使用該文件中的JavaScript代碼。方法是在<script>標簽中添加src屬性，其值就是該js文件的路徑?！鞠嚓P(guān)知識】1、建立一個文件hello.js（注意擴展名為js）。2、在hello.js中編寫如下函數(shù)代碼并保存文件。functionhello(str1,str2){ alert(str1); document.write(str2);}3、建立兩個頁面，分別為hello1.html和hello2.html（為簡單起見，將這三個文件放置在同一個目錄下）。4、在hello1.html中，在<body>標簽對內(nèi)部編寫按鈕代碼如下：<inputtype="button"name="button"id="button"value="問候"onclick="hello('張三向您問好','張三歡迎您光臨本站！');“/>5、在頁面的<head></head>標簽內(nèi)部編寫代碼如下：<scripttype="text/javascript"src="hello.js"></script>6、在hello2.html中做同樣的操作，只是將“張三”改為“李四”【任務(wù)實現(xiàn)】項目二簡單計算器——判斷結(jié)構(gòu)設(shè)計一個簡單的計算器，能進行加、減、乘、除四則運算。當(dāng)用戶運行網(wǎng)頁時，依次彈出三個輸入對話框，分別要求輸入兩個數(shù)和一個運算符號（+、-、×、÷）。輸入無誤時，在頁面上打印計算算式。在進行除法運算時，除數(shù)不能為0，否則打印錯誤信息。如果輸入數(shù)字格式錯誤或者輸入的運算符號錯誤都提示相應(yīng)的不能運算信息。項目情境熟悉變量和常量的概念和使用方法。熟悉基本數(shù)據(jù)類型的概念熟悉數(shù)據(jù)類型的轉(zhuǎn)換。熟悉關(guān)系運算符、邏輯運算符、算術(shù)運算符的使用方法。熟悉判斷結(jié)構(gòu)的使用方法。熟悉幾個內(nèi)置函數(shù)的使用方法。學(xué)習(xí)目標打開頁面，打印程序中指定的姓名和性別。任務(wù)1認識變量和字符串1、變量的定義定義一個變量用關(guān)鍵字var，例如：varx;vary;一個var也可以同時定義多個變量，這些變量間用逗號隔開，例如：varx,y,z;【相關(guān)知識】2、變量的賦值變量的賦值就是把值存儲在變量所在的內(nèi)存單元中,方法是用“=”運算符。賦值可以是在定義變量時，例如：varx=0;vary=1,z=2;也可以是在變量定義后使用時才賦值，例如：varx;x=0;【相關(guān)知識】3、變量的命名變量的名稱必須是由ASCII字符或者下劃線（_）開頭，第一個字符不能是數(shù)字，但其后可以是數(shù)字或者其他字母。例如如下變量的命名是合法的：aA_aa_1注意：JavaScript語言對大小寫是敏感的，所以變量a和變量A是兩個不同的變量。變量名不能定義為JavaScript的保留字。例如不能定義一個變量的名稱為var或者function?！鞠嚓P(guān)知識】4、變量的類型【相關(guān)知識】數(shù)據(jù)類型具體類型基本數(shù)據(jù)類型字符串型、數(shù)字型、布爾型復(fù)合數(shù)據(jù)類型對象、數(shù)組其他數(shù)據(jù)類型函數(shù)、null（空）、undefined（未定義）5、常量與變量對應(yīng)的是常量。常量用來表示一個固定不變的值。比如下面這些這些都是常量：12325.78"張三"true【相關(guān)知識】6、字符串型6.1、字符串的定義字符串必須用雙引號或者單引號包括起來。6.2、轉(zhuǎn)義符轉(zhuǎn)義符“\”6.3、連接運算符連接運算符”+”【相關(guān)知識】在<head>標簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varname="張三"; varsex="男"; document.write("姓名："+name+"<br/>性別："+sex); </script>【任務(wù)實現(xiàn)】打開頁面，彈出一個輸入對話框，要求輸入姓名。輸入確定后再次彈出輸入對話框，要求輸入性別。輸入確定后，在頁面打印剛剛輸入的信息。任務(wù)2輸入對話框1、Window對象window對象表示瀏覽器窗口。任何一個全局函數(shù)或變量都是windowd對象的屬性，所以使用時，該對象常常省略不寫?！鞠嚓P(guān)知識】2、prompt方法prompt方法的功能是彈出一個輸入對話框，格式是：prompt(<提示信息>[,默認值])其返回的值就是用戶在對話框中輸入的值,返回值的類型是字符串型?！鞠嚓P(guān)知識】在<head>標簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varname=mpt("請輸入您的姓名：",""); varsex=mpt("請輸入您的性別：","男"); document.write("姓名："+name+"<br/>性別："+sex);</script>【任務(wù)實現(xiàn)】打開頁面，彈出一個輸入對話框，要求輸入一個整數(shù)。如果輸入的不是一個整數(shù)，則給出錯誤提示。任務(wù)3判斷是否為整數(shù)1、表達式表達式可以是常量或者變量，也可以是由常量、變量和運算符號組成的語句。比如下面這些都是合法的表達式：4.56truea>ba+b?！鞠嚓P(guān)知識】2、布爾數(shù)據(jù)類型布爾（boolean）是一種基本數(shù)據(jù)類型，表示真或者假，通俗的理解為是或者非，對或者錯等。它常常用于判斷一個結(jié)果的是非性。它的值只有兩個：true（真）和false（假）。例如：8>4其結(jié)果就是false。再如：a<6如果a是一個比6小的值，則結(jié)果就是true,如果a是一個比6大或者等于6，結(jié)果就是false?！鞠嚓P(guān)知識】3、關(guān)系運算符【相關(guān)知識】運

算

符名

稱舉

例==等于a==b!=不等于a!=b===全等于a===b!==不全等于a!==b>

大于a>b<

小于a<b>=大于或等于a>=b<=小于或等于a<=b4、判斷語句4.1、if語句①if語句if(<條件>)[語句塊]②if...else語句if(<條件>) [語句塊1]else [語句塊2]【相關(guān)知識】③if...elseif...else語句if(<條件1>) [語句塊1]elseif(條件2) [語句塊2]……elseif(<條件n>) [語句塊n]else [語句塊n+1]【相關(guān)知識】④if語句的嵌套if語句允許嵌套，嵌套時注意if與else的匹配，不要出現(xiàn)交叉嵌套的現(xiàn)象?！鞠嚓P(guān)知識】4.2、switch語句switch(<變量或表達式>){ case<數(shù)值1>：

[語句塊1] <break;> case<數(shù)值2>：

[語句塊2] <break;> …… case<數(shù)值n>：

[語句塊n] <break;> [default:] [語句塊n+1]}【相關(guān)知識】5、三目運算三目運算是根據(jù)條件執(zhí)行兩個語句中的其中一個，格式如下：布爾表達式?語句1:語句2當(dāng)“布爾表達式”值為真時，執(zhí)行“語句1”；當(dāng)“布爾表達式”值為假時，執(zhí)行“語句2”?！鞠嚓P(guān)知識】在<head>標簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varnum=mpt("請輸一個整數(shù)：","");if(parseInt(num)==num) { document.write(num+"是整數(shù)");}else{ document.write(num+"不是整數(shù)");}</script>【任務(wù)實現(xiàn)】打開頁面，

彈出一個輸入對話框，要求輸入一個整數(shù)。如果輸入的為奇數(shù)，確認后打印信息，提示該數(shù)為奇數(shù)。如果輸入的為偶數(shù)，確認后打印信息，提示該數(shù)為偶數(shù)。如果輸入的信息為以下情況中的一種，就視為不合法輸入，提示錯誤。①輸入的不是數(shù)字。

輸入的是數(shù)字，但不是整數(shù)。③未做任何輸入。任務(wù)4判斷奇偶數(shù)1、邏輯運算符【相關(guān)知識】運算符名稱舉例備注&&邏輯與true&&false(結(jié)果為false)9>8&&7>8(結(jié)果為false)二元運算符。只有兩個操作數(shù)的值都為true，結(jié)果才是true。||邏輯或true||false(結(jié)果為false)9>8||7>8(結(jié)果為false)二元運算符。操作數(shù)中只要有一個值為true，結(jié)果就是true。只有兩個操作數(shù)的值都為false，結(jié)果才是false。!邏輯非!true(結(jié)果為false)!9>8(結(jié)果為false)一元運算符。true的非是false,false的非是true。2、算術(shù)運算符【相關(guān)知識】運算符名稱舉例備注+加a+b二元運算符。加法運算，運算結(jié)果為數(shù)字型。-減a-b二元運算符。減法運算，運算結(jié)果為數(shù)字型。*乘a*b二元運算符。乘法運算，運算結(jié)果為數(shù)字型。/除a/b二元運算符。除法運算，運算結(jié)果為數(shù)字型。%模a%b二元運算符。取余數(shù)運算，運算結(jié)果為數(shù)字型。++遞增a++++a一元運算符。相當(dāng)于加1。要求操作數(shù)必須是變量。運算結(jié)果為數(shù)字型。--遞減a—--a一元運算符。相當(dāng)于減1。要求操作數(shù)必須是變量。運算結(jié)果為數(shù)字型。3、運算符的優(yōu)先級【相關(guān)知識】優(yōu)先級（從高到低）運

算

符順

序1小括號()2一元運算符++--!3算術(shù)運算符先*/%，后+-4關(guān)系運算符>>=<<=5關(guān)系運算符==!====!==6邏輯運算符先&&，后||7賦值運算符=4、isNaN函數(shù)【相關(guān)知識】isNaN()函數(shù)接收一個參數(shù)，用于檢查這個參數(shù)是否“不是數(shù)值”。isNaN()函數(shù)在接收到一個值之后，會嘗試將這個值轉(zhuǎn)換為數(shù)值，如果能成功轉(zhuǎn)換，則返回false，否則返回true。該函數(shù)的基本語法是isNaN(value)，其中value就是要被檢查的值。需要注意的是，當(dāng)value為空格（或者由空格組成的字符串）、null值時，該函數(shù)返回的值也是false，原因是isNaN()函數(shù)將這些值轉(zhuǎn)換為了數(shù)字0。在<head>標簽輸入下列代碼：<scripttype="text/javascript">varnum=mpt("請輸一個整數(shù)：",0);if(!isNaN(num)&&num!=""&&parseInt(num)==num){ varres=num%2;if(res==0) { document.write(num+"是偶數(shù)"); } else { document.write(num+"是奇數(shù)"); }}else{ document.write("輸入的數(shù)字格式不對，不能判斷奇偶數(shù)");}</script>【任務(wù)實現(xiàn)】打開頁面，彈出輸入對話框，要求輸入一個被加數(shù)。輸入確定后，再次彈出輸入對話框，要求輸入一個加數(shù)。輸入確定后，打印這兩個數(shù)的和。如果這兩個數(shù)中只要有一個輸入格式不正確，或者未輸入任何值，都給出錯誤信息。任務(wù)5加法運算器1、數(shù)字型【相關(guān)知識】表現(xiàn)形式舉例涵義整數(shù)198、234072、0650xAF9、0x56E十進制八進制（0開頭）十六進制（0x開頭）浮點數(shù)1.0、3.489有小數(shù)點科學(xué)計數(shù)法2.45E72.45×107特殊數(shù)字InfinityNaN無限大不是一個數(shù)字2、數(shù)據(jù)類型的轉(zhuǎn)換2.1、隱式類型轉(zhuǎn)換【相關(guān)知識】數(shù)據(jù)類型在數(shù)字環(huán)境下轉(zhuǎn)換在字符串環(huán)境下轉(zhuǎn)換在布爾環(huán)境下轉(zhuǎn)換數(shù)字類型無（1）轉(zhuǎn)換為內(nèi)容為數(shù)字的字符串（2）NaN轉(zhuǎn)換為"NaN"（1）非0轉(zhuǎn)換為true，0轉(zhuǎn)換為false（2）NaN轉(zhuǎn)換為false字符串類型（1）空字符串轉(zhuǎn)換為0（2）非空字符串轉(zhuǎn)換為數(shù)字（當(dāng)字符串中的內(nèi)容為數(shù)字時）或NaN（當(dāng)字符串中的內(nèi)容不是數(shù)字時）無（1）空字符串轉(zhuǎn)換為false（2）非空字符串轉(zhuǎn)換為true布爾類型（1）true轉(zhuǎn)換為1（2）false轉(zhuǎn)換為0（1）true轉(zhuǎn)換為"true"（2）false轉(zhuǎn)換為"false"無2.2、顯示類型轉(zhuǎn)換【相關(guān)知識】函數(shù)功能舉例結(jié)果Number(字符串)將字符串整體轉(zhuǎn)換為數(shù)字。Number("4.56")Number("1.23.56")4.56NaNparseInt(字符串)將字符串中第一個非數(shù)字字符前的字符轉(zhuǎn)換為整型數(shù)字。parseInt("12abc")parseInt("abc12")parseInt("1.8")12NaN1parseFloat(字符串)將字符串中第一個非數(shù)字字符前的字符轉(zhuǎn)換為浮點型數(shù)字。parseFloat("1.2abc")parseFloat("abc1.2")parseFloat("1.2e3abc")1.2NaN12003、查看數(shù)據(jù)類型【相關(guān)知識】可以使用typeof運算符查看一個數(shù)據(jù)的數(shù)據(jù)類型。typeof運算符有以下兩種使用方式：typeof(表達式)typeof變量名在<head>標簽對中輸入如下代碼：<scripttype="text/javascript">varnum1=mpt("請輸入被加數(shù)：",0);varnum2=mpt("請輸入加數(shù)：",0);if(parseFloat(num1)==num1&&parseFloa

溫馨提示

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

評論

0/150

提交評論