Java Script 網頁程式應用

Transcript Java Script 網頁程式應用

資訊工程學系 3A
彭博涵
[email protected]
2011/03/26
1



什麼是JavaScript?
JS Basic
JS Object
2




Not Java.
Interpreted language.
Enhance the interaction between web page
and user.
Free!
3

HTML
4

<html>
<head>
…information about web apge…
</head>
<body>
…content of the web page…
</body>
</html>
5

Where to

Variable and data type

Logic

Popup box

Functions

Event
6

in <body>
 demo

in <head>
 demo

in external files
 demo
7


Variable
Data type
8

var theName;

Case sensitive
Begin with a letter or the underscore
character

9

Primitive
 Numbers
 Strings
 Boolean

composite datatype
 Function
 Object
10

var theName;
theName = 1900;

var myName = “Lemon Nineteen Hundred”;

var fullName = “Danny” + myName;

demo

11





Operators
Comparisons
if...else
switch
Loop
12






+
*
/
%
demo
13






==
!=
>
<
>=
<=
14

if( condition )
{
code to be executed if condition is true.
}

demo
15

if( condition )
{
code to be executed if condition is true.
}
else
{
code to be executed if condition is false.
}
16

if( condition A)
{
… code A …
}
else if( condition B)
{
… code B …
}
else
{
… code C …
}
17


switch( variable )
{
case A:
… code A…
break;
case B:
… code B …
break;
default:
… code C …
}
demo
18

When you need to do some thing again and
again and again and…..

for loop
while loop

19

for(initial a counter ; condition ; increment a counter)
{
…code…

}
demo
20


while( condition )
{
…code…
}
demo
21



Alert Box
Confirm Box
Prompt Box
22


alert("text");
demo
23

Confirm(“text");

return true or false

demo
24

prompt("text“ , "default value");

return the input value or null

demo
25

A block of code for certain function
reuse
clearer
JavaScript function list

demo



26

function name( parameter1, parameter2,…)
{
…code block…
return value;
}
27

Movement can be detected by JavaScript




onclick
onfocus
onblur
onmousemove

Event Attributes

demo
28

BMI計算器
 BMI算法：體重(kg) / 身高(m)的平方

Hint : promt(“text”,”default text”);
29



Array
Date
Math
30


store multiple values in a single variable
Properties
 length

Methods









concat()
pop()
push()
shift()
unshift()
reverse()
sort()
splice()
demo
31


Methods
Set








setDate()
setFullYear()
setHours()
setMinutes()
setMonth()
setSeconds()
Get
demo
32

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

樂透號碼產生器
 規則: 從1~49號中選7個數字
 將選出來的數字排序後顯示在螢幕上
34


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
36
37

Java Script 網頁程式應用

Transcript Java Script 網頁程式應用

Directory