Javascript Basic
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Javascript Basic

  • 4,472 views
Uploaded on

Javascript Tutorial at Handlino

Javascript Tutorial at Handlino

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,472
On Slideshare
4,456
From Embeds
16
Number of Embeds
6

Actions

Shares
Downloads
190
Comments
0
Likes
5

Embeds 16

http://coderwall.com 7
http://www.slideshare.net 5
http://ctc.blackboard.com 1
http://localhost 1
http://static.slidesharecdn.com 1
http://www.linkedin.com 1

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