1 / 111

JavaScript

. JavaScript. 資策會教育訓練處 楊宏文 hwyang@iii.org.tw. 入門篇. www.hubert.idv.tw. 歷史. 由網景公司 (Netscape) 發展而成。 前身是 Live Script 文稿語言。 網景與昇陽公司( Sun Micro) 共同將之推為 WWW 文稿語言的標準，改名為 JavaScript 。. www.hubert.idv.tw. 特性. 容易使用、跨平台。 直敘語言 (Scripting Language) 。 直接嵌在 (embedded)HTML 文件中。 補 HTML 及 JAVA 的不足。

ursa
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 資策會教育訓練處 楊宏文 hwyang@iii.org.tw

  2. .......... .......... 入門篇

  3. .......... www.hubert.idv.tw .......... 歷史 • 由網景公司(Netscape)發展而成。 • 前身是Live Script文稿語言。 • 網景與昇陽公司(Sun Micro)共同將之推為WWW文稿語言的標準，改名為JavaScript。

  4. .......... www.hubert.idv.tw .......... 特性 • 容易使用、跨平台。 • 直敘語言(Scripting Language)。 • 直接嵌在(embedded)HTML文件中。 • 補HTML及JAVA的不足。 • 網頁設計者用以動態控制網頁間的互動。 • 最大功能 -- 減低網路的流量、提昇使 • 用者滿意度。

  5. .......... www.hubert.idv.tw .......... 軟硬體需求 (1) • 於解譯程式(Interpreter)，無須編譯器(Compiler)、聯結器(Linker)、除錯器(Debugger)。 • 一般文書處理程式均可編輯。 (ex.Microsoft NotePad、Mac SimpleText、UNIX vi或emacs ...)

  6. .......... www.hubert.idv.tw .......... 軟硬體需求 (2) • 支援JavaScript的瀏覽器均可閱讀。(ex.Netscape Navigator 2.0 以上、Microsoft IE3.0以上...) • 許多平台均可使用。(ex.Windows、Solaris、Macintosh、SunOS、HP-UX、AIX、IRIX、Digital UNIX、Linux、NetBSD、FreeBSD...)

  7. .......... www.hubert.idv.tw .......... JavaScript 與 JAVA的相同點 • 均為物件型態(Object Type)語言。 • 程式控制流程類似。 • 語法格式類似。

  8. .......... www.hubert.idv.tw .......... JavaScript 與 JAVA的相異點(1) • JavaScript為解譯語言(Interpreted)﹔ • JAVA為編譯語言(Compiled)。 • JavaScript為鬆散(loose)資料型態﹔ • JAVA為強制(strong)資料型態。 • JavaScript嵌入HTML文件之中﹔ • JAVA獨立於HTML文件之外。

  9. .......... www.hubert.idv.tw .......... JavaScript 與 JAVA的相異點(2) • JavaScript為物件基礎(Object-based)語言，沒有類別的繼承﹔ • JAVA為物件導向(Object-Oriented) 語言，有類別的繼承。

  10. .......... www.hubert.idv.tw .......... 幾種常見的撰寫格式 • -- 利用專用標籤 • 包含於Script前後標籤(tag)之間。 • 指定使用語言及版本。 • 包含於說明標籤之中。 • 宣告成外部檔案。 • -- 利用HTML標籤 • 放在Anchor當中。 • 透過 event handler

  11. .......... www.hubert.idv.tw .......... 格式一- 包含於Script前後標籤之間 <Script> document.write("JavaScript程式一") </Script> document物件用於將目前的文件資訊輸出至使用者螢幕 write是document物件的眾多方法之一，作輸出的控制

  12. .......... www.hubert.idv.tw .......... 格式一(Con.) 如果希望HTML一載入時即執行Script， 建議將<Script>……</Script>嵌入 <Head>前後標籤之中。 <Head> <Script> … </Script> </Head>

  13. .......... www.hubert.idv.tw .......... 格式二 -指定使用語言 <Script language="JavaScript"> document.write("JavaScript程式二") </Script>

  14. .......... www.hubert.idv.tw .......... 格式二 (Con.) 因為直敘語言不只一種，可利用語言屬性(language attribute)來標明所使用的語言。 Language=JavaScript or Language=VBScript or Language=JScript

  15. .......... www.hubert.idv.tw .......... 格式三 - 包含於說明標籤之中 <Script> <!-- document.write("JavaScript程式三") // --> </Script>

  16. .......... www.hubert.idv.tw .......... 格式三 (Con.) 如果使用者使用不支援JavaScript的瀏覽器，置於文件說明標籤之中的程式碼，將被視為一般說明文字，不至於發生錯誤訊息。

  17. .......... www.hubert.idv.tw .......... 格式四 –宣告成外部檔案 <Script src = sayHello.js ></Script> 這一段標籤中並不包含任何程式碼，而是將程式寫在 另一個檔案中，利用SRC將該外部程式檔案指出，呼 叫並執行之。

  18. .......... www.hubert.idv.tw .......... sayHello.js的內容 alert("hello! 歡迎光臨我的網站") 宣告成外部檔案(*.js)的好處是，可以重複使用， 大量節省程式開發及維護的時程。

  19. .......... www.hubert.idv.tw .......... 格式五 –整合在Anchor之中 <Body> <A HREF="javascript:alert('這樣也可以')"> 按我吧！</A> </Body> 與超鏈結整合在一起也沒有問題。 但是要寫 “javascript:”

  20. .......... www.hubert.idv.tw .......... 格式六 –事件處理程序 <Body> <input type="button" value=" 按我吧 " onClick="alert('很簡單吧！')"> </Body> 並不是所有Javascript的程式碼都會放在 <SCRIPT>… </SCRIPT>標籤組當中

  21. .......... www.hubert.idv.tw .......... 開始撰寫JavaScript(1) • 檔案內容可以是單純的JavaScript程式檔，或是JavaScript與HTML混合的程式檔。 • 檔案的副檔名必須是 htm或 html。 • 純粹的 JavaScript 程式檔，副檔名是 js。 • 瀏覽器載入程式後，立即依序由上而下執行。

  22. .......... www.hubert.idv.tw .......... 開始撰寫JavaScript(2) • 適當使用註解(Comment)，可以增加程式的可讀性。 • 可以利用瀏覽器所提供的除錯器，進行簡單的偵測。

  23. .......... www.hubert.idv.tw .......... 常見的錯誤(一) <Script> document.write("歡迎光臨！) </Script>

  24. .......... www.hubert.idv.tw .......... 常見的錯誤(二) <Script> write("歡迎光臨！") </Script>

  25. .......... www.hubert.idv.tw .......... 常見的錯誤(三) <Script> document.Write("歡迎光臨！") </Script>

  26. .......... www.hubert.idv.tw .......... 常見的錯誤(四) <Script> document.write("歡迎光臨！") <Script> 沒有任何反應！？ 到底哪裡錯！

  27. .......... www.hubert.idv.tw .......... 常見的錯誤(五) <Script> <A HREF="javascript:alert('OK')">按我</A> </Script> 又是哪裡錯了？

  28. .......... .......... 資料型態

  29. .......... www.hubert.idv.tw .......... 資料型態 • 數值 (Number) • ex. 18, 365.25, -12.7 • 邏輯值 (Logical) • ex. true, false • 字串 (String) • ex. This is a book. • 空值 (Null) • 未定義值 (Undefined)

  30. .......... www.hubert.idv.tw .......... 鬆散的資料型態 • 宣告變數時，無須宣告資料型態。 • 程式執行時自動轉換。 • var a = 18 //a為數值 • var b = “姑娘今年18.” //b為字串 • var c = true //c為邏輯值

  31. .......... www.hubert.idv.tw .......... 資料型態語法說明 如果運算式(Expression)中同時含有‘數值’及‘字串’，該數值會自動被轉為字串。 str = “姑娘今年” + 18 + “。” 結果為 姑娘今年18。

  32. .......... www.hubert.idv.tw .......... 資料型態轉換 • 資料型態的轉換可以使用以下方法: • Object.toString() //轉成字串 • Number(object) //轉成數值 • parseInt(object) //轉成數值

  33. .......... www.hubert.idv.tw .......... 變數(variable)的命名 • 變數名稱又稱識別字(identifier)。 • 命名時第一個字母應為英文字母或底線。 • 變數名稱中不可使用空白字元及標點符號 • 宣告時，使用保留字 var。 • 單行宣告兩變數，用逗號隔開。 • 識別字的大小寫是有分別的(case-sensitive)。 • var myage = ‘35’ • var Myage = “35” 宣告變數時，使用VAR將發生錯誤

  34. .......... www.hubert.idv.tw .......... 常見的錯誤(六) <Script> var Msg = "歡迎光臨"; //變數的初始化 document.write(msg); </Script>

  35. .......... www.hubert.idv.tw .......... 常見的錯誤(七) <Script> var my name = "Hubert"; document.write(myname); </Script>

  36. .......... www.hubert.idv.tw .......... 範例 <Script> var name = "Hubert", msg = "Hello"; document.write(msg, "<b> ", name, "</b>"); </Script> 注意在敘述句 中換行的方式

  37. .......... .......... 溢出字元

  38. .......... www.hubert.idv.tw .......... 溢出字元(escape literal) \n 換行 (new line) \r 游標回行首 (carriage return) \t 水平定位 (horizontal tab) \’ 單引號(single quote) \” 雙引號(double quote) \\ 反斜線(back slash) \b 倒退 (backspace) \f 換頁 (form feed) 有些溢出字元,只能用在alert()中

  39. .......... www.hubert.idv.tw .......... 溢出字元範例一 利用 \“來秀出雙引號 <script> window.alert("\"Hello\",歡迎光臨") </script> window物件代表使用者瀏覽器的一個視窗 alert是window物件的眾多方法之一，顯示警示對話框

  40. .......... www.hubert.idv.tw .......... 溢出字元範例二 利用 \t來跳至下一個定位點 <script> alert("\" Hello\", \t 歡迎光臨 ") </script> 因為對瀏覽器而言，window為預設物件。 所以使用alert方法時，前面的window可以省略。

  41. .......... www.hubert.idv.tw .......... 溢出字元範例三 利用 \n來換行 <script> alert("\" Hello\",\n歡迎光臨") </script>

  42. .......... www.hubert.idv.tw .......... 常見的錯誤(八) <A href="javascript:alert("\" Hello\", hubert")"> 按我</A> 到底哪裡錯？

  43. .......... www.hubert.idv.tw .......... 常見的錯誤(九) <script> var name = "Hubert"; window.alert("hello", name); </script> 到底哪裡錯？

  44. .......... www.hubert.idv.tw .......... 練習1-1 建構如下的畫面：

  45. .......... www.hubert.idv.tw .......... 運算式(expression) • 算數運算式 (arithmetic expression) • 1 + 2 = 3 • 字串運算式 (string expression) • “我愛”+“JavaScript”=“我愛JavaScript” • 邏輯運算式 (logical expression) • a = true; b=false • a && b=false

  46. .......... www.hubert.idv.tw .......... 條件運算式 依條件值的真假，決定取第一個值或第二個值。 sex = (no==1) ? “男生” : “女生” 若no的值為1，則該條件運算為true， 故sex = “男生”

  47. .......... www.hubert.idv.tw .......... 一元運算子(unary) • 只有一個運算元，在前或在後。 • ＋＋ 1 • 1 ++ 運算子 運算元 運算元 運算子

  48. .......... www.hubert.idv.tw .......... 二元運算子(binary) • 有二個運算元。 • 1 + 1 運算元 運算子 運算元

  49. .......... www.hubert.idv.tw .......... 三元運算子(ternary) • 有三個運算元。 • (no==1) ? “男生” : “女生” • 第一個運算元為條件運算式的條件邏輯值 運算元 運算子 運算元 運算子 運算元

  50. .......... .......... 運算子

More Related