Javascript Basic

  • 2,647 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
2,647
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
191
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