Xem mẫu
- Chương VI: JavaScript
Gi i thi u ngôn ng Script
Gi
Nh p môn JavaScript
Nh
Cú pháp và quy ư c
Cú
Bi n, d li u và các l nh
Bi
Hàm, l p ñ i tư ng, s ki n
Hàm,
Các ñ i tư ng thông d ng
Các
Thi t k web Khoa CNTT-LHU 1
Gi i thi u ngôn ng Script
Là ngôn ng d ng thông d ch
Cho phép Web tương tác v i ngư i dùng
Các ngôn ng script thông d ng
– Javascript (Netscape)
– Jscript (Microsoft)
– VBScript (Microsoft)
– PHP, CGI,…
Thi t k web Khoa CNTT-LHU 2
1
- ng d ng Script
ng
Client-Side
– Th c hi n t i Browser (IE, Firefox, Nescape Navigator, Safari,
...)
– Th c hi n các tương tác v i ngư i dùng, thay ñ i c u trúc trang
web, ki m tra d li u ñư c nh p vào c a ngư i dùng, …)
Server-Side
– Th c hi n t i WebServer (IIS, Apache, Netscape Enterprise
Server, ….)
– Script t i Server-Side cho phép k t n i CSDL, chia s thông tin
gi a các ngư i duy t web, truy c p h th ng file trên server, …
Thi t k web Khoa CNTT-LHU 3
JavaScript
Web ñ ng -> Netscape -> Script Language: LiveScript =>
JavaScript
JavaScript là ngôn ng dư i d ng script có th g n v i các file
HTML và dùng thông d ch (interpreter)
JavaScript là ngôn ng d a trên ñ i tư ng: math, document,
windows,…
JavaScript không ph i là ngôn ng hư ng ñ i tư ng như C++,
Java,…
Thi t k ñ c l p v i h ñi u hành
Thi t k web Khoa CNTT-LHU 4
2
- Nh p môn JavaScript (1)
Nhúng JavaScript vào file HTML :
– S d ng các câu l nh và các hàm trong c p th
...
– S d ng các file ngu n JavaScript
– S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTML
– S d ng th s ki n (event handlers) trong m t th HTML nào ñó?
ð t gi a tag và : ño n script s th c thi ngay
khi trang web ñư c m .
ð t gi a tag và : ðo n script trong ph n
body ñư c th c thi khi trang web ñang m (sau khi th c thi các
ño n script có trong ph n ).
S lư ng ño n script không h n ch .
Thi t k web Khoa CNTT-LHU 5
Nh p môn JavaScript (2)
Sö dông thÎ ...
// INSERT ALL JavaScript HERE
Èn c¸c Script ®èi víi c¸c webbrowser kh«ng support script
Ghi chó trong JavaScript gièng trong C++
Thi t k web Khoa CNTT-LHU 6
3
- Nh p môn JavaScript (3)
VÝ dô trang web ®Çu tiªn víi JavaScript
New Page 1
document.write("Xin chao ban");
Thi t k web Khoa CNTT-LHU 7
Nh p môn JavaScript (4)
Sö dông c¸c file nguån JavaScript
Có ph¸p:
....
Trong file “6_1.htm”
Trong file “general.js”
- Nh p môn JavaScript (5)
ThÎ …
Trang nµy kh«ng sö dông JavaScript. Do ®ã b¹n cÇn sö dông
browser Netscape Navigator tõ version 2.0 trë ®i!
H·y kÝch chuét vµo ®©y ®Ó load vÒ Netscape míi h¬n
NÕu b¹n ®· sö dông Netscape tõ 2.0 trë ®i mµ vÉn ®äc ®−îc dßng nµy
h·y bËt Preferences/Advanced/JavaScript lªn
Thi t k web Khoa CNTT-LHU 9
Nh p môn JavaScript (6)
C¸ch dïng ®èi t−îng:
– Gäi mét ph−¬ng thøc: ObjectName.MethodName()
HiÓn thÞ mét dßng text dïng ®èi t−îng document
– write() vµ writeln()
Ouputting Text
This text is plain.
Thi t k web Khoa CNTT-LHU 10
5
- Nh p môn JavaScript (7)
Giao tiÕp víi ng−êi sö dông
var name=window.prompt("Hello! What’s your name ?","Lung");
document.write("Hello " + name + " ! I hope you like JavaScript ");
Thi t k web Khoa CNTT-LHU 11
Nh p môn JavaScript (8)
Giao tiÕp víi ng−êi sö dông
ði n tên c a b n vào ñây ñ ki m tra:
function kiemtra(form)
{
alert("ban da bam nut kiem tra");
document.write("Tên b n là " + form.UserName.value + "");
}
Thi t k web Khoa CNTT-LHU 12
6
- Cú pháp và quy ư c
Javascript phân bi t ch hoa – ch thư ng
– Ví d : Hai bi n Java, java là khác nhau
T t c các câu l nh javascript ñ u cách nhau b i d u “;”
Không phân bi t kho ng tr ng, Tab, xu ng dòng trong câu
l nh.
Chu i trong javascript ñư c ñ t trong c p nháy ñơn (‘ ’) ho c
nháy kép (“ ”)
– Ví d :
Thi t k web Khoa CNTT-LHU 13
Cú pháp và quy ư c - Special Characters
Special Characters “\”
– \n New line - \r Carriage return
– \t Tab - \b : Backspace
VD: "one line \n another line"
Escaping Characters
– \’ : D u nháy ñơn - \” : D u nháy kép
VD:
– var quote = "He read \"The Cremation of Sam McGee\" by R.W.
Service."
document.write(quote)
– var home = "c:\\temp"
Thi t k web Khoa CNTT-LHU 14
7
- Cú pháp và quy ư c
Các lo i d u ngo c:
– { } : ðánh d u kh i l nh
– [ ] : S d ng trong c u trúc M ng
– ( ) : S d ng trong hàm, thu c tính ñ i tư ng
Tên bi n và hàm:
– B t ñ u b ng Ký t (A..Z, a..z), _, $
– Không ñư c b t d u b ng ký s (0..9)
– Không có kho ng tr ng gi a tên (bi n ho c hàm)
– Không ñư c ñ t tên trùng t khóa
VD:
– X1, _bien10, $sotien
– 0_bien1, bien 2, do, …: sai
Thi t k web Khoa CNTT-LHU 15
Danh sách t khóa
Thi t k web Khoa CNTT-LHU 16
8
- BiÕn trong JavaScript (1)
BiÕn vµ ph©n lo¹i biÕn
– BiÕn toµn côc
– BiÕn côc bé
KiÓu d÷ liÖu: ng«n ng÷ cã tÝnh ®Þnh kiÓu thÊp
var ten;
var fruit='apples'; // gán giá tr cho bi n
ten = “tôi là 04ct”;
numfruit=12; // không ñ nh nghĩa var
// vi t giá tr c a bi n ra IE
numfruit = numfruit + 20 + " " + fruit;
document.write(ten);
var temp ="There are " + numfruit ;
// gán giá tr cho bi n
document.write(temp);
ten = 1000;
// vi t giá tr c a bi n ra IE
document.write(ten);
Thi t k web Khoa CNTT-LHU 17
BiÕn trong JavaScript (2)
KiÓu d÷ liÖu:
– kiÓu sè nguyªn:
• HÖ c¬ sè 10: b¾t ®Çu b»ng sè # 0: 5356
• HÖ c¬ sè 8: b¾t ®Çu b»ng sè 0: 0453
• HÖ c¬ sè 16: b¾t ®Çu b»ng 0x: 0xF12
– kiÓu dÊu phÈy ®éng:
• 9.87
• -0.85E4
• 9.87E14
• .98E-3
– kiÓu logic: true hoÆc false
– kiÓu chuçi: “day la mot chuoi” hoac ‘day cung la mot string’
Thi t k web Khoa CNTT-LHU 18
9
- Các ki u d li u
Thi t k web Khoa CNTT-LHU 19
Bi u th c trong JavaScript
C¸c biÓu thøc trong JavaScript gÇn gièng víi C++
VÝ dô c¸c biÓu thøc trong JavaScript:
a. 7 + 5 f. (7 < 5) ? 7 : 5
b. "7" + "5" g. (7 >= 5) && (5 > 5)
c. 7 == 7 h. (7 >= 5) || (5 > 5)
d. 7 >= 5
e. 7
- Data Type Conversion
var answer = 42
Sau ñó có th gán:
answer = "Thanks for all the fish...“
x = "The answer is " + 42 // returns "The answer is 42"
y = 42 + " is the answer" // returns "42 is the answer"
"37" - 7 // returns 30
"37" + 7 // returns 377
unassigned variables
function f2() {
function f1() {
return var y - 2;
return y - 2;
}
}
f2() //returns NaN
f1() //Causes runtime error
Thi t k web Khoa CNTT-LHU 21
Các l nh trong JavaScript (1)
Bitwise Operators
Operator Usage
Bitwise AND a&b
Bitwise OR a|b
15 & 9 (1111 & 1001 = 1001)
Bitwise XOR a^b 15 | 9 (1111 | 1001 = 1111)
15 ^ 9 (1111 ^ 1001 = 0110)
Bitwise NOT ~a
Left shift a > b
Zero-fill right shift a >>> b
Thi t k web Khoa CNTT-LHU 22
11
- C¸c lÖnh trong JavaScript (2)
Logical Operators
Operator Usage
&& expr1 && expr2
|| expr1 || expr2
! !expr
conditional operator
– condition ? val1 : val2
status = (age >= 18) ? "adult" : "minor“
typeof
1. typeof operand
2. typeof (operand)
Thi t k web Khoa CNTT-LHU 23
C¸c lÖnh trong JavaScript (3)
C¸c lÖnh ®iÒu kiÖn, vßng lÆp
switch (expression){
– if ... Else
case label : statement;
– for loop break;
– while loop default : statement;}
Break, continue
–
C¸c c©u lÖnh thao t¸c trªn ®èi t−îng
– for ( in )
document.write("The properties of the Window object are: ");
for (var x in window)
document.write(" "+ x + ", ");
Thi t k web Khoa CNTT-LHU 24
12
- C¸c lÖnh trong JavaScript (4)
new
Có ph¸p
objectvar = new object_type ( param1 [,param2]... [,paramN])
With
with (object)
{
// statement
}
with (document){
write(“This is an example of the things that can be done ”);
write(“With the with statment. ”);
write(“This can really save some typing”);
}
Thi t k web Khoa CNTT-LHU 25
C¸c lÖnh trong JavaScript (5)
VÝ dô phÐp to¸n new:
function Nguoi(first_name, last_name, age, gt)
{
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.gt=gt;
}
Nguoi1= new Nguoi("Thuy", "Dau Bich", "20", "Female");
Nguoi2= new Nguoi("Nang", "Nguyen Duc", "22", "Male");
document.write ("1. "+Nguoi1.last_name+" " + Nguoi1.first_name + "" );
document.write("2. "+Nguoi2.last_name +" "+ Nguoi2.first_name + "");
Thi t k web Khoa CNTT-LHU 26
13
- C¸c lÖnh trong JavaScript (6)
C¸c hµm cã s½n
– eval: retvar=eval (bÊt kú biÓu thøc hîp lÖ trong Java)
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
– parseInt(string, c¬ sè)
– parseFloat(string)
var x1="12";
var x3;
x3=parseInt(x1,4); //x3=?
x3=parseInt(x1,6); // x3=?
Thi t k web Khoa CNTT-LHU 27
C¸c lÖnh trong JavaScript (7)
M¶ng (Array)
– myArray = new InitArray (10)
• myArray[1] = "NghÖ An"
• myArray[2] = "Lµo"
function InitArray(numElements)
{
this.length = numElements;
for (var x=1; x
- Javascript - Hàm
Cú pháp khai báo:
function Tên_hàm(thamso1, thamso2,..)
{
// N i dung hàm
}
Hàm tr v giá tr :
function Tên_hàm(thamso1, thamso2,..)
{
// N i dung hàm
return (value);
}
Thi t k web Khoa CNTT-LHU 29
Ví d hàm
ð nh nghĩa hàm:
function Sum(x, y)
{
tong = x + y;
return tong;
}
G i hàm:
var x = Sum(30, 40);
Thi t k web Khoa CNTT-LHU 30
15
- L p ñ i tư ng
Khai Khai báo l p:
function Tên_l p()
{
//Khai Khai báo bi n thành viên
this.bien1 = value1;
this.bien2 = value2;
}
ð nh nghĩa hàm thành viên c a l p:
Tên_L p.prototype.Tên_phươngth c = function(…)
{
……
//return value;
}
Thi t k web Khoa CNTT-LHU 31
Ví d l p
Thi t k web Khoa CNTT-LHU 32
16
- K th a l p ñ i tư ng
Thi t k web Khoa CNTT-LHU 33
K th a l p ñ i tư ng
Thi t k web Khoa CNTT-LHU 34
17
- Sù kiÖn - Event (1)
Event handler :
–
–
function kiemtra()
{
alert("ban da bam nut kiem tra");
}
Ði n tên c a b n vào ñây:
Thi t k web Khoa CNTT-LHU 35
Sù kiÖn - Event (2)
C¸c sù kiÖn th−êng x¶y ra:
input focus bÞ xo¸ tõ thµnh phÇn form
onBlur
khi ng−êi dïng kÝch vµo c¸c thµnh phÇn hay liªn kÕt cña
onClick
form.
onChange khi gi¸ trÞ cña thµnh phÇn ®−îc chän thay ®æi
onFocus khi thµnh phÇn cña form ®−îc focus(lµm næi lªn).
onLoad trang Web ®−îc load.
onMouseOver khi di chuyÓn chuét qua kÕt nèi hay anchor.
onSelect khi ng−êi sö dông lùa chän mét tr−êng nhËp d liÖu trªn
form.
onSubmit khi ng−êi dïng ®−a ra mét form.
onUnLoad khi ng−êi dïng ®ãng mét trang
Thi t k web Khoa CNTT-LHU 36
18
- C¸c ®èi t−îng trong JavaScript
String
Number
Array
Date
Math
navigator
window
Document.
location
History
Thi t k web Khoa CNTT-LHU 37
ð i tư ng String
Thu c tính:
– length : chi u dài c a chu i
– constructor : Dùng ñ ki m tra ki u c a bi n
– prototype : B sung prototype hàm cho m t ñ i tư ng
– N i k t các chu i b ng toán t “+”
var sTenBien = new String();
sTenBien = 256;
if(sTenBien.constructor == String)
{
document.writeln("sTenBien la mot chuoi co chieu dai la:" + sTenBien.length);
}
else
{
document.writeln("sTenBien la mot so co gia tri la: " + sTenBien);
}
Thi t k web Khoa CNTT-LHU 38
19
- ð i tư ng String
s1 = "foo" //creates a string literal value
s2 = new String("foo") //creates a String object
S khác bi t:
s1 = "2 + 2" //creates a string literal value
s2 = new String("2 + 2")//creates a String object
eval(s1) //returns the number 4
eval(s2) //returns the string "2 + 2"
Phương th c
– stringObj.anchor(anchorString) – t o Bookmark
– strVariable.link(URL)
– string1.concat([string2[, string3[,... [, stringn]]]])
– toLowerCase, toUpperCase
var txt="Hello world!“
document.write(txt.length)
document.write(txt.toUpperCase())
Thi t k web Khoa CNTT-LHU 39
ð i tư ng String – Các phương th c
tư
Thi t k web Khoa CNTT-LHU 40
20
nguon tai.lieu . vn