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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

在JavaScript中，如果功能塊有多個語句，這些語句中間用分號隔開。實際上，每一個完整的功能語句結束處都應該寫上分號，哪怕只有一條語句，也應該寫上。【相關知識】在<body>標簽內部輸入以下代碼：<bodyonload="alert('你好！');document.write('歡迎光臨本站');">【任務實現】頁面上有一個按鈕，點擊此按鈕后，彈出問候對話框，在頁面上打印歡迎詞。任務4點擊按鈕執行任務3document.write()執行時，將重寫當前頁面。所以，頁面上原有的內容將全部消失，只留下document.write()寫下的內容。在本任務中，頁面中最后看不到原來的“問候”按鈕就是這個原因。【相關知識】在<body>標簽對中編寫按鈕代碼，并在按鈕代碼中添加onclick事件屬性，并編寫執行任務代碼：<inputtype="button"name="button"id="button"value="問候"onclick="alert('你好！');document.write('歡迎光臨本站！');"/>【任務實現】仍然實現任務4的需求，但是要求把任務執行代碼模塊化，以便隨時調用。任務5任務模塊化1、代碼模塊化。

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

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

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

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

算

符名

稱舉

例==等于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]【相關知識】③if...elseif...else語句if(<條件1>) [語句塊1]elseif(條件2) [語句塊2]……elseif(<條件n>) [語句塊n]else [語句塊n+1]【相關知識】④if語句的嵌套if語句允許嵌套，嵌套時注意if與else的匹配，不要出現交叉嵌套的現象。【相關知識】4.2、switch語句switch(<變量或表達式>){ case<數值1>：

[語句塊1] <break;> case<數值2>：

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

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

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

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

算

符順

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

溫馨提示

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

最新文檔

評論

0/150

提交評論