1 / 76

JavaScript

. JavaScript. 資策會教育訓練處 楊宏文 ( hubert Yang) hwyang@iii.org.tw. www.hubert.idv.tw. 練習 3-1. 建立一個具有框架的基本網站架構。 1. 當使用者進入你的網站時，利用 alert 表示歡迎訊息。 2.當使用者按下“與我聯絡”超鏈結點， 打開一個POP3軟體，以撰寫信件。. Navigator 物件. www.hubert.idv.tw. 領航員物件 (Navigator Object). 使用領航員物件的語法如下。. navigator. 特性

dianne
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. .......... .......... JavaScript 資策會教育訓練處 楊宏文 (hubert Yang) hwyang@iii.org.tw

  2. .......... www.hubert.idv.tw .......... 練習 3-1 建立一個具有框架的基本網站架構。 1.當使用者進入你的網站時，利用alert 表示歡迎訊息。 2.當使用者按下“與我聯絡”超鏈結點， 打開一個POP3軟體，以撰寫信件。

  3. .......... .......... Navigator 物件

  4. .......... www.hubert.idv.tw .......... 領航員物件(Navigator Object) • 使用領航員物件的語法如下。 navigator.特性 navigator.方法

  5. .......... www.hubert.idv.tw .......... 領航員物件特性 • 領航員物件可搭配的特性如下。 appCodeName ->瀏覽器代碼 appName ->瀏覽器名稱 appVersion ->瀏覽器版本 userAgent ->使用者代理器 (相當於結合 appName 與 appVersion )

  6. .......... www.hubert.idv.tw .......... 領航員物件方法 • 領航員物件可使用的方法如下。 eval() ->將指定的引數(運算式)計值 javaEnabled() ->是否支援Java (True/False) toString() ->傳回字串表示值 valueOf() ->傳回數值表示值

  7. .......... www.hubert.idv.tw .......... 領航員物件範例 <Script> with(document) { write("瀏覽器代碼=", navigator.appCodeName, "<br>"); write("瀏覽器名稱=", navigator.appName, "<br>"); write("瀏覽器版本=", navigator.appVersion, "<br>"); write("使用者表頭=", navigator.userAgent, "<br>"); } </script>

  8. .......... www.hubert.idv.tw .......... 領航員物件範例 <script> var str1 = navigator.appVersion; var str2 = str1.split(";"); document.write("您的瀏覽器版本：", str2[1], "<br>"); document.write("作業系統版本是：", str2[2], "<br>"); </script>

  9. .......... www.hubert.idv.tw .......... 判斷是否使用 IE <script> isIE = (navigator.userAgent.indexOf("MSIE") != -1); var yesorno = isIE? "是": "不是"; document.write("您" + yesorno + "使用 Microsoft Internet Explorer"); </script>

  10. .......... .......... Screen 物件

  11. .......... www.hubert.idv.tw .......... 螢幕物件(Screen Object) • 使用螢幕物件的語法如下。 screen.特性 screen.方法

  12. .......... www.hubert.idv.tw .......... 螢幕物件特性 • 螢幕物件可搭配的特性如下。 colorDepth ->顯示器色彩數目 height ->顯示器桌面區域的高度 width ->顯示器桌面區域的寬度

  13. .......... www.hubert.idv.tw .......... 螢幕物件範例 <script> var width = screen.width; var height = screen.height; var color = screen.colorDepth; if (color == 8) color="256色"; else if (color == 16) color="16位元高彩"; else if (color == 32) color="32位元全彩"; document.write("你正使用", width, " * ", height, "，", color); </script>

  14. .......... www.hubert.idv.tw .......... 練習 3-2 將使用者端的瀏覽器及顯示器設定顯示出來：

  15. .......... .......... Window物件

  16. .......... www.hubert.idv.tw .......... 視窗物件(Window object) 1.代表瀏覽器所開啟的視窗。 2.通常代表目前正在使用(focus)的視窗。 3.如果開啟多個瀏覽視窗時，可以利用 別名(alias)來區別他們 ex. opener, parent, self, window, top

  17. .......... www.hubert.idv.tw .......... 視窗物件的使用語法(1) • 使用視窗物件的語法如下。 window.特性 window.方法(參數群) self.特性 //self代表目前window或frame名稱 self.方法(參數群) top.特性 //top代表最頂層的視窗 top.方法(參數群)

  18. .......... www.hubert.idv.tw .......... 視窗物件的使用語法(2) • 使用視窗物件的語法如下。 parent.特性 //parent代表目前框架的母框架 parent.方法(參數群) opener.特性 //opener代表開啟目前視窗的視窗 opener.方法(參數群) 視窗名稱.特性 視窗名稱.方法(參數群) 特性 方法(參數群)

  19. .......... www.hubert.idv.tw .......... 視窗物件的特性(1) • 視窗物件可搭配的特性如下： closed ->說明視窗是否已關閉 defaultStatus ->瀏覽器底部預設的狀態列訊息 length ->視窗物件中的框架個數 Frame ->視窗物件中的frame frames ->視窗物件中的frame陣列 name ->視窗物件名稱 opener ->視窗物件的呼叫者視窗名稱 status ->瀏覽器底部自行設定的狀態列訊息

  20. .......... www.hubert.idv.tw .......... 視窗物件的特性(2) • 視窗物件可搭配的特性如下： document ->視窗物件中的document物件 history ->視窗物件中的history物件 location ->視窗物件中的location物件

  21. .......... www.hubert.idv.tw .......... 視窗物件範例 – 避免被 frame 破壞 <Script> // 將這一段程式碼放至首頁，可以避免因框架內連結 // 所造成的視窗限制 if ( top.frames.length > 1 ) top.location= "你的網址" </Script>

  22. .......... www.hubert.idv.tw .......... 視窗物件的方法(1) • 視窗物件可使用的方法如下。 alert() ->顯示警告訊息 confirm() ->顯示確認訊息 prompt() ->顯示提示訊息 focus() ->成為焦點 blur() ->移開焦點(成為背景處理) open() ->開啟新瀏覽視窗 close() ->關閉已開啟的瀏覽視窗 eval() ->執行引數運算式計算

  23. .......... www.hubert.idv.tw .......... 視窗物件的方法(2) • 視窗物件可使用的方法如下。 resizeBy(x, y) ->將視窗尺寸向X軸及Y軸調整 moveBy(x, y) ->將視窗向X軸及Y軸移動 scroll(x,y) ->捲動至指定的座標 print() ->列印指定之視窗內容 setTimeoout() ->設定一定時程序(計時器) clearTimeout() ->撤銷一定時程序(計時器) toString() ->傳回字串表示值 valueOf() -->傳回數值表示值

  24. .......... www.hubert.idv.tw .......... prompt() 的語法 [window.]prompt("提示字元", "輸入欄預設值") prompt 係用來彈出一個提示訊息框，並且提供一個可供輸入的欄位。

  25. .......... www.hubert.idv.tw .......... 視窗物件範例 - prompt <Script> var bg= prompt("您喜歡哪一種底色：\n淺藍 -> 1 ，淺紅 -> 2","1") if (bg == 1) document.bgColor='#CCFFFF' else if (bg == 2) document.bgColor='#FFCCFF' else document.bgColor='#FFFFFF' </Script>

  26. .......... www.hubert.idv.tw .......... 視窗物件範例 - confirm & alert • <Script> • if (confirm("你滿十八歲了嗎?")) • location.href = "sex.htm" • else • alert("等你成年以後再來!") • </Script> • 注意： • 以下四種寫法均相同 – • Window.location.href = ……… • Window.location = ……… • location.href = ……… • location = ………

  27. .......... www.hubert.idv.tw .......... 範例 – 自動放大視窗 <Script> function grow(){ resizeBy( 50, 50) } function shrink(){ resizeBy( -50, -50) } </script> <body onMouseOver=grow() onMouseOut=shrink()> <H1>將視窗放大與縮小</H1> </body>

  28. .......... www.hubert.idv.tw .......... 範例 – 自動捲動視窗 <Script> function scrollIt() { for (y=1; y<=1000; y++){ scroll(1,y) } } </Script> <body onDblClick=scrollIt()> 按滑鼠左鍵兩下，畫面自動捲動.... <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> ... The End .... <body>

  29. .......... www.hubert.idv.tw .......... 開啟新視窗物件的語法 [視窗物件名稱=] [Window.] open (‘[URL]‘ [, ‘新視窗名稱]‘ [, ‘視窗的規格‘] ) • 視窗物件名稱：用以使用視窗物件的特性與方法。 • ex.視窗物件名稱.close() • 視窗名稱：用以識別該視窗。 • ex.<a href=“http://www.seed.net.tw” target=“視窗名稱”>

  30. .......... www.hubert.idv.tw .......... 視窗物件的規格參數 height=number of pixels ->設定視窗高度(點數) width= number of pixels ->設定視窗寬度(點數) left = number of pixels ->設定視窗左邊界(點數) top = number of pixels ->設定視窗上邊界(點數) fullscreen=yes or no ->使用全螢幕 resizable=yes or no ->允許改變視窗大小否 menubar=yes or no ->是否使用功能表 toolbar=yes or no ->是否使用工具列 location=yes or no ->是否使用位址列 directories=yes or no ->是否使用目錄鈕 status=yes or no ->是否使用狀態列 scrollbars=yes or no ->是否使用捲軸

  31. .......... www.hubert.idv.tw .......... 建立新視窗注意事項 1.當設定某些規格選項時，其他未設定 者，系統將一律視為false(即no)。 2.如果未設定任何規格選項時，則所有 選項將一律被視為true(即yes)。

  32. .......... www.hubert.idv.tw .......... 視窗物件範例二 - 開啟與關閉視窗 <form> <input type=button value="開啟視窗一(newWin)" onClick="newWin=window.open('http://tw.yahoo.com/')"><P> <input type=button value="height為150點" onClick="open('http://tw.yahoo.com/','','height=150')"><P> <input type=button value="只有工具列的視窗" onClick="open('http://tw.yahoo.com/','','toolbar=yes')"><P> <input type=button value="關閉視窗一(newWin)" onClick=newWin.close()><P> <input type=button value="關閉目前視窗" onClick=window.close()><P> </form>

  33. .......... www.hubert.idv.tw .......... 視窗物件範例二 - 開啟與關閉視窗 <script> // 在右方搜尋視窗中顯示網頁; open("http://tw.yahoo.com","_search") </script>

  34. .......... www.hubert.idv.tw .......... 練習 3-3 增修您的基本網站：。 當訪客光臨您的網站之時，開啟一個 高100像素，寬600像素的廣告頁。

  35. .......... www.hubert.idv.tw .......... 視窗物件範例- 動態調整廣告頁大小 <Script> function grow(){ resizeBy( 0, 150) } function shrink(){ resizeBy( 0, -150) } </script> <body onMouseOver=grow() onMouseOut=shrink()> 廣告頁 here </body>

  36. .......... www.hubert.idv.tw .......... 視窗物件範例- 永遠在最上層的視窗 <BODY onBlur="self.focus()"> <!-- 一當該視窗失去焦點，即觸發 onBlur --> <!-- 將該視窗 focus，即成為作用中視窗 --> 廣告頁 here </BODY>

  37. .......... www.hubert.idv.tw .......... 使用 Timer 的語法 [window.]setTimeout(“欲執行的程式碼或函數”, 設定的時間) 1.Timer又稱為計時器或延遲器，常用來指定於 特定時間後執行某程式。 2.時間單位為毫秒(千分之一秒) ex. 3000 milliseconds = 3 seconds

  38. .......... www.hubert.idv.tw .......... 使用 Timer 的語法(二) 計時器物件名稱= [window.]setTimeout(“欲執行的程式碼或函數”, 設定的時間) 如果利用迴圈將計時器設計成重複執行，欲終止計時器執行，請使用此一格式。 　因為要終止計時器的執行，必須指定欲終止 的計時器名稱。

  39. .......... www.hubert.idv.tw .......... 終止迴圈內 Timer 的語法 [window.]clearTimeout(計時器物件名稱) 終止計時器的執行，必須指定欲終止的計時器名稱。

  40. .......... www.hubert.idv.tw .......... 視窗物件範例 - timer(1) <script> function timer() { setTimeout("alert('3秒到了!')",3000) } </script> <body> <form> <input type=button value="計時開始" onClick=timer()> </form> </body>

  41. .......... www.hubert.idv.tw .......... 視窗物件範例 - timer(2) <script> var counter=0 upDate(); function upDate() { counter ++ status = counter + "秒鐘" timer1 = setTimeout("upDate()",1000) } </script> <body><form> <input type=button value="計時結束" onClick=clearTimeout(timer1)> </form></body>

  42. .......... www.hubert.idv.tw .......... 視窗物件範例 – 炫麗的進場畫面 <script> n = -1 ; bgFade() ; function bgFade(){ n++ if (n <= 15){ var color = 0 if (n < 10) { color = 111111 * n } else if (n == 10) { color = "AAAAAA" } else if (n == 11) { color = "BBBBBB" } else if (n == 12) { color = "CCCCCC" } else if (n == 13) { color = "DDDDDD" } else if (n == 14) { color = "EEEEEE" } else if (n == 15) { color = "FFFFFF" } document.bgColor = "#" + color setTimeout("bgFade()",50) } } </script> 利用計時器定時更換背景色。讓訪客於進入時，有耳目一新的感覺。

  43. .......... www.hubert.idv.tw .......... 視窗物件範例 – 文字顏色變化 <script> var rgb=255; function shine(){ rgb-=5; document.all["alltext"].style.color = "rgb(" + rgb + "," + rgb + "," + rgb +")"; if (rgb>0){ setTimeout("shine()", 100); } } </script> <body onload="shine()" id="alltext"> <font face="arial black" size="5">HUBERT</font> </body>

  44. .......... www.hubert.idv.tw .......... 視窗物件範例 – 不甘寂寞的畫面變化 <script> mode1() function mode1() { document.bgColor='#CCFFFF' setTimeout("mode2()",10000) } function mode2() { document.bgColor='#FFCCFF' setTimeout("mode1()",10000) } </script>

  45. .......... www.hubert.idv.tw .......... 視窗物件範例 – 模擬閃爍字 <li>填問卷，送大獎。 <font id="t1" style="display:none">new</font> <script> show() function show() { t1.style.display = "" setTimeout("hide()",500) } function hide() { t1.style.display = "none" setTimeout("show()",500) } </script>

  46. .......... www.hubert.idv.tw .......... 視窗物件範例 – 模擬霓虹燈 <script> var count=0; function changecolor(){ if (count%2==0) neon.className = "greenglow"; else neon.className = "pinkglow"; count++; } setInterval("changecolor()", 500); </script> <style> .greenglow {filter:glow(color:green, strength:3); height:10pt} .pinkglow {filter:glow(color:pink, strength:3); height:10pt} </style> <font id="neon" color="white" size="5" class="redglow"> 文哥網路技術學習網</font>

  47. .......... www.hubert.idv.tw .......... 視窗物件範例 – 飛入的文字 <script> var pos=-100; function flyin(){ pos+=5; id1.style.left = pos; if (pos<30) setTimeout("flyin()", 1); } </script> <body onload="flyin()" > <div id="id1" style="position:relative"> <a href="http://tw.yahoo.com/">YAHOO</a><br> </div> </body>

  48. .......... www.hubert.idv.tw .......... 視窗物件範例 – 依序飛入的文字 <script> var pos=-100; var idx=0; var speed=1; function flyin(){ pos+=5; document.anchors[idx].style.left = pos; if (pos<30) setTimeout("flyin()", speed); else if(idx!=document.anchors.length-1) { idx+=1; pos=-100; setTimeout("flyin()", speed); } } </script> <!----- 接下頁 ----->

  49. .......... www.hubert.idv.tw .......... 視窗物件範例 – 飛入的文字 <!----- 接前頁 -----> <style> a {position:relative; left=-100} </style> <body onload="flyin()" > <a href="http://tw.yahoo.com/" name="yahoo">YAHOO</a><br> <a href="http://www.google.com/" name="google">Google</a><br> </body>

  50. .......... www.hubert.idv.tw .......... 視窗物件範例 – 狀態列跑馬燈 <script> var msg="這是用 JavaScript 所做出來的跑馬燈!......." var seq = 0 scroll() function scroll() { status = msg.substring(0, seq+1) seq++ if ( seq >= msg.length ) seq = 0 setTimeout("scroll()",100) } </script>

More Related