Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Basic

Ryan Chung
April 11, 2014

JavaScript Basic

Ryan Chung

April 11, 2014
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. 1.什麼是JavaScript • 增加HTML頁面上的互動性 • 是一種scripting language • 功用 • 增加網頁上的動態效果

    • 可以根據特定事件對應執行動作 • 可以讀取與改寫HTML元件 • 可以拿來進行表單驗證 • 偵測使用者的瀏覽器 • 建立與存取cookie 4
  2. 3.放在哪 1. 放在<body>..</body> • 一般要直接執行的JavaScript會放在</body>前面 • 先讓整個頁面的HTML元件載入 2. <head>…</head> •

    特定事件觸發才做的函數內容會放在 <head>section 3. 獨立成一個檔案 • <head><script src="xxx.js"></script></head> 6
  3. 字串相"+" 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 13
  4. 8.跳出視窗 • Alert box • alert("sometext"); • Confirm box •

    confirm("sometext"); • OK:true or Cancel:false • Prompt box • prompt("sometext","defaultvalue"); • 取得使用者輸入的值進行動作 14
  5. 9.函數 • 執行時機 • 直接被呼叫 • 事件發生時觸發 • CallBack •

    語法 function functionname(var1,var2,...,varX) { some code } 18
  6. 12.事件觸發方法與常見事件 • 事件是JavaScript可以偵測得到的一種動作 • HTML元件上的動作會觸發JavaScript的事件 • 按下按鈕元件 --> onClick事件 •

    網頁頁面載入 --> onLoad事件 • 滑鼠游標在某個元件上 --> onMouseOver事件 發生什麼事?要做什麼因應措施? 22
  7. OOP • 物件、屬性與方法 • 物件 • 自訂物件 • 內建物件 •

    屬性 • 物件的某項特質 • 方法 • 物件可以進行的一種行為 33
  8. 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
  9. 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) 取得目前日期 d.toLocaleDateString() 取得目前時間 d.toLocaleTimeString() 取得目前日期加時間 d.toLocaleString() 37
  10. 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之間) 0 1 -1 41
  11. 19.RegExp物件 • 正規表達式 (Regular Expression) • 用以描述欲搜尋的字串條件 • var patt=/pattern/modifiers;

    • Modifier • i:不管大小寫(case-insensitive) • g:全域搜尋(找到全部符合條件的字串) • 正規表達式與字串替代 • string.replace(/pattern/modifiers, "new string"); 44
  12. 20.Window Object • 在瀏覽器中開啓一個視窗即建立一個視窗物件 • 屬性 • window.closed:該視窗關閉即為true • window.name:該視窗名稱

    • history (物件):記錄下使用者在該視窗所去過的網址 • navigator (物件):瀏覽器相關資訊 • document (物件):當該視窗載入一份HTML文件時即產生 46
  13. 20.Window Object • 方法 • 跳出視窗 • alert( ) •

    confirm( ) • prompt( ) • 定時器 • setInterval( ) • setTimeout( ) • clearInterval( ) • clearTimeout( ) •開新視窗 • window.open(URL, name, specs) • URL:顯示網頁 • name:視窗名稱 • specs:規格 •height •width •left •top 47
  14. 21.History物件 • 屬於window物件,提供使用者瀏覽歷史記錄 • 屬性 • length 歷史清單長度 • 方法

    • back( ) 載入清單中上一個網址 • forward( )載入清單中下一個網址 • go( ) 去清單中特定的一個網址(用數字) 3 Back Back Forward go 48
  15. 22.Navigator物件 • 屬於Window物件,提供該視窗的瀏覽器資訊 • 屬性 • appName 瀏覽器名稱 • appVersion

    瀏覽器版本資訊 • userAgent (較完整,最常被採用) • 方法 • javaEnabled( ) 回傳該瀏覽器是否有啓動Java 49
  16. 23.Document Object • 方法 • getElementById( ):存取第一個id名稱相符的元件 • getElementsByName( ):存取所有name相符的元件

    • getElementsByTagName( ):存取所有該標籤名稱的元件 • write( ):寫入文件 • writeln( ):寫入文件並帶上換行符號 52
  17. 23.Document Object • Collections 篩選 • anchors[ ] 找到所有頁面上的anchor •

    forms[ ] 找到所有頁面上的form • images[ ] 找到所有頁面上的image • links[ ] 找到所有頁面上的link 53
  18. 24.Document Object Model • W3C標準 • 用來存取HTML或XML文件 • Core DOM

    • 任何結構化文件的標準模型 • XML DOM • XML文件的標準模型 • HTML DOM • HTML文件的標準模型 58
  19. HTML DOM • HTML的標準物件模型 • HTML的標準程式界面 • 可於各種平台、語言使用 • W3C制定的標準

    • HTML DOM是一種標準,用來取得、改變、 新增或刪除HTML元件 59
  20. 節點分析 • 根節點:<html> • <html>節點有兩個子節點:<head>與<body> • <title>節點有一個text子節點:DOM Tutorial <html> <head>

    <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> 61
  21. HTML DOM屬性 • innerHTML:文字值 • nodeName:名稱 • nodeValue:值 • parentNode:父節點

    • firstChild:第一個子節點 • lastChild:最後一個子節點 • nextSibling:緊鄰的兄弟節點 • nodeType:元件型態 64
  22. HTML DOM屬性 • nodeName • 元件節點的節點名稱即為標籤名稱(會變成大寫) • 屬性節點的節點名稱即為屬性名稱 • 文字節點的節點名稱為#text

    • 文件節點的節點名稱為#document • nodeValue • 元件節點的節點值為null • 文字節點的節點值即為文字本身 • 屬性節點的節點值即為屬性值 65
  23. email驗證規則 • 一定要有@以及至少一個. • @不可以是第一個字元 • 最後一個 . 必須在@之後且不可相連 •

    最後一個 . 之後最少還有2個字元 • atPos!=-1, lastDotPos!=-1 • atPos!=0 • lastDotPos – atPos > 1 • mailtext.length>lastDotPos+2 73