Javascript Basic

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites & 1 Group

    Javascript Basic - Presentation 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=\"text/javascript\"> // Code goes here... </script> </body></html>
    4. Code
    5. Hello World alert(\"Hello World\");
    6. Hello, you var nickname = \"gugod\"; alert(\"Hello, \" + nickname);
    7. variables var nickname = \"gugod\";
    8. variables var nickname = \"gugod\"; variable name
    9. variables variable value var nickname = \"gugod\"; variable name
    10. variables variable declare value var nickname = \"gugod\"; variable name
    11. Simple Variable Values var nickname = \"gugod\"; var answer = 42; alert(nickname); alert(answer);
    12. Simple Variable Values nickname = \"gugod\"; answer = 42; alert(nickname); alert(answer);
    13. if-else if (answer == 42) { alert(\"correct\"); } else { alert(\"wrong\"); }
    14. Expressions a == b a != b a >= b a <= b a > b a < b a
    15. Function var hello = function() { alert(\"hello\"); }
    16. Function function hello() { alert(\"hello\"); }
    17. Function w/ Argument var hello = function(nickname) { alert(\"hello \" + nickname); }
    18. var hello = function(nickname, like) { var message = \"hello \" + nickname; if (like > 6) { message = \"Great to see you, \" + nickname; } if (like < 2){ message = \"Oh, it’s you, \" + nickname; } alert(message); }
    19. Input
    20. Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...
    21. prompt var a = prompt(\"Give me money:\"); 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=\"nickname\">gugod</span> <script type=\"text/javascript\"> // Code... </script> </body></html>
    24. <html><body> <span id=\"nickname\">gugod</span> <script type=\"text/javascript\"> var nickname = document.getElementById(\"nickname\") .childNodes[0] .nodeValue; alert(nickname); </script> </body></html>
    25. Add jQuery <head> <script type=\"text/javascript\" src=\"jquery.min.js\"></script> </head>
    26. Hello (jQuery) <html> <head> <script type=\"text/javascript\" src=\"jquery.js\"></script> </head> <body> <span id=\"nickname\">gugod</span> <script type=\"text/javascript\"> var nickname = $(\"#nickname\").text(); alert(nickname); </script> </body></html>
    27. Output
    28. Browser Built-in alert() DOM Ajax HTTP POST
    29. DOM <span id=\"output\"></span> <script type=\"text/javascript\"> var message = \"Hello, world\"; $(\"#output\").text(message); </script>
    30. Input + Output <span id=\"output\"></span> <script type=\"text/javascript\"> var message = \"Hello, \" + prompt(\"Your name is: \"); $(\"#output\").text(message); </script>
    31. Other Topics
    32. Effect
    33. jQuery hide <div id=\"hello\">Hello</div> <script type=\"text/javascript\"> $(\"#hello\").hide('slow'); </script>
    34. Hide on click <a href=\"#\" id=\"close\">Close</a> <div id=\"hello\">Hello</div> <script type=\"text/javascript\"> $(\"#close\").click(function() { $(\"#hello\").hide('slow'); }); </script>
    35. More Info http://jquery.com/ http://visualjquery.com/ https://www.squarefree.com/ bookmarklets/webdevel.html
    36. The End

    + Kang-min LiuKang-min Liu, 2 years ago

    custom

    1326 views, 2 favs, 0 embeds more stats

    Javascript Tutorial at Handlino

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1326
      • 1326 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 48
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events