Javascript

6,218 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,218
On SlideShare
0
From Embeds
0
Number of Embeds
979
Actions
Shares
0
Downloads
1
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

×