Javascript Basic

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=\"text/javascript\"> // Code goes here... </script> </body></html>

Code

Hello World alert(\"Hello World\");

Hello, you var nickname = \"gugod\"; alert(\"Hello, \" + nickname);

variables var nickname = \"gugod\";

variables var nickname = \"gugod\"; variable name

variables variable value var nickname = \"gugod\"; variable name

variables variable declare value var nickname = \"gugod\"; variable name

Simple Variable Values var nickname = \"gugod\"; var answer = 42; alert(nickname); alert(answer);

Simple Variable Values nickname = \"gugod\"; answer = 42; alert(nickname); alert(answer);

if-else if (answer == 42) { alert(\"correct\"); } else { alert(\"wrong\"); }

Expressions a == b a != b a >= b a <= b a > b a < b a

Function var hello = function() { alert(\"hello\"); }

Function function hello() { alert(\"hello\"); }

Function w/ Argument var hello = function(nickname) { alert(\"hello \" + nickname); }

Input

Browser User Input prompt() DOM (HTML) Ajax (XMLHttpRequest) JSONRequest, JSONP, ...

prompt var a = prompt(\"Give me money:\"); alert(a);

prompt Good Easy Built-in Bad No way to customize style One variable at a time

DOM <html><body> <span id=\"nickname\">gugod</span> <script type=\"text/javascript\"> // Code... </script> </body></html>

<html><body> <span id=\"nickname\">gugod</span> <script type=\"text/javascript\"> var nickname = document.getElementById(\"nickname\") .childNodes[0] .nodeValue; alert(nickname); </script> </body></html>

Add jQuery <head> <script type=\"text/javascript\" src=\"jquery.min.js\"></script> </head>

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>

Output

Browser Built-in alert() DOM Ajax HTTP POST

DOM <span id=\"output\"></span> <script type=\"text/javascript\"> var message = \"Hello, world\"; $(\"#output\").text(message); </script>

Input + Output <span id=\"output\"></span> <script type=\"text/javascript\"> var message = \"Hello, \" + prompt(\"Your name is: \"); $(\"#output\").text(message); </script>

Javascript Basic

0 comments

Notes on slide 1

2 Favorites & 1 Group