Upload
kang-min-liu
View
4.439
Download
2
Embed Size (px)
DESCRIPTION
Javascript Tutorial at Handlino
Citation preview
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>
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);}
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>
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>
<span id="output"></span>
<script type="text/javascript">
var message = "Hello, world";
$("#output").text(message);
</script>
DOM
Input + Output
<span id="output"></span><script type="text/javascript">
var message = "Hello, " + prompt("Your name is: ");
$("#output").text(message);
</script>
jQuery hide
<div id="hello">Hello</div><script type="text/javascript">
$("#hello").hide('slow');
</script>
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>
More Info
http://jquery.com/
http://visualjquery.com/
https://www.squarefree.com/bookmarklets/webdevel.html