Bài Giảng Lập Trình Web -Chương 5: Javascript doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.15 MB, 20 trang )
Trình bày: Nguyễn Phú Trường
NộI DUNG
Bộ môn Mạng máy tính & Truyền thông
21/5/2011
Giới thiệu về JavaScript
Biến, kiểu dữ liệu, phép toán
Lệnh điều khiển
Popup
Sử dụng các đối tượng
NộI DUNG
Bộ môn Mạng máy tính & Truyền thông
31/5/2011
Gi
Gi
ớ
ớ
i thi
i thi
ệ
ệ
u v
u v
ề
ề
JavaScript
JavaScript
Biến, kiểu dữ liệu, phép toán
Lệnh điều khiển
Popup
Sử dụng các đối tượng
JAVASCRIPT LÀ GÌ?
Bộ môn Mạng máy tính & Truyền thông
41/5/2011
1
Được thiết kế cùng
với HTML tạo
trang Web sinh
động
Là ngôn ngữ
script, hướng đối
tượng, chứa các
dòng lệnh thực thi
được
2
Được viết trực tiếp
vào trang HTML
Là ngôn ngữ
thông dịch
3
Khác với Java
JAVASCRIPT DÙNG ĐỂ LÀM GÌ?
51/5/2011
Bộ môn Mạng máy tính & Truyền thông
Kiểm tra
dữ liệu
trước
khi
submit
Cung
cấp
thông
tin về
browser
Đọc,
viết phần
tử /nội
dung
trang
HTML
Tạo
cookie
Viết
trang
HTML
sinh
động
Bắt và
xử lý
các sự
kiện
Xuất
động
trang
HTML
VÍ Dụ 1 Về JAVASCRIPT
1/5/2011 6
Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 2 Về JAVASCRIPT
1/5/2011 7
Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 3 Về JAVASCRIPT
1/5/2011 8
Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 4 Về JAVASCRIPT
1/5/2011 9
Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 5 Về JAVASCRIPT
1/5/2011 10
Bộ môn Mạng máy tính & Truyền thông
BIẾN
111/5/2011
Bộ môn Mạng máy tính & Truyền thông
Đặc điểm
Đặc điểm
Khai báo
Khai báo
Gán trị
Gán trị
zChứa dữ liệu
zPhân biệt hoa và
thường
zPhạm vi:
Toàn cục
Cục bộ
• var strname =
some value
Hoặc
• strname = some
value
• var strname
= "Hege"
Hoặc
• strname =
"Hege"
VÍ Dụ
1/5/2011 12
Bộ môn Mạng máy tính & Truyền thông
KIểU Dữ LIệU
Kiểu dữ liệu
z Số nguyên : 10, -301, 1974, etc.
z Số thực và số chấm động : 13.5, 1.35E1
z Luận lý : true, false
z Chuỗi : “do thanh nghi”, “sinh nam 1974”, \b, \n, \r, \t, \\
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
document.write(quote)
Kết quả sẽ là :
He read "The Cremation of Sam McGee" by R.W. Service.
1/5/2011 13
Bộ môn Mạng máy tính & Truyền thông
KIểU Dữ LIệU
Kiểu dữ liệu
z Mảng :
myArray = new Array(10); foo = new Array(5);
myArray[0] = 56; myArray[9] = 44;
colors = new Array();
colors[99] = "midnightblue";
numberOfElements = myArray.length;
1/5/2011 14
Bộ môn Mạng máy tính & Truyền thông
KIểU Dữ LIệU
Kiểu dữ liệu
z Đối tượng :
1/5/2011 15
Bộ môn Mạng máy tính & Truyền thông
CHUYểN KIểU Dữ LIệU
Kiểu dữ liệu
z Được chuyển tự động :
var answer = 42
answer = "Thanks for all the fish "
x = "The answer is " + 42
z Chuyển chuỗi sang số : ParseInt(), ParseFloat()
1/5/2011 16
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
Phép toán
z Gán : =
z Phép tăng hoặc giảm 1 : ++,
z Gán rút gọn : +=, -=, *=, /=, %=
z So sánh : ==, !=, <, <=, >, >=
z Phép tính số học : +, -, *, /, %
z Phép toán luận lý : &&, ||, !,
z Phép : (cond) ? Expr1:Expr2
1/5/2011 17
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
1/5/2011 18
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
1/5/2011 19
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
1/5/2011 20
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
1/5/2011 21
Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN
1/5/2011 22
Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM
Định nghĩa
function functionname(var1,var2, ,varX)
{
some code
}
1/5/2011 23
Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM
Ví dụ
function total(a,b)
{
x=a*b
return x
}
product=total(2,3)
1/5/2011 24
Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM
Ví dụ
<html> <head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head><body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>
1/5/2011 25
Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM
1/5/2011 26
Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM
1/5/2011 27
Bộ môn Mạng máy tính & Truyền thông
NộI DUNG
Bộ môn Mạng máy tính & Truyền thông
281/5/2011
Giới thiệu về JavaScript
Biến, kiểu dữ liệu, phép toán
L
L
ệ
ệ
nh đi
nh đi
ề
ề
u khi
u khi
ể
ể
n
n
Popup
Sử dụng các đối tượng
CấU TRÚC IF-ELSE
Cú pháp
if (condition) {
statements1
}
Hay
if (condition) {
statements1
}
else {
statements2
}
1/5/2011 29
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC IF-ELSE
1/5/2011 30
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC IF-ELSE
1/5/2011 31
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC SWITCH-CASE
Cú pháp
switch(n) {
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
execute code block n
}
1/5/2011 32
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC SWITCH-CASE
Ví dụ
<script type="text/javascript">
theDay=d.getDay()
switch (theDay) {
case 5:
document.write("Finally Friday")
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break
default:
document.write("I'm looking forward to this weekend!")
}
</script>
1/5/2011 33
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC SWITCH-CASE
1/5/2011 34
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC LặP FOR
Cú pháp
for (initial-expression; condition; increment-expression) {
statements
}
Ví dụ:
var n = 0;
for (var i = 0; i < 3; i++) {
n += i;
alert("The value of n is now " + n);
}
1/5/2011 35
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC LặP FOR
1/5/2011 36
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC LặP FOR
1/5/2011 37
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC WHILE, DO-WHILE
Cú pháp
while (var<=endvalue)
{
code to be executed
}
do
{
code to be executed
}
while (var<=endvalue)
1/5/2011 38
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC WHILE, DO-WHILE
1/5/2011 39
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC WHILE, DO-WHILE
Ví dụ
<html>
<body>
<script type="text/javascript">
var i=0
do {
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>
1/5/2011 40
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC WHILE, DO-WHILE
1/5/2011 41
Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC WHILE, DO-WHILE
1/5/2011 42
Bộ môn Mạng máy tính & Truyền thông
BREAK TRONG CấU TRÚC LặP
1/5/2011 43
Bộ môn Mạng máy tính & Truyền thông
CONTINUE TRONG CấU TRÚC LặP
1/5/2011 44
Bộ môn Mạng máy tính & Truyền thông
NộI DUNG
Bộ môn Mạng máy tính & Truyền thông
451/5/2011
Giới thiệu về JavaScript
Biến, kiểu dữ liệu, phép toán
Lệnh điều khiển
Popup
Popup
Sử dụng các đối tượng
ALERT("SOMETEXT")
1/5/2011 46
Bộ môn Mạng máy tính & Truyền thông
CONFIRM("SOMETEXT")
1/5/2011 47
Bộ môn Mạng máy tính & Truyền thông
PROMPT("SOMETEXT","DEFAULTVALUE")
1/5/2011 48
Bộ môn Mạng máy tính & Truyền thông
KếT HợP VớI FORM
1/5/2011 49
Bộ môn Mạng máy tính & Truyền thông
KếT HợP VớI FORM
1/5/2011 50
Bộ môn Mạng máy tính & Truyền thông
NộI DUNG
Bộ môn Mạng máy tính & Truyền thông
511/5/2011
Giới thiệu về JavaScript
Biến, kiểu dữ liệu, phép toán
Lệnh điều khiển
Popup
Sử dụng các đối tượng
ĐốI TƯợNG
Các đối tượng
z String
z Date
z Array
z Boolean
z Math
z HTML DOM
1/5/2011 52
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG STRING
1/5/2011 53
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG STRING
1/5/2011 54
Bộ môn Mạng máy tính & Truyền thông
ĐốITƯợNG STRING
Ví dụ
var txt="Hello world!"
document.write(txt.length)
document.write(txt.toUpperCase())
document.write(txt.substring(4, 8))
document.write(txt.small())
document.write(txt.strike())
document.write(txt.charAt(8))
1/5/2011 55
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
1/5/2011 56
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
1/5/2011 57
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
1/5/2011 58
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
1/5/2011 59
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
Ví dụ
var myDate=new Date()
myDate.setFullYear(2010,0,14)
myDate.setDate(myDate.getDate()+5)
myDate.setFullYear(2010,0,14)
var today = new Date()
if (myDate>today)
alert("Today is before 14th January 2010")
else
alert("Today is after 14th January 2010")
1/5/2011 60
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY
1/5/2011 61
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY
Ví dụ:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW“
var mycars=new Array("Saab","Volvo","BMW")
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
1/5/2011 62
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY
Ví dụ
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
document.write(arr.concat(arr2))
1/5/2011 63
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY
Ví dụ
var arr = new Array(6)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
arr[5] = "Tove"
document.write(arr + "<br />")
document.write(arr.sort())
1/5/2011 64
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG BOOLEAN
1/5/2011 65
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG BOOLEAN
Ví dụ
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")
1/5/2011 66
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH
1/5/2011 67
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH
1/5/2011 68
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH
1/5/2011 69
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH
Ví dụ
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
document.write(Math.round(4.7))
document.write(Math.random())
document.write(Math.floor(Math.random()*11))
document.write(Math.round(-4.60))
1/5/2011 70
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG HTML DOM
1/5/2011 71
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG HTML DOM
1/5/2011 72
Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG HTML DOM
1/5/2011 73
Bộ môn Mạng máy tính & Truyền thông
Bài tậpápdụng JavaScript
1. Viếtchương trình hiểnthị ngày và giờ của máy tính.
2. Viếtchương trình yêu cầungười dùng nhậpvàoTênvàTuổi. Khi người
dùng nhậpthiếumộttronghaigiátrị trên thì hiện ra thông báo yêu “ Vui
long nhap day du thong tin”. Khi người dùng đãnhập đầy đủ thông tin thì:
1. Nếungườidùngnhỏ hơn18 tuổithìxuất ra màn hình thông báo “Co len ban
nhe!!!”
2. Ngược lai xuất ra thông báo “Tu tin vao chinh minh!!!”.
3. Thiếtkế một trang HTML (nhapthongtin.html) cho phép người dùng nhập
thông tin: họ tên, địachỉ, email,…. Sau khi người dùng nhập đầy đủ thông
tin, hãy hiểnthị tấtcả thông tin củangười dùng vừanhập sang 1 trang
HTML khác (xuatthongtin.html). Chú ý: kiểmtradữ liệungười dùng nhập
đầy đủ, chính xác; nếungười dùng nhậpthiếugiátrị nào đóhoặc địachỉ
email không hợplệ thì hiểnthị thông báo yêu cầunhậplại.
