Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Javascript Basic
Ähnlich wie Javascript Basic (20)
Mehr von Kang-min Liu
Mehr von Kang-min Liu (19)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Javascript Basic
- 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
- 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>
- 36. The End