Javascript Tutorial

3,421
-1

Published on

The javascript tutorial talk for openfoundry

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

No Downloads
Views
Total Views
3,421
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
210
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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.

×