JavaScript的基本語法.ppt

《JavaScript的基本語法.ppt》由會員分享，可在線閱讀，更多相關《JavaScript的基本語法.ppt（27頁珍藏版）》請在裝配圖網上搜索。

1、第四章,JavaScript的基本語法,本資料由-大學生創(chuàng)業(yè)|創(chuàng)業(yè)|創(chuàng)業(yè)網 在線代理|網頁代理|代理網頁| 減肥藥排行榜|淘寶最好的減肥藥|什么減肥藥效果最好|減肥瘦身藥|,預習檢查,問題1:大家已學HTML，為什么要學習JavaScript？ 問題2:如何編寫JavaScript程序？ 問題3 JavaScript與Java基本語法的異同？,本節(jié)任務,制作淘寶網購物 簡易計算器頁面,掌握腳本的基本結構(Script標簽) 簡單記憶基本語法 變量的定義與賦值 數據類型與轉換parseFloat等 運算符和控制語句同Java 靈活運用高級語法自定義函數function,本節(jié)目標,回顧HTML-1

2、,常用的HTML標簽有哪些？,請說說表格的基本結構以及跨行、跨列的用法？, 單元格內容 單元格內容 ,回顧HTML-2,請簡述表單的基本結構？常用表單元素有哪些？,如何使用樣式表定義統(tǒng)一的字體外觀和文本框的細邊框樣式？,表單的基本結構： 常用的表單元素有： 文本框（text）、密碼框（password）、單選按鈕（radio）、 復選框（checkbox）、列表框（和）、 按鈕（button、submit和reset）、多行文本框（）。,統(tǒng)一的字體外觀： font-family:“黑體; font-size:18px; color:#FF0000; 細邊框樣式： bo

3、rder-width:1px; border-style:solid;,為什么要學JavaScript,表單驗證,頁面動態(tài)效果,演示示例2：層的切換 和 樹形菜單等,演示示例1：注冊表單驗證,什么是JavaScript, 腳本的基本結構 var count=0; document.write(淘寶網歡迎您！); for(i=0;i淘寶網歡迎您！); BODY部分的內容 ,如何使用JavaScript實現此部分內容？,查看完整源代碼,什么是JavaScript,腳本的執(zhí)行原理,應用 服務器,IE,IE,解析HTML標簽和JavaScript腳本,從服務器端下載含JavaScript的頁面

4、,返回響應,客戶端請求含JS的頁面,發(fā)送請求,1,用戶輸入,2,3,JavaScript的基本語法, 腳本的基本結構 var count=0; document.write(淘寶網歡迎您！); for(i=0;i淘寶網歡迎您！); BODY部分的內容 ,大家想想上面JavaScript代碼與我們學過的Java、C#語言有相似的地方嗎？,JavaScript的基本語法,變量的聲明和賦值,,var count;,count = 5;,定義變量,賦值,“var” 用于聲明變量的關鍵字 “count” 變量名,var x, y, z = 10;,var count = 10;,同時聲明和賦值變量,聲

5、明多個變量,運算符號,運算符對一個或多個變量或值（操作數）進行運算，并返回一個新值 根據所執(zhí)行的運算，運算符可分為以下類別： 算術運算符 +、-、 * 、 / 、%、++、--、-(求反) 比較運算符 ==、!=、、=、<、<= 邏輯運算符 else //JavaScript代碼; ,switch (表達式) case 常量1 : JavaScript語句1; break; case 常量2 : JavaScript語句2; break; ... default : JavaScript語句3; ,for(初始化; 條件; 增量) 語句集; while(條件)

6、語句集; ,注釋,單行注釋以 // 開始，以行末結束 例如： //表示JavaScript代碼的開始,多行注釋以 /* 開始，以 */ 結束，符號 /* */ 指示中間的語句是該程序中的注釋。 例如： /* helloWorld.html 2007-9-29 第一個JavaScript程序 */,類型轉換,parseInt (String) 將字符串轉換為整型數字 如: parseInt (“86”)將字符串“86”轉換為整型值86 parseFloat(String) 將字符串轉換為浮點型數字 如: parseInt (“34.45”)將字符串“34.45”轉換為浮點值34.45,什

7、么是函數,函數的含義：類似于Java中的方法，是執(zhí)行特定任務的語句塊。,如何希望點擊某個按鈕后才顯示“HelloWorld”， 并能輸入顯示的次數，怎么辦？,演示示例3：調用函數輸出“HelloWorld”,什么是函數,,1、在頁面中放置一個文本框和一個按鈕，讓用戶輸入次數后點擊按鈕才顯示 2、把循環(huán)顯示的代碼放置到函數中，當點擊按鈕時，才調用函數顯示HelloWorld 經過分析，該如何解決上面問題？,使用自定義函數,如何使用函數,,創(chuàng)建函數 function 函數名( 參數1,參數2， ) 語句; 調用函數 函數調用一般和表單元素的事件一起使用，調用格式為： 事件名“函數名

8、” ;,function showHello( ) var count=document.myForm.txtCount.value ; for(i=0; iHelloWorld); ,,,表示單擊此按鈕時，調用函數showHello( )執(zhí)行,小結1,編寫如左圖所示，具有能對兩個操作數進行加、減、乘、除運算的簡易計算器。,名為myform的表單,,名為divButton2的普通按鈕,名為txtNum1的文本框,練習答案,練習代碼,提示：加、減、乘、除四個按鈕分別調用四 個函數實現兩個數相加、相減、相乘和相除,如何使用函數,在小結1中，4個按鈕調用的函數的代碼很類似，怎么優(yōu)化代碼？,查看小

9、結1練習答案代碼,比較4個函數，只有運算符號不一樣，將運算 符號作為函數的參數即可。怎么用一個函數來 代替4個結構相似的函數？,使用有參函數,定義有參函數,JavaScript 代碼, function compute(op) var num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if (op==+) document.myform.txtResult.value=num1+num2 ; if (op==-)

10、 document.myform.txtResult.value=num1-num2 ; if (op==*) document.myform.txtResult.value=num1*num2 ; if (op==/ ,定義有參函數compute( )，完成計算功能，op參數代表運算符號。,,調用有參函數,JavaScript 代碼, ,調用有參函數,查看完整代碼,常見錯誤1, function compute(op) x=5; var num1,num2; num1=parseFloat(document.myform.txtNum1.value)

11、; num2=parseFloat(document.myform.txtNum2.value); if (op==+) document.myform.txtResult.value=num1+num2 ; if (op==-) document.myform.txtResult.value=num1-num2 ; ,變量可以不聲明而直接賦值。如x=5; 不推薦使用，容易出錯。,,常見錯誤2, function compute(op) var Num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parse

12、Float(document.myform.txtNum2.value); if (op==+) document.myform.txtResult.value=num1+num2 ; if (op==-) document.myform.txtResult.value=num1-num2 ; ,JavaScript大小寫非常敏感,,,,,常見錯誤3, function compute(op) var num1,num2; num1=document.myform.txtNum1.value; num2=document.myform.txtNum2.value; if (op==

13、+) document.myform.txtResult.value=num1+num2 ; if (op==-) document.myform.txtResult.value=num1-num2 ; ,需要使用parseFloat方法進行 轉換，否則認為是字符串,,,總結,大家簡述一下JavaScript腳本的基本結構？ JavaScript與Java基本語法有哪些相同之處？ 在JavaScript中，如何定義一個函數？ 在JavaScript中，如何調用一個函數？ 在JavaScript中，常見錯誤有哪些？,本資料由-大學生創(chuàng)業(yè)|創(chuàng)業(yè)|創(chuàng)業(yè)網 在線代理|網頁代理|代理網頁| 減肥藥排行榜|淘寶最好的減肥藥|什么減肥藥效果最好|減肥瘦身藥|,