JavaScript基本介绍.ppt

上传人:牧羊曲112 文档编号:5435972 上传时间:2023-07-06 格式:PPT 页数:51 大小:309.49KB
返回 下载 相关 举报
JavaScript基本介绍.ppt_第1页
第1页 / 共51页
JavaScript基本介绍.ppt_第2页
第2页 / 共51页
JavaScript基本介绍.ppt_第3页
第3页 / 共51页
JavaScript基本介绍.ppt_第4页
第4页 / 共51页
JavaScript基本介绍.ppt_第5页
第5页 / 共51页
点击查看更多>>
资源描述

《JavaScript基本介绍.ppt》由会员分享,可在线阅读,更多相关《JavaScript基本介绍.ppt(51页珍藏版)》请在三一办公上搜索。

1、第一章JavaScript 基本介紹,張智星http:/mirlab.org/jang台大資工系 多媒體檢索實驗室,1/50,前言,本投影片適用於JavaScript 程式設計與應用,原書連結如下:http:/mirlab.org/jang/books/jsBook如果你是從此書光碟取得此投影片,可隨時連至上述連結,以取得最新版本的投影片及範例檔案。,2/50,本章大綱,大綱本章介紹 JavaScript 的背景及特性,並說明 JavaScript 的執行方式及基本範例。主題1-1:背景及特色 1-2:執行方式一:循序執行 1-3:執行方式二:事件驅動 1-4:基本表單 1-5:JavaScr

2、ipt 和 VBScript 的比較 1-6:網路資源,3/50,1-1 背景及特色,本小節說明JavaScript程式語言的發展背景及相關特色。,4/50,背景,JavaScript程式語言的背景由 Netscape Communications 公司所開發的一種解譯式程式語言,專門用在網頁中,並在用戶端的電腦執行,以提高網頁的互動性為主要目標網頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、FireFox 或 IE 等各大瀏覽器。滿足 ECMA(European Computer Manufacturers Association,歐洲電腦製造商協會

3、)所制訂的標準。,5/50,可使用之平台,JavaScript 可發揮的平台用戶端:預設的網頁程式語言,可用於 Chrome、FireFox 或 IE 等各大瀏覽器。伺服器:適用於微軟 IIS 網頁伺服器的 ASP 語言環境,可在網頁送到客戶端之前,進行各種處理,或和資料庫進行資料存取。單機版:適用於微軟的視窗作業系統(Win98、ME、2000、XP、Vista、Win7、Win8 等),可用於取代原先功能不強的 DOS 批次檔(Batch Files),特別適用於處理日常性或重複型的工作,例如網頁的抓取或帳號的建立,等等。,6/50,在網頁程式設計的主要功能,JavaScript 在網頁程

4、式設計的主要功能提高網頁互動性及趣味性,例如以 JavaScript 所發展出來的各種遊戲或教材。執行在用戶端的計算及驗證,以減少伺服器端的計算及網路流量,例如表單驗證(Form Validation)。Cache功能,可將未用到的圖檔(或其他檔案)預先抓回,以增加使用者的便利。AJAX 功能:在不換頁的情況下來存取伺服器資料並顯示於網頁,7/50,程式語言特性,JavaScript 語言特性JavaScript 的程式碼是內嵌於 HTML 原始碼之中,並由瀏覽器的 JavaScript 解譯器(Interpreter)來執行程式碼,最後將結果呈現於瀏覽器。換句話說,JavaScript 的程

5、式碼是由瀏覽器來執行,所以在用戶端可看到其原始碼,較難加以保護。由於安全性的考量,除了讀寫 Cookies(請參見本篇教材後面的介紹)之外,JavaScript 並無法讀取用戶端的檔案或硬碟。使用變數時,不需要宣告變數型態,JavaScript 會自動決定。對於不同的資料型態(如字串與數值),JavaScript 可以根據不同情況,自動進行資料型態的合理轉換。,8/50,JavaScript vs.Java,JavaScript 和 Java 沒有什麼親戚關係!Java 之於 JavaScript 的關係,就如同狗和熱狗。(source)比較表:,9/50,1-2:執行方式一:循序執行,本小節

6、說明如何以循序執行的方式,來執行網頁中的 JavaScript 程式碼。,10/50,JavaScript 於網頁的執行方式,JavaScript 於網頁執行的兩種基本方式:循序執行(Sequential Execution):瀏覽器讀入網頁後,即載入並執行 JavaScript 程式碼,最後將結果直接呈現在瀏覽器上。事件驅動(Event Driven):瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或影像,或是啟動其他滑鼠事件(例如當滑鼠離開某個影像),才能觸發 JavaScript 的執行。,11/50,如何加入JavaScript 於網頁,JavaScr

7、ipt 如何加入網頁JavaScript 程式碼注意事項標籤中的大小寫並無任何影響。language=javascript也可以完全省略。雖然 HTML 內的 JavaScript 標籤是可以不分大小寫,但是標籤內部的 JavaScript 程式碼本身會區分大小寫,這是要特別注意的地方!,12/50,範例1-1,主題:利用 JavaScript 來印出 Hello World!連結:以瀏覽器開啟hello01.htm、localhost、mirlab程式碼重點str=Hello World!;document.write(str);說明str 是一個字串變數,其值為 Hello World!d

8、ocument 則是一個物件,代表程式碼所在的文件write 則是 document 的一個方法,可將一個字串印出於瀏覽器,13/50,以物件為基礎的語言,JavaScript 是以物件為基礎的語言所有的變數在 JavaScript 中都是一個物件一個物件通常有一些性質(Property)和方法(Method)範例:把一個微波爐A看成一個物件性質:微波爐的顏色:A.color微波爐的容量:A.volume方法:加熱:“溫水”=A.heat(“冷水”,30秒)加熱:“沸水”=A.heat(“冷水”,300秒),14/50,範例1-2,主題:document.write()和 document.w

9、riteln()的差別連結:writeln01.htm程式碼重點document.write(Good);document.write(Bye!);document.writeln(Good);document.writeln(Bye!);說明writeln()和 write()的最大差別在於 writeln()在列印完畢後會換列,但 write()不會。如果連續呼叫 document.write(Good)和 document.write(Bye!),在網頁會呈現連在一起的 GoodBye!,但是如果連續呼叫 document.writeln(Good)和 document.writeln(

10、Bye!),則在網頁會呈現中間有空格的 Good Bye!,,15/50,範例1-3,主題:呈現 JavaScript 印出的原始效果連結:writeln02.htm程式碼重點使用 document.write():document.write(Good);document.write(Bye!);使用 document.writeln():document.writeln(Good);document.writeln(Bye!);使用 document.write()再加上 n:document.write(Goodn);document.write(Bye!n);說明使用 和 來包夾 Ja

11、vaScript 的程式碼,可以得到JavaScript 的原始輸出結果(未經瀏覽器排版),非常適用於JavaScript 程式碼的偵錯。,16/50,範例1-4,主題:利用 JavaScript 來印出 size 由 1 到 5 的Hello World!連結:hello02.htm程式碼重點/由 for 迴圈來產生 5 個由小變大的 Hello World!for(i=1;iHello World!);說明JavaScript 的 for-loop 格式和 C 語言一樣字串的並排是由+來達成。JavaScript 有兩種加入註解的方法單行註解多行註解,17/50,範例1-5,主題:利用 和

12、 來印出未經瀏覽器排版的結果連結:helloXmp01.htm程式碼重點/由 for 迴圈來產生 5 個由小變大的 Hello World!document.write();for(i=1;iHello World!);document.write();說明若要得到未經瀏覽器排版前的 JavaScript 輸出結果,可以使用 和,但是對於含有 HTML 標籤的文字資料,我們就必須改用 和,18/50,HTML/JavaScript解譯及排版流程,JavaScript:解譯及執行,瀏覽器:解譯標籤,瀏覽器:排版,HTML原始碼,網頁呈現結果,使用來觀看資料範例:helloXmp01.htm,使用

13、來觀看資料範例:writeln02.htm,HTML/JavaScript解譯及排版流程,19/50,範例1-6,主題:使用註解來隱藏程式碼,使不支援 JavaScript 的瀏覽器不會產生錯誤訊息連結:hello03.htm程式碼重點說明混合使用 HTML 及 JavaScript 的註解,可以避開無法解譯 JavaScript的瀏覽器。現在各大瀏覽器都支援 JavaScript,所以使用這種隱藏程式碼的 JavaScript 的程式已經越來越少了。,20/50,1-3 執行方式二:事件驅動,本小節介紹JavaScript如何用事件驅動來執行程式碼。,21/50,內建視窗類別,JavaScr

14、ipt提供了三種和使用者互動的內建對話視窗警告視窗(Alert Window)確認視窗(Confirm Window)提示視窗(Prompt Window),或稱為輸入視窗說明所謂滑鼠事件(Mouse events),指的是能由瀏覽器偵測到的滑鼠動作,例如點選某一個連結、將游標移到一的影像上、游標的移動等。,22/50,範例1-7,主題:使用者點選連結會出現罵人的警告視窗連結:alert01.htm程式碼重點按了你會後悔喔!說明若要讓使用者點選連結來執行 JavaScript 的程式碼,則連結的格式必須是被連結文字程式碼內的字串(例如上例中!#$%&*!),可用單引號來界定,避免和href=之

15、後的雙引號混淆。,23/50,範例1-8,主題:顯示網頁載入時間的警告視窗連結:alert02.htm程式碼重點 today=new Date();hour=today.getHours();minute=today.getMinutes();second=today.getSeconds();string=網頁載入時間是+hour+點+minute+分+second+秒“;說明我們產生字串 string,當連結被按下去時,再將字串送至警告視窗。有關於日期物件和各種時間的用法,會在後面詳述。,24/50,範例1-9,主題:囉里叭唆的警告視窗連結:alert03.htm說明字串可以用”+”連接在

16、一起,而數字以”+”做相加運算,當數值和字串相加時,數值會被當成字串型態,兩者再用”+”相連接。JavaScript 可以用雙引號(“)或單引號()來定義字串的開始和結束。若改用無窮迴圈,在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員,以關閉瀏覽器。,25/50,範例1-10,主題:沒完沒了的警告視窗(將執行1000次以上)連結:alert05.htm程式碼重點function talk()for(i=0;i有膽你就給我按看看!說明:可以用javascript:talk()直接呼叫自訂的函式talk()。如果要快速跳出,請勿壓著Enter鍵,改以ESC鍵壓著,否則

17、程式有可能會再執行一次。,26/50,範例1-11(1),主題:使用確認視窗來確認連結動作連結:confirm01.htm程式碼重點清大首頁 交大首頁台大首頁,27/50,範例1-11(2),說明第一種方式呼叫函式link2nthu(),location.href 代表瀏覽器的網址,改變即可連到不同網址。第二種方式直接寫在連結內,若按確定confirm會回傳true連結新網址,取消則回傳false。第三種使用了 onClick 的屬性,所指定的字串格式是return(程式碼),其中程式碼是一段 JavaScript 的程式碼,只有當此程式碼回傳的值是 true 時,對此連結的點選才會連到指定的

18、網址,否則就完全沒有作用。除了在用在上述範例之外,一般而言 onClick 可以觸發點擊事件,繼而執行 onClick 屬性字串中的程式碼。,28/50,範例1-12(1),主題:使用輸入視窗來決定連結網址連結:prompt01.htm程式碼重點course=prompt(請輸入課程代碼:(webProgramming,scientificComputing,MSAR),webProgramming);if(course=webProgramming)|(course=scientificComputing)|(course=MSAR)location.href=http:/mirlab.or

19、g/jang/courses/+course;說明我們使用 if 敘述來判斷使用者輸入的字串是否等於 這四種字串。|代表邏輯運算的或,而&則代表邏輯運算的且,這部分會在後面章節詳述。,29/50,範例1-12(2),說明alert()、confirm()和 prompt()都是 window 物件的方法,所以要呼叫這些方法,完整的寫法應該是 window.alert()、window.confirm()和 window.prompt(),因為他們太常被用到,所以可以省略 window 此物件,直接呼叫這些函數。,30/50,1-4:基本表單,本小節介紹表單(form)各種元件的寫法以及使用方法

20、。,31/50,form,基本結構 說明表單是由 form 標籤所形成,可包含數個表單元件,而這些元件大部分是使用 input 標籤。input標籤可以不寫在form標籤裡面,但是這樣會失去傳送表單的功能(後面ASP的章節會提到)。,32/50,範例1-13,主題:基本表單範例連結:form01.htm說明form標籤中,action代表表單傳送的目的位址(也就是處理表單資訊的伺服器程式),method 則代表傳送方法,encType是資料編碼格式。input標籤中,name是標籤的變數名稱,在之後操作javascript的時候會更常用到。type是表單元件的型態,如果沒有指定預設是單行文字(

21、text),剩下的之後會列表說明。,33/50,範例1-14(1),主題:將文字欄位的內容送到瀏覽器狀態列連結:formText2status01.htm程式碼重點說明onClick中,document 是此文件,theForm 是我們定義的表單名稱,theString 也是我們定義的文字欄位名稱,而 value 則是文字欄位內建的一個性質名稱,因此 document.theForm.theString.value 就是指文字欄位中的文字。,34/50,範例1-14(1),說明將此文字送到狀態列:直接設定 window.status 即可。在嘗試本範例時,你必須先顯示瀏覽器的狀態列IE 10:

22、可經由Alt/檢視/工具列/狀態列來開啟或關閉瀏覽器的狀態列Chrome:How?(請同學們幫忙找答案!)網頁內如果有多個表單,我們可以分別使用document.formsn來表示,其中 n=0,1,2 等等。通常一個網頁只有一個表單,因此我們不定義此表單的名稱,也可以直接使用 document.forms0 來代表此表單。,35/50,範例1-15,主題:使用 onChange 事件將文字欄位送到狀態列連結:formText2status02.htm程式碼重點說明文字轉換的動作定義於文字欄位的 onChange 屬性,可以省掉按鈕的使用(此事件只有在文字欄位失去滑鼠焦點時才會起作用)。我們可

23、以使用 this 來代表目前元件(即 this 所在之元件),使網頁更為簡潔。在上述範例中,如果希望在文字欄位填入文字時,狀態列能夠立即改變,可將 onChange 改成 onKeyUp 即可。,36/50,範例1-16,主題:使用 this.form傳送兩個文字欄位的訊息連結:formTextMasterSlave01.htm程式碼重點 onClick=this.form.text2.value=this.form.text1.value 說明this.form 就是代表按鈕所在的表單一般而言,以a.b的方式來指到一個物件,例如 form1.input1 等,是由大(表單)到小(控制項)的方

24、式,但唯一的例外,就是 this.form,這是由小(控制項)到大(表單)的方式。,37/50,範例1-17,主題:使用 this.form,傳送兩個核記欄位的訊息連結1:formCheckboxMasterSlave01.htm連結2:formCheckboxMasterSlave02.htm程式碼重點 onClick=this.form.box2.checked=this.form.box1.checked onClick=document.myForm.box2.checked=document.myForm.box1.checked說明checked 的值,true 代表勾選,fals

25、e 代表不勾選。如果不是用 this.form,程式碼比較繁雜(連結2)。,38/50,範例1-18,主題:單選的下拉式選單連結:formSelectSingle01.htm程式碼重點 1.Linear Algebra說明下拉式選單不是使用input標籤,而是用select和option。optionsn代表select中第幾個option標籤。selectedIndex代表所選取option標籤的index值。,39/50,範例1-19,主題:多選的下拉式選單連結:formSelectMultiple01.htm程式碼重點說明從單選變多選只要加入multiple屬性。listSummary(

26、)函式中,我們在 result 變數之前加上了 var,這代表 result 是一個區域變數(Local Variable),如果沒有,這個變數就預設成全域變數(Global Variable),可以在函式以外的任何地方存取此變數。一般我們建議在函式內的變數都盡量設定成局部變數,以減少函式呼叫後可能產生的非預期副作用。,40/50,範例1-20,主題:多列文字欄位(textarea)連結:formTextarea01.htm程式碼重點 This is the text within the textarea tag.這是位於 textarea 標籤內的文字。說明和select一樣,不用inpu

27、t標籤。,41/50,表單元件一覽表,42/50,1-5:JavaScript 和 VBScript 的比較,本小節主要解釋 JavaScript 和VBScript在寫作上的差異性。,43/50,JavaScript 和VBScript差異(1),JavaScript 程式碼會分辨大小寫,VBScript 程式碼則不分大小寫。一般高階程式碼(如 C/C+等),都會分辨大小寫,因此 VBScript 不區分大小寫,是一個較大的缺失。範例(jsVbsComp01.htm)xyz=0Xyz=1XYZ=2說明這段程式碼在兩種script中所產生的結果不同。,44/50,JavaScript 和VBS

28、cript差異(2),VBScript 不能把多項敘述寫在同一列,每列敘述尾端不需加分號。JavaScript可以把多項敘述寫在同一列,但是每個敘述間要用結尾。若每行如果只有一個敘述,則尾端之分號可以省略。範例(jsVbsComp02.htm),45/50,JavaScript 和VBScript差異(3),JavaScript 的語法接近 C 或 C+程式語言,VBScript 則接近於 Basic 程式語言。JavaScript 適用大部分的瀏覽器(Chrome、Firefox、IE、Opera、Netscape 等),但 VBScript 則只能用在 IE 瀏覽器。因此若為了跨瀏覽器平台

29、,選用 JavaScript 是正確的抉擇。JavaScript 和 VBScript 兩者都適用於 ASP(Active Server Pages)和 WSH(Window Scripting Hosts)。,46/50,1-6:網路資源,本小節介紹幾個有關於 JavaScript 的重要網址,以便查詢最新的資訊。,47/50,網路資源(1),這是 Netscape 的官方網站,裡面有對於 JavaScript 的完整說明,包含使用手冊和參考資料等,都可以免費下載回來,安裝在自己的電腦,就不必再上網查詢了。這是 Microsoft 的官方網站,稱為 MSDN(Microsoft Develo

30、per Network),裡面提供了在 Microsoft 出產的平台上,對於程式開發者的所有線上支援,所以當然也包含了 JavaScript 和 VBScript。你可以在網頁左邊的選單選取Web Development/Scripting/Downloads,就可以在網頁右邊看到許多可以下載的腳本引擎、公用程式與說明手冊等。這是 ECMA(European Computer Manufacturers Association,歐洲電腦製造商協會)對於各種電腦軟體或協定的標準規範,裡面也包含了對於 ECMAScript 的規範文件。,48/50,網路資源(2),這個網站資料很多,對於各種 W

31、eb 程式設計所需的工具或參考資料都很詳盡。對於 JavaScript 也有完整說明和範例,編排組織都很清楚。這也是一個內容以 Web 程式設計為主的網站,內容很多,當然也包含完整的 JavaScript 說明和範例,深入淺出,很容易瞭解。這也是一個綜合性的網站,內容以 Web 程式設計為主,也包含了各種 JavaScript 說明和範例。,49/50,網路資源(3),這也是一個綜合性的網站。由網址就可以知道這是以 JavaScript 為中心的網站,三不五時可以找到很有趣的 JavaScript 程式碼。這也是以 JavaScript 為中心的網站,有很多範例程式,還有較進階的說明和範例,適合高手。,50/50,網路資源(4),此網站包含很多 JavaScript 的範例程式,介紹很完整。此網站包含了很多現成的程式碼,是程式發展者的交換中心。此網站包含了很多 DHTML 的範例,例如改變網頁拉霸的顏色、顯示漸進式長條圖等。,51/50,

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号