Recommended
More Related Content
Viewers also liked
Similar to Java script
Similar to Java script (20)
Java script
- 1. Introduction of JavaScript Black 2014/08/23 1
- 2. JavaScript • Front-End – 網頁的”動作” – .js • Back-End – NodeJS http://nodejs.org/ 編輯器：Notepad++ 6.1.3 : http://notepad-plus-plus.org/download/v6.1.3.html 2
- 3. JavaScript 語法 • 資料型態：number, string, boolean (ex) 0xFF 1.31E-2 NaN ‘Black’ true/false • typeof() • 動態語言(不需宣告變數型態) var x = [5, ‘WebII’]; x[0] x[1] • null, undefined • instanceof() 3
- 4. JavaScript語法 • function func() { x = 15; //global var y = 20; //local } • 弱型態語言 var result = ‘5’ – ‘3’ • toString(), valueOf(), parseFloat(), parseInt() 4
- 5. Scope Chain var x = 10; function outer() { var y = 20; function inner() { var z = 30; } } • __parent__ • Closure(擁有閒置變數的運算式) 5
- 6. JavaScript語法 • 運算子 + - * / -- += != === && || ? : void • 建立物件 var obj = new Object(); var obj = {}; • Constructor, Properties, Method Car.color, Car[‘color’], Car.speedUp(30) var Car = { color : ‘blue', speed : 0, speedUp : speedUp }; Function speedUp() { …}; 6
- 7. JavaScript語法 • Array forEach every some filter map reduce • for(;;) while() if()…else • this, call(), apply() toString.call(p1), add.apply(o1, args) 7
- 8. HTML • 直譯式語言(不用編譯) • .html • Unicode (UTF-8/16/32) • 瀏覽器開啟即可執行 8
- 9. 瀏覽器直接編輯HTML • Chrome : Ctrl + Shift + i or F12 • FireFox : 需安裝Firebug套件 • Safari : 內建是關閉的，需至開發人員選項開啟 參考資料：http://ppt.cc/xM8u 9
- 10. script 應該放在哪 <html> <head> <script> …. </script> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <script> ….寫在body最後面 </script> </body> </html> • DOM Ex1.html 10
- 11. 將JavaScript獨立成一個檔案 • 存成.js • 嵌入.html <script type="text/javascript" charset="Big5" src="./JSFile.js"></script> • 編碼問題：瀏覽器會假設載入的.js檔案編碼 與HTML網頁編碼相同 11 Ex2.html Ex2.js
- 12. Document Object Model (DOM) • 描述 HTML 或 XML 文件的邏輯架構 • HTML Level 0 DOM – Netscape – 沒有一個統一規則，但最普遍被使用 http://www.aptana.com/reference/html/api/HTMLDOM0.index.html • W3C DOM – 由W3C聯合制定 http://www.w3.org/DOM/DOMTR 12
- 14. 屬性及特性 • 屬性：Attribute (寫程式時給定的性質) • 特性：Property (DOM中物件原本的性質) • <input name=“user” value=“Black”> • 其餘未給定的DOM性質(如 type)則仍為物件的 特性 • getAttribute(String name) • setAttribute(String name, String value) • removeAttribute(String name) 14
- 15. 取得物件 1. document.getElementByTagName(String tagname) 2. document.getElementById(String elementID) 3. document.getElementByName(String elementName) • (ex) • document.getElementById(‘ID_1’) • <input id=“ID_1” name="x"> 1 2 3 15 Ex3.html
- 16. jQuery • JavaScript的Library • 主要是用在 DOM 文件的操作 • jQuery 的核心程式還加強了非同步傳輸 (AJAX)以及事件(Event)的功能 Ex : $("form").submit(function() { if ($("input#username").val() == "") $("span.help").show(); }); 16
- 18. Reference • W3Schools http://www.w3schools.com/ • JavaScript Essence http://openhome.cc/Gossip/JavaScript/ • JaveScript 教學系列 http://ithelp.ithome.com.tw/question/10098361 • 用NodeJS學JavaScript：教學 http://www.codedata.com.tw/javascript/using-nodejs-to-learn-javascript/ • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 18
Editor's Notes
- AJAX : 內容更新時不用重新加載整個網頁，可部分加載