狠狠撸

Introduction of JavaScript
Black 2014/08/23
1

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

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

JavaScript語法
? function func() {
x = 15; //global
var y = 20; //local
}
? 弱型態語言
var result = ‘5’ – ‘3’
? toString(), valueOf(), parseFloat(), parseInt()
4

Scope Chain
var x = 10;
function outer() {
var y = 20;
function inner() {
var z = 30;
}
}
? __parent__
? Closure(擁有閒置變數的運算式)
5

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

JavaScript語法
? Array
forEach every some filter map reduce
? for(;;) while() if()…else
? this, call(), apply()
toString.call(p1), add.apply(o1, args)
7

HTML
? 直譯式語言(不用編譯)
? .html
? Unicode (UTF-8/16/32)
? 瀏覽器開啟即可執行
8

瀏覽器直接編輯HTML
? Chrome : Ctrl + Shift + i or F12
? FireFox : 需安裝Firebug套件
? Safari : 內建是關閉的，需至開發人員選項開啟
參考資料：http://ppt.cc/xM8u 9

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

將JavaScript獨立成一個檔案
? 存成.js
? 嵌入.html
<script type="text/javascript" charset="Big5" src=/slideshow/java-script-38272364/38272364/"./JSFile.js"></script>
? 編碼問題：瀏覽器會假設載入的.js檔案編碼
與HTML網頁編碼相同
11
Ex2.html
Ex2.js

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

DOM
參考資料：http://www.cs.pu.edu.tw/~tsay/course/webprog/notes/DOM.html 13

屬性及特性
? 屬性：Attribute (寫程式時給定的性質)
? 特性：Property (DOM中物件原本的性質)
? <input name=“user” value=“Black”>
? 其餘未給定的DOM性質(如 type)則仍為物件的
特性
? getAttribute(String name)
? setAttribute(String name, String value)
? removeAttribute(String name)
14

取得物件
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

jQuery
? JavaScript的Library
? 主要是用在 DOM 文件的操作
? jQuery 的核心程式還加強了非同步傳輸
(AJAX)以及事件(Event)的功能
Ex :
$("form").submit(function() {
if ($("input#username").val() == "")
$("span.help").show();
});
16

柯p滑出來對你說政見
? http://goooooooogle.github.io/kp/
? kp-gh-pagesindex.html
17

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

狠狠撸

Java script

More Related Content

Java script

Editor's Notes