SlideShare una empresa de Scribd logo
1 de 48
11
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
22
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Mục tiêuMục tiêu
• Các đối tượng trong JavaScript
• Sử dụng các đối tượng
• Các sự kiện trên trang HTML
• Kết hợp ngôn ngữ JavaScript, các đối
tượng và các sự kiện trên web để xử lý
các yêu cầu
33
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản
2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript
3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
44
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng cơ bảnCác đối tượng cơ bản
• String
• Date
• Math



55
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
− JavaScript là ngôn ngữ lập trình dựa trên đối tượng
(Object-based language)
− Các đối tượng trong JavaScript (Math, String, …) giúp
người lập trình xử lý cắt chuỗi, sử dụng các hàm toán
học, …
− JavaScript sẽ dựa vào giá trị của biến để xác định biến
đó thuộc đối tượng nào
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
66
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• String
− Xử lý chuỗi văn bản
− Thuộc tính:
• length : trả về tổng số ký tự của chuỗi
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
var <tên biến> = new String;
hoặc var <tên biến> = new String(“chuỗi khởi tạo”);
Ví dụ:
var chuoi = new String(“Lập trình web cơ bản”);
77
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• String
− Phương thức:
Vị trí của ký tự đầu tiên trong chuỗi luôn bắt đầu bằng chỉ số 0
• search(<regExp>): tìm một “chuỗi” và trả về chỉ số tìm được.
Nếu không tìm thấy, trả về -1
 <regExp>: là một biểu thức có qui tắc, chứa /chuỗi tìm/ và
option /i ; cho phép tìm theo chữ HOA/thường
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
Ví dụ: tìm chữ “Tâm” trong chuỗi “Chữ tâm kia mới bằng ba chữ tài”
var chuoi = new String("Chữ tâm kia mới bằng ba chữ tài");
n = chuoi.search(/Tâm/i)
alert(n);  4
88
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• String
− Phương thức:
• replace(<regExp>,”chuỗi thế”): tìm và thay thế.
 <regExp>: chứa /chuỗi tìm/ , option /i ; cho phép tìm theo chữ
HOA/thường, và option /g ; cho phép thay thế toàn bộ
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
Ví dụ: thay thế toàn bộ chữ “Mẹ” thành “Má” trong 2 câu đầu của bài
hát “Mẹ dấu yêu”
var chuoi =new String("Mẹ là làn gió mát, đưa con giấc ngủ
ngoan; Mẹ là dòng suối trong, cho con luôn tìm về");
str = chuoi.replace(/mẹ/gi,"Má")
99
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng cơ bảnCác đối tượng cơ bản
• String
• Date
• Math



1010
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Date
− Dùng để xử lý dữ liệu kiểu thời gian
• <tháng> được tính từ 0 ; tháng 1
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
var <tên biến> = new Date();
hoặc var <tên biến> = new Date(năm, tháng, ngày);
1111
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Date
− Phương thức
• getDay(): trả về thứ tự ngày trong tuần ( 0  6), 0 bắt đầu là
Chủ nhật
• getMonth(): trả về số tháng trong năm ( 0  11), 0 bắt đầu
tháng 1
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
Ví dụ: in thứ tự ngày trong tuần của ngày sinh 25/05/2008
var ngaysinh = new Date(2008,4,25)
thu = ngaysinh.getDay()
alert(thu);  0
1212
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng cơ bảnCác đối tượng cơ bản
• String
• Date
• Math



1313
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Math
− Các xử lý liên quan đến toán học
− Không cần khai báo và khởi tạo
− Thuộc tính:
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
1414
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Math
− Phương thức:
Bài 4: Các đối tượng trong Javascript
Các đối tượng cơ bản
Ví dụ: phát sinh một số nguyên ngẫu nhiên trong khoảng từ 10 đến
100
var so = parseInt(Math.random()*91 +10);
Ví dụ:
Math.round(3.4)  3
Math.round(3.5)  4
1515
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản
2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript
3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
1616
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng trong JavaScriptCác đối tượng trong JavaScript
• Mô hình BOM - Browser Object Model
• Mô hình DOM - Document Object Model
• Tham chiếu đến một đối tượng trong DOM



1717
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
− Sắp xếp theo hệ thống phân cấp (hierarchy) và bắt đầu là
đối tượng window
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
1818
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
1919
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− window: đại diện cho cửa sổ trình duyệt
• Thuộc tính status, history, location
• Phương thức close, open, setInterval, setTimeout, …
• Sự kiện:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Minh họaMinh họa
2020
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− navigator: cung cấp thông tin về trình duyệt và hệ thống
tại máy client
• Thuộc tính:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Minh họaMinh họa
2121
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− location: chứa thông tin về URL hiện hành, thường sử
dụng để di chuyển đến một trang web khác
• Thuộc tính: protocol, hostname, port, …
• Phương thức:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Ví dụ: khi nhấn nút Hoc Lap Trinh Web, thế trang hiện hành bằng trang
web của Hoc Lap Trinh Web
<form>
<input type="button" value=“Hoc Lap Trinh Web"
onClick="location.replace('http://www.hoclaptrinhweb.com')">
</form>
2222
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− event: được hỗ trợ từ IE 5.0 và Netscape 6.0 trở lên,
dùng để lưu vết các sự kiện xảy ra trên trang web như
nhấn chuột, di chuyển chuột, …
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
2323
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− event:
• Thuộc tính:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Áp dụng cho IE 5.0+
Minh họaMinh họa
2424
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình BOM - Browser Object Model
− event:
• Thứ tự xảy ra trên cùng một kiểu sự kiện của các element
trong một trang web
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Minh họaMinh họa
2525
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng trong JavaScriptCác đối tượng trong JavaScript
• Mô hình BOM - Browser Object Model
• Mô hình DOM - Document Object Model
• Tham chiếu đến một đối tượng trong DOM



2626
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình DOM - Document Object Model
− Phản ánh cấu trúc của một tài liệu HTML
− Được phép thêm, xóa hoặc cập nhật các đối tượng trong
DOM
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
2727
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình DOM - Document Object Model
− document: đại diện cho toàn bộ trang HTML
• Thuộc tính tập hợp: thường dùng để xác định một phần tử hoặc
duyệt các phần tử trong một tập hợp
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Ví dụ: duyệt và in tên các tag <a> ra màn hình
<body><a name="first"> anchor đầu tiên</a><br />
<a name="second">anchor thứ hai</a><br />
<a name="third"> anchor thứ ba</a><br />
<script type="text/javascript">
for (var i=0; i<=document.anchors.length -1 ; i++)
document.write(document.anchors[i].name + "<br>")
</script> </body>
2828
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình DOM - Document Object Model
− document: đại diện cho toàn bộ trang HTML
• Thuộc tính: title, URL
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
2929
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình DOM - Document Object Model
− document: đại diện cho toàn bộ trang HTML
• Phương thức:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Minh họaMinh họa
Minh họaMinh họa
3030
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Mô hình DOM - Document Object Model
− document: đại diện cho toàn bộ trang HTML
• Sự kiện:
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
Minh họaMinh họa
Minh họaMinh họa
3131
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các đối tượng trong JavaScriptCác đối tượng trong JavaScript
• Mô hình BOM - Browser Object Model
• Mô hình DOM - Document Object Model
• Tham chiếu đến một đối tượng trong DOM



3232
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Tham chiếu một đối tượng của document
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.<tên t.tính tập hợp>[“tên đ.tuợng”|<chỉ số>].<t.tính>
hoặc
document.<tên t.tính tập hợp>.<tên đ.tuợng>.<thuộc tính>
Ví dụ:
document.images[‘hinh1’].src
document.images[0].name
document.images.hinh1.src
3333
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Tham chiếu một đối tượng của form
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.forms[“tên form”|<chỉ số>].<đ.tượng>.<thuộc tính>
Ví dụ:
document.forms['nhap'].ks.checked
Minh họaMinh họa
3434
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Điều khiển Drop-down List:
• Truy xuất một mục bất kỳ
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.forms[“tên form”|<chỉ số>].<đ.tượng>.options[<chỉ số>].<t.tính>
hoặc
document.forms.<tên form>.<đ.tượng>.options[<chỉ số>].<thuộc tính>
Ví dụ:
var nd = document.forms['nhap'].thuc_an.options[1].innerText
hoặc
var nd = document.forms.nhap.thuc_an.options[1].innerText
3535
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Điều khiển Drop-down List:
• Duyệt và kiểm tra từng mục
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
<biến> = document.getElementById('id của tag <select>');
for (i=0; i< <biến>.length; i++ )
{ if (<biến>.options[i].selected) //mục thứ i đựơc chọn
{
/* Khối lệnh xử lý */
}
}
3636
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Điều khiển Drop-down List:
• Thêm một mục
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.forms['tên form'].<đ.tượng>.options[<chỉ số>]
=new Option(<nội dung>, <giá trị>);
3737
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Điều khiển Drop-down List:
• Xóa một mục
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.forms['tên form'].<đối tượng>.options[<chỉ số>]= null;
hoặc
<biến> = document.getElementById('id của tag <select>');
<biến>.remove(<chỉ số>);
Minh họaMinh họa
3838
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Tham chiếu đến một đối tượng trong DOM
− Điều khiển Drop-down List:
• Xóa tất cả các mục
Bài 4: Các đối tượng trong Javascript
Các đối tượng trong JavaScript
document.forms['tên form'].<đối tượng>.options.length= 0;
3939
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Nội dungNội dung
1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản
2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript
3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
4040
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các sự kiện trên trang HTMLCác sự kiện trên trang HTML
• Sự kiện của window – Window Events
• Sự kiện của các điều khiển trên form
• Sự kiện phím – Keyboard Events
• Sự kiện chuột – Mouse Events




4141
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Sự kiện của window – Window Events
(xem lại mục đối tượng Window trong Mô hình BOM)
Bài 4: Các đối tượng trong Javascript
Các sự kiện trên trang HTML

4242
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các sự kiện trên trang HTMLCác sự kiện trên trang HTML
• Sự kiện của window – Window Events
• Sự kiện của các điều khiển trên form
• Sự kiện phím – Keyboard Events
• Sự kiện chuột – Mouse Events




4343
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Sự kiện của các điều khiển trên form
− onchange: khi thay đổi nội dung của điều khiển
− onfocus: khi điều khiển nhận được focus
− onblur: khi điều khiển mất đi focus
Bài 4: Các đối tượng trong Javascript
Các sự kiện trên trang HTML
Minh họaMinh họa
4444
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các sự kiện trên trang HTMLCác sự kiện trên trang HTML
• Sự kiện của window – Window Events
• Sự kiện của các điều khiển trên form
• Sự kiện phím – Keyboard Events
• Sự kiện chuột – Mouse Events




4545
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Sự kiện phím – Keyboard Events
− Các sự kiện: onkeydown, onkeypress, onkeyup
− Thường áp dụng cho đối tượng document, form và các
điều khiển trên form
Bài 4: Các đối tượng trong Javascript
Các sự kiện trên trang HTML

Ví dụ:
Chỉ cho phép nhập số, nếu nhập ký tự thì vô hiệu hóa phím nhấn
Minh họaMinh họa
4646
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Các sự kiện trên trang HTMLCác sự kiện trên trang HTML
• Sự kiện của window – Window Events
• Sự kiện của các điều khiển trên form
• Sự kiện phím – Keyboard Events
• Sự kiện chuột – Mouse Events




4747
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
• Sự kiện chuột – Mouse Events
(xem lại mục đối tượng Document trong mô hình DOM)
Bài 4: Các đối tượng trong Javascript
Các sự kiện trên trang HTML

4848
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
Bài 4: Các đối tượng trong JavaScript
HẾTHẾT

Más contenido relacionado

Destacado

04. de cuong bai giang cong nghe web
04. de cuong bai giang cong nghe web04. de cuong bai giang cong nghe web
04. de cuong bai giang cong nghe web
Đinh Luận
 
Restful services-slides
Restful services-slidesRestful services-slides
Restful services-slides
MasterCode.vn
 
Bài 2 xử lý sự cố hệ điều hành
Bài 2   xử lý sự cố hệ điều hànhBài 2   xử lý sự cố hệ điều hành
Bài 2 xử lý sự cố hệ điều hành
MasterCode.vn
 
Bài 5 xử lý sự cố email
Bài 5   xử lý sự cố emailBài 5   xử lý sự cố email
Bài 5 xử lý sự cố email
MasterCode.vn
 

Destacado (14)

Bai tap java_script-html-2016
Bai tap java_script-html-2016Bai tap java_script-html-2016
Bai tap java_script-html-2016
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
 
Bài 7 - Web Services Asp.net
Bài 7 - Web Services Asp.netBài 7 - Web Services Asp.net
Bài 7 - Web Services Asp.net
 
Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPT
Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPTBài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPT
Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện - Giáo trình FPT
 
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
 
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTBÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
 
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
 
Slide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bảnSlide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bản
 
04. de cuong bai giang cong nghe web
04. de cuong bai giang cong nghe web04. de cuong bai giang cong nghe web
04. de cuong bai giang cong nghe web
 
Chuong 5 toi_uu_hoa_van_tin
Chuong 5 toi_uu_hoa_van_tinChuong 5 toi_uu_hoa_van_tin
Chuong 5 toi_uu_hoa_van_tin
 
Restful services-slides
Restful services-slidesRestful services-slides
Restful services-slides
 
BÀI 7: THỰC THI CÁC HOẠT ĐỘNG XỬ LÝ XML THEO CƠ CHẾ DỮ LIỆU NGẮT KẾT NỐI (DI...
BÀI 7:  THỰC THI CÁC HOẠT ĐỘNG XỬ LÝ XML THEO CƠ CHẾ DỮ LIỆU NGẮT KẾT NỐI (DI...BÀI 7:  THỰC THI CÁC HOẠT ĐỘNG XỬ LÝ XML THEO CƠ CHẾ DỮ LIỆU NGẮT KẾT NỐI (DI...
BÀI 7: THỰC THI CÁC HOẠT ĐỘNG XỬ LÝ XML THEO CƠ CHẾ DỮ LIỆU NGẮT KẾT NỐI (DI...
 
Bài 2 xử lý sự cố hệ điều hành
Bài 2   xử lý sự cố hệ điều hànhBài 2   xử lý sự cố hệ điều hành
Bài 2 xử lý sự cố hệ điều hành
 
Bài 5 xử lý sự cố email
Bài 5   xử lý sự cố emailBài 5   xử lý sự cố email
Bài 5 xử lý sự cố email
 

Más de MasterCode.vn

Pd fbuoi7 8--tongquanseo-mastercode.vn
Pd fbuoi7 8--tongquanseo-mastercode.vnPd fbuoi7 8--tongquanseo-mastercode.vn
Pd fbuoi7 8--tongquanseo-mastercode.vn
MasterCode.vn
 
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vnPd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
MasterCode.vn
 
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vnPdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
MasterCode.vn
 
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vnPd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
MasterCode.vn
 

Más de MasterCode.vn (20)

Pd ftai lieu-tieng-anh-cho-nguoi-moi-bat-dau-mastercode.vn
Pd ftai lieu-tieng-anh-cho-nguoi-moi-bat-dau-mastercode.vnPd ftai lieu-tieng-anh-cho-nguoi-moi-bat-dau-mastercode.vn
Pd ftai lieu-tieng-anh-cho-nguoi-moi-bat-dau-mastercode.vn
 
Why apps-succeed-wpr-mastercode.vn
Why apps-succeed-wpr-mastercode.vnWhy apps-succeed-wpr-mastercode.vn
Why apps-succeed-wpr-mastercode.vn
 
Dzone performancemonitoring2016-mastercode.vn
Dzone performancemonitoring2016-mastercode.vnDzone performancemonitoring2016-mastercode.vn
Dzone performancemonitoring2016-mastercode.vn
 
Google công bố thông tin lịch xu hướng ngành 2017 mastercode.vn
Google công bố thông tin lịch xu hướng ngành 2017 mastercode.vnGoogle công bố thông tin lịch xu hướng ngành 2017 mastercode.vn
Google công bố thông tin lịch xu hướng ngành 2017 mastercode.vn
 
Nghiên cứu về khách hàng mastercode.vn
Nghiên cứu về khách hàng mastercode.vnNghiên cứu về khách hàng mastercode.vn
Nghiên cứu về khách hàng mastercode.vn
 
Pd fbuoi7 8--tongquanseo-mastercode.vn
Pd fbuoi7 8--tongquanseo-mastercode.vnPd fbuoi7 8--tongquanseo-mastercode.vn
Pd fbuoi7 8--tongquanseo-mastercode.vn
 
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vnPd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
 
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vnPdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
 
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vnPd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
 
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnPd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
 
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vnPd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
 
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vnPdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
 
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vnPdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vnPdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vnPdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vnPdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vnPdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vnPdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vnPdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vn
 
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
 

Bài 4 - Các đối tượng trong JAVASCRIPT - Học lập trình web cơ bản với Html, Css, Javascript

  • 1. 11 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/
  • 2. 22 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Mục tiêuMục tiêu • Các đối tượng trong JavaScript • Sử dụng các đối tượng • Các sự kiện trên trang HTML • Kết hợp ngôn ngữ JavaScript, các đối tượng và các sự kiện trên web để xử lý các yêu cầu
  • 3. 33 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Nội dungNội dung 1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản 2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript 3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
  • 4. 44 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng cơ bảnCác đối tượng cơ bản • String • Date • Math   
  • 5. 55 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ − JavaScript là ngôn ngữ lập trình dựa trên đối tượng (Object-based language) − Các đối tượng trong JavaScript (Math, String, …) giúp người lập trình xử lý cắt chuỗi, sử dụng các hàm toán học, … − JavaScript sẽ dựa vào giá trị của biến để xác định biến đó thuộc đối tượng nào Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản
  • 6. 66 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • String − Xử lý chuỗi văn bản − Thuộc tính: • length : trả về tổng số ký tự của chuỗi Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản var <tên biến> = new String; hoặc var <tên biến> = new String(“chuỗi khởi tạo”); Ví dụ: var chuoi = new String(“Lập trình web cơ bản”);
  • 7. 77 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • String − Phương thức: Vị trí của ký tự đầu tiên trong chuỗi luôn bắt đầu bằng chỉ số 0 • search(<regExp>): tìm một “chuỗi” và trả về chỉ số tìm được. Nếu không tìm thấy, trả về -1  <regExp>: là một biểu thức có qui tắc, chứa /chuỗi tìm/ và option /i ; cho phép tìm theo chữ HOA/thường Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản Ví dụ: tìm chữ “Tâm” trong chuỗi “Chữ tâm kia mới bằng ba chữ tài” var chuoi = new String("Chữ tâm kia mới bằng ba chữ tài"); n = chuoi.search(/Tâm/i) alert(n);  4
  • 8. 88 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • String − Phương thức: • replace(<regExp>,”chuỗi thế”): tìm và thay thế.  <regExp>: chứa /chuỗi tìm/ , option /i ; cho phép tìm theo chữ HOA/thường, và option /g ; cho phép thay thế toàn bộ Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản Ví dụ: thay thế toàn bộ chữ “Mẹ” thành “Má” trong 2 câu đầu của bài hát “Mẹ dấu yêu” var chuoi =new String("Mẹ là làn gió mát, đưa con giấc ngủ ngoan; Mẹ là dòng suối trong, cho con luôn tìm về"); str = chuoi.replace(/mẹ/gi,"Má")
  • 9. 99 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng cơ bảnCác đối tượng cơ bản • String • Date • Math   
  • 10. 1010 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Date − Dùng để xử lý dữ liệu kiểu thời gian • <tháng> được tính từ 0 ; tháng 1 Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản var <tên biến> = new Date(); hoặc var <tên biến> = new Date(năm, tháng, ngày);
  • 11. 1111 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Date − Phương thức • getDay(): trả về thứ tự ngày trong tuần ( 0  6), 0 bắt đầu là Chủ nhật • getMonth(): trả về số tháng trong năm ( 0  11), 0 bắt đầu tháng 1 Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản Ví dụ: in thứ tự ngày trong tuần của ngày sinh 25/05/2008 var ngaysinh = new Date(2008,4,25) thu = ngaysinh.getDay() alert(thu);  0
  • 12. 1212 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng cơ bảnCác đối tượng cơ bản • String • Date • Math   
  • 13. 1313 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Math − Các xử lý liên quan đến toán học − Không cần khai báo và khởi tạo − Thuộc tính: Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản
  • 14. 1414 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Math − Phương thức: Bài 4: Các đối tượng trong Javascript Các đối tượng cơ bản Ví dụ: phát sinh một số nguyên ngẫu nhiên trong khoảng từ 10 đến 100 var so = parseInt(Math.random()*91 +10); Ví dụ: Math.round(3.4)  3 Math.round(3.5)  4
  • 15. 1515 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Nội dungNội dung 1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản 2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript 3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
  • 16. 1616 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng trong JavaScriptCác đối tượng trong JavaScript • Mô hình BOM - Browser Object Model • Mô hình DOM - Document Object Model • Tham chiếu đến một đối tượng trong DOM   
  • 17. 1717 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ − Sắp xếp theo hệ thống phân cấp (hierarchy) và bắt đầu là đối tượng window Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript
  • 18. 1818 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript
  • 19. 1919 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − window: đại diện cho cửa sổ trình duyệt • Thuộc tính status, history, location • Phương thức close, open, setInterval, setTimeout, … • Sự kiện: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Minh họaMinh họa
  • 20. 2020 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − navigator: cung cấp thông tin về trình duyệt và hệ thống tại máy client • Thuộc tính: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Minh họaMinh họa
  • 21. 2121 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − location: chứa thông tin về URL hiện hành, thường sử dụng để di chuyển đến một trang web khác • Thuộc tính: protocol, hostname, port, … • Phương thức: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Ví dụ: khi nhấn nút Hoc Lap Trinh Web, thế trang hiện hành bằng trang web của Hoc Lap Trinh Web <form> <input type="button" value=“Hoc Lap Trinh Web" onClick="location.replace('http://www.hoclaptrinhweb.com')"> </form>
  • 22. 2222 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − event: được hỗ trợ từ IE 5.0 và Netscape 6.0 trở lên, dùng để lưu vết các sự kiện xảy ra trên trang web như nhấn chuột, di chuyển chuột, … Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript
  • 23. 2323 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − event: • Thuộc tính: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Áp dụng cho IE 5.0+ Minh họaMinh họa
  • 24. 2424 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình BOM - Browser Object Model − event: • Thứ tự xảy ra trên cùng một kiểu sự kiện của các element trong một trang web Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Minh họaMinh họa
  • 25. 2525 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng trong JavaScriptCác đối tượng trong JavaScript • Mô hình BOM - Browser Object Model • Mô hình DOM - Document Object Model • Tham chiếu đến một đối tượng trong DOM   
  • 26. 2626 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình DOM - Document Object Model − Phản ánh cấu trúc của một tài liệu HTML − Được phép thêm, xóa hoặc cập nhật các đối tượng trong DOM Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript
  • 27. 2727 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình DOM - Document Object Model − document: đại diện cho toàn bộ trang HTML • Thuộc tính tập hợp: thường dùng để xác định một phần tử hoặc duyệt các phần tử trong một tập hợp Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Ví dụ: duyệt và in tên các tag <a> ra màn hình <body><a name="first"> anchor đầu tiên</a><br /> <a name="second">anchor thứ hai</a><br /> <a name="third"> anchor thứ ba</a><br /> <script type="text/javascript"> for (var i=0; i<=document.anchors.length -1 ; i++) document.write(document.anchors[i].name + "<br>") </script> </body>
  • 28. 2828 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình DOM - Document Object Model − document: đại diện cho toàn bộ trang HTML • Thuộc tính: title, URL Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript
  • 29. 2929 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình DOM - Document Object Model − document: đại diện cho toàn bộ trang HTML • Phương thức: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Minh họaMinh họa Minh họaMinh họa
  • 30. 3030 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Mô hình DOM - Document Object Model − document: đại diện cho toàn bộ trang HTML • Sự kiện: Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript Minh họaMinh họa Minh họaMinh họa
  • 31. 3131 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các đối tượng trong JavaScriptCác đối tượng trong JavaScript • Mô hình BOM - Browser Object Model • Mô hình DOM - Document Object Model • Tham chiếu đến một đối tượng trong DOM   
  • 32. 3232 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Tham chiếu một đối tượng của document Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.<tên t.tính tập hợp>[“tên đ.tuợng”|<chỉ số>].<t.tính> hoặc document.<tên t.tính tập hợp>.<tên đ.tuợng>.<thuộc tính> Ví dụ: document.images[‘hinh1’].src document.images[0].name document.images.hinh1.src
  • 33. 3333 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Tham chiếu một đối tượng của form Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.forms[“tên form”|<chỉ số>].<đ.tượng>.<thuộc tính> Ví dụ: document.forms['nhap'].ks.checked Minh họaMinh họa
  • 34. 3434 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Điều khiển Drop-down List: • Truy xuất một mục bất kỳ Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.forms[“tên form”|<chỉ số>].<đ.tượng>.options[<chỉ số>].<t.tính> hoặc document.forms.<tên form>.<đ.tượng>.options[<chỉ số>].<thuộc tính> Ví dụ: var nd = document.forms['nhap'].thuc_an.options[1].innerText hoặc var nd = document.forms.nhap.thuc_an.options[1].innerText
  • 35. 3535 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Điều khiển Drop-down List: • Duyệt và kiểm tra từng mục Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript <biến> = document.getElementById('id của tag <select>'); for (i=0; i< <biến>.length; i++ ) { if (<biến>.options[i].selected) //mục thứ i đựơc chọn { /* Khối lệnh xử lý */ } }
  • 36. 3636 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Điều khiển Drop-down List: • Thêm một mục Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.forms['tên form'].<đ.tượng>.options[<chỉ số>] =new Option(<nội dung>, <giá trị>);
  • 37. 3737 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Điều khiển Drop-down List: • Xóa một mục Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.forms['tên form'].<đối tượng>.options[<chỉ số>]= null; hoặc <biến> = document.getElementById('id của tag <select>'); <biến>.remove(<chỉ số>); Minh họaMinh họa
  • 38. 3838 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Tham chiếu đến một đối tượng trong DOM − Điều khiển Drop-down List: • Xóa tất cả các mục Bài 4: Các đối tượng trong Javascript Các đối tượng trong JavaScript document.forms['tên form'].<đối tượng>.options.length= 0;
  • 39. 3939 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Nội dungNội dung 1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản1. Các đối tượng cơ bản 2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript2. Các đối tượng trong JavaScript 3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML3. Các sự kiện trên trang HTML
  • 40. 4040 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các sự kiện trên trang HTMLCác sự kiện trên trang HTML • Sự kiện của window – Window Events • Sự kiện của các điều khiển trên form • Sự kiện phím – Keyboard Events • Sự kiện chuột – Mouse Events    
  • 41. 4141 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Sự kiện của window – Window Events (xem lại mục đối tượng Window trong Mô hình BOM) Bài 4: Các đối tượng trong Javascript Các sự kiện trên trang HTML 
  • 42. 4242 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các sự kiện trên trang HTMLCác sự kiện trên trang HTML • Sự kiện của window – Window Events • Sự kiện của các điều khiển trên form • Sự kiện phím – Keyboard Events • Sự kiện chuột – Mouse Events    
  • 43. 4343 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Sự kiện của các điều khiển trên form − onchange: khi thay đổi nội dung của điều khiển − onfocus: khi điều khiển nhận được focus − onblur: khi điều khiển mất đi focus Bài 4: Các đối tượng trong Javascript Các sự kiện trên trang HTML Minh họaMinh họa
  • 44. 4444 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các sự kiện trên trang HTMLCác sự kiện trên trang HTML • Sự kiện của window – Window Events • Sự kiện của các điều khiển trên form • Sự kiện phím – Keyboard Events • Sự kiện chuột – Mouse Events    
  • 45. 4545 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Sự kiện phím – Keyboard Events − Các sự kiện: onkeydown, onkeypress, onkeyup − Thường áp dụng cho đối tượng document, form và các điều khiển trên form Bài 4: Các đối tượng trong Javascript Các sự kiện trên trang HTML  Ví dụ: Chỉ cho phép nhập số, nếu nhập ký tự thì vô hiệu hóa phím nhấn Minh họaMinh họa
  • 46. 4646 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Các sự kiện trên trang HTMLCác sự kiện trên trang HTML • Sự kiện của window – Window Events • Sự kiện của các điều khiển trên form • Sự kiện phím – Keyboard Events • Sự kiện chuột – Mouse Events    
  • 47. 4747 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ • Sự kiện chuột – Mouse Events (xem lại mục đối tượng Document trong mô hình DOM) Bài 4: Các đối tượng trong Javascript Các sự kiện trên trang HTML 
  • 48. 4848 HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO HocLapTrinhWeb.COM α - Tek http://www.facebook.com/groups/hoclaptrinhweb/ Bài 4: Các đối tượng trong JavaScript HẾTHẾT

Notas del editor

  1. Thời lượng : 17 tiết
  2. Minhoa_Bai04_slide19.html
  3. Minhoa_Bai04_slide20.html
  4. Minhoa_Bai04_slide23.html
  5. Minhoa_Bai04_slide24.html
  6. Minhoa_Bai04_slide19.html Minhoa_Bai04_slide29.html
  7. Minhoa_Bai04_slide23.html Minhoa_Bai04_slide30.html
  8. Minhoa_Bai04_slide33.html
  9. Minhoa_Bai04_slide37.html
  10. Minhoa_Bai04_slide43.html
  11. Minhoa_Bai04_slide45.html