網(wǎng)頁設計與制作教程-Web前端開發(fā) 第7版 課件 第7章 JavaScript語法基礎_第1頁
網(wǎng)頁設計與制作教程-Web前端開發(fā) 第7版 課件 第7章 JavaScript語法基礎_第2頁
網(wǎng)頁設計與制作教程-Web前端開發(fā) 第7版 課件 第7章 JavaScript語法基礎_第3頁
網(wǎng)頁設計與制作教程-Web前端開發(fā) 第7版 課件 第7章 JavaScript語法基礎_第4頁
網(wǎng)頁設計與制作教程-Web前端開發(fā) 第7版 課件 第7章 JavaScript語法基礎_第5頁
已閱讀5頁，還剩189頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML用于構建網(wǎng)頁結構，CSS用于控制和美化網(wǎng)頁外觀，而JavaScript則用于處理網(wǎng)頁的交互行為和特效。JavaScript是Web開發(fā)中不可或缺的一部分，所有的HTML網(wǎng)頁都可以使用JavaScript來增強其交互性。第7章JavaScript語法基礎7.1JavaScript概述目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.1JavaScript概述腳本語言（scriptlanguage）是一種解釋型的計算機編程語言，不具備開發(fā)操作系統(tǒng)的能力，主要用來編寫控制其他大型應用程序的腳本（script）。腳本語言可以分為服務器端腳本語言和客戶端腳本語言。客戶端腳本語言主要用于響應用戶操作、驗證表單數(shù)據(jù)以及展示各種自定義內(nèi)容，例如對話框、動畫等。JavaScript（簡稱JS）是世界上最流行的腳本語言。7.1JavaScript概述JavaScript的特點1.解釋性2.基于對象3.事件驅動4.跨平臺5.安全性6.嵌入式祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源在HTML文檔中使用JavaScript代碼有3種方法：在HTML文檔中嵌入腳本程序鏈接腳本文件在HTML標簽內(nèi)添加腳本。第7章JavaScript語法基礎7.2在HTML文檔中使用JavaScript目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題7.2在HTML文檔中使用JavaScript7.2.1在HTML文檔中嵌入腳本程序JavaScript的腳本程序包括在HTML中，使之成為HTML文檔的一部分。其格式為：<scripttype="text/javascript">JavaScript語言代碼;JavaScript語言代碼;…</script>注意，在<scriptlanguage="JavaScript">…</script>中的程序代碼有大、小寫之分。7.2在HTML文檔中使用JavaScript【例7-1】在HTML文檔中嵌入JavaScript的腳本。本例文件7-1.html。<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>JavaScript示例</title>

<scripttype="text/javascript"> document.write("HelloWorld!"); </script> </head> <body> </body></html>7.2在HTML文檔中使用JavaScript7.2在HTML文檔中使用JavaScript7.2.2鏈接腳本文件<head>…<scripttype="text/javascript"src="路徑/腳本文件名.js"></script>…</head>type="text/javascript"屬性定義文件的類型是javascript。src屬性定義.js文件的URL。腳本文件名.js其格式為：JavaScript語言代碼;//注釋

…JavaScript語言代碼;7.2在HTML文檔中使用JavaScript【例7-2】將例7-1改為鏈接腳本文件。7-2.html：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JavaScript示例</title><scripttype="text/javascript"src="hello.js"></script><!--URL為hello.js--></head><body></body></html>腳本文件hello.js的內(nèi)容為：document.write("HelloWorld!");7.2在HTML文檔中使用JavaScript7.2在HTML文檔中使用JavaScript【例7-2】將例7-1改為鏈接腳本文件。本例文件7-2.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JavaScript示例</title><scripttype="text/javascript"src="./js/hello.js"></script><!--URL為hello.js--></head><body></body></html>腳本文件hello.js（保存在當前文件夾中的js文件夾中）的內(nèi)容為：document.write("HelloWorld!");7.2在HTML文檔中使用JavaScript7.2.3在HTML標簽內(nèi)添加腳本【例7-3】在標簽內(nèi)添加JavaScript的腳本，本例文件7-3.html在瀏覽器中顯示的效果，如圖7-5和圖7-6所示。7.2在HTML文檔中使用JavaScript<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JavaScript示例</title></head><body><form><inputtype="button"onClick="alert('歡迎來到JavaScript世界！');"value="單擊此按鈕"></form><pstyle="font:12pt;font-family:'黑體';color:red;text-align:center">JavaScript例子</p></body></html>祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源本節(jié)介紹JavaScript的數(shù)據(jù)類型。第7章JavaScript語法基礎7.3數(shù)據(jù)類型目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.3數(shù)據(jù)類型7.3.1數(shù)據(jù)類型的分類1.基本數(shù)據(jù)類型基本數(shù)據(jù)類型也稱值類型、簡單數(shù)據(jù)類型、原始類型，JavaScript有5種基本數(shù)據(jù)類型，即字符串（string）、數(shù)值（number）、布爾（boolean）、空（null）、未定義（undefined）、symbol（ES6引入了一種新的基本數(shù)據(jù)類型，表示獨一無二的值）。2.引用數(shù)據(jù)類型引用數(shù)據(jù)類型包括：對象（objcct）、數(shù)組（array）、函數(shù)（function）。7.3數(shù)據(jù)類型7.3.2基本數(shù)據(jù)類型1.string類型string（字符串）類型由0個或多個字符組成的一串序列，被雙引號（"）或者單引號（'）括起來。字符串中每個字符都有特定的位置，首字符的位置是0，第二個字符的位置是1，以此類推。7.3數(shù)據(jù)類型2.number類型number（數(shù)值）類型都用64位浮點格式表示，無論什么樣的數(shù)值類型，統(tǒng)一用number表示。例如：32，23.16對于較大或較小的數(shù)值可用科學（指數(shù)）計數(shù)法表示。例如：132e5表示13200000，132e-5表示0.00132。7.3數(shù)據(jù)類型默認情況下，數(shù)值用十進制顯示。toString()方法的語法格式為：number.toString(radix)參數(shù)radix可選，表示數(shù)字的基數(shù)，是2~36之間的整數(shù)。若省略該參數(shù)，則使用基數(shù)10。NaN（NotaNumber）是代表非數(shù)值的特殊值，用于指示某個值不是數(shù)值。使用isNaN()全局函數(shù)來判斷一個值是否是NaN值。7.3數(shù)據(jù)類型【例7-4】string、number類型示例，本例文件7-4.html在瀏覽器中顯示的效果，如圖7-7所示。7.3數(shù)據(jù)類型<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>string、number類型</title>

<scripttype="text/javascript">varmyString="Hello\"World\"!<br>";//轉義document.write(myString);//Hello"World"!varmyNumber=128;//128十進制document.write(myNumber+'十進制<br>');//128十進制document.write(myNumber.toString(16)+'十六進制<br>');//80十六進制document.write(myNumber.toString(8)+'八進制<br>');//200八進制document.write(myNumber.toString(2)+'二進制<br>');//10000000二進制varx=100/"Abc";vary=100/"10";

document.write(x,'',y,'<br>');//NaN10document.write(isNaN(x)+"<br>"+isNaN(y));

</script></head><body></body></html>7.3數(shù)據(jù)類型3.boolean類型boolean（布爾、邏輯）類型只能有兩個值true或false。也可以用0表示false，非0表示true。布爾常用在條件測試中。例如:varbFlag=true;ifbFlagfFlag=false;7.3數(shù)據(jù)類型4.undefined類型undefined的意思是未定義的，undefined類型只有一個值，即undefined。以下幾種情況下會返回undefined。在引用一個定義過但沒有賦值的變量時，返回undefined。在引用一個不存在的數(shù)組元素時，返回undefined。在引用一個不存在的對象屬性時，返回undefined。7.3數(shù)據(jù)類型5.null類型null的意思是空，表示沒有任何值，null類型只有一個值null?？梢酝ㄟ^將變量的值賦值為null來清空變量。7.3數(shù)據(jù)類型7.3.3數(shù)據(jù)類型的判斷1.typeof操作符語法格式為：typeof值或變量或表達式它有一個參數(shù)，即要檢查的值或者變量。對變量或者值調(diào)用typeof運算符將返回undefined（undefined類型）、boolean（boolean類型）、number（number類型）、string（string類型）、object（引用類型或者null類型）、function（函數(shù)類型）和symbol（symbol類型）。7.3數(shù)據(jù)類型【例7-5】下面語句。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>typeof操作符</title><scripttype="text/javascript">document.write(typeof"HelloWorld!"+"<br>");//stringdocument.write(typeof3+"<br>");//numberdocument.write(typeoffalse+"<br>");//booleandocument.write(typeofvarX+"<br>");//undefineddocument.write(typeof[1,2,3]+"<br>");//objectdocument.write(typeof{name:'Tom',age:18}+"<br>");//objectdocument.write(typeofnull+"<br>");//object</script></head><body></body></html>7.3數(shù)據(jù)類型2.instanceof操作符instanceof操作符用于判斷一個引用類型（值類型不能用）屬于哪種類型。語法格式為：

引用類型的值或變量instanceof引用類型的名稱7.3數(shù)據(jù)類型例如，下面語句判斷a是否為數(shù)組類型的變量，輸出“a是一個數(shù)組類型”。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>instanceof操作符</title>

<scripttype="text/javascript">vara=newArray();if(ainstanceofArray){document.write("a是一個數(shù)組類型");}else{document.write("a不是一個數(shù)組類型");}</script></head><body></body></html>7.3數(shù)據(jù)類型7.3.4數(shù)據(jù)類型的轉換1.將數(shù)值類型轉換為字符串類型1）全局方法String()可以將數(shù)值類型轉換為字符串類型。語法格式為：String(表達式)該方法可用于任何類型的數(shù)值、字符串、變量、表達式。7.3數(shù)據(jù)類型【例7-7】String()方法示例，本例文件7-7.html在瀏覽器中顯示如圖7-10所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>String()示例</title>

<scripttype="text/javascript">varx=123;vars=String(x)+"<br>"+

String(123)+"<br>"+

String(100+200*3)+"<br>"+

String("Hello"+'World!')+"<br>";document.write(s);//123123700HelloWorld!document.write(typeofs);//string</script></head><body></body></html>7.3數(shù)據(jù)類型2）數(shù)值表達式的方法toString()也有同樣的效果。數(shù)值表達式的方法toString()的語法格式：

表達式.toString()在number方法中，還有多個數(shù)字轉換為字符串的方法。7.3數(shù)據(jù)類型【例7-8】toString()方法示例，本例文件7-8.html在瀏覽器中顯示如圖7-11所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>toString()方法</title>

<scripttype="text/javascript">varx=123;vars=x.toString()+"<br>"+

(123).toString()+"<br>"+

(100+200*3).toString()+"<br>"+("Hello"+'World!').toString()+"<br>";document.write(s);//123123700HelloWorld!document.write(typeofs);//string</script></head><body></body></html>7.3數(shù)據(jù)類型2.將布爾值轉換為字符串全局方法String()，boolean方法toString()都可以將布爾值轉換為字符串。例如：String(true)//返回"true"false.toString()//返回"false"

<scripttype="text/javascript">

document.write(String(true));//返回"true"

document.write(false.toString());//返回"false"</script>7.3數(shù)據(jù)類型3.將字符串轉換為數(shù)字全局方法Number()可以將字符串轉換為數(shù)字。語法格式為：Number(字符串)字符串如果是數(shù)字則轉換為數(shù)字類型，空字符串轉換為0，其他的字符串轉換為NaN。例如：Number("12.35")//返回12.35Number("")//返回0Number("")//返回0Number("1020")//返回NaNNumber("12.35a")//返回NaN在Number方法中，還有其他字符串轉為數(shù)字的方法。

<scripttype="text/javascript">

document.write(Number("12.35"));

document.write(Number(""));

document.write(Number("1020"));

document.write(Number("12.35a"));</script>7.3數(shù)據(jù)類型4.一元運算符+運算符+可用于將變量轉換為數(shù)字類型。例如：varx="3";//x是一個字符串vary=+x;//y是一個數(shù)字類型如果變量不能轉換，它仍然會是一個數(shù)字類型，但值為NaN（不是一個數(shù)字），例如：varx="abc";//x是一個字符串vary=+x;//y是一個數(shù)字類型（NaN）7.3數(shù)據(jù)類型5.將布爾值轉換為數(shù)字類型全局方法Number()可將布爾值轉換為數(shù)字類型。Number(false)//返回0Number(true)//返回17.3數(shù)據(jù)類型6.自動轉換類型當JavaScript嘗試操作一個“錯誤”的數(shù)據(jù)類型時，會自動轉換為“正確”的數(shù)據(jù)類型，輸出的結果可能不是所期望的。例如：3+null//返回3，null轉換為0"3"+null//返回"3null"，null轉換為"null""3"+1//返回"31"，1轉換為"1""3"-1//返回2，"3"轉換為3代碼：document.write("<br>");document.write(3+null);document.write("<br>");document.write("3"+null);document.write("<br>");document.write("3"+1);document.write("<br>");document.write("3"-1);

<scripttype="text/javascript">document.write("<br>");document.write(3+null);document.write("<br>");document.write("3"+null);document.write("<br>");document.write("3"+1);document.write("<br>");document.write("3"-1);</script>7.3數(shù)據(jù)類型7.自動轉換為字符串當嘗試輸出一個對象或一個變量時，JavaScript會自動調(diào)用變量的toString()方法。document.write(123);//toString轉換為"123"

<scripttype="text/javascript">document.write("<br>");document.write(3+null);document.write("<br>");document.write("3"+null);document.write("<br>");document.write("3"+1);document.write("<br>");document.write("3"-1);document.write(123);//toString轉換為"123"</script>祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源第7章JavaScript語法基礎7.4標識符、變量和常量目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.4標識符、變量和常量7.4.1標識符1.關鍵字標識符2.用戶標識符（1）標識符的命名規(guī)則（2）標識符的命名規(guī)范7.4.2常量1．字符串（string）常量2．數(shù)字（number）常量3．布爾（boolean）常量7.4標識符、變量和常量7.4.3變量1．變量的聲明var

變量名1[=值1],

變量名2[=值2]…;例如：varusername="Bill",age=18,gender="male";聲明也可橫跨多行：varusername="Bill",age=18,gender="male";varx,y,z=1;聲明后未賦值的變量其值是undefined，x，y為undefined，z為1。7.4標識符、變量和常量2．賦值運算符變量名1=值1,變量名2=值2…;例如下面賦值語句：varusername,age;username="BrendanEich";age=35;salary=39999;賦值運算符還有+=、-=、*=、/=、%=。7.4標識符、變量和常量7.4.4運算符和表達式1．算術運算符和算術表達式JavaScript中的算術運算符有一元運算符和二元運算符。二元運算符有：+（兩值相加）、-（兩值相減）、*（兩值相乘）、/（兩值相除）、％（兩值取余數(shù)）。一元運算符有：++（遞加1）、--（遞減1）算術表達式是由算術運算符和操作數(shù)組成的表達式，算術表達式的結合性為自左向右。例如，2+3，2-3，2*3-5，2/3，3%2，i++，++i，--i。7.4標識符、變量和常量2．字符串運算符和字符串表達式字符串運算符是“+”，用于連接兩個字符串，形成字符串表達式。例如，"abc"+"123"。7.4標識符、變量和常量3．比較運算符和比較表達式比較（關系）運算符首先對操作數(shù)進行比較，然后再返回一個true或false值。4．布爾（邏輯）運算符和布爾表達式布爾運算符有：&&（與）、||（或）、!（非、取反）。邏輯表達式是由邏輯運算符組成的表達式。邏輯表達式的結果只能是布爾值，即true或false。邏輯運算符通常和關系運算符配合使用，以實現(xiàn)判斷語句。例如，2>3&&2==3。7.4標識符、變量和常量5．位運算符和位表達式6.條件運算符和條件表達式條件運算符是三元運算符，其格式如下：條件表達式?表達式1:表達式27．運算符的優(yōu)先順序7.4標識符、變量和常量7.4.5語句的書寫規(guī)則1．語句2．語句的書寫規(guī)則7.4標識符、變量和常量祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源第7章JavaScript語法基礎7.5運算符和表達式目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.5.1運算符和表達式的分類1．算術運算符和算術表達式JavaScript中的算術運算符有一元運算符和二元運算符。二元運算符有：+（兩值相加）、-（兩值相減）、*（兩值相乘）、/（兩值相除）、％（兩值取余數(shù)）。一元運算符有：++（遞加1）、--（遞減1）算術表達式是由算術運算符和操作數(shù)組成的表達式，算術表達式的結合性為自左向右。例如，2+3，2-3，2*3-5，2/3，3%2，i++，++i，--i。7.5運算符和表達式2．字符串運算符和字符串表達式字符串運算符是“+”，用于連接兩個字符串，形成字符串表達式。例如，"abc"+"123"。7.5運算符和表達式3．比較運算符和比較表達式比較（關系）運算符首先對操作數(shù)進行比較，然后再返回一個true或false值。7.5運算符和表達式4．布爾（邏輯）運算符和布爾表達式布爾運算符有：&&（與）、||（或）、!（非、取反）。布爾表達式是由布爾運算符組成的表達式。布爾表達式的結果只能是布爾值，即true或false。布爾運算符通常和關系運算符配合使用，以實現(xiàn)判斷語句。例如，2>3&&2==3。7.5運算符和表達式5．位運算符和位表達式位運算符分為位邏輯運算符和位移動運算符。位邏輯運算符有：&（位與）、|（位或）、^（位異或）、-（位取反）、~（位取補）。位移動運算符有：<<（左移）、>>（右移）、>>>（右移，零填充）。7.5運算符和表達式6.條件運算符和條件表達式條件運算符是三元運算符，其格式如下：條件表達式?表達式1:表達式2例如，求a和b中最大數(shù)的表達式a>b?a:b。7.5運算符和表達式7．運算符的優(yōu)先順序7.5運算符和表達式7.4.5語句的書寫規(guī)則1．語句JavaScript語句是發(fā)給瀏覽器的命令。分號用于分隔JavaScript語句。例如下面的語句：x=3;if(x>=0){y=1+x;}else{y=1-2*x;}7.5運算符和表達式2．語句的書寫規(guī)則1）區(qū)分大小寫。2）使用分號（;）結束代碼語句。3）大括號表示代碼塊。4）空格。5）每行代碼的長度不超過120字符。6）對代碼行進行折行。例如：document.write("你好\世界!");不過，不能像這樣折行：document.write\("你好世界!");7.5運算符和表達式祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源JavaScript腳本程序語言的基本程序結構也是順序結構、選擇結構和循環(huán)結構。第7章JavaScript語法基礎7.6流程控制目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.6流程控制7.6.1順序結構語句1．注釋語句注釋語句有單行注釋和多行注釋之分。單行注釋語句的格式為：//注釋內(nèi)容多行注釋語句的格式為：/*注釋內(nèi)容注釋內(nèi)容*/7.6流程控制2．輸出字符串（1）用document對象的write方法輸出字符串其格式為：document.write(字符串1,字符串2,…);7.6流程控制（2）用window對象的alert()方法輸出字符串其格式為：window.alert(字符串);7.6流程控制【例7-10】alert()方法示例。本例文件7-10.html在瀏覽器中顯示如圖7-12所示。<scripttype="text/javascript">alert("你好！");//輸出指定內(nèi)容

varmsg="你好！張三";alert(msg);//輸出變量中的內(nèi)容

document.write("<strong>你好！<br/>李四</strong>");</script>

7.6流程控制【例。本例文件7-10.html在瀏覽器中顯示如圖7-12所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>7-10】alert()方法示例</title><scripttype="text/javascript">alert("你好！");//輸出指定內(nèi)容

varmsg="你好！張三";alert(msg);//輸出變量中的內(nèi)容

document.write("<strong>你好！<br/>李四</strong>");</script>

</head><body></body></html>

7.6流程控制（3）使用innerHTML寫入到HTML元素格式為：document.getElementById('id').innerHTML="被插入到頁面元素的內(nèi)容";【例7-11】使用innerHTML寫入到HTML元素示例。本例文件7-11.html在瀏覽器中顯示如圖7-13所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>innerHTML示例</title></head><body><p>aaaaaaaaa</p><pid="p1"></p><p>bbbbbbbbb</p><scripttype="text/javascript">document.getElementById("p1").innerHTML="你好";</script></body></html>7.6流程控制3．輸入字符串（1）用window對象的prompt()方法輸入字符串格式為：prompt(提示字符串,默認值字符串);prompt()方法返回一個字符串。7.6流程控制【例7-12】下面代碼用prompt()方法輸入字符串，然后賦值給變量msg。本例文件7-12.html在瀏覽器中顯示如圖7-14所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>prompt()方法輸入字符串</title><scripttype="text/javascript">varmsg=prompt("請輸入值","預期輸入");alert("你輸入的值："+msg);</script></head><body></body></html>7.6流程控制（2）用window對象的comfirm()方法comfirm()方法彈出一個確認消息對話框，單擊“確認”按鈕返回True,單擊“取消”按鈕返回False。語法格式：comfirm(提示字符串);【例7-13】window對象的confirm()方法示例。本例文件7-13.html在瀏覽器中顯示如圖7-15所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>confirm()方法示例</title><scripttype="text/javascript">varmsg=confirm("你學過Javascript嗎？");if(msg){window.alert("學過了，那還需要努力!");}else{alert("沒學過，那就開始學吧！");}</script></head><body></body></html>7.6流程控制（3）用getElementById('id').value獲取HTML元素的值格式為：varx=document.getElementById('id1').value;7.6流程控制【例7-14】使用getElementById().value獲取input元素的value，如圖7-16所示；單擊“連接字符串”按鈕后把value賦值給p元素，顯示在網(wǎng)頁中，如圖7-17所示。本例文件7-14.html。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><pid="demo">字符串連接</p><inputid="i1"type="text"><inputid="i2"type="text"><scripttype="text/javascript">functionmm(){varx=document.getElementById("i1").value;vary=document.getElementById("i2").value;x=x+y;document.getElementById('demo').innerHTML=x;}</script><buttononclick="mm()">連接字符串</button></body></html>7.6流程控制（4）用文本框輸入字符串【例7-15】下面代碼執(zhí)行時，在文本框中輸入的字符串并轉換成整數(shù)，計算結果也在文本框中輸出。本例文件7-15.html在瀏覽器中顯示如圖7-18所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>加法計算器</title><scripttype="text/javascript">function{varn1=parseInt(form1.n1.value);varn2=parseInt(form1.n2.value);varn3=n1+n2;form1.n3.value=n3;}</script></head><body><formname="form1"method="get"><p>第1個數(shù):<inputtype="text"id="n1"></p><p>第2個數(shù):<inputtype="text"id="n2"></p><p><inputtype="button"id="plus"value="加法"onclick="add()"></p><p>計算結果<inputtype="text"id="n3"readonly="readonly"></p></form></body></html>7.6流程控制7.6.2條件選擇結構語句1．if語句if語句只有當指定條件為true時，該語句才會執(zhí)行代碼。其格式為：if(條件){

當條件為true時執(zhí)行的句塊;}例如：if(x>=0)y=6*x;7.6流程控制2．ifelse語句ifelse語句的格式為：if(條件){

當條件為true時執(zhí)行的語句塊;}else{

當條件不為true時執(zhí)行的語句塊;}例如：if(x>=0){y=6*x;}else{y=1-x;}7.6流程控制【例7-16】計算分段函數(shù)的值，用戶在文本框中輸入x的值，然后單擊“計算”按鈕，程序將其轉換為浮點數(shù)，然后依據(jù)輸入的x值執(zhí)行不同的函數(shù)，結果y會在另一個文本框中顯示。本例文件7-16.html在瀏覽器中顯示如圖7-19所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>if...else語句</title><scripttype="text/javascript">functioncalculate(){varx=parseFloat(document.getElementById('xText').value);vary;if(x>=0){y=6*x;}else{y=1-x;}document.getElementById('yText').value=y;}</script></head>7.6流程控制<body><form><p>輸入x=<inputtype="text"id="xText"></p><p><inputtype="button"value="計算"onclick="calculate()"></p><p>計算結果：<inputtype="text"id="yText"readonly></p></form></body></html>7.6流程控制3．if...elseif...else語句格式為：if(條件1){

當條件1為true時執(zhí)行的語句塊;}elseif(條件2){

當條件2為true時執(zhí)行的語句塊;}else{

當條件1和條件2都不為true時執(zhí)行的語句塊;}7.6流程控制【例7-17】在彈出的輸入值對話框中輸入重量數(shù)值，單擊“確定”按鈕計算運費，結果在對話框中輸出。本例文件7-17.html在瀏覽器中顯示如圖7-20所示。7.6流程控制<scripttype="text/javascript">varw=parseFloat(prompt("請輸入重量=",""));//使用parseFloat將輸入的字符串轉換為浮點數(shù)

varx;if(w<=10){x=0.5*w;}elseif(w<=100){x=0.5*10+0.35*(w-10);}else{x=0.5*10+0.35*(100-10)+0.25*(w-100);}alert("運費為："+x.toFixed(2));//使用toFixed(2)將結果保留兩位小數(shù)</script>7.6流程控制4．switch語句switch語句的格式為：switch(變量){case特定數(shù)值1:

語句段1;break;case特定數(shù)值2:

語句段2;break;…default:

語句段3;}7.6流程控制【例7-18】輸入成績，輸出成績等級。本例文件7-18.html在瀏覽器中顯示如圖7-21所示。7.6流程控制<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>成績等級</title><scripttype="text/javascript">functiongrade(){varscore=parseInt(document.myForm.txtScore.value/10);//把輸入的成績除10取整，以判斷一個分數(shù)范圍

varscoreGrade;switch(score){case10:case9:scoreGrade="優(yōu)秀";break;case8:scoreGrade="良好";break;

7.6流程控制case7:scoreGrade="中等";break;case6:scoreGrade="及格";break;default:scoreGrade="不及格";break;}alert(scoreGrade);}</script></head>

7.6流程控制<body><formname="myForm"method="get"><p>成績:<inputtype="text"name="txtScore"></p><p><inputtype="button"value="確定"onclick="grade()"></p></form></body></html>7.6流程控制7.6.3循環(huán)結構語句for循環(huán)語句for循環(huán)語句的格式為：for(初始化;條件;增量){

被執(zhí)行的語句塊;}7.6流程控制2.forin循環(huán)語句格式為：for(鍵in對象){

被執(zhí)行的語句塊;}7.6流程控制3.while循環(huán)語句while循環(huán)語句的格式為：while(條件){

被執(zhí)行的語句塊;}7.6流程控制4.dowhile循環(huán)語句dowhile語句是while的變體，其格式為：do{

被執(zhí)行的語句塊;}while(條件)7.6流程控制5.break語句6.continue語句7.6流程控制【例7-19】本例為了說明循環(huán)語句的使用，給出了3段代碼。本例文件7-19.html在瀏覽器中顯示如圖7-22所示。7.6流程控制<scripttype="text/javascript">vari=1,sum=0;//用while語句計算1+2+...+100的值

while(i<101){sum+=i;i++;}document.write(sum);//輸出：5050document.write("<hr>");//continue和break語句的應用

varx="";for(vari=0;i<5;i++){x="該數(shù)字為"+i+"<br>";document.write(x);if(i==2){continue;}if(i==3){break;}//輸出：該數(shù)字為0,該數(shù)字為1,該數(shù)字為2,該數(shù)字為3}7.6流程控制

document.write("<hr>");//dowhile語句的應用varx="",i=0;do{x=x+"該數(shù)字為"+i+"<br>";i++;}while(i<5)document.write(x);</script>祝賀你又學完了一節(jié)《網(wǎng)頁設計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源函數(shù)（function）是指實現(xiàn)某項單一功能的，可重復使用的程序段。第7章JavaScript語法基礎7.6函數(shù)目錄第7章JavaScript程序設計基礎7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習題77.7函數(shù)7.7.1函數(shù)的聲明1.聲明函數(shù)(Functiondeclaration)語法格式如下：function函數(shù)名(參數(shù)1,參數(shù)2,…){

函數(shù)體語句塊;return返回值;}7.7函數(shù)【例7-20】聲明兩個數(shù)的乘法函數(shù)multiple。本例文件7-20.html。<scripttype="text/javascript">

functionmultiple(number1,number2){varresult=number1*number2;returnresult;//函數(shù)有返回值

}varresult=multiple(20,30);//調(diào)用有返回值的函數(shù)

document.write(result);//顯示：600document.write("<br>");

document.write(multiple(2,3));//調(diào)用函數(shù)，顯示：6</script>7.7函數(shù)2.聲明函數(shù)表達式（FunctionExpression）（1）把函數(shù)表達式直接賦值給變量格式如下：var變量名=function(參數(shù)1,參數(shù)2,…){//函數(shù)體語句塊;return返回值;}7.7函數(shù)【例7-21】聲明函數(shù)表達式示例。本例文件7-21.html。<scripttype="text/javascript">varmultiple=function(number1,number2){varresult=number1*number2;returnresult;//函數(shù)有返回值

}varresult=multiple(20,30);//調(diào)用有返回值的函數(shù)

document.write(result);//顯示：600document.write("<br>");//換行

document.write(multiple(2,3));//調(diào)用函數(shù)，顯示：6</script>7.7函數(shù)（2）網(wǎng)頁事件直接調(diào)用函數(shù)表達式格式為：window.onload=function(參數(shù)1,參數(shù)2,…){//函數(shù)體語句塊;return返回值;}7.7函數(shù)（3）自執(zhí)行函數(shù)如果表達式后面緊跟()，則會自動調(diào)用執(zhí)行?！纠?-22】自執(zhí)行函數(shù)示例。本例文件7-22.html在瀏覽器中顯示如圖7-23所示。<scripttype="text/javascript">(function(){varx="Hello!!";document.write(x+"<br>");})();//自調(diào)用無參函數(shù)，將調(diào)用自己，自動執(zhí)行

(function(x,y){document.write(x+y+"<br>");

})(2,3);//自調(diào)用有參函數(shù)

varsum=(function(x,y){returnx+y;

})(5,6);//自調(diào)用有參函數(shù)帶返回值

document.write(sum);</script>7.7函數(shù)7.7.2函數(shù)的調(diào)用1.直接調(diào)用函數(shù)用下面的格式調(diào)用定義的函數(shù)：函數(shù)名(傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…);調(diào)用函數(shù)時的參數(shù)取決于聲明該函數(shù)時的參數(shù)，如果定義時有參數(shù)，就需要增加實參。7.7函數(shù)【例7-23】直接調(diào)用函數(shù)示例。本例文件7-23.html在瀏覽器中顯示如圖7-24所示。<scripttype="text/javascript">functionhello(name){alert("Hello"+name+"!");}varhi=prompt("輸入名字：")

hello(hi);//調(diào)用函數(shù)</script>7.7函數(shù)2.在表達式中調(diào)用函數(shù)變量名=函數(shù)名(傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…);例如，result=multiple(10,20);。對于有返回值的函數(shù)調(diào)用，也可以將其寫在表達式中，直接利用其返回的值。例如：document.write(multiple(10,20));7.7函數(shù)3.在事件中調(diào)用函數(shù)<標簽屬性="屬性值"…事件="函數(shù)名(參數(shù)表)"></標簽>例如，使用<a>標記的單擊事件onClick調(diào)用函數(shù)，其代碼形式為：<ahref="#"onClick="函數(shù)名(參數(shù)表)">熱點文本</a>7.7函數(shù)【例7-24】本例中的hello()函數(shù)顯示一個對話框，當網(wǎng)頁加載完成后就調(diào)用一次hello()函數(shù)，使用<body>標記的onLoad屬性，本例文件7-24.html在瀏覽器中的顯示是先顯示對話框，如圖7-25左圖所示；單擊確定按鈕后，才顯示網(wǎng)頁內(nèi)容，如圖7-25右圖所示。7.7函數(shù)<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>在事件中調(diào)用函數(shù)</title><scripttype="text/javascript">functionhello(){//定義函數(shù)

window.alert("Hello");}</script></head><bodyonLoad="hello();"><!--使用onLoad調(diào)用函數(shù)--><p>網(wǎng)頁內(nèi)容</p></body></html>7.7函數(shù)4.函數(shù)的嵌套調(diào)用（1）嵌套調(diào)用函數(shù)【例7-25】編程序求1+(1+2)+(1+2+3)+...+(1+2+3+…+n)的和。1）首先定義一個求1+2+3+…+n和的函數(shù)fnSum(num)。functionfnSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=i; } returnsum;}7.6函數(shù)2）然后定義求整個和的函數(shù)fnAllSum(iNum)，在函數(shù)fnAllSum(num)中調(diào)用函數(shù)fnSum(num)。functionfnAllSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=fnSum(i); } returnsum;}3）在主程序中調(diào)用函數(shù)fnAllSum(num)。document.write(fnAllSum(10));//輸出:2207.6函數(shù)4）完成程序如下：<scripttype="text/javascript">functionfnSum(num){varsum=0,i;for(i=1;i<=num;i++){sum+=i;}returnsum;

溫馨提示

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

評論

0/150

提交評論