Download to read offline
![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](https://image.slidesharecdn.com/javascript-140822214100-phpapp02/85/Java-script-3-320.jpg)
![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](https://image.slidesharecdn.com/javascript-140822214100-phpapp02/85/Java-script-6-320.jpg)
Uploaded byWei-Han Tzeng
Java script
该文档介绍了JavaScript的基本知识，包括前后端应用、数据类型、语法结构及DOM操作等。它还提到了一些编辑器和资源链接，详细阐述了JavaScript的特性，如动态语言、作用域、闭包等。最后，文档提供了一些关于HTML与JavaScript结合使用的示例。
Java script
- 1. Introduction of JavaScript Black2014/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 everysome 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 <scripttype="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
- 13.
- 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(StringelementID) 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
- 17.
- 18. Reference • W3Schools http://www.w3schools.com/ • JavaScriptEssence 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
- #17 AJAX : 內容更新時不用重新加載整個網頁，可部分加載