Javascript

JavaScript Basic 鐘祥仁 Ryan ryan@iii.org.twJavaScript Basic 1 http://MobileDev.TW

Course Scope JavaScript Basic 2 http://MobileDev.TW

PART I. JAVASCRIPT 基礎語法 JavaScript Basic 3 http://MobileDev.TW

1.什麼是JavaScript•  增加HTML頁面上的互動性•  是一種scripting language•  功用 •  增加網頁上的動態效果 •  可以根據特定事件對應執行動作 •  可以讀取與改寫HTML元件 •  可以拿來進行表單驗證 •  偵測使用者的瀏覽器 •  建立與存取cookie JavaScript Basic 4 http://MobileDev.TW

2.怎麼寫<script type="text/javascript"> //就寫在這裡面 document.write("<p>" + Date() + "</p>");</script> JavaScript Basic 5 http://MobileDev.TW

3.放在哪1.  放在<body>..</body> •  一般要直接執行的JavaScript會放在</body>前面 •  先讓整個頁面的HTML元件載入2.  <head>…</head> •  特定事件觸發才做的函數內容會放在<head>section3.  獨立成一個檔案 •  <head><script type="text/javascript" src="xxx.js"></script></head> JavaScript Basic 6 http://MobileDev.TW

4.Statement•  循序執行•  大小寫有區分•  通常以分號結尾 JavaScript Basic 7 http://MobileDev.TW

5.註解•  單行 //•  多行 /* Comments more than one line */ JavaScript Basic 8 http://MobileDev.TW

6.變數•  變數名稱 •  大小寫有區分 •  第一個字必須是英文字母或底線•  變數宣告 •  關鍵字 var •  var x; •  var name="Ryan"; JavaScript Basic 9 http://MobileDev.TW

變數範圍•  區域變數 •  在函數內宣告的即為區域變數，只能在該函數內使用•  全域變數 •  在函數外宣告的即為全域變數，整個頁面的Script都可用 •  直接給值或宣告時前面沒加var的變數，即為全域變數 (前提是此變數尚未存在) JavaScript Basic 10 http://MobileDev.TW

7.運算JavaScript Basic 11 http://MobileDev.TW

7.運算JavaScript Basic 12 http://MobileDev.TW

字串相"+" txt3txt1="What a very";txt2="nice day"; What a verynice daytxt3=txt1+txt2; txt3txt1="What a very ";txt2="nice day"; What a very nice daytxt3=txt1+txt2; txt3txt1="What a very";txt2="nice day"; What a very nice daytxt3=txt1+" "+txt2; JavaScript Basic 13 http://MobileDev.TW

8.跳出視窗•  Alert box •  alert("sometext");•  Confirm box •  confirm("sometext"); •  OK：true or Cancel：false•  Prompt box •  prompt("sometext","defaultvalue"); •  取得使用者輸入的值進行動作 JavaScript Basic 14 http://MobileDev.TW

9.函數•  執行時機 •  直接被呼叫 •  事件發生時觸發•  語法 function functionname(var1,var2,...,varX) { some code } JavaScript Basic 15 http://MobileDev.TW

10.Break and Continue in For loop•  break：離開迴圈•  continue：跳過這一圈 JavaScript Basic 16 http://MobileDev.TW

11.For…in•  巡訪物件中的每一個屬性與方法 JavaScript Basic 17 http://MobileDev.TW

12.事件•  事件是JavaScript可以偵測得到的一種動作•  HTML元件上的動作會觸發JavaScript的事件 •  按下按鈕元件 --> onClick事件 •  網頁頁面載入 --> onLoad事件 •  滑鼠游標在某個元件上 --> onMouseOver事件 JavaScript Basic 18 http://MobileDev.TW

13. Try...Catch•  檢測區段中的程式碼是否有誤 try { //Run some code here } catch(err) { //Handle errors here } JavaScript Basic 19 http://MobileDev.TW

14.Throw•  自訂錯誤狀態•  依據不同錯誤狀態，對應顯示不同訊息 JavaScript Basic 20 http://MobileDev.TW

PARTII. JAVASCRIPT 物件導向程式設計 JavaScript Basic 21 http://MobileDev.TW

OOP•  物件、屬性與方法•  物件 •  自訂物件 •  內建物件•  屬性 •  物件的某項特質•  方法 •  物件可以進行的一種行為 JavaScript Basic 22 http://MobileDev.TW

PartII-A. BUILT-IN OBJECTS JavaScript Basic 23 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)：取出部份字串 •  text.split(separator)：依特定符號進行切割，並放入陣列 •  text.substr(begin,length)：取出部份字串 •  text.substring(from,to)：取出部份字串 •  text.toLowerCase()：全部轉小寫 JavaScript Basic 24 http://MobileDev.TW

16.Date 日期時間物件•  取得目前時間取得目前日期 •  var d=new date(); •  d.getFullYear() 目前年 d.toLocaleDateString() •  d.getMonth() 目前月(0~11) •  d.getDate() 目前日(1~31) 取得目前時間 •  d.getDay() 目前週(0~6) d.toLocaleTimeString() •  d.getHours() 目前時(0~23) •  d.getMinutes() 目前分(0~59) •  d.getSeconds() 目前秒(0~59) JavaScript Basic 25 http://MobileDev.TW

17.Array 陣列物件•  建立陣列•  存取陣列 JavaScript Basic 26 http://MobileDev.TW

17.Array 陣列物件•  將陣列的各元素以特定的連結符號組合成字串 •  arrayName.join(separator) JavaScript Basic 27 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()：產生亂數 JavaScript Basic 28 http://MobileDev.TW

19.RegExp物件•  正規表達式 (Regular Expression) •  用以描述欲搜尋的字串條件 •  var patt=/pattern/modifiers;•  Modifier •  i：不管大小寫(case-insensitive) •  g：全域搜尋(找到全部符合條件的字串)•  正規表達式與字串替代 •  string.replace(/pattern/modifiers, "new string"); JavaScript Basic 29 http://MobileDev.TW

PartII-B. WINDOW OBJECT JavaScript Basic 30 http://MobileDev.TW

20.Window Object•  在瀏覽器中開啓一個視窗即建立一個視窗物件•  屬性 •  window.closed：該視窗關閉即為true •  window.name：該視窗名稱 •  history (物件)：記錄下使用者在該視窗所去過的網址 •  navigator (物件)：瀏覽器相關資訊 •  document (物件)：當該視窗載入一份HTML文件時即產生 JavaScript Basic 31 http://MobileDev.TW

20.Window Object•  方法 •  跳出視窗 •  開新視窗 •  alert( ) •  window.open(URL, name, specs) •  confirm( ) •  URL：顯示網頁 •  prompt( ) •  name：視窗名稱 •  定時器 •  specs：規格 •  setInterval( ) •  height •  setTimeout( ) •  width •  clearInterval( ) •  left •  clearTimeout( ) •  top JavaScript Basic 32 http://MobileDev.TW

21.History物件•  屬於Window物件，提供使用者瀏覽歷史記錄•  屬性 •  length 歷史清單長度•  方法 •  back( ) 載入清單中上一個網址 •  forward( )載入清單中下一個網址 •  go( ) 去清單中特定的一個網址(用數字或完整網址表示) JavaScript Basic 33 http://MobileDev.TW

22.Navigator物件•  屬於Window物件，提供該視窗的瀏覽器資訊•  屬性 •  appName 瀏覽器名稱 •  appVersion 瀏覽器版本資訊 •  userAgent•  方法 •  javaEnabled( ) 回傳該瀏覽器是否有啓動Java JavaScript Basic 34 http://MobileDev.TW

23.Document Object•  屬性 •  domain：傳回目前文件所在的域名 •  title：傳回目前文件定義的title •  URL：傳回目前文件的完整網址路徑 •  cookie：傳回目前文件的cookie資訊 JavaScript Basic 35 http://MobileDev.TW

23.Document Object•  方法 •  getElementById( )：存取第一個id名稱相符的元件 •  getElementsByName( )：存取所有name相符的元件 •  getElemtntsByTagName( )：存取所有該標籤名稱的元件 •  write( )：寫入文件 •  writeln( )：寫入文件並帶上換行符號 JavaScript Basic 36 http://MobileDev.TW

23.Document Object•  Collections 篩選 •  anchors[ ] 找到所有頁面上的anchor •  forms[ ] 找到所有頁面上的form •  images[ ] 找到所有頁面上的image •  links[ ] 找到所有頁面上的link JavaScript Basic 37 http://MobileDev.TW

24.Document Object Model•  W3C標準•  用來存取HTML或XML文件•  Core DOM •  任何結構化文件的標準模型•  XML DOM •  XML文件的標準模型•  HTML DOM •  HTML文件的標準模型 JavaScript Basic 38 http://MobileDev.TW

HTML DOM•  HTML的標準物件模型•  HTML的標準程式界面•  可於各種平台、語言使用•  W3C制定的標準•  HTML DOM是一種標準，用來取得、改變、新增或刪除HTML元件 JavaScript Basic 39 http://MobileDev.TW

Node 節點•  HTML文件中，所有的事物都是一個節點•  整個文件：文件節點•  HTML元件：元件節點•  HTML元件中的文字：文字節點•  HTML中的屬性：屬性節點•  HTML中的註解：註解節點 JavaScript Basic 40 http://MobileDev.TW

節點分析 <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> •  根節點：<html>•  <html>節點有兩個子節點：<head>與<body>•  <title>節點有一個text子節點：DOM Tutorial JavaScript Basic 41 http://MobileDev.TW

樹狀結構•  HTML DOM把HTML文件當成一顆節點樹 JavaScript Basic 42 http://MobileDev.TW

父母、小孩與兄弟姊妹•  最上層的節點稱之為根 (root)•  除了根節點外，每一個節點都有一個父節點•  一個節點可以有任意數量的子節點•  沒有子節點的節點稱之為葉 (leaf)•  有相同父節點的節點稱之為兄弟(sibling) JavaScript Basic 43 http://MobileDev.TW

HTML DOM屬性•  innerHTML：文字值•  nodeName：名稱•  nodeValue：值•  parentNode：父節點•  firstChild：第一個子節點•  lastChild：最後一個子節點•  nextSibling：緊鄰的兄弟節點•  nodeType：元件型態 JavaScript Basic 44 http://MobileDev.TW

HTML DOM屬性•  nodeName •  元件節點的節點名稱即為標籤名稱(會變成大寫) •  屬性節點的節點名稱即為屬性名稱 •  文字節點的節點名稱為#text •  文件節點的節點名稱為#document•  nodeValue •  元件節點的節點值為null •  文字節點的節點值即為文字本身 •  屬性節點的節點值即為屬性值 JavaScript Basic 45 http://MobileDev.TW

HTML DOM屬性•  nodeType •  1：Element •  2：Attribute •  3：Text •  8：Comment •  9：Document JavaScript Basic 46 http://MobileDev.TW

HTML DOM 方法•  getElementById(id)•  getElementsByTagName(name)•  appendChild(node)•  removeChild(node)•  getAttribute(attributeName) JavaScript Basic 47 http://MobileDev.TW

HTML DOM Collections•  attributes[ ] •  回傳該元件的所有屬性組成一個陣列•  childNodes[ ] •  回傳該元件的所有子節點組成一個陣列 JavaScript Basic 48 http://MobileDev.TW

改變元件•  改變元件的屬性值 •  document.body.bgColor="yellow"•  改變元件內的文字 •  document.getElementById("p1").innerHTML="H!";•  改變元件的樣式 •  document.body.style.color="blue"; JavaScript Basic 49 http://MobileDev.TW

25.Cookie•  常見cookie應用 •  訪客姓名 •  使用者密碼 •  日期時間 JavaScript Basic 50 http://MobileDev.TW

用Cookie記錄來訪者姓名•  頁面載入時先檢查使用者是否有來過 •  取出cookie裡面的username•  有來過則秀出來訪者姓名•  沒來過就提示使用者輸入並記錄 •  寫入cookie JavaScript Basic 51 http://MobileDev.TW

26.表單驗證•  是否有沒填的欄位？ •  if(value==null | value=="")•  是否在該填數值的地方卻填了文字？ •  用isNaN()判斷，true表示不是數字•  是否是有效的email位址？ JavaScript Basic 52 http://MobileDev.TW

email驗證規則•  一定要有@以及至少一個.•  @不可以是第一個字元•  最後一個 . 必須在@之後且不可相連•  最後一個 . 之後最少還有2個字元•  atPos!=-1, dotPos!=-1•  atPos!=0•  lastDotPos – atPos > 1•  mailtext.length>lastDotPos+2 JavaScript Basic 53 http://MobileDev.TW

27.定時器•  setTimeout( )：特定時間之後做什麼事情(一次)•  clearTimeout( )：解除setTimeout•  setInterval( )：每隔多少時間之後做什麼事情(反覆)•  clearInterval( )：解除setInterval JavaScript Basic 54 http://MobileDev.TW

28.自訂物件•  [方法一]直接建立一個新物件 JavaScript Basic 55 http://MobileDev.TW

28.自訂物件•  [方法二]直接建立一個新物件(寫在一起) JavaScript Basic 56 http://MobileDev.TW

28.自訂物件•  [方法三]先宣告，再使用 JavaScript Basic 57 http://MobileDev.TW

Javascript

by Ryan Chung on Feb 03, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Javascript — Presentation Transcript