Xem mẫu
- NộI DUNG
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
Trình bày: Nguyễn Phú Trường
1/5/2011 2 Bộ môn Mạng máy tính & Truyền thông
JAVASCRIPT LÀ GÌ?
NộI DUNG
1 2 3
Giới thiệu về JavaScript
Được thiết kế cùng Được viết trực tiếp Khác với Java
với HTML tạo vào trang HTML
Biến, kiểu dữ liệu, phép toán trang Web sinh
động
Là ngôn ngữ Là ngôn ngữ
Lệnh điều khiển script, hướng đối thông dịch
tượng, chứa các
dòng lệnh thực thi
được
Popup
Sử dụng các đối tượng
1/5/2011 3 1/5/2011 4
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- JAVASCRIPT DÙNG ĐỂ LÀM GÌ? VÍ Dụ 1 Về JAVASCRIPT
Viết Cung
trang cấp
HTML thông
tin về
sinh
browser
động
Kiểm tra
Xuất
Tạ o dữ liệu
động trước
cookie
trang khi
HTML submit
Đọc,
Bắt và viết phần
tử /nội
xử lý
dung
các sự trang
kiện HTML
1/5/2011 5 1/5/2011 6
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 2 Về JAVASCRIPT VÍ Dụ 3 Về JAVASCRIPT
1/5/2011 7 1/5/2011 8
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- VÍ Dụ 4 Về JAVASCRIPT VÍ Dụ 5 Về JAVASCRIPT
1/5/2011 9 1/5/2011 10
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
BIẾN VÍ D ụ
Đặc điiểm Khai báo Gán trịị
Đặc đ ểm Khai báo Gán tr
• var strname
var strname =
Chứa dữ liệu •
some value = "Hege"
Phân biệt hoa và
Hoặc
thường
Hoặc
• strname = some
Phạm vi:
• strname =
value
Toàn cục
"Hege"
Cục bộ
1/5/2011 11 1/5/2011 12
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- KIểU Dữ LIệU KIểU Dữ LIệU
Kiểu dữ liệu Kiểu dữ liệu
Số nguyên : 10, -301, 1974, etc. Mảng :
Số thực và số chấm động : 13.5, 1.35E1 myArray = new Array(10); foo = new Array(5);
Luận lý : true, false myArray[0] = 56; myArray[9] = 44;
Chuỗi : “do thanh nghi”, “sinh nam 1974”, \b, \n, \r, \t, \\ colors = new Array();
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." colors[99] = "midnightblue";
document.write(quote)
numberOfElements = myArray.length;
Kết quả sẽ là :
He read "The Cremation of Sam McGee" by R.W. Service.
1/5/2011 13 1/5/2011 14
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
KIểU Dữ LIệU CHUYểN KIểU Dữ LIệU
Kiểu dữ liệu Kiểu dữ liệu
Đối tượng : Được chuyển tự động :
var answer = 42
answer = "Thanks for all the fish..."
x = "The answer is " + 42
Chuyển chuỗi sang số : ParseInt(), ParseFloat()
1/5/2011 15 1/5/2011 16
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- PHÉP TOÁN
PHÉP TOÁN
Phép toán
Gán : =
Phép tăng hoặc giảm 1 : ++, --
Gán rút gọn : +=, -=, *=, /=, %=
So sánh : ==, !=, =
Phép tính số học : +, -, *, /, %
Phép toán luận lý : &&, ||, !,
Phép : (cond) ? Expr1:Expr2
1/5/2011 17 1/5/2011 18
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN PHÉP TOÁN
1/5/2011 19 1/5/2011 20
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- PHÉP TOÁN PHÉP TOÁN
1/5/2011 21 1/5/2011 22
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM ĐịNH NGHĨA HÀM
Định nghĩa Ví dụ
function functionname(var1,var2,...,varX) function total(a,b)
{ {
some code x=a*b
} return x
}
product=total(2,3)
1/5/2011 23 1/5/2011 24
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐịNH NGHĨA HÀM
ĐịNH NGHĨA HÀM
Ví dụ
function displaymessage()
{
alert("Hello World!")
}
1/5/2011 25 1/5/2011 26
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
NộI DUNG
ĐịNH NGHĨA HÀM
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
1/5/2011 27 1/5/2011 28
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- CấU TRÚC IF-ELSE
CấU TRÚC IF-ELSE
Cú pháp
if (condition) {
statements1
}
Hay
if (condition) {
statements1
}
else {
statements2
}
1/5/2011 29 1/5/2011 30
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC IF-ELSE 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 31 1/5/2011 32
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- CấU TRÚC SWITCH-CASE
CấU TRÚC SWITCH-CASE
Ví dụ
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!")
}
1/5/2011 33 1/5/2011 34
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC LặP FOR
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 1/5/2011 36
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- CấU TRÚC LặP FOR CấU TRÚC WHILE, DO-WHILE
Cú pháp
while (var
- CấU TRÚC WHILE, DO-WHILE CấU TRÚC WHILE, DO-WHILE
1/5/2011 41 1/5/2011 42
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
BREAK TRONG CấU TRÚC LặP CONTINUE TRONG CấU TRÚC LặP
1/5/2011 43 1/5/2011 44
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- NộI DUNG ALERT("SOMETEXT")
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
1/5/2011 45 1/5/2011 46
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CONFIRM("SOMETEXT") PROMPT("SOMETEXT","DEFAULTVALUE")
1/5/2011 47 1/5/2011 48
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- KếT HợP VớI FORM KếT HợP VớI FORM
1/5/2011 49 1/5/2011 50
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
NộI DUNG ĐốI TƯợNG
Các đối tượng
Giới thiệu về JavaScript String
Date
Biến, kiểu dữ liệu, phép toán Array
Boolean
Lệnh điều khiển
Math
HTML DOM
Popup
Sử dụng các đối tượng
1/5/2011 51 1/5/2011 52
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐốI TƯợNG STRING ĐốI TƯợNG STRING
1/5/2011 53 1/5/2011 54
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE
ĐốI TƯợ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 1/5/2011 56
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐốI TƯợNG DATE ĐốI TƯợNG DATE
1/5/2011 57 1/5/2011 58
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE Đố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 59 1/5/2011 60
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐốI TƯợNG ARRAY Đố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 61 1/5/2011 62
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY ĐốI TƯợNG ARRAY
Ví dụ Ví dụ
var arr = new Array(3) var arr = new Array(6)
arr[0] = "Jani" arr[0] = "Jani"
arr[1] = "Tove" arr[1] = "Hege"
arr[2] = "Hege" arr[2] = "Stale"
var arr2 = new Array(3) arr[3] = "Kai Jim"
arr2[0] = "John" arr[4] = "Borge"
arr2[1] = "Andy" arr[5] = "Tove"
arr2[2] = "Wendy" document.write(arr + "")
document.write(arr.concat(arr2)) document.write(arr.sort())
1/5/2011 63 1/5/2011 64
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐốI TƯợNG BOOLEAN Đố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 65 1/5/2011 66
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH ĐốI TƯợNG MATH
1/5/2011 67 1/5/2011 68
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
- ĐốI TƯợNG MATH Đố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 69 1/5/2011 70
Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG HTML DOM ĐốI TƯợNG HTML DOM
1/5/2011 71 1/5/2011 72
Bộ môn Mạng máy tính & Truyền thông 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 áp dụng JavaScript
1. Viết chương trình hiển thị ngày và giờ của máy tính.
2. Viết chương trình yêu cầu người dùng nhập vào Tên và Tuổi. Khi người
dùng nhập thiếu một trong hai giá 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ếu người dùng nhỏ hơn 18 tuổi thì 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ết kế một trang HTML (nhapthongtin.html) cho phép người dùng nhập
thông tin: họ tên, địa chỉ, email,…. Sau khi người dùng nhập đầy đủ thông
tin, hãy hiển thị tất cả thông tin của người dùng vừa nhập sang 1 trang
HTML khác (xuatthongtin.html). Chú ý: kiểm tra dữ liệu người dùng nhập
đầy đủ, chính xác; nếu người dùng nhập thiếu giá trị nào đó hoặc địa chỉ
email không hợp lệ thì hiển thị thông báo yêu cầu nhập lại.
nguon tai.lieu . vn