Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Tutorial

4,931 views

Published on

The javascript tutorial talk for openfoundry

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/VxYNJ ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/VxYNJ ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×