36
JavaScript Basic gugod
| Date post: | 01-Nov-2014 |
| Category: |
Education |
| Upload: | kang-min-liu |
| View: | 4,441 times |
| Download: | 2 times |
JavaScript Basicgugod
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 變數
variablename
var nickname = "gugod";
variables 變數
variablename
variable value
var nickname = "gugod";
variables 變數
variablename
variable value
var nickname = "gugod";
declare
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-elseif (answer == 42) { alert("correct");}else { alert("wrong");}
Expressionsa == ba != ba >= ba <= ba > ba < ba
Function
var hello = function() { alert("hello");}
Function
function hello() { alert("hello");}
Function w/ Argument
var hello = function(nickname) { alert("hello " + nickname);}
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);}
Input
Browser User Input
prompt()
DOM (HTML)
Ajax (XMLHttpRequest)
JSONRequest, JSONP, ...
var a = prompt("Give me money:");
alert(a);
prompt
promptGood
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>
<head> <script type="text/javascript" src="jquery.min.js"></script></head>
Add jQuery
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
<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>
Other Topics
Effect
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
The End
