Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript

6,300 views

Published on

Published in: Technology
  • Be the first to comment

Javascript

  1. 1. JavaScript Basic http://MobileDev.TW JavaScriptBasic 鐘祥仁 Ryan ryanchung@ncu.edu.tw 1
  2. 2. JavaScript Basic http://MobileDev.TW2 Course Scope
  3. 3. JavaScript Basic http://MobileDev.TW PART I. JAVASCRIPT 基礎語法 3
  4. 4. JavaScript Basic http://MobileDev.TW 1.什麼是JavaScript •  增加HTML頁面上的互動性 •  是一種scripting language •  功用 •  增加網頁上的動態效果 •  可以根據特定事件對應執行動作 •  可以讀取與改寫HTML元件 •  可以拿來進行表單驗證 •  偵測使用者的瀏覽器 •  建立與存取cookie 4
  5. 5. JavaScript Basic http://MobileDev.TW 2.怎麼寫 <script type="text/javascript"> //就寫在這裡面 document.write("<p>" + Date() + "</p>"); </script> 5
  6. 6. JavaScript Basic http://MobileDev.TW 3.放在哪 1.  放在<body>..</body> •  一般要直接執行的JavaScript會放在</body>前面 •  先讓整個頁面的HTML元件載入 2.  <head>…</head> •  特定事件觸發才做的函數內容會放在<head>section 3.  獨立成一個檔案 •  <head><script type="text/javascript" src="xxx.js"></script></head> 6
  7. 7. JavaScript Basic http://MobileDev.TW 4.Statement •  循序執行 •  大小寫有區分 •  通常以分號結尾 7
  8. 8. JavaScript Basic http://MobileDev.TW 5.註解 •  單行 // •  多行 /* Comments more than one line */ 8
  9. 9. JavaScript Basic http://MobileDev.TW 6.變數 •  變數名稱 •  大小寫有區分 •  第一個字必須是英文字母或底線 •  變數宣告 •  關鍵字 var •  var x; •  var name="Ryan"; 9
  10. 10. JavaScript Basic http://MobileDev.TW 變數範圍 •  區域變數 •  在函數內宣告的即為區域變數,只能在該函數內使用 •  全域變數 •  在函數外宣告的即為全域變數,整個頁面的Script都可用 •  直接給值或宣告時前面沒加var的變數,即為全域變數 (前提是此變數尚未存在) var x=5; x=4; x; 10
  11. 11. JavaScript Basic http://MobileDev.TW 7.運算 11
  12. 12. JavaScript Basic http://MobileDev.TW 7.運算 12
  13. 13. JavaScript Basic http://MobileDev.TW 字串相"+" 13 txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; What a verynice day txt3 txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; What a very nice day txt3 txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; What a very nice day txt3
  14. 14. JavaScript Basic http://MobileDev.TW 8.跳出視窗 •  Alert box •  alert("sometext"); •  Confirm box •  confirm("sometext"); •  OK:true or Cancel:false •  Prompt box •  prompt("sometext","defaultvalue"); •  取得使用者輸入的值進行動作 14
  15. 15. JavaScript Basic http://MobileDev.TW 8-1.Lab Alert 15
  16. 16. JavaScript Basic http://MobileDev.TW 8-2.Lab Confirm 16
  17. 17. JavaScript Basic http://MobileDev.TW 8-2.Lab Prompt 17
  18. 18. JavaScript Basic http://MobileDev.TW 9.函數 •  執行時機 •  直接被呼叫 •  事件發生時觸發 •  CallBack •  語法 function functionname(var1,var2,...,varX) { some code } 18
  19. 19. JavaScript Basic http://MobileDev.TW 10.Break and Continue in For loop •  break:離開迴圈 •  continue:跳過這一圈 19
  20. 20. JavaScript Basic http://MobileDev.TW 11.For…in •  巡訪物件中的每一個屬性與方法 20
  21. 21. JavaScript Basic http://MobileDev.TW 11.For…in Lab •  巡訪window物件 21
  22. 22. JavaScript Basic http://MobileDev.TW 12.事件觸發方法與常見事件 •  事件是JavaScript可以偵測得到的一種動作 •  HTML元件上的動作會觸發JavaScript的事件 •  按下按鈕元件 --> onClick事件 •  網頁頁面載入 --> onLoad事件 •  滑鼠游標在某個元件上 --> onMouseOver事件 22 發生什麼事?要做什麼因應措施?
  23. 23. JavaScript Basic http://MobileDev.TW 事件觸發處理方法1.HTML Attribute •  直接加入在HTML的屬性中 23
  24. 24. JavaScript Basic http://MobileDev.TW 事件觸發處理方法2.Event Function •  使用JavaScript語法,定義onclick要執行的動作 24
  25. 25. JavaScript Basic http://MobileDev.TW 事件觸發處理方法3.Event Listener •  監聽該元件,是否有XX事件發生 25
  26. 26. JavaScript Basic http://MobileDev.TW 常見滑鼠事件 26
  27. 27. JavaScript Basic http://MobileDev.TW 常見鍵盤事件 27
  28. 28. JavaScript Basic http://MobileDev.TW 框架/物件事件 28
  29. 29. JavaScript Basic http://MobileDev.TW 表單事件 29
  30. 30. JavaScript Basic http://MobileDev.TW 13. Try...Catch •  檢測區段中的程式碼是否有誤 30 try { //Run some code here } catch(err) { //Handle errors here }
  31. 31. JavaScript Basic http://MobileDev.TW 14.Throw •  自訂錯誤狀態 •  依據不同錯誤狀態,對應顯示不同訊息 31
  32. 32. JavaScript Basic http://MobileDev.TW PARTII. JAVASCRIPT 物件導向程式設計 32
  33. 33. JavaScript Basic http://MobileDev.TW OOP •  物件、屬性與方法 •  物件 •  自訂物件 •  內建物件 •  屬性 •  物件的某項特質 •  方法 •  物件可以進行的一種行為 33
  34. 34. JavaScript Basic http://MobileDev.TW PartII-A. BUILT-IN OBJECTS 34
  35. 35. JavaScript Basic http://MobileDev.TW 15.String 字串物件 •  屬性 •  text.length:取得字串長度 •  方法 •  text.big():將字串字體放大 •  text.charAt(x):回傳x位置的字元 •  text.concat(string2,string3,…):串接字串 •  text.indexOf(string):回傳第一個出現該字串的位置 •  text.lastIndexOf(string):回傳最後一個出現該字串的位置 •  text.replace("subString","newString"):字串替換 •  text.slice(begin, end):取出部份字串 (可輸入一個負值從後面取x字元) •  text.split(separator):依特定符號進行切割,並放入陣列 •  text.substr(begin,length):取出部份字串 •  text.substring(from,to):取出部份字串 •  text.toLowerCase():全部轉小寫 35
  36. 36. JavaScript Basic http://MobileDev.TW 15.String Lab •  字串 Hello World! •  秀出字串長度 •  找到World的位置 •  依空格切割,秀出Hello與World! 36
  37. 37. JavaScript Basic http://MobileDev.TW 16.Date 日期時間物件 •  取得目前時間 •  var d=new Date(); •  d.getFullYear() 目前年 •  d.getMonth() 目前月(0~11) •  d.getDate() 目前日(1~31) •  d.getDay() 目前週(0~6) •  d.getHours() 目前時(0~23) •  d.getMinutes() 目前分(0~59) •  d.getSeconds() 目前秒(0~59) 37 取得目前日期 d.toLocaleDateString() 取得目前時間 d.toLocaleTimeString() 取得目前日期加時間 d.toLocaleString()
  38. 38. JavaScript Basic http://MobileDev.TW 16.Lab •  運用JavaScript顯示目前時間 38
  39. 39. JavaScript Basic http://MobileDev.TW 17.Array 陣列物件 •  建立陣列 39 •  存取陣列
  40. 40. JavaScript Basic http://MobileDev.TW 17.Array 陣列物件 •  將陣列的各元素以特定的連結符號組合成字串 •  arrayName.join(separator) 40
  41. 41. JavaScript Basic http://MobileDev.TW 18.Math 數學物件 •  Math.PI:PI值 •  Math.abs(number):取絕對值 •  Math.floor(number):向下整數 •  Math.ceil(number):向上整數 •  Math.round(number):取整數(四捨五入) •  Math.max(number,number,number,…):最大值 •  Math.random():產生亂數 (介於0 ~ 1之間) 41 0 1 -1
  42. 42. JavaScript Basic http://MobileDev.TW 18.Lab •  產生介於1 ~ 10的亂數 42
  43. 43. JavaScript Basic http://MobileDev.TW 18.Lab2 •  亂數出現不同的背景圖片 43
  44. 44. JavaScript Basic http://MobileDev.TW 19.RegExp物件 •  正規表達式 (Regular Expression) •  用以描述欲搜尋的字串條件 •  var patt=/pattern/modifiers; •  Modifier •  i:不管大小寫(case-insensitive) •  g:全域搜尋(找到全部符合條件的字串) •  正規表達式與字串替代 •  string.replace(/pattern/modifiers, "new string"); 44
  45. 45. JavaScript Basic http://MobileDev.TW PartII-B. WINDOW OBJECT 45
  46. 46. JavaScript Basic http://MobileDev.TW 20.Window Object •  在瀏覽器中開啓一個視窗即建立一個視窗物件 •  屬性 •  window.closed:該視窗關閉即為true •  window.name:該視窗名稱 •  history (物件):記錄下使用者在該視窗所去過的網址 •  navigator (物件):瀏覽器相關資訊 •  document (物件):當該視窗載入一份HTML文件時即產生 46
  47. 47. JavaScript Basic http://MobileDev.TW 20.Window Object •  方法 •  跳出視窗 •  alert( ) •  confirm( ) •  prompt( ) •  定時器 •  setInterval( ) •  setTimeout( ) •  clearInterval( ) •  clearTimeout( ) 47 •  開新視窗 •  window.open(URL, name, specs) •  URL:顯示網頁 •  name:視窗名稱 •  specs:規格 •  height •  width •  left •  top
  48. 48. JavaScript Basic http://MobileDev.TW 21.History物件 •  屬於Window物件,提供使用者瀏覽歷史記錄 •  屬性 •  length 歷史清單長度 •  方法 •  back( ) 載入清單中上一個網址 •  forward( )載入清單中下一個網址 •  go( ) 去清單中特定的一個網址(用數字或完整網址表示) 48 3 Back Back Forward go
  49. 49. JavaScript Basic http://MobileDev.TW 22.Navigator物件 •  屬於Window物件,提供該視窗的瀏覽器資訊 •  屬性 •  appName 瀏覽器名稱 •  appVersion 瀏覽器版本資訊 •  userAgent (較完整,最常被採用) •  方法 •  javaEnabled( ) 回傳該瀏覽器是否有啓動Java 49
  50. 50. JavaScript Basic http://MobileDev.TW 22.Lab •  判斷目前瀏覽器是不是Chrome 50
  51. 51. JavaScript Basic http://MobileDev.TW 23.Document Object •  屬性 •  domain:傳回目前文件所在的域名 •  title:傳回目前文件定義的title •  URL:傳回目前文件的完整網址路徑 •  cookie:傳回目前文件的cookie資訊 51
  52. 52. JavaScript Basic http://MobileDev.TW 23.Document Object •  方法 •  getElementById( ):存取第一個id名稱相符的元件 •  getElementsByName( ):存取所有name相符的元件 •  getElemtntsByTagName( ):存取所有該標籤名稱的元件 •  write( ):寫入文件 •  writeln( ):寫入文件並帶上換行符號 52
  53. 53. JavaScript Basic http://MobileDev.TW 23.Document Object •  Collections 篩選 •  anchors[ ] 找到所有頁面上的anchor •  forms[ ] 找到所有頁面上的form •  images[ ] 找到所有頁面上的image •  links[ ] 找到所有頁面上的link 53
  54. 54. JavaScript Basic http://MobileDev.TW 23.Lab 圖片切換 54
  55. 55. JavaScript Basic http://MobileDev.TW 23.Lab 圖片切換 55
  56. 56. JavaScript Basic http://MobileDev.TW 23.Lab2a 圖片摘要 56
  57. 57. JavaScript Basic http://MobileDev.TW 23.Lab2b 用JS換圖片 57
  58. 58. JavaScript Basic http://MobileDev.TW 24.Document Object Model •  W3C標準 •  用來存取HTML或XML文件 •  Core DOM •  任何結構化文件的標準模型 •  XML DOM •  XML文件的標準模型 •  HTML DOM •  HTML文件的標準模型 58
  59. 59. JavaScript Basic http://MobileDev.TW HTML DOM •  HTML的標準物件模型 •  HTML的標準程式界面 •  可於各種平台、語言使用 •  W3C制定的標準 •  HTML DOM是一種標準,用來取得、改變、新增 或刪除HTML元件 59
  60. 60. JavaScript Basic http://MobileDev.TW Node 節點 •  HTML文件中,所有的事物都是一個節點 •  整個文件:文件節點 •  HTML元件:元件節點 •  HTML元件中的文字:文字節點 •  HTML中的屬性:屬性節點 •  HTML中的註解:註解節點 60
  61. 61. JavaScript Basic http://MobileDev.TW 節點分析 •  根節點:<html> •  <html>節點有兩個子節點:<head>與<body> •  <title>節點有一個text子節點:DOM Tutorial 61 <html> head titleDOM Tutorial/title /head body h1DOM Lesson one/h1 pHello world!/p /body /html
  62. 62. JavaScript Basic http://MobileDev.TW 樹狀結構 •  HTML DOM把HTML文件當成一顆節點樹 62
  63. 63. JavaScript Basic http://MobileDev.TW 父母、小孩與兄弟姊妹 •  最上層的節點稱之為根 (root) •  除了根節點外,每一個節點都有一個父節點 •  一個節點可以有任意數量的子節點 •  沒有子節點的節點稱之為葉 (leaf) •  有相同父節點的節點稱之為兄弟(sibling) 63
  64. 64. JavaScript Basic http://MobileDev.TW HTML DOM屬性 •  innerHTML:文字值 •  nodeName:名稱 •  nodeValue:值 •  parentNode:父節點 •  firstChild:第一個子節點 •  lastChild:最後一個子節點 •  nextSibling:緊鄰的兄弟節點 •  nodeType:元件型態 64
  65. 65. JavaScript Basic http://MobileDev.TW HTML DOM屬性 •  nodeName •  元件節點的節點名稱即為標籤名稱(會變成大寫) •  屬性節點的節點名稱即為屬性名稱 •  文字節點的節點名稱為#text •  文件節點的節點名稱為#document •  nodeValue •  元件節點的節點值為null •  文字節點的節點值即為文字本身 •  屬性節點的節點值即為屬性值 65
  66. 66. JavaScript Basic http://MobileDev.TW HTML DOM屬性 •  nodeType •  1:Element •  2:Attribute •  3:Text •  8:Comment •  9:Document 66
  67. 67. JavaScript Basic http://MobileDev.TW HTML DOM 方法 •  getElementById(id) •  getElementsByTagName(name) •  appendChild(node) •  removeChild(node) •  getAttribute(attributeName) 67
  68. 68. JavaScript Basic http://MobileDev.TW HTML DOM Collections •  attributes[ ] •  回傳該元件的所有屬性組成一個陣列 •  childNodes[ ] •  回傳該元件的所有子節點組成一個陣列 68
  69. 69. JavaScript Basic http://MobileDev.TW 改變元件 •  改變元件的屬性值 •  document.body.bgColor=yellow; •  改變元件內的文字 •  document.getElementById(p1).innerHTML=Hi!; •  改變元件的樣式 •  document.body.style.color=blue; •  document.body.style.backgroundImage 69
  70. 70. JavaScript Basic http://MobileDev.TW 25.Cookie •  常見cookie應用 •  訪客姓名 •  使用者密碼 •  日期時間 70
  71. 71. JavaScript Basic http://MobileDev.TW 用Cookie記錄來訪者姓名 •  頁面載入時先檢查使用者是否有來過 •  取出cookie裡面的username •  有來過則秀出來訪者姓名 •  沒來過就提示使用者輸入並記錄 •  寫入cookie 71
  72. 72. JavaScript Basic http://MobileDev.TW 26.表單驗證 •  是否有沒填的欄位? •  if(value==null | value==) •  是否在該填數值的地方卻填了文字? •  用isNaN()判斷,true表示不是數字 •  是否是有效的email位址? 72
  73. 73. JavaScript Basic http://MobileDev.TW email驗證規則 •  一定要有@以及至少一個. •  @不可以是第一個字元 •  最後一個 . 必須在@之後且不可相連 •  最後一個 . 之後最少還有2個字元 73 •  atPos!=-1, lastDotPos!=-1 •  atPos!=0 •  lastDotPos – atPos 1 •  mailtext.lengthlastDotPos+2
  74. 74. JavaScript Basic http://MobileDev.TW 27.定時器 •  setTimeout( ):特定時間之後做什麼事情(一次) •  clearTimeout( ):解除setTimeout •  setInterval( ):每隔多少時間之後做什麼事情(反覆) •  clearInterval( ):解除setInterval 74
  75. 75. JavaScript Basic http://MobileDev.TW 27.Lab 密碼鎖炸彈 75
  76. 76. JavaScript Basic http://MobileDev.TW 28.自訂物件 •  [方法一]直接建立一個新物件 76
  77. 77. JavaScript Basic http://MobileDev.TW 28.自訂物件 •  [方法二]直接建立一個新物件(寫在一起) 77
  78. 78. JavaScript Basic http://MobileDev.TW 28.自訂物件 •  [方法三]先宣告,再使用 78

×