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 =...
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>
<...
<html><body>
<span id=quot;nicknamequot;>gugod</span>
<script type=quot;text/javascriptquot;>

var nickname =
  document.g...
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>
<bod...
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;;

$(q...
Input + Output

<span id=quot;outputquot;></span>
<script type=quot;text/javascriptquot;>

var message = quot;Hello, quot;...
Other Topics
Effect
jQuery hide

<div id=quot;helloquot;>Hello</div>
<script type=quot;text/javascriptquot;>

$(quot;#helloquot;).hide('slow')...
Hide on click
<a href=quot;#quot; id=quot;closequot;>Close</a>
<div id=quot;helloquot;>Hello</div>

<script type=quot;text...
More Info

http://jquery.com/
 http://visualjquery.com/
https://www.squarefree.com/
bookmarklets/webdevel.html
The End
Upcoming SlideShare
Loading in...5
×

Javascript Basic

2,822

Published on

Javascript Tutorial at Handlino

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,822
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
194
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Javascript Basic

  1. 1. JavaScript Basic gugod
  2. 2. Tools Firefox 3 Firebug “shell” and “test styles” bookmarklets https://www.squarefree.com/ bookmarklets/webdevel.html
  3. 3. “Bread board” <html><body> <script type=quot;text/javascriptquot;> // Code goes here... </script> </body></html>
  4. 4. Code
  5. 5. Hello World alert(quot;Hello Worldquot;);
  6. 6. Hello, you var nickname = quot;gugodquot;; alert(quot;Hello, quot; + nickname);
  7. 7. variables var nickname = quot;gugodquot;;
  8. 8. variables var nickname = quot;gugodquot;; variable name
  9. 9. variables variable value var nickname = quot;gugodquot;; variable name
  10. 10. variables variable declare value var nickname = quot;gugodquot;; variable name
  11. 11. Simple Variable Values var nickname = quot;gugodquot;; var answer = 42; alert(nickname); alert(answer);
  12. 12. Simple Variable Values nickname = quot;gugodquot;; answer = 42; alert(nickname); alert(answer);
  13. 13. if-else if (answer == 42) { alert(quot;correctquot;); } else { alert(quot;wrongquot;); }
  14. 14. Expressions a == b a != b a >= b a <= b a > b a < b a
  15. 15. Function var hello = function() { alert(quot;helloquot;); }
  16. 16. Function function hello() { alert(quot;helloquot;); }
  17. 17. Function w/ Argument var hello = function(nickname) { alert(quot;hello quot; + nickname); }
  18. 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. 19. Input
  20. 20. Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...
  21. 21. prompt var a = prompt(quot;Give me money:quot;); alert(a);
  22. 22. prompt Good Easy Built-in Bad No way to customize style One variable at a time
  23. 23. DOM <html><body> <span id=quot;nicknamequot;>gugod</span> <script type=quot;text/javascriptquot;> // Code... </script> </body></html>
  24. 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. 25. Add jQuery <head> <script type=quot;text/javascriptquot; src=quot;jquery.min.jsquot;></script> </head>
  26. 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. 27. Output
  28. 28. Browser Built-in alert() DOM Ajax HTTP POST
  29. 29. DOM <span id=quot;outputquot;></span> <script type=quot;text/javascriptquot;> var message = quot;Hello, worldquot;; $(quot;#outputquot;).text(message); </script>
  30. 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. 31. Other Topics
  32. 32. Effect
  33. 33. jQuery hide <div id=quot;helloquot;>Hello</div> <script type=quot;text/javascriptquot;> $(quot;#helloquot;).hide('slow'); </script>
  34. 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. 35. More Info http://jquery.com/ http://visualjquery.com/ https://www.squarefree.com/ bookmarklets/webdevel.html
  36. 36. The End
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×