CMPT 100 : introduction to computing tutorial #4 : javascript
Javascript Tutorial
-
Upload
kang-min-liu -
Category
Technology
-
view
4.634 -
download
1
description
Transcript of Javascript Tutorial
![Page 1: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/1.jpg)
Handlino http://handlino.com/
Javascript TutorialKang-min Liu
![Page 2: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/2.jpg)
Handlino http://handlino.com/
Tools
• Firefox 3
• Firebug
• “shell” and “test styles” bookmarklets
• https://www.squarefree.com/bookmarklets/webdevel.html( http://is.gd/45YH )
![Page 3: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/3.jpg)
Handlino http://handlino.com/
“Bread board”<html><body><script type="text/javascript">
// Code goes here...
</script></body></html>
Save it as “test.html”
http://gist.github.com/31863
![Page 5: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/5.jpg)
Handlino http://handlino.com/
Hello World
alert("Hello World");
![Page 6: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/6.jpg)
Handlino http://handlino.com/
Hello, you
var nickname = "gugod";alert("Hello, " + nickname);
![Page 7: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/7.jpg)
Handlino http://handlino.com/
Hello, you
var nickname = "gugod";alert("Hello, " + nickname);注意
![Page 8: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/8.jpg)
Handlino http://handlino.com/
variables 變數
var nickname = "gugod";
![Page 9: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/9.jpg)
Handlino http://handlino.com/
variables 變數
variablename
var nickname = "gugod";
![Page 10: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/10.jpg)
Handlino http://handlino.com/
variables 變數
variablename
variable value
var nickname = "gugod";
![Page 11: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/11.jpg)
Handlino http://handlino.com/
variables 變數
variablename
variable value
var nickname = "gugod";
declare
![Page 12: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/12.jpg)
Handlino http://handlino.com/
variables 變數
var nickname = “gugod”;
![Page 13: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/13.jpg)
Handlino http://handlino.com/
variables 變數
var nickname = 610;
![Page 14: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/14.jpg)
Handlino http://handlino.com/
variables 變數
var nickname = x;
![Page 15: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/15.jpg)
Handlino http://handlino.com/
Simple Variable Values
var nickname = "gugod";var answer = 42;
alert(nickname);alert(answer);
![Page 16: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/16.jpg)
Handlino http://handlino.com/
Simple Variable Values
nickname = "gugod";answer = 42;
alert(nickname);alert(answer);
![Page 17: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/17.jpg)
Handlino http://handlino.com/
Simple Variable Values
nickname = "gugod";answer = 42;
alert(nickname);alert(answer);
貌似全域變數
![Page 18: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/18.jpg)
Handlino http://handlino.com/
變數領域var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
![Page 19: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/19.jpg)
Handlino http://handlino.com/
變數領域var nickname = "gugod";function test1() { var nickname = 610;}function test1() { var nickname = 5566;}
![Page 20: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/20.jpg)
Handlino http://handlino.com/
全域變數
• 不是宣告在 function 裡面的
• 沒有事先宣告的
• 名稱為 “window.XXX” 型式的
![Page 21: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/21.jpg)
Handlino http://handlino.com/
全域變數var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
![Page 22: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/22.jpg)
Handlino http://handlino.com/
全域變數var nickname = "gugod";function test1() { nickname = 610;}function test2() { nickname = 5566;}
全域變數
![Page 23: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/23.jpg)
Handlino http://handlino.com/
全域變數function test1() { nickname = 610;}function test2() { var n = window.nickname;}
610
![Page 24: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/24.jpg)
Handlino http://handlino.com/
if-else
if (<expression>) { ...}else { ...}
![Page 25: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/25.jpg)
Handlino http://handlino.com/
if-else
if (<expression>) { ...}
![Page 26: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/26.jpg)
Handlino http://handlino.com/
if-elseif (<expression>) { ...}else if (<expression>){ ...}else if (<expression>){ ...}else { ...}
![Page 27: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/27.jpg)
Handlino http://handlino.com/
Expressionsa == ba != ba >= ba <= ba > ba < ba && ba || ba
![Page 28: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/28.jpg)
Handlino http://handlino.com/
if-else
if (10 < a && a < 42) { ...}
![Page 29: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/29.jpg)
Handlino http://handlino.com/
if-else
// 10 < a < 42if (10 < a && a < 42) { ...}
![Page 30: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/30.jpg)
Handlino http://handlino.com/
if-else
// 10 < a < 42if (10 < a && a < 42) { ...}
程式碼註解
![Page 31: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/31.jpg)
Handlino http://handlino.com/
if-else// 10 < a < 42if (10 < a && a < 42) { ...}// 42 ~ 50else if (a >= 42 && a <= 50) { ...}// ? ~ 10else { ...}
![Page 33: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/33.jpg)
Handlino http://handlino.com/
Function
function hello() { alert("hello");}
![Page 34: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/34.jpg)
Handlino http://handlino.com/
Function
var hello = function() { alert("hello");}
![Page 37: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/37.jpg)
Handlino http://handlino.com/
Function w/ Argument
function hello(x) { alert("hello " + x);}
![Page 41: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/41.jpg)
Handlino http://handlino.com/
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);}
![Page 42: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/42.jpg)
Handlino http://handlino.com/
Function 傳回值
function add3(a) { return a + 3;}
![Page 43: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/43.jpg)
Handlino http://handlino.com/
Function 傳回值
function add3(a) { return a + 3;}
![Page 45: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/45.jpg)
Handlino http://handlino.com/
• Browser User Input
• prompt()
• DOM (HTML)
• Ajax
• iframe, XMLHttpRequest, JSONRequest, JSONP, ...
![Page 46: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/46.jpg)
Handlino http://handlino.com/
var a = prompt("Give me money:");
alert(a);
prompt
![Page 47: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/47.jpg)
Handlino http://handlino.com/
prompt
• Good
• Easy
• Built-in
• Bad
• No way to customize style
• One variable at a time
![Page 48: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/48.jpg)
Handlino http://handlino.com/
DOM<html><body><span id="nickname">gugod</span><script type="text/javascript">
// Code...
</script></body></html>
![Page 49: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/49.jpg)
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
![Page 50: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/50.jpg)
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
![Page 51: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/51.jpg)
Handlino http://handlino.com/
<html><body><span id="nickname">gugod</span><script type="text/javascript">
var nickname = document.getElementById("nickname") .childNodes[0] .nodeValue;
alert(nickname);
</script></body></html>
![Page 52: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/52.jpg)
Handlino http://handlino.com/
<head> <script type="text/javascript" src="jquery.min.js"></script></head>
Add jQuery
![Page 53: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/53.jpg)
Handlino http://handlino.com/
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>
![Page 54: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/54.jpg)
Handlino http://handlino.com/
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>
![Page 55: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/55.jpg)
Handlino http://handlino.com/
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>
![Page 57: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/57.jpg)
Handlino http://handlino.com/
• Browser Built-in
• alert()
• DOM
• Ajax
• HTTP POST
![Page 58: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/58.jpg)
Handlino http://handlino.com/
<span id="output"></span>
<script type="text/javascript">
var message = "Hello, world";
$("#output").text(message);
</script>
DOM
![Page 59: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/59.jpg)
Handlino http://handlino.com/
Input + Output
<span id="output"></span><script type="text/javascript">
var message = "Hello, " + prompt("Your name is: ");
$("#output").text(message);
</script>
![Page 66: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/66.jpg)
Handlino http://handlino.com/
query1, query2 { property1: value1; property2: value2; property3: value3;}
![Page 67: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/67.jpg)
Handlino http://handlino.com/
h1, h2 { font-family: Helvectica; color: #555; border-bottom: 1px solid #aaa;}
![Page 68: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/68.jpg)
Handlino http://handlino.com/
h1, h2 { font-family: Helvectica; color: #555; border-bottom: 1px solid #aaa;}h1 { font-size: 2em; }h2 { font-size: 1.5em; }
![Page 70: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/70.jpg)
Handlino http://handlino.com/
選元素
• tagname
• #id
• .class
• tag[attr=value]
• h1, h2, div
• <div id=”nav”>
• <h1 class=”title”>
• <input name=”nick”>
![Page 71: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/71.jpg)
Handlino http://handlino.com/
jQuery 選元素
• $(“h1”)
• $(“#id”)
• $(“.class”)
• $(“input[name=nick]”)
![Page 73: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/73.jpg)
Handlino http://handlino.com/
jQuery 選元素
• jQuery(“h1”)
• jQuery(“#id”)
• jQuery(“.class”)
• jQuery(“input[name=nick]”)
![Page 74: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/74.jpg)
Handlino http://handlino.com/
jQuery 選元素
• $(“h1”)
• $(“#id”)
• $(“.class”)
• $(“input[name=nick]”)
![Page 76: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/76.jpg)
Handlino http://handlino.com/
function $(query) { var elements = <magic>; return elements;}
![Page 77: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/77.jpg)
Handlino http://handlino.com/
試玩 jQuery
• Grab jQuerify: http://is.gd/aab6
• Visit google.com
• Click jQuerify
• Click js shell
![Page 78: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/78.jpg)
Handlino http://handlino.com/
Let’s play some jQuery
$("input").size();$("input[name=q]").val("Taipei");$("input[name=btnI]").click();
![Page 79: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/79.jpg)
Handlino http://handlino.com/
Let’s play some jQuery
$("input").hide();$("input").show("slow");$("input").css({ "background": "red" });
![Page 80: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/80.jpg)
Handlino http://handlino.com/
jQuery collections
• $() 會傳回 jQuery collection,「一群元素」
• 可以對其呼叫各種方法,同時操作這群元素
![Page 81: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/81.jpg)
Handlino http://handlino.com/
操作一群元素
$("div.section").addClass("highlight");
$("img.photo").attr("src", "img/hi.png");
$("a.foo").html("<em>Click me</em>");
$("p:odd").css("background","#ccc");
![Page 82: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/82.jpg)
Handlino http://handlino.com/
取得各種值
var height = $("div#first").height();
var img_src = $("img.photo").attr("src");
var lastP = $("p:last").html();
![Page 83: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/83.jpg)
Handlino http://handlino.com/
Other topics
• DOM Traversal
• Browser Events
• Ajax
• Plugins
• Effects
• UI
![Page 85: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/85.jpg)
Handlino http://handlino.com/
jQuery hide
<div id="hello">Hello</div><script type="text/javascript">
$("#hello").hide('slow');
</script>
![Page 86: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/86.jpg)
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideDown();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31889
![Page 87: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/87.jpg)
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideToggle();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31892
![Page 88: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/88.jpg)
Handlino http://handlino.com/
Show on click
<script type="text/javascript">$("#hi").click(function() { $("#hello").slideToggle();});</script>
#hello { display: none }
<a href="#" id="hi">Hi</a><div id="hello">Hello</div>HTML
CSS
Javascript
http://gist.github.com/31892
![Page 89: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/89.jpg)
Handlino http://handlino.com/
More Info
• http://jquery.com/
• http://visualjquery.com/
![Page 90: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/90.jpg)
Handlino http://handlino.com/
作業
• 試寫一 BMI 計算機。輸入身高 (cm) 與體重 (kg),並顯示出 BMI
• BMI = 體重 / 身高2
公尺
![Page 92: Javascript Tutorial](https://reader031.fdocuments.us/reader031/viewer/2022020217/5486c507b4af9f374c8b45fc/html5/thumbnails/92.jpg)
Handlino http://handlino.com/
解答
http://gist.github.com/31899