Javascript Tutorial

Handlino http://handlino.com/
Javascript Tutorial
Kang-min Liu

Tools
• Firefox 3
• Firebug
• “shell” and “test styles” bookmarklets
• https://www.squarefree.com/
bookmarklets/webdevel.html
( http://is.gd/45YH )

“Bread board”
<html><body>
<script type="text/javascript">
// Code goes here...
</script>
</body></html>
Save it as “test.html”
http://gist.github.com/31863

Code

Hello World
alert("Hello World");

Hello, you
var nickname = "gugod";
alert("Hello, " + nickname);

Hello, you
alert("Hello, " + nickname);注意

variables 變數

variables 變數
variable
name

variables 變數
variable
name
variable
value

variables 變數
variable
name
variable
value
declare

variables 變數
var nickname = “gugod”;

variables 變數
var nickname = 610;

variables 變數
var nickname = x;

SimpleVariableValues
var answer = 42;
alert(nickname);
alert(answer);

nickname = "gugod";
answer = 42;
alert(nickname);
alert(answer);

nickname = "gugod";
answer = 42;
alert(nickname);
alert(answer);
貌似全域變數

變數領域
function test1() {
nickname = 610;
}
function test2() {
nickname = 5566;
}

變數領域
function test1() {
var nickname = 610;
}
function test1() {
var nickname = 5566;
}

全域變數
• 不是宣告在 function 裡面的
• 沒有事先宣告的
• 名稱為 “window.XXX” 型式的

全域變數
function test1() {
nickname = 610;
}
function test2() {
nickname = 5566;
}

全域變數
function test1() {
nickname = 610;
}
function test2() {
nickname = 5566;
}
全域變數

全域變數
function test1() {
nickname = 610;
}
function test2() {
var n = window.nickname;
}
610

if-else
if (<expression>) {
...
}
else {
...
}

if-else
if (<expression>) {
...
}

if-else
if (<expression>) {
...
}
else if (<expression>){
...
}
else if (<expression>){
...
}
else {
...
}

Expressions
a == b
a != b
a >= b
a <= b
a > b
a < b
a && b
a || b
a

if-else
if (10 < a && a < 42) {
...
}

if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}

if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}
程式碼解

if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}
// 42 ~ 50
else if (a >= 42 && a <= 50) {
...
}
// ? ~ 10
else {
...
}

Function
函式

Function
function hello() {
alert("hello");
}

Function
var hello = function() {
alert("hello");
}

Function call
hello();

Function w/ Argument
function hello(x) {
alert("hello " + x);
}

Function call
hello("gugod");

Function call
hello(a);

Function 傳回值
function add3(a) {
return a + 3;
}

Input

• Browser User Input
• prompt()
• DOM (HTML)
• Ajax
• iframe, XMLHttpRequest, JSONRequest,
JSONP, ...

var a = prompt("Give me money:");
alert(a);
prompt

prompt
• Good
• Easy
• Built-in
• Bad
• No way to customize style
• One variable at a time

DOM
<html><body>
<span id="nickname">gugod</span>
// Code...
</script>
</body></html>

<html><body>
var nickname =
document.getElementById("nickname")
.childNodes[0]
.nodeValue;
alert(nickname);
</script>
</body></html>

<head>
<script
type="text/javascript"
src="jquery.min.js"></script>
</head>
Add jQuery

Hello (jQuery)
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
</head>
<body>
var nickname = $("#nickname").text();
alert(nickname);
</script>
</body></html>

Output

• Browser Built-in
• alert()
• DOM
• Ajax
• HTTP POST

<span id="output"></span>
var message = "Hello, world";
$("#output").text(message);
</script>
DOM

Input + Output
<span id="output"></span>
var message = "Hello, " + prompt("Your name is: ");
$("#output").text(message);
</script>

Javascript Tutorial

More Related Content

More from Kang-min Liu (19)

Javascript Tutorial