javascript tutorial
DESCRIPTION
The javascript tutorial talk for openfoundryTRANSCRIPT
Handlino http://handlino.com/
Javascript TutorialKang-min Liu
Handlino http://handlino.com/
Tools
• Firefox 3
• Firebug
• “shell” and “test styles” bookmarklets
• https://www.squarefree.com/bookmarklets/webdevel.html( http://is.gd/45YH )
Handlino http://handlino.com/
“Bread board”<html><body><script type="text/javascript">
// Code goes here...
</script></body></html>
Save it as “test.html”
http://gist.github.com/31863
Handlino http://handlino.com/
Hello World
alert("Hello World");
Handlino http://handlino.com/
Hello, you
var nickname = "gugod";alert("Hello, " + nickname);
Handlino http://handlino.com/
Hello, you
var nickname = "gugod";alert("Hello, " + nickname);注意
Handlino http://handlino.com/
variables 變數
var nickname = "gugod";
Handlino http://handlino.com/
variables 變數
variablename
var nickname = "gugod";
Handlino http://handlino.com/
variables 變數
variablename
variable value
var nickname = "gugod";
Handlino http://handlino.com/
variables 變數
variablename
variable value
var nickname = "gugod";
declare
Handlino http://handlino.com/
variables 變數
var nickname = “gugod”;
Handlino http://handlino.com/
variables 變數
var nickname = 610;
Handlino http://handlino.com/
variables 變數
var nickname = x;
Handlino http://handlino.com/
Simple Variable Values
var nickname = "gugod";var answer = 42;
alert(nickname);alert(answer);
Handlino http://handlino.com/
Simple Variable Values
nickname = "gugod";answer = 42;
alert(nickname);alert(answer);
Handlino http://handlino.com/
Simple Variable Values
nickname = "gugod";answer = 42;
alert(nickname);alert(answer);
貌似全域變數
Handlino http://handlino.com/
變數領域var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
Handlino http://handlino.com/
變數領域var nickname = "gugod";function test1() { var nickname = 610;}function test1() { var nickname = 5566;}
Handlino http://handlino.com/
全域變數
• 不是宣告在 function 裡面的
• 沒有事先宣告的
• 名稱為 “window.XXX” 型式的
Handlino http://handlino.com/
全域變數var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
Handlino http://handlino.com/
全域變數var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
全域變數
Handlino http://handlino.com/
全域變數function test1() { nickname = 610;}function test2() { var n = window.nickname;}
610
Handlino http://handlino.com/
if-else
if (<expression>) { ...}else { ...}
Handlino http://handlino.com/
if-else
if (<expression>) { ...}
Handlino http://handlino.com/
if-elseif (<expression>) { ...}else if (<expression>){ ...}else if (<expression>){ ...}else { ...}
Handlino http://handlino.com/
Expressionsa == ba != ba >= ba <= ba > ba < ba && ba || ba
Handlino http://handlino.com/
if-else
if (10 < a && a < 42) { ...}
Handlino http://handlino.com/
if-else
// 10 < a < 42if (10 < a && a < 42) { ...}
Handlino http://handlino.com/
if-else
// 10 < a < 42if (10 < a && a < 42) { ...}
程式碼註解
Handlino http://handlino.com/
if-else// 10 < a < 42if (10 < a && a < 42) { ...}// 42 ~ 50else if (a >= 42 && a <= 50) { ...}// ? ~ 10else { ...}
Handlino http://handlino.com/
Function
function hello() { alert("hello");}
Handlino http://handlino.com/
Function
var hello = function() { alert("hello");}
Handlino http://handlino.com/
Function w/ Argument
function hello(x) { alert("hello " + x);}
Handlino http://handlino.com/
var hello = function(nickname, like) { var message = "hello " + nickname;
if (like > 6) { message = "Great to see you, " + nickname; }
if (like < 2){ message = "Oh, it’s you, " + nickname; }
alert(message);}
Handlino http://handlino.com/
Function 傳回值
function add3(a) { return a + 3;}
Handlino http://handlino.com/
Function 傳回值
function add3(a) { return a + 3;}
Handlino http://handlino.com/
• Browser User Input
• prompt()
• DOM (HTML)
• Ajax
• iframe, XMLHttpRequest, JSONRequest, JSONP, ...
Handlino http://handlino.com/
var a = prompt("Give me money:");
alert(a);
prompt
Handlino http://handlino.com/
prompt
• Good
• Easy
• Built-in
• Bad
• No way to customize style
• One variable at a time
Handlino http://handlino.com/
DOM<html><body><span id="nickname">gugod</span><script type="text/javascript">
// Code...
</script></body></html>
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
<head> <script type="text/javascript" src="jquery.min.js"></script></head>
Add jQuery
Handlino http://handlino.com/
Hello (jQuery)<html><head> <script type="text/javascript" src="jquery.js"></script></head><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = $("#nickname").text();
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
Hello (jQuery)<html><head> <script type="text/javascript" src="jquery.js"></script></head><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = $("#nickname").text();
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
Hello (jQuery)<html><head> <script type="text/javascript" src="jquery.js"></script></head><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = $("#nickname").text();
alert(nickname);
</script></body></html>
Handlino http://handlino.com/
• Browser Built-in
• alert()
• DOM
• Ajax
• HTTP POST
Handlino http://handlino.com/
<span id="output"></span>
<script type="text/javascript">
var message = "Hello, world";
$("#output").text(message);
</script>
DOM
Handlino http://handlino.com/
Input + Output
<span id="output"></span><script type="text/javascript">
var message = "Hello, " + prompt("Your name is: ");
$("#output").text(message);
</script>
Handlino http://handlino.com/
query1, query2 { property1: value1; property2: value2; property3: value3;}
Handlino http://handlino.com/
h1, h2 { font-family: Helvectica; color: #555; border-bottom: 1px solid #aaa;}
Handlino http://handlino.com/
h1, h2 { font-family: Helvectica; color: #555; border-bottom: 1px solid #aaa;}h1 { font-size: 2em; }h2 { font-size: 1.5em; }
Handlino http://handlino.com/
選元素
• tagname
• #id
• .class
• tag[attr=value]
• h1, h2, div
• <div id=”nav”>
• <h1 class=”title”>
• <input name=”nick”>
Handlino http://handlino.com/
jQuery 選元素
• $(“h1”)
• $(“#id”)
• $(“.class”)
• $(“input[name=nick]”)
Handlino http://handlino.com/
jQuery 選元素
• jQuery(“h1”)
• jQuery(“#id”)
• jQuery(“.class”)
• jQuery(“input[name=nick]”)
Handlino http://handlino.com/
jQuery 選元素
• $(“h1”)
• $(“#id”)
• $(“.class”)
• $(“input[name=nick]”)
Handlino http://handlino.com/
function $(query) { var elements = <magic>; return elements;}
Handlino http://handlino.com/
試玩 jQuery
• Grab jQuerify: http://is.gd/aab6
• Visit google.com
• Click jQuerify
• Click js shell
Handlino http://handlino.com/
Let’s play some jQuery
$("input").size();$("input[name=q]").val("Taipei");$("input[name=btnI]").click();
Handlino http://handlino.com/
Let’s play some jQuery
$("input").hide();$("input").show("slow");$("input").css({ "background": "red" });
Handlino http://handlino.com/
jQuery collections
• $() 會傳回 jQuery collection，「一群元素」
• 可以對其呼叫各種方法，同時操作這群元素
Handlino http://handlino.com/
操作一群元素
$("div.section").addClass("highlight");
$("img.photo").attr("src", "img/hi.png");
$("a.foo").html("<em>Click me</em>");
$("p:odd").css("background","#ccc");
Handlino http://handlino.com/
取得各種值
var height = $("div#first").height();
var img_src = $("img.photo").attr("src");
var lastP = $("p:last").html();
Handlino http://handlino.com/
Other topics
• DOM Traversal
• Browser Events
• Ajax
• Plugins
• Effects
• UI
Handlino http://handlino.com/
jQuery hide
<div id="hello">Hello</div><script type="text/javascript">
$("#hello").hide('slow');
</script>
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideDown();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31889
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideToggle();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31892
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideToggle();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31892
Handlino http://handlino.com/
More Info
• http://jquery.com/
• http://visualjquery.com/
Handlino http://handlino.com/
作業
• 試寫一 BMI 計算機。輸入身高 (cm) 與體重 (kg)，並顯示出 BMI
• BMI = 體重 / 身高2
公尺
Handlino http://handlino.com/
解答
http://gist.github.com/31899
