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

下載本文檔

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

文檔簡介

JavaScript腳本程序語言的基本程序結(jié)構(gòu)也是順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。

JavaScript語法基礎(chǔ)

流程控制目錄

JavaScript程序設(shè)計基礎(chǔ)7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標(biāo)識符、變量和常量7.5運算符和表達式7.6流程控制7.7函數(shù)7.8正則表達式習(xí)題77.6流程控制7.6.1順序結(jié)構(gòu)語句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(提示字符串,默認(rèn)值字符串);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("請輸入值","預(yù)期輸入");alert("你輸入的值："+msg);</script></head><body></body></html>7.6流程控制（2）用window對象的comfirm()方法comfirm()方法彈出一個確認(rèn)消息對話框，單擊“確認(rèn)”按鈕返回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("你學(xué)過Javascript嗎？");if(msg){window.alert("學(xué)過了，那還需要努力!");}else{alert("沒學(xué)過，那就開始學(xué)吧！");}</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í)行時，在文本框中輸入的字符串并轉(zhuǎn)換成整數(shù)，計算結(jié)果也在文本框中輸出。本例文件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>計算結(jié)果<inputtype="text"id="n3"readonly="readonly"></p></form></body></html>7.6流程控制7.6.2條件選擇結(jié)構(gòu)語句1．if語句if語句只有當(dāng)指定條件為true時，該語句才會執(zhí)行代碼。其格式為：if(條件){

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

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

當(dāng)條件不為true時執(zhí)行的語句塊;}例如：if(x>=0){y=6*x;}else{y=1-x;}7.6流程控制【例7-16】計算分段函數(shù)的值，用戶在文本框中輸入x的值，然后單擊“計算”按鈕，程序?qū)⑵滢D(zhuǎn)換為浮點數(shù)，然后依據(jù)輸入的x值執(zhí)行不同的函數(shù)，結(jié)果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>計算結(jié)果：<inputtype="text"id="yText"readonly></p></form></body></html>7.6流程控制3．if...elseif...else語句格式為：if(條件1){

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

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

當(dāng)條件1和條件2都不為true時執(zhí)行的語句塊;}7.6流程控制【例7-17】在彈出的輸入值對話框中輸入重量數(shù)值，單擊“確定”按鈕計算運費，結(jié)果在對話框中輸出。本例文件7-17.html在瀏覽器中顯示如圖7-20所示。7.6流程控制<scripttype="text/javascript">varw=parseFloat(prompt("請輸入重量=",""));//使用parseFloat將輸入的字符串轉(zhuǎn)換為浮點數(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)將結(jié)果保留兩位小數(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取整，以判斷一個分?jǐn)?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)結(jié)構(gòu)語句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語句是whil

溫馨提示

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

評論

0/150

提交評論