Javascript Basic
Upcoming SlideShare
Loading in...5
×
 

Javascript Basic

on

  • 4,313 views

Javascript Tutorial at Handlino

Javascript Tutorial at Handlino

Statistics

Views

Total Views
4,313
Views on SlideShare
4,297
Embed Views
16

Actions

Likes
5
Downloads
187
Comments
0

6 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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript Basic Javascript Basic Presentation Transcript

    • JavaScript Basic gugod
    • Tools Firefox 3 Firebug “shell” and “test styles” bookmarklets https://www.squarefree.com/ bookmarklets/webdevel.html
    • “Bread board” <html><body> <script type=quot;text/javascriptquot;> // Code goes here... </script> </body></html>
    • Code
    • Hello World alert(quot;Hello Worldquot;);
    • Hello, you var nickname = quot;gugodquot;; alert(quot;Hello, quot; + nickname);
    • variables var nickname = quot;gugodquot;;
    • variables var nickname = quot;gugodquot;; variable name
    • variables variable value var nickname = quot;gugodquot;; variable name
    • variables variable declare value var nickname = quot;gugodquot;; variable name
    • Simple Variable Values var nickname = quot;gugodquot;; var answer = 42; alert(nickname); alert(answer);
    • Simple Variable Values nickname = quot;gugodquot;; answer = 42; alert(nickname); alert(answer);
    • if-else if (answer == 42) { alert(quot;correctquot;); } else { alert(quot;wrongquot;); }
    • Expressions a == b a != b a >= b a <= b a > b a < b a
    • Function var hello = function() { alert(quot;helloquot;); }
    • Function function hello() { alert(quot;helloquot;); }
    • Function w/ Argument var hello = function(nickname) { alert(quot;hello quot; + nickname); }
    • 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); }
    • Input
    • Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...
    • prompt var a = prompt(quot;Give me money:quot;); alert(a);
    • prompt Good Easy Built-in Bad No way to customize style One variable at a time
    • DOM <html><body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> // Code... </script> </body></html>
    • <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>
    • Add jQuery <head> <script type=quot;text/javascriptquot; src=quot;jquery.min.jsquot;></script> </head>
    • 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>
    • Output
    • Browser Built-in alert() DOM Ajax HTTP POST
    • DOM <span id=quot;outputquot;></span> <script type=quot;text/javascriptquot;> var message = quot;Hello, worldquot;; $(quot;#outputquot;).text(message); </script>
    • 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>
    • Other Topics
    • Effect
    • jQuery hide <div id=quot;helloquot;>Hello</div> <script type=quot;text/javascriptquot;> $(quot;#helloquot;).hide('slow'); </script>
    • 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>
    • More Info http://jquery.com/ http://visualjquery.com/ https://www.squarefree.com/ bookmarklets/webdevel.html
    • The End