Your SlideShare is downloading. ×
Javascript Basic
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Javascript Basic

2,698
views

Published on

Javascript Tutorial at Handlino

Javascript Tutorial at Handlino

Published in: Education, Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,698
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
192
Comments
0
Likes
5
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. JavaScript Basic gugod
  • 2. Tools Firefox 3 Firebug “shell” and “test styles” bookmarklets https://www.squarefree.com/ bookmarklets/webdevel.html
  • 3. “Bread board” <html><body> <script type=quot;text/javascriptquot;> // Code goes here... </script> </body></html>
  • 4. Code
  • 5. Hello World alert(quot;Hello Worldquot;);
  • 6. Hello, you var nickname = quot;gugodquot;; alert(quot;Hello, quot; + nickname);
  • 7. variables var nickname = quot;gugodquot;;
  • 8. variables var nickname = quot;gugodquot;; variable name
  • 9. variables variable value var nickname = quot;gugodquot;; variable name
  • 10. variables variable declare value var nickname = quot;gugodquot;; variable name
  • 11. Simple Variable Values var nickname = quot;gugodquot;; var answer = 42; alert(nickname); alert(answer);
  • 12. Simple Variable Values nickname = quot;gugodquot;; answer = 42; alert(nickname); alert(answer);
  • 13. if-else if (answer == 42) { alert(quot;correctquot;); } else { alert(quot;wrongquot;); }
  • 14. Expressions a == b a != b a >= b a <= b a > b a < b a
  • 15. Function var hello = function() { alert(quot;helloquot;); }
  • 16. Function function hello() { alert(quot;helloquot;); }
  • 17. Function w/ Argument var hello = function(nickname) { alert(quot;hello quot; + nickname); }
  • 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. Input
  • 20. Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...
  • 21. prompt var a = prompt(quot;Give me money:quot;); alert(a);
  • 22. prompt Good Easy Built-in Bad No way to customize style One variable at a time
  • 23. DOM <html><body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> // Code... </script> </body></html>
  • 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. Add jQuery <head> <script type=quot;text/javascriptquot; src=quot;jquery.min.jsquot;></script> </head>
  • 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. Output
  • 28. Browser Built-in alert() DOM Ajax HTTP POST
  • 29. DOM <span id=quot;outputquot;></span> <script type=quot;text/javascriptquot;> var message = quot;Hello, worldquot;; $(quot;#outputquot;).text(message); </script>
  • 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. Other Topics
  • 32. Effect
  • 33. jQuery hide <div id=quot;helloquot;>Hello</div> <script type=quot;text/javascriptquot;> $(quot;#helloquot;).hide('slow'); </script>
  • 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. More Info http://jquery.com/ http://visualjquery.com/ https://www.squarefree.com/ bookmarklets/webdevel.html
  • 36. The End