Javascript Basic

3,209 views
3,022 views

Published on

Javascript Tutorial at Handlino

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,209
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
200
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Javascript Basic

  1. 1. JavaScript Basic gugod
  2. 2. Tools Firefox 3 Firebug “shell” and “test styles” bookmarklets https://www.squarefree.com/ bookmarklets/webdevel.html
  3. 3. “Bread board” <html><body> <script type=quot;text/javascriptquot;> // Code goes here... </script> </body></html>
  4. 4. Code
  5. 5. Hello World alert(quot;Hello Worldquot;);
  6. 6. Hello, you var nickname = quot;gugodquot;; alert(quot;Hello, quot; + nickname);
  7. 7. variables var nickname = quot;gugodquot;;
  8. 8. variables var nickname = quot;gugodquot;; variable name
  9. 9. variables variable value var nickname = quot;gugodquot;; variable name
  10. 10. variables variable declare value var nickname = quot;gugodquot;; variable name
  11. 11. Simple Variable Values var nickname = quot;gugodquot;; var answer = 42; alert(nickname); alert(answer);
  12. 12. Simple Variable Values nickname = quot;gugodquot;; answer = 42; alert(nickname); alert(answer);
  13. 13. if-else if (answer == 42) { alert(quot;correctquot;); } else { alert(quot;wrongquot;); }
  14. 14. Expressions a == b a != b a >= b a <= b a > b a < b a
  15. 15. Function var hello = function() { alert(quot;helloquot;); }
  16. 16. Function function hello() { alert(quot;helloquot;); }
  17. 17. Function w/ Argument var hello = function(nickname) { alert(quot;hello quot; + nickname); }
  18. 18. var hello = function(nickname, like) { var message = quot;hello quot; + nickname; if (like > 6) { message = quot;Great to see you, quot; + nickname; } if (like < 2){ message = quot;Oh, it’s you, quot; + nickname; } alert(message); }
  19. 19. Input
  20. 20. Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...
  21. 21. prompt var a = prompt(quot;Give me money:quot;); alert(a);
  22. 22. prompt Good Easy Built-in Bad No way to customize style One variable at a time
  23. 23. DOM <html><body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> // Code... </script> </body></html>
  24. 24. <html><body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> var nickname = document.getElementById(quot;nicknamequot;) .childNodes[0] .nodeValue; alert(nickname); </script> </body></html>
  25. 25. Add jQuery <head> <script type=quot;text/javascriptquot; src=quot;jquery.min.jsquot;></script> </head>
  26. 26. Hello (jQuery) <html> <head> <script type=quot;text/javascriptquot; src=quot;jquery.jsquot;></script> </head> <body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> var nickname = $(quot;#nicknamequot;).text(); alert(nickname); </script> </body></html>
  27. 27. Output
  28. 28. Browser Built-in alert() DOM Ajax HTTP POST
  29. 29. DOM <span id=quot;outputquot;></span> <script type=quot;text/javascriptquot;> var message = quot;Hello, worldquot;; $(quot;#outputquot;).text(message); </script>
  30. 30. Input + Output <span id=quot;outputquot;></span> <script type=quot;text/javascriptquot;> var message = quot;Hello, quot; + prompt(quot;Your name is: quot;); $(quot;#outputquot;).text(message); </script>
  31. 31. Other Topics
  32. 32. Effect
  33. 33. jQuery hide <div id=quot;helloquot;>Hello</div> <script type=quot;text/javascriptquot;> $(quot;#helloquot;).hide('slow'); </script>
  34. 34. Hide on click <a href=quot;#quot; id=quot;closequot;>Close</a> <div id=quot;helloquot;>Hello</div> <script type=quot;text/javascriptquot;> $(quot;#closequot;).click(function() { $(quot;#helloquot;).hide('slow'); }); </script>
  35. 35. More Info http://jquery.com/ http://visualjquery.com/ https://www.squarefree.com/ bookmarklets/webdevel.html
  36. 36. The End

×