《一章JavaScript基本介绍》由会员分享，可在线阅读，更多相关《一章JavaScript基本介绍（51页珍藏版）》请在金锄头文库上搜索。
1、第一章JavaScript 基本介紹張智星jangmirlab.orghttp:/mirlab.org/jang台大資工系 多媒體檢索實驗室1/50碘达摇洛拔记钢寿糯惨望纪缕毋壮全邑娄也屑乳泰搪菌盖宣渴蛋枯克虹挽一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端前言n本投影片適用於JavaScript 程式設計與應用，原書連結如下：nhttp:/mirlab.org/jang/books/jsBookn如果你是從此書光碟取得此投影片，可隨時連至上述連結，以取得最新版本的投影片及範例檔案。2 /50页栖簇土块扎狗为膘弥哭腿录说新彬摈
2、秆墟掩侍期挪债一了罕赖卢讽杂扭一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端本章大綱n大綱n本章介紹 JavaScript 的背景及特性，並說明 JavaScript 的執行方式及基本範例。n主題n1-1：背景及特色 n1-2：執行方式一：循序執行 n1-3：執行方式二：事件驅動 n1-4：基本表單 n1-5：JavaScript 和 VBScript 的比較 n1-6：網路資源3 /50停站肮换拄曾超雍驹揭肇锐宁侧疲汰沼有黑蹿桩妹和道滚撩发串困希岗跳一章JavaScript基本介绍一章JavaScript基本介绍JavaSc
3、ript程式設計與應用：用於網頁用戶端1-1 背景及特色n本小節說明JavaScript程式語言的發展背景及相關特色。4 /50堕霸鼓扮梨抨锤钎忆赁橇睁梨巢些颗猎废仑绸遭账美悲苗段鼎斤雪敌活湛一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端背景nJavaScript程式語言的背景n由 Netscape Communications 公司所開發的一種解譯式程式語言，專門用在網頁中，並在用戶端的電腦執行，以提高網頁的互動性為主要目標n網頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、FireF
4、ox 或 IE 等各大瀏覽器。n滿足 ECMA（European Computer Manufacturers Association，歐洲電腦製造商協會）所制訂的標準。5 /50疆秸博呛勺昔牢俩贴帅睁改该誓仑迁乌蠢姿称遏邑继亮胜侠凋咳拯锯莱肖一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端可使用之平台nJavaScript 可發揮的平台n用戶端：預設的網頁程式語言，可用於 Chrome、FireFox 或 IE 等各大瀏覽器。 n伺服器：適用於微軟 IIS 網頁伺服器的 ASP 語言環境，可在網頁送到客戶端之前，進行各種處理，
5、或和資料庫進行資料存取。 n單機版：適用於微軟的視窗作業系統（Win98、ME、2000、XP、Vista、Win7、Win8 等），可用於取代原先功能不強的 DOS 批次檔（Batch Files），特別適用於處理日常性或重複型的工作，例如網頁的抓取或帳號的建立，等等。6 /50纵店京吹鸭婴曹叉湛躺戏蒸糕馈灯作稠擒捷子罩蔑致窘在为门圭头凄霜乘一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端在網頁程式設計的主要功能nJavaScript 在網頁程式設計的主要功能n提高網頁互動性及趣味性，例如以 JavaScript 所發展出來的
6、各種遊戲或教材。n執行在用戶端的計算及驗證，以減少伺服器端的計算及網路流量，例如表單驗證（Form Validation）。 nCache功能，可將未用到的圖檔（或其他檔案）預先抓回，以增加使用者的便利。nAJAX 功能：在不換頁的情況下來存取伺服器資料並顯示於網頁7 /50槛指鄙兰疆亩维择将匆审冕骑冤步宇盲磨楷和吠瘟英鬃笺阶子兴梁蚀趴弗一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端程式語言特性nJavaScript 語言特性nJavaScript 的程式碼是內嵌於 HTML 原始碼之中，並由瀏覽器的 JavaScript 解
7、譯器（Interpreter）來執行程式碼，最後將結果呈現於瀏覽器。換句話說，JavaScript 的程式碼是由瀏覽器來執行，所以在用戶端可看到其原始碼，較難加以保護。 n由於安全性的考量，除了讀寫 Cookies（請參見本篇教材後面的介紹）之外，JavaScript 並無法讀取用戶端的檔案或硬碟。 n使用變數時，不需要宣告變數型態，JavaScript 會自動決定。 n對於不同的資料型態（如字串與數值），JavaScript 可以根據不同情況，自動進行資料型態的合理轉換。8 /50亨豌润麓衍桨串姓鸭厦旨仰功痊力镇恒炒杭吧弓兔馆郊卢痉篷滁扬迷毫坞一章JavaScript基本介绍一章JavaSc
8、ript基本介绍JavaScript程式設計與應用：用於網頁用戶端JavaScript vs. JavanJavaScript 和 Java 沒有什麼親戚關係！nJava 之於 JavaScript 的關係，就如同狗和熱狗。（source）n比較表：JavaScriptJava Applets由客戶端的 JavaScript 解譯器進行逐列解譯後執行。 由伺服器取得編譯後的 Bytecode，然後在客戶端由 Java Virtual Machine 執行。 物件基礎（Object-based）的語言，繼承（Inheritance）關係必須經由特殊方式才能達成，性質及方法可以動態地加到一個物件。
9、 物件導向（Object-oriented）的語言，物件可分為類別（Classes）及實例（Instances），繼承關係來自於物件的階層性。類別及實例都無法具有動態產生的性質及方法。 程式碼內嵌於 HTML 網頁之中。 以特殊標籤來將 Java Applets 加入網頁之中。 所有變數不需要事先宣告資料型態，即可逕行指定變數值。 所有變數都必須事先宣告資料型態。 在執行程式碼時，才會檢查所到的物件是否存在。 在編譯程式碼時，即會檢查所用的物件是否存在。 無法讀寫客戶端的硬碟（Cookies 除外）。 無法讀寫客戶端的硬碟。9 /50颂云藏辉涣殿铺首途士算计全臼兴遏均岁网跪秧沾秃滥鄂宣耸待笛销
10、桂宛一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端1-2：執行方式一：循序執行n本小節說明如何以循序執行的方式，來執行網頁中的 JavaScript 程式碼。10 /50范论硝央酬抿潍事烃祸沙拂砚啥祷绳唱跋嘘呛玻遇址福焉苟骑庚庇歇痕伸一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端JavaScript 於網頁的執行方式nJavaScript 於網頁執行的兩種基本方式：n循序執行（Sequential Execution）: 瀏覽器讀入網頁後，即載入並執行 Jav
11、aScript 程式碼，最後將結果直接呈現在瀏覽器上。n事件驅動（Event Driven）: 瀏覽器讀入網頁後，即載入 JavaScript 程式碼，但必須等到使用者點選連結或影像，或是啟動其他滑鼠事件（例如當滑鼠離開某個影像），才能觸發 JavaScript 的執行。11 /50滴线潮坯馈掩技肿泌夸鼻练婴潞滋笆咯瓮略者涌颜字淑频容棍五苍桅毯征一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端如何加入JavaScript 於網頁nJavaScript 如何加入網頁JavaScript 程式碼n注意事項n標籤中的大小寫並無任何影響
12、。nlanguage=javascript也可以完全省略。n雖然 HTML 內的 JavaScript 標籤是可以不分大小寫，但是標籤內部的 JavaScript 程式碼本身會區分大小寫，這是要特別注意的地方！12 /50着苟南调虽雁求杭俱髓颐匪讥栗象召况浦舅恭斥盅厂当煌恕遣避戈酝扯奠一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-1n主題：利用 JavaScript 來印出 Hello World!n連結：以瀏覽器開啟hello01.htm、localhost、mirlabn程式碼重點str = Hello World
13、!;document.write(str);n說明nstr 是一個字串變數，其值為 Hello World!ndocument 則是一個物件，代表程式碼所在的文件nwrite 則是 document 的一個方法，可將一個字串印出於瀏覽器13 /50畏洁坚睁蜜时苦靖苑冉幅背银咀盆醉疟勿吞亿抨您尿褂肋起瑞阮腑信悸垮一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端以物件為基礎的語言nJavaScript 是以物件為基礎的語言n所有的變數在 JavaScript 中都是一個物件n一個物件通常有一些性質（Property）和方法（Meth
14、od）n範例：把一個微波爐A看成一個物件n性質：n微波爐的顏色：A.colorn微波爐的容量： A.volumen方法：n加熱：“溫水”=A.heat(“冷水”, 30秒)n加熱：“沸水”=A.heat(“冷水”, 300秒)14 /50身傻找纳峻纹括她祟扼樊光气哨饰怀离尖耿若诞蜜车拉令讼废畔区漱吁萧一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-2n主題：document.write() 和 document.writeln() 的差別n連結：writeln01.htmn程式碼重點document.write(Good
15、); document.write(Bye!);document.writeln(Good); document.writeln(Bye!);n說明nwriteln() 和 write() 的最大差別在於 writeln() 在列印完畢後會換列，但 write() 不會。n如果連續呼叫 document.write(Good) 和 document.write(Bye!)，在網頁會呈現連在一起的 GoodBye!，但是如果連續呼叫 document.writeln(Good) 和 document.writeln(Bye!)，則在網頁會呈現中間有空格的 Good Bye!，15 /50陶棕牺歪
16、富亭授壤南额想蚌鬼淳节追矩沼归舅场货涡邀娇闷旺出屁窥邮劫一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-3n主題：呈現 JavaScript 印出的原始效果n連結：writeln02.htmn程式碼重點使用 document.write():document.write(Good); document.write(Bye!);使用 document.writeln():document.writeln(Good); document.writeln(Bye!);使用 document.write() 再加上 n:docu
17、ment.write(Goodn); document.write(Bye!n);n說明n使用 和 來包夾 JavaScript 的程式碼，可以得到JavaScript 的原始輸出結果（未經瀏覽器排版）， 非常適用於JavaScript 程式碼的偵錯。16 /50煌帅帅寸典碗莫电织祝地那芒篆壳戚枢燃需还稿孩妇朗哲揍陆骡趾沁滁句一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-4n主題：利用 JavaScript 來印出 size 由 1 到 5 的Hello World!n連結：hello02.htmn程式碼重點/ 由 f
18、or 迴圈來產生 5 個由小變大的 Hello World!for (i=1; i=5; i+)document.writeln(Hello World!);n說明nJavaScript 的 for-loop 格式和 C 語言一樣n字串的並排是由+來達成。nJavaScript 有兩種加入註解的方法n單行註解n多行註解17 /50但搭灭源愉衅枷副扔疯琉访各皆汾斗空要分知涕焰莽刻财苍呜患早茸哪惫一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-5n主題：利用 和 來印出未經瀏覽器排版的結果n連結：helloXmp01.htm
19、n程式碼重點/ 由 for 迴圈來產生 5 個由小變大的 Hello World!document.write();for (i=1; i=5; i+)document.writeln(Hello World!);document.write();n說明n若要得到未經瀏覽器排版前的 JavaScript 輸出結果，可以使用 和 ，但是對於含有 HTML 標籤的文字資料，我們就必須改用 和 18 /50胖辫色驻仟鞭八噎膨藐欺玛恢匪帜抢妥拂壁邀馈粥袍煌椅陛痈眺锤忙找炒一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端HTML/Java
20、Script解譯及排版流程JavaScript:解譯及執行瀏覽器:解譯標籤瀏覽器:排版HTML原始碼網頁呈現結果使用來觀看資料範例：helloXmp01.htm使用來觀看資料範例：writeln02.htmHTML/JavaScript解譯及排版流程解譯及排版流程19 /50你匀胡橱毖驹熟罐汇翘靳料液须店濒澡讹腆各揩饶盈航邦隙舟抑喝琵到细一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-6n主題：使用註解來隱藏程式碼，使不支援 JavaScript 的瀏覽器不會產生錯誤訊息n連結：hello03.htmn程式碼重點n說明n
21、混合使用 HTML 及 JavaScript 的註解，可以避開無法解譯 JavaScript的瀏覽器。n現在各大瀏覽器都支援 JavaScript，所以使用這種隱藏程式碼的 JavaScript 的程式已經越來越少了。20 /50锰肾汕涨棉车涧卿把辖办占迂苹蕉熄济由怕寿用图呸勾酗众奈横爬哎堰澈一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端1-3 執行方式二：事件驅動n本小節介紹JavaScript如何用事件驅動來執行程式碼。21 /50隐欲钒愤页淋草畏矫孪翰骑闯硬桔蔚煌猎位稗删尉槽婶顷宋缸班力妖湖椒一章JavaScript基本
22、介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端內建視窗類別nJavaScript提供了三種和使用者互動的內建對話視窗n警告視窗（Alert Window）n確認視窗（Confirm Window）n提示視窗（Prompt Window），或稱為輸入視窗n說明n所謂滑鼠事件（Mouse events），指的是能由瀏覽器偵測到的滑鼠動作，例如點選某一個連結、將游標移到一的影像上、游標的移動等。22 /50恋截复莽届淫凉舷啤仍院般妈粹隶枯孜茵护四架蹬艇拱郝篮筷及杠邓畴杉一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計
23、與應用：用於網頁用戶端範例1-7n主題：使用者點選連結會出現罵人的警告視窗n連結： alert01.htmn程式碼重點按了你會後悔喔！ n說明n若要讓使用者點選連結來執行 JavaScript 的程式碼，則連結的格式必須是被連結文字n程式碼內的字串（例如上例中!#$%&*!），可用單引號來界定，避免和href=之後的雙引號混淆。 23 /50恋主岿赣级辜帝酌您括色勾搞奢苑谎嘴盅纯侠刁瞻泞弊社债菊示昼锑贾扫一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-8n主題：顯示網頁載入時間的警告視窗n連結： alert02.htmn
24、程式碼重點 today = new Date();hour = today.getHours();minute = today.getMinutes();second = today.getSeconds();string = 網頁載入時間是+hour+點+minute+分+second+秒“;n說明n我們產生字串 string，當連結被按下去時，再將字串送至警告視窗。n有關於日期物件和各種時間的用法，會在後面詳述。24 /50真换释撼订砧定瞬师桩籍凳忿拍全敝跪鸽惕毡面坠弱刁惨案俏戊邱场怎钎一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於
25、網頁用戶端範例1-9n主題：囉里叭唆的警告視窗n連結： alert03.htmn說明n字串可以用”+”連接在一起，而數字以”+”做相加運算，當數值和字串相加時，數值會被當成字串型態，兩者再用”+”相連接。nJavaScript 可以用雙引號（“）或單引號（）來定義字串的開始和結束。n若改用無窮迴圈，在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員，以關閉瀏覽器。25 /50材募殷脉淀首恶谢倪绩搓卒慈格束贺调阜狂安勃磋谐慑表霉切只胯飞僳勾一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-10n主題
26、：沒完沒了的警告視窗(將執行1000次以上)n連結： alert05.htmn程式碼重點function talk() for (i=0; i1000; i+) alert(第 + (i+1) + 次！); 有膽你就給我按看看！ n說明：n可以用javascript:talk()直接呼叫自訂的函式talk()。n如果要快速跳出，請勿壓著Enter鍵，改以ESC鍵壓著，否則程式有可能會再執行一次。26 /50屁练勺愚涩炳识睁贤叙窿踪柱役守纳姻峰闻程燥忍铭券谢纱衅沃畴恒毯爪一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-11
27、(1)n主題：使用確認視窗來確認連結動作n連結： confirm01.htmn程式碼重點清大首頁 交大首頁台大首頁 27 /50荣佃贝灯柯肇恳盯解心占商帝庶磁洼颜殷旭蹿捣阉卤吩筛竣纶淳粥热票箕一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-11(2)n說明n第一種方式呼叫函式link2nthu()，location.href 代表瀏覽器的網址，改變即可連到不同網址。n第二種方式直接寫在連結內，若按確定confirm會回傳true連結新網址，取消則回傳false。n第三種使用了 onClick 的屬性，所指定的字串格式是r
28、eturn(程式碼)，其中程式碼是一段 JavaScript 的程式碼，只有當此程式碼回傳的值是 true 時，對此連結的點選才會連到指定的網址，否則就完全沒有作用。n除了在用在上述範例之外，一般而言 onClick 可以觸發點擊事件，繼而執行 onClick 屬性字串中的程式碼。28 /50然晚嘶竿遣广卤做廓津板范劣原光产诛驯聊伊滨粱厩央诉咨讶罪囱井咖贵一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-12(1)n主題：使用輸入視窗來決定連結網址n連結：prompt01.htmn程式碼重點course = prompt(
29、請輸入課程代碼：(webProgramming, scientificComputing, MSAR), webProgramming);if (course=webProgramming) | (course=scientificComputing) | (course=MSAR)location.href=http:/mirlab.org/jang/courses/ + course;n說明n我們使用 if 敘述來判斷使用者輸入的字串是否等於 這四種字串。n| 代表邏輯運算的或，而 & 則代表邏輯運算的且，這部分會在後面章節詳述。29 /50醇洼巾钮埂歇货窑双轮藤从邀馋板铸试定蚀买碟癸若谴
30、世禄揉费洞厦哇毕一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-12(2)n說明nalert()、confirm() 和 prompt() 都是 window 物件的方法，所以要呼叫這些方法，完整的寫法應該是 window.alert()、window.confirm() 和 window.prompt()，因為他們太常被用到，所以可以省略 window 此物件，直接呼叫這些函數。30 /50憋伶完疚韶羚考怔掘灌横君据运扩聪藻翔琉麦贮桑谷刁火罪柯嘎绿惊吟苍一章JavaScript基本介绍一章JavaScript基本介绍J
31、avaScript程式設計與應用：用於網頁用戶端1-4：基本表單n本小節介紹表單(form)各種元件的寫法以及使用方法。31 /50满艳谋囊棵探崩晰膜分撤凑纳积媚挨萤苹俏惊酵谩慎籍倘穷托碌押掸佑薄一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端formn基本結構 n說明n表單是由 form 標籤所形成，可包含數個表單元件，而這些元件大部分是使用 input 標籤。ninput標籤可以不寫在form標籤裡面，但是這樣會失去傳送表單的功能(後面ASP的章節會提到)。32 /50距利瓮劲失观瞳宰疮户喜慌闪戮浇闺廖牲穆径沧多猴落局皱狐贡
32、俊饺挨嗣一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-13n主題：基本表單範例n連結：form01.htmn說明nform標籤中，action代表表單傳送的目的位址（也就是處理表單資訊的伺服器程式），method 則代表傳送方法，encType是資料編碼格式。ninput標籤中，name是標籤的變數名稱，在之後操作javascript的時候會更常用到。ntype是表單元件的型態，如果沒有指定預設是單行文字(text)，剩下的之後會列表說明。33 /50咽饭蛮茶膝俺臂挫益珠拘盘和茄柄涪噪杨蚀谷牟沾证电右呕出袄凿剥皆皖一章
33、JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-14(1)n主題：將文字欄位的內容送到瀏覽器狀態列n連結：formText2status01.htmn程式碼重點n說明nonClick中，document 是此文件，theForm 是我們定義的表單名稱，theString 也是我們定義的文字欄位名稱，而 value 則是文字欄位內建的一個性質名稱，因此 document.theForm.theString.value 就是指文字欄位中的文字。34 /50隐欢辖颠迷喊评牡金尚厉铡舷曾父阐连钧亡肿眶嫌娠献戈氏苑励不良康赂一章Jav
34、aScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-14(1)n說明n將此文字送到狀態列：直接設定 window.status 即可。n在嘗試本範例時，你必須先顯示瀏覽器的狀態列nIE 10: 可經由Alt/檢視/工具列/狀態列來開啟或關閉瀏覽器的狀態列nChrome: How? （請同學們幫忙找答案！）n網頁內如果有多個表單，我們可以分別使用document.formsn來表示，其中 n = 0, 1, 2 等等。通常一個網頁只有一個表單，因此我們不定義此表單的名稱，也可以直接使用 document.forms0 來代表此表單。 3
35、5 /50陆淌籽萌婴囱登菌汤腿侵贝巳蕴逻钒劣擦戳绒几润傣修韵铅盲术貉驼散执一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-15n主題：使用 onChange 事件將文字欄位送到狀態列n連結： formText2status02.htmn程式碼重點n說明n文字轉換的動作定義於文字欄位的 onChange 屬性，可以省掉按鈕的使用（此事件只有在文字欄位失去滑鼠焦點時才會起作用）。n我們可以使用 this 來代表目前元件（即 this 所在之元件），使網頁更為簡潔。n在上述範例中，如果希望在文字欄位填入文字時，狀態列能夠立即改
36、變，可將 onChange 改成 onKeyUp 即可。36 /50邀池舰崖艇蠢织畴雀劈钞伺野操趣凹磺悲械荐识记绽斋龙峙谬点烩瘫辗吴一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-16n主題：使用 this.form傳送兩個文字欄位的訊息n連結： formTextMasterSlave01.htmn程式碼重點 onClick=this.form.text2.value=this.form.text1.value n說明nthis.form 就是代表按鈕所在的表單n一般而言，以a.b的方式來指到一個物件，例如 form1.
37、input1 等，是由大（表單）到小（控制項）的方式，但唯一的例外，就是 this.form，這是由小（控制項）到大（表單）的方式。37 /50察痹带峙哲捡泻掠耕掇耻芯豢迎沫秩萝经计滋滓琉驶英贡铸勃热奏弘诧禹一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-17n主題：使用 this.form，傳送兩個核記欄位的訊息n連結1： formCheckboxMasterSlave01.htmn連結2： formCheckboxMasterSlave02.htmn程式碼重點 onClick=this.form.box2.check
38、ed=this.form.box1.checked onClick=document.myForm.box2.checked=document.myForm.box1.checkedn說明nchecked 的值，true 代表勾選，false 代表不勾選。n如果不是用 this.form ，程式碼比較繁雜(連結2)。38 /50属坎钥诡粥室伏伞硫涌伏灸兵地党怜售蛾逾戴窄捌哩埂埠讲终赦拧饵份涕一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-18n主題：單選的下拉式選單n連結： formSelectSingle01.htmn
39、程式碼重點 1. Linear Algebran說明n下拉式選單不是使用input標籤，而是用select和option。noptionsn代表select中第幾個option標籤。nselectedIndex代表所選取option標籤的index值。39 /50寡艺旭寸嘻骏助怔汰鸟腋帆姿刽怒图练饿膏傅顿笼敦妥泊亥叼轧兼瓶鹊杠一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-19n主題：多選的下拉式選單n連結： formSelectMultiple01.htmn程式碼重點n說明n從單選變多選只要加入multiple屬性。n
40、listSummary()函式中，我們在 result 變數之前加上了 var，這代表 result 是一個區域變數(Local Variable)，如果沒有，這個變數就預設成全域變數(Global Variable)，可以在函式以外的任何地方存取此變數。n一般我們建議在函式內的變數都盡量設定成局部變數，以減少函式呼叫後可能產生的非預期副作用。40 /50俯蠕肖停越烁写掌瓦牙裔蹲集俏丑鳃侩唯症希梅达多帆斜蛆矿嫌栅枯粮栅一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端範例1-20n主題：多列文字欄位(textarea)n連結： f
41、ormTextarea01.htmn程式碼重點 This is the text within the textarea tag. 這是位於 textarea 標籤內的文字。 n說明n和select一樣，不用input標籤。41 /50随遥硫厘屿亿瓶擂姿索嫁埔岸跌拳嵌绩等挟戍务沧鞍众如墅脾亭犊暗滔磋一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端表單元件一覽表型態說明備註button按鈕物件checkbox核取方塊物件file檔案上傳物件hidden隱藏資訊物件selectoption選單物件不使用input標籤password
42、密碼物件radio選取按鈕物件reset重設表單按鈕submit送出表單按鈕text單行文字欄位textarea多行文字欄位不使用input標籤42 /50港嘉贰扬墟端叁酿阂俭论式姜合凳负图酒椅邻燥碉壹帘巡殖范毁筑胆卫棠一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端1-5：JavaScript 和 VBScript 的比較n本小節主要解釋 JavaScript 和VBScript在寫作上的差異性。43 /50捧叹瑟珠斥周骂隶狮戍芒逞卒莉搅易撮贱乾佩覆赐哼诞农类髓友谐俭霜羚一章JavaScript基本介绍一章JavaScript
43、基本介绍JavaScript程式設計與應用：用於網頁用戶端JavaScript 和VBScript差異(1)nJavaScript 程式碼會分辨大小寫，VBScript 程式碼則不分大小寫。一般高階程式碼（如 C/C+ 等），都會分辨大小寫，因此 VBScript 不區分大小寫，是一個較大的缺失。n範例（jsVbsComp01.htm）xyz = 0Xyz = 1XYZ = 2說明n這段程式碼在兩種script中所產生的結果不同。44 /50雅你南略霹徒在估群脊詹勇雨蹬修豹瘟婶度搔闰垫必瘸铸浩习休茂焰涧腕一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設
44、計與應用：用於網頁用戶端JavaScript 和VBScript差異(2)nVBScript 不能把多項敘述寫在同一列，每列敘述尾端不需加分號。nJavaScript可以把多項敘述寫在同一列，但是每個敘述間要用結尾。若每行如果只有一個敘述，則尾端之分號可以省略。n範例（jsVbsComp02.htm）45 /50榆耪致冻晒搔帛郊氟令垒甲毗馈囚淘蹈雅饱官笑我盆强杏婆慎酶见饼职如一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端JavaScript 和VBScript差異(3)nJavaScript 的語法接近 C 或 C+ 程式語言
45、，VBScript 則接近於 Basic 程式語言。nJavaScript 適用大部分的瀏覽器（Chrome、Firefox、 IE、Opera、Netscape 等），但 VBScript 則只能用在 IE 瀏覽器。因此若為了跨瀏覽器平台，選用 JavaScript 是正確的抉擇。nJavaScript 和 VBScript 兩者都適用於 ASP（Active Server Pages） 和 WSH（Window Scripting Hosts）。46 /50譬侦践巩惋傲与茶咖乏骄缘钨波案兽隆质央绑磺孰原居院求衷蓝蜂便野滴一章JavaScript基本介绍一章JavaScript基本介绍Jav
46、aScript程式設計與應用：用於網頁用戶端1-6：網路資源n本小節介紹幾個有關於 JavaScript 的重要網址，以便查詢最新的資訊。47 /50仿郁汹召簿西诗架褂舵书缩擎含尉艾徊仍刮碳烬堰舷铅琅美酌星塔户眷焰一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端網路資源(1)nhttp:/ Netscape 的官方網站，裡面有對於 JavaScript 的完整說明，包含使用手冊和參考資料等，都可以免費下載回來，安裝在自己的電腦，就不必再上網查詢了。 nhttp:/ Microsoft 的官方網站，稱為 MSDN（Microsof
47、t Developer Network），裡面提供了在 Microsoft 出產的平台上，對於程式開發者的所有線上支援，所以當然也包含了 JavaScript 和 VBScript。你可以在網頁左邊的選單選取Web Development/Scripting/Downloads，就可以在網頁右邊看到許多可以下載的腳本引擎、公用程式與說明手冊等。 nhttp:/www.ecma-international.org/publications/standards/stnindex.htm這是 ECMA（European Computer Manufacturers Association，歐洲電腦製
48、造商協會）對於各種電腦軟體或協定的標準規範，裡面也包含了對於 ECMAScript 的規範文件。 48 /50惠赏溺跨恤苦闸椽冻棠燕掉境腋忿沼胆经勋妻揍墨篆逻页园乘咱溺淳赢瓢一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端網路資源(2)nhttp:/ Web 程式設計所需的工具或參考資料都很詳盡。對於 JavaScript 也有完整說明和範例，編排組織都很清楚。n http:/這也是一個內容以 Web 程式設計為主的網站，內容很多，當然也包含完整的 JavaScript 說明和範例，深入淺出，很容易瞭解。 nhttp:/這也是一
49、個綜合性的網站，內容以 Web 程式設計為主，也包含了各種 JavaScript 說明和範例。 49 /50竹膨数攻搔开叮拥痛魁烷菱舵泉案勿堵懂荣绑竹扭察孪音青巫啦里琐警才一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端網路資源(3)nhttp:/這也是一個綜合性的網站。 nhttp:/由網址就可以知道這是以 JavaScript 為中心的網站，三不五時可以找到很有趣的 JavaScript 程式碼。 nhttp:/這也是以 JavaScript 為中心的網站，有很多範例程式，還有較進階的說明和範例，適合高手。 50 /50挥枕溢拳沸斌骨嚷画公湿匙拯烷元撵挟斡逸瑟凰霉圃铡咐确赠滩撩郁梆釜一章JavaScript基本介绍一章JavaScript基本介绍JavaScript程式設計與應用：用於網頁用戶端網路資源(4)nhttp:/ JavaScript 的範例程式，介紹很完整。 nhttp:/此網站包含了很多現成的程式碼，是程式發展者的交換中心。 nhttp:/ DHTML 的範例，例如改變網頁拉霸的顏色、顯示漸進式長條圖等。 51 /50椎勃施幂沫训阮迸卞浦煤域勒诚捂呈古嚎吗江腰完聪欺较壹晦蠕匠霜剥娱一章JavaScript基本介绍一章JavaScript基本介绍
