中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript...
description
Transcript of 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript...
![Page 2: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/2.jpg)
什麼是 JavaScript? JS Basic JS Object
2
![Page 3: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/3.jpg)
Not Java. Interpreted language.Enhance the interaction between
web page and user.Free!
3
![Page 4: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/4.jpg)
HTML
4
![Page 5: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/5.jpg)
<html><head>
…information about web apge…
</head> <body>
…content of the web page…
</body> </html>
5
![Page 6: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/6.jpg)
Where to
Variable and data type
Logic
Popup box
Functions
Event
6
![Page 7: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/7.jpg)
in <body> demo
in <head> demo
in external files demo
7
![Page 8: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/8.jpg)
VariableData type
8
![Page 9: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/9.jpg)
var theName;
Case sensitiveBegin with a letter or the underscore
character
9
![Page 10: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/10.jpg)
Primitive Numbers Strings Boolean
composite datatype Function Object
10
![Page 11: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/11.jpg)
var theName; theName = 1900;
var myName = “Lemon Nineteen Hundred”;
var fullName = “Danny” + myName;
demo11
![Page 12: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/12.jpg)
OperatorsComparisons if...elseswitchLoop
12
![Page 13: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/13.jpg)
+ - * / %demo
13
![Page 14: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/14.jpg)
== !=><>=<=
14
![Page 15: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/15.jpg)
if( condition ){
code to be executed if condition is true.}
demo
15
![Page 16: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/16.jpg)
if( condition ){
code to be executed if condition is true.}else{
code to be executed if condition is false.}
16
![Page 17: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/17.jpg)
if( condition A){
… code A …}else if( condition B){
… code B …}else{
… code C …}
17
![Page 18: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/18.jpg)
switch( variable ){
case A:… code A…
break;case B:
… code B … break;
default: … code C …}
demo18
![Page 19: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/19.jpg)
When you need to do some thing again and again and again and…..
for loopwhile loop
19
![Page 20: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/20.jpg)
for(initial a counter ; condition ; increment a counter){
…code…}
demo
20
![Page 21: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/21.jpg)
while( condition ){
…code…}
demo
21
![Page 22: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/22.jpg)
Alert BoxConfirm BoxPrompt Box
22
![Page 23: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/23.jpg)
alert("text");demo
23
![Page 24: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/24.jpg)
Confirm(“text");
return true or false
demo
24
![Page 25: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/25.jpg)
prompt("text“ , "default value");
return the input value or null
demo
25
![Page 26: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/26.jpg)
A block of code for certain function reuseclearer JavaScript function list
demo
26
![Page 27: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/27.jpg)
function name( parameter1, parameter2,…){
…code block…
return value;}
27
![Page 28: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/28.jpg)
Movement can be detected by JavaScript
onclick onfocus onblur onmousemove
Event Attributes
demo28
![Page 29: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/29.jpg)
BMI 計算器 BMI 算法:體重 (kg) / 身高 (m) 的平方
Hint : promt(“text”,”default text”);
29
![Page 30: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/30.jpg)
ArrayDateMath
30
![Page 31: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/31.jpg)
store multiple values in a single variable Properties
length Methods
concat() pop() push() shift() unshift() reverse() sort() splice()
demo
31
![Page 32: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/32.jpg)
Methods Set
setDate() setFullYear() setHours() setMinutes() setMonth() setSeconds()
Get demo
32
![Page 33: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/33.jpg)
Properties (Math constant) PI LN10 E
Methods abs(x) round(x) , ceil(x) , floor(x) max(x,y,z,...,n) , min(x,y,z,...,n) random()
demo
33
![Page 34: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/34.jpg)
樂透號碼產生器 規則 : 從 1~49 號中選 7 個數字 將選出來的數字排序後顯示在螢幕上
34
![Page 35: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/35.jpg)
http://www.w3schools.com/js/default.asp
JavaScript: The Definitive Guide 5th Edition - O'Reilly Media By David Flanagan
Learning Javascript 2nd Edition - O'Reilly Media By Shelley Powers
35
![Page 36: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/36.jpg)
36
![Page 37: 中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -](https://reader033.fdocuments.net/reader033/viewer/2022061612/56815141550346895dbf5fc4/html5/thumbnails/37.jpg)
37