0
Handlino http://handlino.com/
Javascript Tutorial
Kang-min Liu
Handlino http://handlino.com/
Tools
• Firefox 3
• Firebug
• “shell” and “test styles” bookmarklets
• https://www.squarefre...
Handlino http://handlino.com/
“Bread board”
<html><body>
<script type="text/javascript">
// Code goes here...
</script>
</...
Handlino http://handlino.com/
Code
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 變數
variable
name
var nickname = "gugod";
Handlino http://handlino.com/
variables 變數
variable
name
variable
value
var nickname = "gugod";
Handlino http://handlino.com/
variables 變數
variable
name
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/
SimpleVariableValues
var nickname = "gugod";
var answer = 42;
alert(nickname);
alert(answer);
Handlino http://handlino.com/
SimpleVariableValues
nickname = "gugod";
answer = 42;
alert(nickname);
alert(answer);
Handlino http://handlino.com/
SimpleVariableValues
nickname = "gugod";
answer = 42;
alert(nickname);
alert(answer);
貌似全域變數
Handlino http://handlino.com/
變數領域
var nickname = "gugod";
function test1() {
nickname = 610;
}
function test2() {
nicknam...
Handlino http://handlino.com/
變數領域
var nickname = "gugod";
function test1() {
var nickname = 610;
}
function test1() {
var...
Handlino http://handlino.com/
全域變數
• 不是宣告在 function 裡面的
• 沒有事先宣告的
• 名稱為 “window.XXX” 型式的
Handlino http://handlino.com/
全域變數
var nickname = "gugod";
function test1() {
nickname = 610;
}
function test2() {
nicknam...
Handlino http://handlino.com/
全域變數
var nickname = "gugod";
function test1() {
nickname = 610;
}
function test2() {
nicknam...
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-else
if (<expression>) {
...
}
else if (<expression>){
...
}
else if (<expression>){
...
...
Handlino http://handlino.com/
Expressions
a == b
a != b
a >= b
a <= b
a > b
a < b
a && b
a || b
a
Handlino http://handlino.com/
if-else
if (10 < a && a < 42) {
...
}
Handlino http://handlino.com/
if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}
Handlino http://handlino.com/
if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}
程式碼 解
Handlino http://handlino.com/
if-else
// 10 < a < 42
if (10 < a && a < 42) {
...
}
// 42 ~ 50
else if (a >= 42 && a <= 50)...
Handlino http://handlino.com/
Function
函式
Handlino http://handlino.com/
Function
function hello() {
alert("hello");
}
Handlino http://handlino.com/
Function
var hello = function() {
alert("hello");
}
Handlino http://handlino.com/
Function call
hello();
Handlino http://handlino.com/
Function call
hello();
Handlino http://handlino.com/
Function w/ Argument
function hello(x) {
alert("hello " + x);
}
Handlino http://handlino.com/
Function call
hello("gugod");
Handlino http://handlino.com/
Function call
hello("gugod");
Handlino http://handlino.com/
Function call
hello(a);
Handlino http://handlino.com/
var hello = function(nickname, like) {
var message = "hello " + nickname;
if (like > 6) {
me...
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/
Input
Handlino http://handlino.com/
• Browser User Input
• prompt()
• DOM (HTML)
• Ajax
• iframe, XMLHttpRequest, JSONRequest,
J...
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......
Handlino http://handlino.com/
<html><body>
<span id="nickname">gugod</span>
<script type="text/javascript">
var nickname =...
Handlino http://handlino.com/
<html><body>
<span id="nickname">gugod</span>
<script type="text/javascript">
var nickname =...
Handlino http://handlino.com/
<html><body>
<span id="nickname">gugod</span>
<script type="text/javascript">
var nickname =...
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...
Handlino http://handlino.com/
Hello (jQuery)
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
</head...
Handlino http://handlino.com/
Hello (jQuery)
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
</head...
Handlino http://handlino.com/
Output
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";
$("#...
Handlino http://handlino.com/
Input + Output
<span id="output"></span>
<script type="text/javascript">
var message = "Hell...
Handlino http://handlino.com/
Other Topics
Handlino http://handlino.com/
☻Intermission☺
Handlino http://handlino.com/
jQuery
jquery.com
Handlino http://handlino.com/
CSS
Handlino http://handlino.com/
p {
line-height: 1.5em;
}
Handlino http://handlino.com/
query {
property: value;
}
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-si...
Handlino http://handlino.com/
選元素
Handlino http://handlino.com/
選元素
• tagname
• #id
• .class
• tag[attr=value]
• h1, h2, div
• <div id=”nav”>
• <h1 class=”t...
Handlino http://handlino.com/
jQuery 選元素
• $(“h1”)
• $(“#id”)
• $(“.class”)
• $(“input[name=nick]”)
Handlino http://handlino.com/
jQuery
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/
$
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 ...
Handlino http://handlino.com/
Let’s play some jQuery
$("input").size();
$("input[name=q]").val("Taipei");
$("input[name=bt...
Handlino http://handlino.com/
Let’s play some jQuery
$("input").hide();
$("input").show("slow");
$("input").css({ "backgro...
Handlino http://handlino.com/
jQuery collections
• $() 會傳回 jQuery collection,「一群元
素」
• 可以對其呼叫各種方法,同時操作 群
元素
Handlino http://handlino.com/
操作一群元素
$("div.section").addClass("highlight");
$("img.photo").attr("src", "img/hi.png");
$("...
Handlino http://handlino.com/
取得各種值
var height = $("div#first").height();
var img_src = $("img.photo").attr("src");
var la...
Handlino http://handlino.com/
Other topics
• DOM Traversal
• Browser Events
• Ajax
• Plugins
• Effects
• UI
Handlino http://handlino.com/
Effect
Handlino http://handlino.com/
jQuery hide
<div id="hello">Hello</div>
<script type="text/javascript">
$("#hello").hide('sl...
Handlino http://handlino.com/
Show on click
<script type="text/javascript">
$("#hi").click(function() {
$("#hello").slideD...
Handlino http://handlino.com/
Show on click
<script type="text/javascript">
$("#hi").click(function() {
$("#hello").slideT...
Handlino http://handlino.com/
Show on click
<script type="text/javascript">
$("#hi").click(function() {
$("#hello").slideT...
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/
予想界面
Handlino http://handlino.com/
解答
http://gist.github.com/31899
Handlino http://handlino.com/
謝謝
ご清聴ありがとうございました
gugod@handlino.com
naimu@handlino.com
Upcoming SlideShare
Loading in...5
×

Javascript Tutorial

3,247

Published on

The javascript tutorial talk for openfoundry

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,247
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
194
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript Tutorial"

  1. 1. Handlino http://handlino.com/ Javascript Tutorial Kang-min Liu
  2. 2. Handlino http://handlino.com/ Tools • Firefox 3 • Firebug • “shell” and “test styles” bookmarklets • https://www.squarefree.com/ bookmarklets/webdevel.html ( http://is.gd/45YH )
  3. 3. 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
  4. 4. Handlino http://handlino.com/ Code
  5. 5. Handlino http://handlino.com/ Hello World alert("Hello World");
  6. 6. Handlino http://handlino.com/ Hello, you var nickname = "gugod"; alert("Hello, " + nickname);
  7. 7. Handlino http://handlino.com/ Hello, you var nickname = "gugod"; alert("Hello, " + nickname);注意
  8. 8. Handlino http://handlino.com/ variables 變數 var nickname = "gugod";
  9. 9. Handlino http://handlino.com/ variables 變數 variable name var nickname = "gugod";
  10. 10. Handlino http://handlino.com/ variables 變數 variable name variable value var nickname = "gugod";
  11. 11. Handlino http://handlino.com/ variables 變數 variable name variable value var nickname = "gugod"; declare
  12. 12. Handlino http://handlino.com/ variables 變數 var nickname = “gugod”;
  13. 13. Handlino http://handlino.com/ variables 變數 var nickname = 610;
  14. 14. Handlino http://handlino.com/ variables 變數 var nickname = x;
  15. 15. Handlino http://handlino.com/ SimpleVariableValues var nickname = "gugod"; var answer = 42; alert(nickname); alert(answer);
  16. 16. Handlino http://handlino.com/ SimpleVariableValues nickname = "gugod"; answer = 42; alert(nickname); alert(answer);
  17. 17. Handlino http://handlino.com/ SimpleVariableValues nickname = "gugod"; answer = 42; alert(nickname); alert(answer); 貌似全域變數
  18. 18. Handlino http://handlino.com/ 變數領域 var nickname = "gugod"; function test1() { nickname = 610; } function test2() { nickname = 5566; }
  19. 19. Handlino http://handlino.com/ 變數領域 var nickname = "gugod"; function test1() { var nickname = 610; } function test1() { var nickname = 5566; }
  20. 20. Handlino http://handlino.com/ 全域變數 • 不是宣告在 function 裡面的 • 沒有事先宣告的 • 名稱為 “window.XXX” 型式的
  21. 21. Handlino http://handlino.com/ 全域變數 var nickname = "gugod"; function test1() { nickname = 610; } function test2() { nickname = 5566; }
  22. 22. Handlino http://handlino.com/ 全域變數 var nickname = "gugod"; function test1() { nickname = 610; } function test2() { nickname = 5566; } 全域變數
  23. 23. Handlino http://handlino.com/ 全域變數 function test1() { nickname = 610; } function test2() { var n = window.nickname; } 610
  24. 24. Handlino http://handlino.com/ if-else if (<expression>) { ... } else { ... }
  25. 25. Handlino http://handlino.com/ if-else if (<expression>) { ... }
  26. 26. Handlino http://handlino.com/ if-else if (<expression>) { ... } else if (<expression>){ ... } else if (<expression>){ ... } else { ... }
  27. 27. Handlino http://handlino.com/ Expressions a == b a != b a >= b a <= b a > b a < b a && b a || b a
  28. 28. Handlino http://handlino.com/ if-else if (10 < a && a < 42) { ... }
  29. 29. Handlino http://handlino.com/ if-else // 10 < a < 42 if (10 < a && a < 42) { ... }
  30. 30. Handlino http://handlino.com/ if-else // 10 < a < 42 if (10 < a && a < 42) { ... } 程式碼 解
  31. 31. Handlino http://handlino.com/ if-else // 10 < a < 42 if (10 < a && a < 42) { ... } // 42 ~ 50 else if (a >= 42 && a <= 50) { ... } // ? ~ 10 else { ... }
  32. 32. Handlino http://handlino.com/ Function 函式
  33. 33. Handlino http://handlino.com/ Function function hello() { alert("hello"); }
  34. 34. Handlino http://handlino.com/ Function var hello = function() { alert("hello"); }
  35. 35. Handlino http://handlino.com/ Function call hello();
  36. 36. Handlino http://handlino.com/ Function call hello();
  37. 37. Handlino http://handlino.com/ Function w/ Argument function hello(x) { alert("hello " + x); }
  38. 38. Handlino http://handlino.com/ Function call hello("gugod");
  39. 39. Handlino http://handlino.com/ Function call hello("gugod");
  40. 40. Handlino http://handlino.com/ Function call hello(a);
  41. 41. 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); }
  42. 42. Handlino http://handlino.com/ Function 傳回值 function add3(a) { return a + 3; }
  43. 43. Handlino http://handlino.com/ Function 傳回值 function add3(a) { return a + 3; }
  44. 44. Handlino http://handlino.com/ Input
  45. 45. Handlino http://handlino.com/ • Browser User Input • prompt() • DOM (HTML) • Ajax • iframe, XMLHttpRequest, JSONRequest, JSONP, ...
  46. 46. Handlino http://handlino.com/ var a = prompt("Give me money:"); alert(a); prompt
  47. 47. Handlino http://handlino.com/ prompt • Good • Easy • Built-in • Bad • No way to customize style • One variable at a time
  48. 48. Handlino http://handlino.com/ DOM <html><body> <span id="nickname">gugod</span> <script type="text/javascript"> // Code... </script> </body></html>
  49. 49. 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>
  50. 50. 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>
  51. 51. 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>
  52. 52. Handlino http://handlino.com/ <head> <script type="text/javascript" src="jquery.min.js"></script> </head> Add jQuery
  53. 53. 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>
  54. 54. 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>
  55. 55. 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>
  56. 56. Handlino http://handlino.com/ Output
  57. 57. Handlino http://handlino.com/ • Browser Built-in • alert() • DOM • Ajax • HTTP POST
  58. 58. Handlino http://handlino.com/ <span id="output"></span> <script type="text/javascript"> var message = "Hello, world"; $("#output").text(message); </script> DOM
  59. 59. 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>
  60. 60. Handlino http://handlino.com/ Other Topics
  61. 61. Handlino http://handlino.com/ ☻Intermission☺
  62. 62. Handlino http://handlino.com/ jQuery jquery.com
  63. 63. Handlino http://handlino.com/ CSS
  64. 64. Handlino http://handlino.com/ p { line-height: 1.5em; }
  65. 65. Handlino http://handlino.com/ query { property: value; }
  66. 66. Handlino http://handlino.com/ query1, query2 { property1: value1; property2: value2; property3: value3; }
  67. 67. Handlino http://handlino.com/ h1, h2 { font-family: Helvectica; color: #555; border-bottom: 1px solid #aaa; }
  68. 68. 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; }
  69. 69. Handlino http://handlino.com/ 選元素
  70. 70. Handlino http://handlino.com/ 選元素 • tagname • #id • .class • tag[attr=value] • h1, h2, div • <div id=”nav”> • <h1 class=”title”> • <input name=”nick”>
  71. 71. Handlino http://handlino.com/ jQuery 選元素 • $(“h1”) • $(“#id”) • $(“.class”) • $(“input[name=nick]”)
  72. 72. Handlino http://handlino.com/ jQuery
  73. 73. Handlino http://handlino.com/ jQuery 選元素 • jQuery(“h1”) • jQuery(“#id”) • jQuery(“.class”) • jQuery(“input[name=nick]”)
  74. 74. Handlino http://handlino.com/ jQuery 選元素 • $(“h1”) • $(“#id”) • $(“.class”) • $(“input[name=nick]”)
  75. 75. Handlino http://handlino.com/ $
  76. 76. Handlino http://handlino.com/ function $(query) { var elements = <magic>; return elements; }
  77. 77. Handlino http://handlino.com/ 試玩 jQuery • Grab jQuerify: http://is.gd/aab6 • Visit google.com • Click jQuerify • Click js shell
  78. 78. Handlino http://handlino.com/ Let’s play some jQuery $("input").size(); $("input[name=q]").val("Taipei"); $("input[name=btnI]").click();
  79. 79. Handlino http://handlino.com/ Let’s play some jQuery $("input").hide(); $("input").show("slow"); $("input").css({ "background": "red" });
  80. 80. Handlino http://handlino.com/ jQuery collections • $() 會傳回 jQuery collection,「一群元 素」 • 可以對其呼叫各種方法,同時操作 群 元素
  81. 81. 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");
  82. 82. Handlino http://handlino.com/ 取得各種值 var height = $("div#first").height(); var img_src = $("img.photo").attr("src"); var lastP = $("p:last").html();
  83. 83. Handlino http://handlino.com/ Other topics • DOM Traversal • Browser Events • Ajax • Plugins • Effects • UI
  84. 84. Handlino http://handlino.com/ Effect
  85. 85. Handlino http://handlino.com/ jQuery hide <div id="hello">Hello</div> <script type="text/javascript"> $("#hello").hide('slow'); </script>
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. Handlino http://handlino.com/ More Info • http://jquery.com/ • http://visualjquery.com/
  90. 90. Handlino http://handlino.com/ 作業 • 試寫一 BMI 計算機。輸入身高 (cm) 與體 重 (kg),並顯示出 BMI • BMI = 體重 / 身高2 公尺
  91. 91. Handlino http://handlino.com/ 予想界面
  92. 92. Handlino http://handlino.com/ 解答 http://gist.github.com/31899
  93. 93. Handlino http://handlino.com/ 謝謝 ご清聴ありがとうございました gugod@handlino.com naimu@handlino.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×