網頁設計與制作基礎（HTML5+CSS3）課件 第10章JavaScript基礎_第1頁
網頁設計與制作基礎（HTML5+CSS3）課件 第10章JavaScript基礎_第2頁
網頁設計與制作基礎（HTML5+CSS3）課件 第10章JavaScript基礎_第3頁
網頁設計與制作基礎（HTML5+CSS3）課件 第10章JavaScript基礎_第4頁
網頁設計與制作基礎（HTML5+CSS3）課件 第10章JavaScript基礎_第5頁
已閱讀5頁，還剩17頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第10章JavaScript基礎目錄JavaScript概述01JavaScript程序基礎02JavaScript消息框和函數03JavaScript事件處理0410.1JavaScript概述JavaScript是由Netscape公司開發并隨Navigator導航者一起發布的、介于Java與HTML之間、基于對象事件驅動的編程語言。因它的開發環境簡單，不需要Java編譯器，而是直接運行在Web瀏覽器中，因此倍受Web設計者的喜愛。10.1.1JavaScript特點解釋性：不同于編譯性的語言，它是解釋性語言，直接由瀏覽器執行。簡單性：語言結構簡單，容易學習。安全性：不允許訪問本地的硬盤，同時不能將數據存入到服務器，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互，這樣可以有效的防止數據丟失。動態性：可以直接對用戶或客戶輸入做出響應，不需要通過web服務器，它的響應是通過事件驅動完成的，比如按下鼠標、選擇菜單等等。跨平臺性：只依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機并支持JavaScript的都可以運行。10.1.2JavaScript代碼編寫下面來編寫第一個JavaScript程序。下面的JavaScript實現了彈出消息框的功能，運行后屏幕會相繼顯示兩個消息框，第一個是：“歡迎光臨JS世界！”，第二個是“精彩內容即將呈現！”。<html>

<head>

<ScriptLanguage="JavaScript">

alert("歡迎光臨JS世界!");

alert("精彩內容即將呈現！");

</Script>

</head>

</html>JavaScript代碼由<ScriptLanguage="JavaScript">...</Script>說明，表示JavaScript腳本源代碼將放入其間。語句alert()是JavaScript的窗口對象方法，其功能是彈出一個具有OK對話框并顯示（）中的字符串。10.1.3JavaScript代碼的加入JavaScript代碼可以放在<head></head>，也可以直接將JavaScript腳本加入body中，例如：<body><ScriptLanguage="JavaScript">alert("歡迎光臨JS世界!");

alert("精彩內容即將呈現！");</Script></body><ScriptLanguage="JavaScript">通過屬性Language="JavaScript"說明標識中是使用的何種語言，這里是JavaScript語言,表示在JavaScript中使用的語言。上述代碼將在瀏覽器解析到<body>部分時被執行，彈出兩個消息框。10.1.4JavaScript的調用方式JavaScript可以使用以下幾種方式調用：1）腳本在head標記中，定義成函數的形式，在body中調用。例如下面在head中寫了一個函數，函數的內容是彈出消息框，在body中通過命令按鈕的單擊事件來調用。<head>

<script>

functionmessage()

{

window.alert("welcome!");

}

</script>

<title>js調用</title></head><body>

<formaction="post">

<inputtype="button"onclick="message()"value="單擊">

</form></body>10.1.4JavaScript的調用方式2）腳本位于外部JS文件中，在head中引入，在body中調用。例如這里寫了一個“message（）”的函數，放在demo.js文件中，需要把該文件在head區通過插入JavaScript的標簽導入。在body區域的按鈕的單擊事件中調用了“message()”函數。<!DOCTYPEhtml><htmllang="en"><head><scriptsrc="demo.js"></script>

<title>js調用</title></head><body>

<formaction="post">

<inputtype="button"onclick="message()"value="單擊">

</form></body></html>demo.js文件如下：functionmessage()

{

window.alert("welcome!");

}10.1.4JavaScript的調用方式3）直接在body中寫Javascript代碼，例如：<body><ScriptLanguage="JavaScript">alert（“歡迎光臨！”）；alert(“下面將進入代碼學習”);</Script></body>10.1.4JavaScript的調用方式4）直接寫在事件處理的代碼中。這種方式直接在按鈕的單擊事件中寫入處理代碼。這種方式適合代碼短小的情況。下面的例子實現了單擊“單擊我”按鈕，彈出“操作錯誤”的消息框。<inputtype="button"onclick="alert('操作錯誤')"value="點擊我">10.2Javascript程序基礎10.2.1語句JavaScript語句是發給瀏覽器的命令，這些命令的作用是告訴瀏覽器該執行什么操作。語句的類型主要包括：變量聲明語句、輸入/輸出語句、表達式語句、程序流向控制語句和返回語句。1)語句JS語句同Java語句相同，在語句中可以包含變量、關鍵字、運算符和表達式，語句結束符使用英文分號“；”，在語句的結尾也可以不使用結束符。下面是JS語句的例子：varname="王小魚";varr=3.0;c=2*3.14*r;其中，第1條語句是定義一個變量name，將字符串“王小魚”賦值給變量name；第2條語句是將小數3.0賦值給浮點變量r；第3條語句是復合賦值語句，首先計算賦值運算符“=”右側的表達式，然后將計算結果賦值給浮點變量c。10.2.1語句2）代碼塊JS代碼塊使用一對大括號“{}”將多條JS語句組合在一起，完成一個特定的功能。JS代碼塊一般在函數、條件結構、循環結構內部使用。下面是一個JS函數的案例代碼：functionverify(){

r=3.0;c

=2*3.14*r;

alert(c);}其中，function為聲明JS函數的關鍵字，verify（）是函數名稱，函數主體使用一對大括號“{}”括起來，由大括號括起來的是Js代碼塊。10.2.1語句3）注釋語句

JS的注釋分為單行注釋和多行注釋，被注釋的內容將不會被執行。單行注釋使用雙斜杠，多行注釋用單斜杠加星號表示。varname=”ss”;//定義一個變量/*以下代碼將不會被執行varn=5;for(i=1;i<=n;i++)s=s+i;*/10.2.2程序結構JavaScript腳本語言是通過語句、函數、對象、方法和屬性來實現編程的，在程序結構上有順序、循環、選擇三種基本結構。任何簡單或復雜的算法都可以由這三種基本的結構組合而成。圖10-2顯示了這三種結構的流程圖：IF選擇結構基本格式：if（條件表達式）

語句段１；

......

else

語句段２；

.....

功能：若表達式為true，則執行語句段１；否則執行語句段２。IF語句嵌套IF嵌套語句用于處理有多分支的情況，其執行過程為依次判斷表達式的值，如果值為True，則執行相應的語句，否則執行else后的語句。其結構如下：if（條件表達式）語句塊１；

else

if（條件表達式）語句塊２；

elseif（條件表達式）語句塊３；

……

else語句塊４；

10.2.2程序結構switchcase語句<scripttype="text/javascript">

varscore=prompt("請輸入你的成績");

switch(Math.floor(score/10))//獲得分數的十位上的數字{case10:case9:document.write("考試成績為"+score+"分，優秀！");break;case8:document.write("考試成績為"+score+"分，良好！");break;case7:document.write("考試成績為"+score+"分，中等！");break;

case6:document.write("考試成績為"+score+"分，及格！");break;case5:case4:case3:case2:case1:case0:document.write("考試成績為"+score+"分，不及格！");break;default:document.write("輸入錯誤！");break;

}

</script>10.2.2程序結構循環語句for和whilefor語句和while語句都可以實現循環的功能，其中for語句的基本格式如下：

for（初始化；條件；增量）

{語句塊；}

功能：實現條件循環，當條件成立時，執行語句塊，否則跳出循環體。

說明：

初始化參數告訴循環的開始位置，必須賦予變量的初值；

條件：是用于判別循環停止時的條件。若條件滿足，則執行循環體，否則跳出。

增量：主要定義循環控制變量在每次循環時按什么方式變化。

三個主要語句之間，必須使用逗號分隔。10.2.2程序結構while（條件）

{語句塊}；

該語句與For語句一樣，當條件為真時，重復循環執行語句塊，否則退出循環。用while語句實現的程序為：<body><scripttype="text/javascript">vari=1,sum=0;while(i<=100){sum=sum+i;i=i+1;}document.write("1～100的數字之和為"+sum);</script></body>10.2.3函數函數是預先編寫好的完成某一個獨立功能的代碼組合，是由事件驅動或者被調用的能夠重復執行的單元。JavaScript函數定義：Function函數名（參數,變元）{函數體;Return表達式;}函數由關鍵字Function定義，后面的函數名表示定義自己函數的名字，函數名區分大小寫。參數表是傳遞給函數使用或操作的值，其值可以是常量、變量或其它表達式。

用戶通過指定函數名（實參）來調用一個函數，當調用函數時,所用變量或字面量均可作為變元傳遞。要注意的是，必須使用return將值返回。

例如下面在<head>區寫了名稱為c(n1,n2)的函數，函數的功能是返回兩個參數（n1和n2）和的2倍。10.3Javascript消息框

JS消息對話框主要有三種：警告框alert(message)確認框confirm(message)提示框:prompt(text,defautValue)警告框用于彈出警告消息。例如下面的js代碼執行后，會彈出三條警告框消息。<ScriptLanguage="JavaScript">//JavaScriptAppearsherealert("此次執行將刪除所有的數據!");alert("請再次確認是否已經保存數據!");alert("數據刪除后將不能再恢復！");</Script>10.4Javascript事件處理

JavaScript是采用事件驅動(event-driven)的模式。通常鼠標或熱鍵的動作稱之為事件（Event），而由鼠標或熱鍵引發的一連串程序的動作，稱之為事件驅動（EventDriver），對事件進行處理程序或函數，稱之為事件處理程序（EventHandler）。在JavaScript中對象事件的處理通常由函數(function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的所有函數作為事件處理程序。

格式如下：function

溫馨提示

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

評論

0/150

提交評論