Your SlideShare is downloading. ×
0
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Javascript Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript Tutorial

3,209

Published on

The javascript tutorial talk for openfoundry

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,209
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
187
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×