Javascript Basic

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>

Hello World

alert(quot;Hello Worldquot;);

Hello, you

var nickname = quot;gugodquot;;
alert(quot;Hello, quot; + nickname);

variables


variables

variable
name

variables
variable
value

variable
name

variables
variable
declare value

variable
name

Simple Variable Values
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);
}

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>

// Code...

</script>
</body></html>

<html><body>

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>

var nickname = $(quot;#nicknamequot;).text();

alert(nickname);

</script>
</body></html>

Browser Built-in

alert()

DOM

Ajax

HTTP POST

DOM
<span id=quot;outputquot;></span>


var message = quot;Hello, worldquot;;

$(quot;#outputquot;).text(message);

</script>

Input + Output

<span id=quot;outputquot;></span>

var message = quot;Hello, quot; + prompt(quot;Your name is: quot;);

$(quot;#outputquot;).text(message);

</script>

jQuery hide

<div id=quot;helloquot;>Hello</div>

$(quot;#helloquot;).hide('slow');

</script>

Hide on click
<a href=quot;#quot; id=quot;closequot;>Close</a>
<div id=quot;helloquot;>Hello</div>

$(quot;#closequot;).click(function() {
$(quot;#helloquot;).hide('slow');
});
</script>

More Info

http://jquery.com/
http://visualjquery.com/
https://www.squarefree.com/
bookmarklets/webdevel.html

Javascript Basic

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Javascript Basic

Similaire à Javascript Basic (20)

Plus de Kang-min Liu

Plus de Kang-min Liu (19)

Dernier

Dernier (20)

Javascript Basic