SlideShare a Scribd company logo
1 of 38
Download to read offline
Bài 4:
Lập trình hướng đối tượng và mô hình BOM
Cấu trúc điều khiển
Cấu trúc lựa chọn
Lệnh lựa chọn đơn
Lệnh lựa chọn kép
Lệnh đa lựa chọn
Cấu trúc lặp
Lặp không biết trước số lần lặp
Lặp biết trước số lần lặp
Hàm
Hệ thống bài cũ
Cấu trúc điều khiển
Cấu trúc lựa chọn
Lệnh lựa chọn đơn
Lệnh lựa chọn kép
Lệnh đa lựa chọn
Cấu trúc lặp
Lặp không biết trước số lần lặp
Lặp biết trước số lần lặp
Hàm
Lập trình hướng đối tượng và mô hình DOM 2
Phương thức lập trình
Phương thức lập trình hướng đối tượng
Khái niệm đối tượng, thuộc tính và phương thức
Tạo đối tượng
Thêm thuộc tính và phương thức vào đối tượng
Khái niệm về lớp
Định nghĩa lớp, tạo đối tượng từ lớp
Các thao tác với đối tượng trong lớp
Browser Object Model
Mục tiêu bài học
Phương thức lập trình
Phương thức lập trình hướng đối tượng
Khái niệm đối tượng, thuộc tính và phương thức
Tạo đối tượng
Thêm thuộc tính và phương thức vào đối tượng
Khái niệm về lớp
Định nghĩa lớp, tạo đối tượng từ lớp
Các thao tác với đối tượng trong lớp
Browser Object Model
Lập trình hướng đối tượng và mô hình DOM 3
PHƯƠNG THỨC
LẬP TRÌNH
Lập trình hướng đối tượng và mô hình DOM 4
PHƯƠNG THỨC
LẬP TRÌNH
Lập trình là để giải quyết các vấn đề trong cuộc sống
Bài toán tính toán phức tạp: Lập trình cho tên lửa bay vào vũ trụ
Bài toán logic: Đưa ra quyết định (dự báo thời tiết)
Bài toán quản lý trong các doanh nghiệp (phần mềm tính lương)
Phương thức lập trình (programing paradigm) đặc tả cách
thức giải quyết vấn đề
Phương thức lập trình
Lập trình là để giải quyết các vấn đề trong cuộc sống
Bài toán tính toán phức tạp: Lập trình cho tên lửa bay vào vũ trụ
Bài toán logic: Đưa ra quyết định (dự báo thời tiết)
Bài toán quản lý trong các doanh nghiệp (phần mềm tính lương)
Phương thức lập trình (programing paradigm) đặc tả cách
thức giải quyết vấn đề
Lập trình hướng đối tượng và mô hình DOM 5
Có hơn 25 phương thức lập trình
Mỗi phương thức lập trình giải quyết cho một vấn đề
Một số phương thức khó đi vào thực tiễn lập trình
Một số phương thức lập trình chỉ được hưởng ứng bởi một
nhóm người hay trong một thời gian ngắn
Những phương thức lập trình phổ biến:
lập trình hướng sự kiện
lập trình hướng thành phần
lập trình cấu trúc
lập trình hướng đối tượng
Phương thức lập trình hướng đối tượng được phát triển
rộng rãi hơn cả
phương thức lập trình
Có hơn 25 phương thức lập trình
Mỗi phương thức lập trình giải quyết cho một vấn đề
Một số phương thức khó đi vào thực tiễn lập trình
Một số phương thức lập trình chỉ được hưởng ứng bởi một
nhóm người hay trong một thời gian ngắn
Những phương thức lập trình phổ biến:
lập trình hướng sự kiện
lập trình hướng thành phần
lập trình cấu trúc
lập trình hướng đối tượng
Phương thức lập trình hướng đối tượng được phát triển
rộng rãi hơn cả
Lập trình hướng đối tượng và mô hình DOM 6
PHƯƠNG THỨC LẬP TRÌNH
HƯỚNG ĐỐI TƯỢNG
Lập trình hướng đối tượng và mô hình DOM 7
PHƯƠNG THỨC LẬP TRÌNH
HƯỚNG ĐỐI TƯỢNG
Đối tượng là tất cả mọi thứ trong cuộc sống (các đồ vật, sự
vật)
Quả bóng, cái bàn, ô tô, bông hoa, con người, nhà máy…
Mỗi đối tượng có đặc tính và hành động riêng
Ý tưởng chủ đạo của phương thức lập trình hướng đối tượng:
Mô phỏng cuộc sống thực trong lập trình
Trong cuộc sống có những đối tượng như quả bóng, cái bàn…
với các đặc tính và hành động riêng thì trong lập trình mô phỏng
các đối tượng đó với các đặc tính và hành động như thế
Lập trình hướng đối tượng
Đối tượng là tất cả mọi thứ trong cuộc sống (các đồ vật, sự
vật)
Quả bóng, cái bàn, ô tô, bông hoa, con người, nhà máy…
Mỗi đối tượng có đặc tính và hành động riêng
Ý tưởng chủ đạo của phương thức lập trình hướng đối tượng:
Mô phỏng cuộc sống thực trong lập trình
Trong cuộc sống có những đối tượng như quả bóng, cái bàn…
với các đặc tính và hành động riêng thì trong lập trình mô phỏng
các đối tượng đó với các đặc tính và hành động như thế
Lập trình hướng đối tượng và mô hình DOM 8
Mèo có những đặc tính:
Màu lông: tam thể
Nặng: 2kg
Móng: sắc
Mèo có những hành động:
Bắt chuột
Liếm lông
Trong lập trình: đặc tính được gọi là thuộc tính, hành
động được gọi là phương thức
Thuộc tính và phương thức của đối tượng
Voi có những đặc tính:
Màu da: nâu
Nặng: 2 tấn
Vòi: 1m
Voi có những hành động:
Phun nước
Ăn cỏ
Mèo có những đặc tính:
Màu lông: tam thể
Nặng: 2kg
Móng: sắc
Mèo có những hành động:
Bắt chuột
Liếm lông
Trong lập trình: đặc tính được gọi là thuộc tính, hành
động được gọi là phương thức
Lập trình hướng đối tượng và mô hình DOM 9
Voi có những đặc tính:
Màu da: nâu
Nặng: 2 tấn
Vòi: 1m
Voi có những hành động:
Phun nước
Ăn cỏ
Các đối tượng có cùng thuộc tính và phương thức được gom lại
thành một lớp
Hay: Lớp định nghĩa tập hợp các đối tượng có cùng thuộc tính
và phương thức
Lớp
Lập trình hướng đối tượng và mô hình DOM 10
Sử dụng từ khóa new
Tạo đối tượng
var meo = new Object
var hoa = new Object
var tendoituong = new Object
Lập trình hướng đối tượng và mô hình DOM 11
var meo = new Object
var hoa = new Object
Thêm thuộc tính cho đối tượng
Truy cập đến thuộc tính của đối tượng
Thêm và truy cập đến thuộc tính
hoaDao.mau = "Hong"
hoaDao.soCanh = "5"
tendoituong.tenthuoctinh = giatri
Thêm thuộc tính cho đối tượng
Truy cập đến thuộc tính của đối tượng
Lập trình hướng đối tượng và mô hình DOM 12
alert(hoaDao.mau)
alert(hoaDao.soCanh)
tendoituong.tenthuoctinh
Thêm phương thức
Gọi phương thức
Thêm và gọi phương thức
tendoituong.tenphuongthuc = function(){
//Viết mã cho phương thức ở đây
}
hoaDao.toaHuong= function () {
alert("Toi co mau Hong, toi dang toa huong");
}
Thêm phương thức
Gọi phương thức
Lập trình hướng đối tượng và mô hình DOM 13
hoaDao.toaHuong();
hoaDao.toaHuong= function () {
alert("Toi co mau Hong, toi dang toa huong");
}
tendoituong.tenphuongthuc()
Vấn đề nảy sinh: Giả sử trong vườn có nhiều loại hoa, mỗi
loại hoa có màu sắc, số cánh khác nhau
 Tạo một khuôn mẫu chung (lớp)
Tạo một khuôn mẫu cho đối tượng
var hoaDao = new Object
hoaDao.mau = " Hong"
hoaDao.soCanh = "5"
hoaDao.toaHuong= function () {
alert("Toi co mau Hong, toi dang
toa huong!");
}
var hoaHong = new Object
hoaHong.mau = " Do"
hoaHong.soCanh = " 10"
hoaHong.toaHuong= function () {
alert("Toi co mau Do, toi dang
toa huong!");
}
var hoaCuc = new Object
hoaCuc.mau = " Vang"
hoaCuc.soCanh = " 20"
hoaCuc.toaHuong= function () {
alert("Toi co mau vang, toi dang
toa huong!");
}
var hoaLan = new Object
hoaLan.mau = "Tim"
hoaLan.soCanh = "3"
hoaLan.toaHuong= function () {
alert("Toi co mau tim, toi dang
toa huong!");
}
Vấn đề nảy sinh: Giả sử trong vườn có nhiều loại hoa, mỗi
loại hoa có màu sắc, số cánh khác nhau
 Tạo một khuôn mẫu chung (lớp)
Lập trình hướng đối tượng và mô hình DOM 14
var hoaDao = new Object
hoaDao.mau = " Hong"
hoaDao.soCanh = "5"
hoaDao.toaHuong= function () {
alert("Toi co mau Hong, toi dang
toa huong!");
}
var hoaHong = new Object
hoaHong.mau = " Do"
hoaHong.soCanh = " 10"
hoaHong.toaHuong= function () {
alert("Toi co mau Do, toi dang
toa huong!");
}
var hoaCuc = new Object
hoaCuc.mau = " Vang"
hoaCuc.soCanh = " 20"
hoaCuc.toaHuong= function () {
alert("Toi co mau vang, toi dang
toa huong!");
}
var hoaLan = new Object
hoaLan.mau = "Tim"
hoaLan.soCanh = "3"
hoaLan.toaHuong= function () {
alert("Toi co mau tim, toi dang
toa huong!");
}
Định nghĩa lớp
Định nghĩa
khuôn mẫu (lớp) cho đối tượng
function tenlop (tenbien1, tenbien2…){
tenthuoctinh1 = tenbien1;
tenthuoctinh2 = tenbien2;
tenphuongthuc = function(){
//Viết mã cho phương thức ở đây
}
}
Lập trình hướng đối tượng và mô hình DOM 15
function Hoa(mauHoa, soCanhHoa){
this.mau = mauHoa;
this.soCanh = soCanhHoa;
this.toaHuong = function(){
alert("toi co mau " + this.mau + ", toi dang toa
huong");
}
}
function tenlop (tenbien1, tenbien2…){
tenthuoctinh1 = tenbien1;
tenthuoctinh2 = tenbien2;
tenphuongthuc = function(){
//Viết mã cho phương thức ở đây
}
}
Tạo đối tượng
Truy cập đến thuộc tính và phương thức của đối tượng
Tạo đối tượng và sử dụng đối tượng
Hoa ["Dao"] = new Hoa ("Hong", "5");
Hoa ["Hong"] = new Hoa ("Do", "10");
Hoa ["Cuc"] = new Hoa ("Vang", "20");
Hoa ["Lan"] = new Hoa ("Tim", "3");
tenlop["tendoituong"] = new tenlop (giatri1, giatri2…)
Tạo đối tượng
Truy cập đến thuộc tính và phương thức của đối tượng
Lập trình hướng đối tượng và mô hình DOM 16
Hoa ["Dao"].toaHuong()
Hoa ["Hong"].toaHuong()
Hoa ["Cuc"].toaHuong()
Hoa ["Lan"].toaHuong()
tenlop["tendoituong"].tenthuoctinh
tenlop["tendoituong"].tenphuongthuc
Lặp qua các đối tượng
Tìm một đối tượng trong thuộc lớp
Thêm thuộc tính cho đối tượng thuộc lớp
Thao tác với đối tượng trong Lớp
for (var x in Hoa) {
Hoa[x].toaHuong();
}
if ("Dao" in Hoa) {
alert(" Doi tuong Dao da duoc tao");
} else {
alert(" Đối tượng Dao chua duoc tao");
}
Lặp qua các đối tượng
Tìm một đối tượng trong thuộc lớp
Thêm thuộc tính cho đối tượng thuộc lớp
Lập trình hướng đối tượng và mô hình DOM 17
if ("Dao" in Hoa) {
alert(" Doi tuong Dao da duoc tao");
} else {
alert(" Đối tượng Dao chua duoc tao");
}
if ("Dao" in Hoa) {
Hoa["Dao"].bieuTuong = "Mua Xuan"
}
alert("Hoa dao bieu tuong cho " + Hoa["Dao"].bieuTuong);
Lập trình hướng đối tượng và mô hình DOM 18
Browser Object Model
Browser Object Model là một hệ thống phân cấp hình cây
gồm các đối tượng
Các đối tượng cung cấp thuộc tính và phương thức cho lập
trình viên JavaScript
Đối với mỗi đối tượng, mỗi trình duyệt hỗ trợ các thuộc tính
và phương thức khác nhau
Hiểu môi trường mà trình duyệt cung cấp để viết mã JavaScript
chạy ổn định trên nhiều trình duyệt
Browser Object Model
(Mô hình đối tượng trình duyệt)
windowwindow
documentdocument framesframes historyhistory locationlocation navigatornavigator screenscreendocument history location navigator screen
window
trình duyệt
(browser)
Browser Object Model là một hệ thống phân cấp hình cây
gồm các đối tượng
Các đối tượng cung cấp thuộc tính và phương thức cho lập
trình viên JavaScript
Đối với mỗi đối tượng, mỗi trình duyệt hỗ trợ các thuộc tính
và phương thức khác nhau
Hiểu môi trường mà trình duyệt cung cấp để viết mã JavaScript
chạy ổn định trên nhiều trình duyệt
Lập trình hướng đối tượng và mô hình DOM 19
document frames history location navigator screendocument screen
Window là đối tượng thể hiển cửa số hiển thị hiện tại trên
trình duyệt
Một số phương thức của đối tượng window đã được sử dụng:
alert(), prompt(), confirm()
Các thuộc tính và phương thức của window có thể gọi trực
tiếp hoặc thông qua window
Đối tượng Window
Lập trình hướng đối tượng và mô hình DOM 20
alert("Hi")
hoặc
window.alert("Hi")
Thuộc tính Giải thích
Có giá trị là True khi cửa sổ được đóng
Thiết lập văn bản mặc định trên thanh trạng thái của trình duyệt
Thiết lập hoặc trả về tên của cửa sổ
Tham chiếu đến cửa sổ tạo ra cửa sổ hiện tại
Dùng để thiết lập văn bản trên thanh trạng thái khi người dùng
di chuột trên một thành phần trên cửa sổ (ví dụ khi người dùng
di chuột lên links)
Các thuộc tính của Window
closed
defaultStatus
name
opener
status
Dùng để thiết lập văn bản trên thanh trạng thái khi người dùng
di chuột trên một thành phần trên cửa sổ (ví dụ khi người dùng
di chuột lên links)
Thiết lập hoặc trả về chiều cao phần nội dung của cửa sổ
Trả về đối tượng document của cửa sổ
Lập trình hướng đối tượng và mô hình DOM 21
Tham khảo thêm trang
http://www.w3schools.com/jsref/obj_window.asp
để biết thêm nhiều thuộc tính khác
status
document
innerHeight
FireFox hỗ trợ thuộc tính này trong khi IE không hỗ
trợ
Tham khảo trang w3school để biết được trình duyệt nào hỗ
trợ phương thức và thuộc tính nào
Demo sử dụng thuộc tính innerHeight
alert(window.innerHeight)
FireFox hỗ trợ thuộc tính này trong khi IE không hỗ
trợ
Tham khảo trang w3school để biết được trình duyệt nào hỗ
trợ phương thức và thuộc tính nào
Lập trình hướng đối tượng và mô hình DOM 22
Đối với IE, để hiển thị Status bar phải chọn “Status bar”
Phiên bản 8 của Firefox không hỗ trợ default status
bar
Demo sử dụng thuộc tính defaultStatus
window.defaultStatus= "JavaScript - Bai 4"
Chọn
Status bar
Đối với IE, để hiển thị Status bar phải chọn “Status bar”
Phiên bản 8 của Firefox không hỗ trợ default status
bar
Lập trình hướng đối tượng và mô hình DOM 23
Status bar
Các phương thức của Window
Phương thức Giải thích
focus() Chuyển focus đến cửa sổ
blur() Bỏ focus đến cửa sổ
close() Đóng cửa sổ
open() Mở cửa sổ
print() Thực hiện chức năng in
Lập trình hướng đối tượng và mô hình DOM 24
print() Thực hiện chức năng in
moveTo() Sử dụng để chuyển cửa sổ về vị trí xác định
resizeTo() Sử dụng để thay đổi kích thước cửa cửa sổ về vị trí xác định
Tham khảo thêm trang
http://www.w3schools.com/jsref/obj_window.asp
để biết thêm nhiều phương thức khác
Sử dụng để mở một cửa sổ từ cửa sổ hiện thời
url: url của trang web
ten: tên của cửa sổ sẽ mở
dactinh: các đặc tính mà cửa sổ được mở sẽ có (mỗi trình duyệt
sẽ hỗ trợ một tập các đặc tính riêng)
window.open
window.open(url, ten, dactinh)
window.open("http://www.google.com.vn/", "timkiem",
"menubar = yes, width = 800, height = 600")
Sử dụng để mở một cửa sổ từ cửa sổ hiện thời
url: url của trang web
ten: tên của cửa sổ sẽ mở
dactinh: các đặc tính mà cửa sổ được mở sẽ có (mỗi trình duyệt
sẽ hỗ trợ một tập các đặc tính riêng)
Lập trình hướng đối tượng và mô hình DOM 25
window.open("http://www.google.com.vn/", "timkiem",
"menubar = yes, width = 800, height = 600")
Chú ý:
- Chỉ nên sử dụng cách này khi thật cần thiết vì
trình duyệt có thể bị disable javascript
- Có thể sử dụng thẻ <a> để thay thế
Mỗi người truy cập sử dụng màn hình có độ phân giải khác
nhau, kích thước khác nhau, dải màu khác nhau…
 Người lập trình phải nắm được thông tin này để hiển thị ảnh
phù hợp, hiển thị trang web có kích thước phù hợp…
Đối tượng screen cung cấp thuộc tính để lấy thông tin về
màn hình của người truy cập
Đối tượng Screen
Lập trình hướng đối tượng và mô hình DOM 26
Thuộc tính Giải thích
availHeight Trả về chiểu dài của màn hình (trừ kích thước của window taskbar)
availWidth Trả về chiều rộng của màn hình (trừ kích thước của window
taskbar)
height Trả về chiều dài của màn hình
with Trả về chiểu rộng của màn hình
pixelDepth Trả về độ phân giải của màn hình
colorDepth Trả về bảng màu để hiển thị ảnh
Demo xác định chiều dài và
chiều rộng của màn hình người truy cập
alert("Chieu cao con lai la: " + screen.availHeight);
alert("Tong so chieu cao la: " + screen.height);
alert("Bang mau la: " + screen.colorDepth);
Lập trình hướng đối tượng và mô hình DOM 27
Mỗi trình duyệt có cách thức thi hành mã JavaScript riêng
Có thể cùng thực hiện một chức năng, nhưng đối với từng
trình duyệt, cần phải viết các đoạn mã khác nhau
 Cần biết thông tin về trình duyệt để viết mã JavaScript
phù hợp
Đối tượng Navigator cung cấp các thông tin về trình duyệt
Đối tượng Navigator
Lập trình hướng đối tượng và mô hình DOM 28
Các phương thức
và thuộc tính của Navigator
Thuộc tính Giải thích
appCodeName Trả về mã của trình duyệt
appName Trả về tên của trình duyệt
appVersion Trả về phiên bản của trình duyệt
cookieEnabled Xác định xem Cookie có được bật hay không
platform Trả về nền tảng mà trình duyệt được biên dịch
Lập trình hướng đối tượng và mô hình DOM 29
platform Trả về nền tảng mà trình duyệt được biên dịch
Phương thức Giải thích
javaEnabled() Xác định xem trình duyệt có kích hoạt Java hay không
Tham khảo thêm trang
http://www.w3schools.com/jsref/obj_navigator.asp
để biết thêm nhiều phương thức khác
Demo sử dụng
Navigator để lấy thông tin trình duyệt
document.write("appCodeName: " + navigator.appCodeName + "<br>");
document.write("appName: " + navigator.appName +"<br>");
document.write("version: " + navigator.version + "<br>");
document.write("cookieEnabled: " + navigator.cookieEnabled);
Lập trình hướng đối tượng và mô hình DOM 30
Chứa thông tin về URL hiện tại
Đối tượng Location
Thuộc tính Giải thích
host Trả về tên host và cổng của URL
hostname Trả về tên host
href Trả về toàn bộ URL
pathname Trả về tên đường dẫn của URL
Lập trình hướng đối tượng và mô hình DOM 31
pathname Trả về tên đường dẫn của URL
port Trả về cổng mà server sử dụng cho URL
protocol Trả về protocol của URL
Phương
thức
Giải thích
assign() Load document mới
reload() Load lại document hiện tại
Demo hiển thị thông tin của URL
document.write("host: " + location.host + "<br>");
document.write("hostname: " + location.hostname + "<br>");
document.write("href: " + location.href + "<br>");
document.write("pathname: " + location.pathname + "<br>");
document.write("port: " + location.port + "<br>");
document.write("protocol: " + location.protocol + "<br>");
Lập trình hướng đối tượng và mô hình DOM 32
Vào trang http://www.braingia.org/location.html
Demo hiển thị thông tin của URL
Lập trình hướng đối tượng và mô hình DOM 33
Demo sử dụng location để mở URL mới
<html >
<head>
<script type="text/javascript">
function newDoc() {
window.location.assign("http://www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Load new document"
onclick="newDoc()" />
</body>
</html>
Lập trình hướng đối tượng và mô hình DOM 34
<html >
<head>
<script type="text/javascript">
function newDoc() {
window.location.assign("http://www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Load new document"
onclick="newDoc()" />
</body>
</html>
Chứa thông tin về các URL được người dùng truy cập
Đối tượng History
Thuộc tính Giải thích
length Trả về số lượng URL trong danh sách History
Lập trình hướng đối tượng và mô hình DOM 35
Phương
thức
Giải thích
back() Load URL trước đó trong danh sách History
forward() Load URL sau đó trong danh sách History
go() Load URL cụ thể từ History
Định nghĩa hàm trong thẻ JavaScript
Gọi hàm
Xem mã trong thư mục “Vi du History Object”
Demo sử dụng History
function goBack() {
history.back();
}
function goNext() {
history.forward();
}
Định nghĩa hàm trong thẻ JavaScript
Gọi hàm
Xem mã trong thư mục “Vi du History Object”
Lập trình hướng đối tượng và mô hình DOM 36
function goBack() {
history.back();
}
function goNext() {
history.forward();
}
<p><a href = "#" onclick="goBack()">Back</a></p>
<p><a href = "#" onclick="goNext()">Next</a></p>
Tổng kết bài học
Có rất nhiều phương thức lập trình. Mỗi phương thức
phù hợp cho một mục đích riêng. phương thức lập
trình hướng đối tượng là được phát triển rộng rãi
nhất
Mỗi đối tượng có các thuộc tính và phương thức riêng
Các đối tượng có các thuộc tính và phương thức giống
nhau thuộc cùng một lớp
Browser Object Module là tập hợp các đối tượng
được xây dựng sẵn giúp lập trình viên thao tác với trình
duyệt
Mỗi trình duyệt hỗ trợ mô hình BOM theo các cách
khác nhau nên lập trình viên cần phải tìm hiểu sâu về
trình duyệt để viết mã chạy trên nhiều trình duyệt
Có rất nhiều phương thức lập trình. Mỗi phương thức
phù hợp cho một mục đích riêng. phương thức lập
trình hướng đối tượng là được phát triển rộng rãi
nhất
Mỗi đối tượng có các thuộc tính và phương thức riêng
Các đối tượng có các thuộc tính và phương thức giống
nhau thuộc cùng một lớp
Browser Object Module là tập hợp các đối tượng
được xây dựng sẵn giúp lập trình viên thao tác với trình
duyệt
Mỗi trình duyệt hỗ trợ mô hình BOM theo các cách
khác nhau nên lập trình viên cần phải tìm hiểu sâu về
trình duyệt để viết mã chạy trên nhiều trình duyệt
Lập trình hướng đối tượng và mô hình DOM 37
Tổng kết bài học
Trình duyệt được biểu diễn bằng đối tượng window.
Đối tượng window có các đối tượng con là document,
frames, history, location, navigator, screen
Đối tượng document đại diện cho nội dung trang web
Đối tượng history chứa thông tin về các url được người
dùng truy cập
Đối tượng location chứa thông tin về url hiện tại
Đối tượng navigator chứa thông tin về trình duyệt
Đối tượng screen chứa thông tin về màn hình
Trình duyệt được biểu diễn bằng đối tượng window.
Đối tượng window có các đối tượng con là document,
frames, history, location, navigator, screen
Đối tượng document đại diện cho nội dung trang web
Đối tượng history chứa thông tin về các url được người
dùng truy cập
Đối tượng location chứa thông tin về url hiện tại
Đối tượng navigator chứa thông tin về trình duyệt
Đối tượng screen chứa thông tin về màn hình
Lập trình hướng đối tượng và mô hình DOM 38

More Related Content

Viewers also liked

Giáo trình xử lý ảnh
Giáo trình xử lý ảnhGiáo trình xử lý ảnh
Giáo trình xử lý ảnh
Tùng Trần
 

Viewers also liked (19)

Bài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPTBài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPT
 
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng web
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng webBài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng web
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng web
 
BÀI 3 Làm việc với JAVASCRIPT và JQUERY - Giáo trình FPT
BÀI 3 Làm việc với JAVASCRIPT và JQUERY - Giáo trình FPTBÀI 3 Làm việc với JAVASCRIPT và JQUERY - Giáo trình FPT
BÀI 3 Làm việc với JAVASCRIPT và JQUERY - Giáo trình FPT
 
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPT
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTBài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPT
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPT
 
BÀI 3: Các khái niệm cơ bản trong lập trình - Giáo trình FPT
BÀI 3: Các khái niệm cơ bản trong lập trình - Giáo trình FPTBÀI 3: Các khái niệm cơ bản trong lập trình - Giáo trình FPT
BÀI 3: Các khái niệm cơ bản trong lập trình - Giáo trình FPT
 
Bài 5 Bố cục trang cơ bản - Giáo trình FPT
Bài 5 Bố cục trang cơ bản - Giáo trình FPTBài 5 Bố cục trang cơ bản - Giáo trình FPT
Bài 5 Bố cục trang cơ bản - Giáo trình FPT
 
Bài 2: Lập trình hướng đối tượng (OOP) - Giáo trình FPT
Bài 2: Lập trình hướng đối tượng (OOP) - Giáo trình FPTBài 2: Lập trình hướng đối tượng (OOP) - Giáo trình FPT
Bài 2: Lập trình hướng đối tượng (OOP) - Giáo trình FPT
 
Nhap xuat trong java
Nhap xuat trong javaNhap xuat trong java
Nhap xuat trong java
 
Slide6 html5
Slide6 html5Slide6 html5
Slide6 html5
 
Bài giảng HTML5-CSS3
Bài giảng HTML5-CSS3Bài giảng HTML5-CSS3
Bài giảng HTML5-CSS3
 
Slide4 html5
Slide4 html5Slide4 html5
Slide4 html5
 
Slide3 html5
Slide3 html5Slide3 html5
Slide3 html5
 
Web2022 slide 1
Web2022   slide 1Web2022   slide 1
Web2022 slide 1
 
Slide1 html5
Slide1 html5Slide1 html5
Slide1 html5
 
Slide2 html5
Slide2 html5Slide2 html5
Slide2 html5
 
Slide5 html5
Slide5 html5Slide5 html5
Slide5 html5
 
Giáo trình xử lý ảnh
Giáo trình xử lý ảnhGiáo trình xử lý ảnh
Giáo trình xử lý ảnh
 
Bài 7 - Xử lý nhập xuất - Nền tảng lập trình ứng dụng với C#
Bài 7 - Xử lý nhập xuất - Nền tảng lập trình ứng dụng với C#Bài 7 - Xử lý nhập xuất - Nền tảng lập trình ứng dụng với C#
Bài 7 - Xử lý nhập xuất - Nền tảng lập trình ứng dụng với C#
 
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
 

More from 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
 

More from 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
 
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...
 
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
 

Bài 4: Lập trình hướng đối tượng và mô hình BOM - Giáo trình FPT

  • 1. Bài 4: Lập trình hướng đối tượng và mô hình BOM
  • 2. Cấu trúc điều khiển Cấu trúc lựa chọn Lệnh lựa chọn đơn Lệnh lựa chọn kép Lệnh đa lựa chọn Cấu trúc lặp Lặp không biết trước số lần lặp Lặp biết trước số lần lặp Hàm Hệ thống bài cũ Cấu trúc điều khiển Cấu trúc lựa chọn Lệnh lựa chọn đơn Lệnh lựa chọn kép Lệnh đa lựa chọn Cấu trúc lặp Lặp không biết trước số lần lặp Lặp biết trước số lần lặp Hàm Lập trình hướng đối tượng và mô hình DOM 2
  • 3. Phương thức lập trình Phương thức lập trình hướng đối tượng Khái niệm đối tượng, thuộc tính và phương thức Tạo đối tượng Thêm thuộc tính và phương thức vào đối tượng Khái niệm về lớp Định nghĩa lớp, tạo đối tượng từ lớp Các thao tác với đối tượng trong lớp Browser Object Model Mục tiêu bài học Phương thức lập trình Phương thức lập trình hướng đối tượng Khái niệm đối tượng, thuộc tính và phương thức Tạo đối tượng Thêm thuộc tính và phương thức vào đối tượng Khái niệm về lớp Định nghĩa lớp, tạo đối tượng từ lớp Các thao tác với đối tượng trong lớp Browser Object Model Lập trình hướng đối tượng và mô hình DOM 3
  • 4. PHƯƠNG THỨC LẬP TRÌNH Lập trình hướng đối tượng và mô hình DOM 4 PHƯƠNG THỨC LẬP TRÌNH
  • 5. Lập trình là để giải quyết các vấn đề trong cuộc sống Bài toán tính toán phức tạp: Lập trình cho tên lửa bay vào vũ trụ Bài toán logic: Đưa ra quyết định (dự báo thời tiết) Bài toán quản lý trong các doanh nghiệp (phần mềm tính lương) Phương thức lập trình (programing paradigm) đặc tả cách thức giải quyết vấn đề Phương thức lập trình Lập trình là để giải quyết các vấn đề trong cuộc sống Bài toán tính toán phức tạp: Lập trình cho tên lửa bay vào vũ trụ Bài toán logic: Đưa ra quyết định (dự báo thời tiết) Bài toán quản lý trong các doanh nghiệp (phần mềm tính lương) Phương thức lập trình (programing paradigm) đặc tả cách thức giải quyết vấn đề Lập trình hướng đối tượng và mô hình DOM 5
  • 6. Có hơn 25 phương thức lập trình Mỗi phương thức lập trình giải quyết cho một vấn đề Một số phương thức khó đi vào thực tiễn lập trình Một số phương thức lập trình chỉ được hưởng ứng bởi một nhóm người hay trong một thời gian ngắn Những phương thức lập trình phổ biến: lập trình hướng sự kiện lập trình hướng thành phần lập trình cấu trúc lập trình hướng đối tượng Phương thức lập trình hướng đối tượng được phát triển rộng rãi hơn cả phương thức lập trình Có hơn 25 phương thức lập trình Mỗi phương thức lập trình giải quyết cho một vấn đề Một số phương thức khó đi vào thực tiễn lập trình Một số phương thức lập trình chỉ được hưởng ứng bởi một nhóm người hay trong một thời gian ngắn Những phương thức lập trình phổ biến: lập trình hướng sự kiện lập trình hướng thành phần lập trình cấu trúc lập trình hướng đối tượng Phương thức lập trình hướng đối tượng được phát triển rộng rãi hơn cả Lập trình hướng đối tượng và mô hình DOM 6
  • 7. PHƯƠNG THỨC LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG Lập trình hướng đối tượng và mô hình DOM 7 PHƯƠNG THỨC LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG
  • 8. Đối tượng là tất cả mọi thứ trong cuộc sống (các đồ vật, sự vật) Quả bóng, cái bàn, ô tô, bông hoa, con người, nhà máy… Mỗi đối tượng có đặc tính và hành động riêng Ý tưởng chủ đạo của phương thức lập trình hướng đối tượng: Mô phỏng cuộc sống thực trong lập trình Trong cuộc sống có những đối tượng như quả bóng, cái bàn… với các đặc tính và hành động riêng thì trong lập trình mô phỏng các đối tượng đó với các đặc tính và hành động như thế Lập trình hướng đối tượng Đối tượng là tất cả mọi thứ trong cuộc sống (các đồ vật, sự vật) Quả bóng, cái bàn, ô tô, bông hoa, con người, nhà máy… Mỗi đối tượng có đặc tính và hành động riêng Ý tưởng chủ đạo của phương thức lập trình hướng đối tượng: Mô phỏng cuộc sống thực trong lập trình Trong cuộc sống có những đối tượng như quả bóng, cái bàn… với các đặc tính và hành động riêng thì trong lập trình mô phỏng các đối tượng đó với các đặc tính và hành động như thế Lập trình hướng đối tượng và mô hình DOM 8
  • 9. Mèo có những đặc tính: Màu lông: tam thể Nặng: 2kg Móng: sắc Mèo có những hành động: Bắt chuột Liếm lông Trong lập trình: đặc tính được gọi là thuộc tính, hành động được gọi là phương thức Thuộc tính và phương thức của đối tượng Voi có những đặc tính: Màu da: nâu Nặng: 2 tấn Vòi: 1m Voi có những hành động: Phun nước Ăn cỏ Mèo có những đặc tính: Màu lông: tam thể Nặng: 2kg Móng: sắc Mèo có những hành động: Bắt chuột Liếm lông Trong lập trình: đặc tính được gọi là thuộc tính, hành động được gọi là phương thức Lập trình hướng đối tượng và mô hình DOM 9 Voi có những đặc tính: Màu da: nâu Nặng: 2 tấn Vòi: 1m Voi có những hành động: Phun nước Ăn cỏ
  • 10. Các đối tượng có cùng thuộc tính và phương thức được gom lại thành một lớp Hay: Lớp định nghĩa tập hợp các đối tượng có cùng thuộc tính và phương thức Lớp Lập trình hướng đối tượng và mô hình DOM 10
  • 11. Sử dụng từ khóa new Tạo đối tượng var meo = new Object var hoa = new Object var tendoituong = new Object Lập trình hướng đối tượng và mô hình DOM 11 var meo = new Object var hoa = new Object
  • 12. Thêm thuộc tính cho đối tượng Truy cập đến thuộc tính của đối tượng Thêm và truy cập đến thuộc tính hoaDao.mau = "Hong" hoaDao.soCanh = "5" tendoituong.tenthuoctinh = giatri Thêm thuộc tính cho đối tượng Truy cập đến thuộc tính của đối tượng Lập trình hướng đối tượng và mô hình DOM 12 alert(hoaDao.mau) alert(hoaDao.soCanh) tendoituong.tenthuoctinh
  • 13. Thêm phương thức Gọi phương thức Thêm và gọi phương thức tendoituong.tenphuongthuc = function(){ //Viết mã cho phương thức ở đây } hoaDao.toaHuong= function () { alert("Toi co mau Hong, toi dang toa huong"); } Thêm phương thức Gọi phương thức Lập trình hướng đối tượng và mô hình DOM 13 hoaDao.toaHuong(); hoaDao.toaHuong= function () { alert("Toi co mau Hong, toi dang toa huong"); } tendoituong.tenphuongthuc()
  • 14. Vấn đề nảy sinh: Giả sử trong vườn có nhiều loại hoa, mỗi loại hoa có màu sắc, số cánh khác nhau  Tạo một khuôn mẫu chung (lớp) Tạo một khuôn mẫu cho đối tượng var hoaDao = new Object hoaDao.mau = " Hong" hoaDao.soCanh = "5" hoaDao.toaHuong= function () { alert("Toi co mau Hong, toi dang toa huong!"); } var hoaHong = new Object hoaHong.mau = " Do" hoaHong.soCanh = " 10" hoaHong.toaHuong= function () { alert("Toi co mau Do, toi dang toa huong!"); } var hoaCuc = new Object hoaCuc.mau = " Vang" hoaCuc.soCanh = " 20" hoaCuc.toaHuong= function () { alert("Toi co mau vang, toi dang toa huong!"); } var hoaLan = new Object hoaLan.mau = "Tim" hoaLan.soCanh = "3" hoaLan.toaHuong= function () { alert("Toi co mau tim, toi dang toa huong!"); } Vấn đề nảy sinh: Giả sử trong vườn có nhiều loại hoa, mỗi loại hoa có màu sắc, số cánh khác nhau  Tạo một khuôn mẫu chung (lớp) Lập trình hướng đối tượng và mô hình DOM 14 var hoaDao = new Object hoaDao.mau = " Hong" hoaDao.soCanh = "5" hoaDao.toaHuong= function () { alert("Toi co mau Hong, toi dang toa huong!"); } var hoaHong = new Object hoaHong.mau = " Do" hoaHong.soCanh = " 10" hoaHong.toaHuong= function () { alert("Toi co mau Do, toi dang toa huong!"); } var hoaCuc = new Object hoaCuc.mau = " Vang" hoaCuc.soCanh = " 20" hoaCuc.toaHuong= function () { alert("Toi co mau vang, toi dang toa huong!"); } var hoaLan = new Object hoaLan.mau = "Tim" hoaLan.soCanh = "3" hoaLan.toaHuong= function () { alert("Toi co mau tim, toi dang toa huong!"); }
  • 15. Định nghĩa lớp Định nghĩa khuôn mẫu (lớp) cho đối tượng function tenlop (tenbien1, tenbien2…){ tenthuoctinh1 = tenbien1; tenthuoctinh2 = tenbien2; tenphuongthuc = function(){ //Viết mã cho phương thức ở đây } } Lập trình hướng đối tượng và mô hình DOM 15 function Hoa(mauHoa, soCanhHoa){ this.mau = mauHoa; this.soCanh = soCanhHoa; this.toaHuong = function(){ alert("toi co mau " + this.mau + ", toi dang toa huong"); } } function tenlop (tenbien1, tenbien2…){ tenthuoctinh1 = tenbien1; tenthuoctinh2 = tenbien2; tenphuongthuc = function(){ //Viết mã cho phương thức ở đây } }
  • 16. Tạo đối tượng Truy cập đến thuộc tính và phương thức của đối tượng Tạo đối tượng và sử dụng đối tượng Hoa ["Dao"] = new Hoa ("Hong", "5"); Hoa ["Hong"] = new Hoa ("Do", "10"); Hoa ["Cuc"] = new Hoa ("Vang", "20"); Hoa ["Lan"] = new Hoa ("Tim", "3"); tenlop["tendoituong"] = new tenlop (giatri1, giatri2…) Tạo đối tượng Truy cập đến thuộc tính và phương thức của đối tượng Lập trình hướng đối tượng và mô hình DOM 16 Hoa ["Dao"].toaHuong() Hoa ["Hong"].toaHuong() Hoa ["Cuc"].toaHuong() Hoa ["Lan"].toaHuong() tenlop["tendoituong"].tenthuoctinh tenlop["tendoituong"].tenphuongthuc
  • 17. Lặp qua các đối tượng Tìm một đối tượng trong thuộc lớp Thêm thuộc tính cho đối tượng thuộc lớp Thao tác với đối tượng trong Lớp for (var x in Hoa) { Hoa[x].toaHuong(); } if ("Dao" in Hoa) { alert(" Doi tuong Dao da duoc tao"); } else { alert(" Đối tượng Dao chua duoc tao"); } Lặp qua các đối tượng Tìm một đối tượng trong thuộc lớp Thêm thuộc tính cho đối tượng thuộc lớp Lập trình hướng đối tượng và mô hình DOM 17 if ("Dao" in Hoa) { alert(" Doi tuong Dao da duoc tao"); } else { alert(" Đối tượng Dao chua duoc tao"); } if ("Dao" in Hoa) { Hoa["Dao"].bieuTuong = "Mua Xuan" } alert("Hoa dao bieu tuong cho " + Hoa["Dao"].bieuTuong);
  • 18. Lập trình hướng đối tượng và mô hình DOM 18 Browser Object Model
  • 19. Browser Object Model là một hệ thống phân cấp hình cây gồm các đối tượng Các đối tượng cung cấp thuộc tính và phương thức cho lập trình viên JavaScript Đối với mỗi đối tượng, mỗi trình duyệt hỗ trợ các thuộc tính và phương thức khác nhau Hiểu môi trường mà trình duyệt cung cấp để viết mã JavaScript chạy ổn định trên nhiều trình duyệt Browser Object Model (Mô hình đối tượng trình duyệt) windowwindow documentdocument framesframes historyhistory locationlocation navigatornavigator screenscreendocument history location navigator screen window trình duyệt (browser) Browser Object Model là một hệ thống phân cấp hình cây gồm các đối tượng Các đối tượng cung cấp thuộc tính và phương thức cho lập trình viên JavaScript Đối với mỗi đối tượng, mỗi trình duyệt hỗ trợ các thuộc tính và phương thức khác nhau Hiểu môi trường mà trình duyệt cung cấp để viết mã JavaScript chạy ổn định trên nhiều trình duyệt Lập trình hướng đối tượng và mô hình DOM 19 document frames history location navigator screendocument screen
  • 20. Window là đối tượng thể hiển cửa số hiển thị hiện tại trên trình duyệt Một số phương thức của đối tượng window đã được sử dụng: alert(), prompt(), confirm() Các thuộc tính và phương thức của window có thể gọi trực tiếp hoặc thông qua window Đối tượng Window Lập trình hướng đối tượng và mô hình DOM 20 alert("Hi") hoặc window.alert("Hi")
  • 21. Thuộc tính Giải thích Có giá trị là True khi cửa sổ được đóng Thiết lập văn bản mặc định trên thanh trạng thái của trình duyệt Thiết lập hoặc trả về tên của cửa sổ Tham chiếu đến cửa sổ tạo ra cửa sổ hiện tại Dùng để thiết lập văn bản trên thanh trạng thái khi người dùng di chuột trên một thành phần trên cửa sổ (ví dụ khi người dùng di chuột lên links) Các thuộc tính của Window closed defaultStatus name opener status Dùng để thiết lập văn bản trên thanh trạng thái khi người dùng di chuột trên một thành phần trên cửa sổ (ví dụ khi người dùng di chuột lên links) Thiết lập hoặc trả về chiều cao phần nội dung của cửa sổ Trả về đối tượng document của cửa sổ Lập trình hướng đối tượng và mô hình DOM 21 Tham khảo thêm trang http://www.w3schools.com/jsref/obj_window.asp để biết thêm nhiều thuộc tính khác status document innerHeight
  • 22. FireFox hỗ trợ thuộc tính này trong khi IE không hỗ trợ Tham khảo trang w3school để biết được trình duyệt nào hỗ trợ phương thức và thuộc tính nào Demo sử dụng thuộc tính innerHeight alert(window.innerHeight) FireFox hỗ trợ thuộc tính này trong khi IE không hỗ trợ Tham khảo trang w3school để biết được trình duyệt nào hỗ trợ phương thức và thuộc tính nào Lập trình hướng đối tượng và mô hình DOM 22
  • 23. Đối với IE, để hiển thị Status bar phải chọn “Status bar” Phiên bản 8 của Firefox không hỗ trợ default status bar Demo sử dụng thuộc tính defaultStatus window.defaultStatus= "JavaScript - Bai 4" Chọn Status bar Đối với IE, để hiển thị Status bar phải chọn “Status bar” Phiên bản 8 của Firefox không hỗ trợ default status bar Lập trình hướng đối tượng và mô hình DOM 23 Status bar
  • 24. Các phương thức của Window Phương thức Giải thích focus() Chuyển focus đến cửa sổ blur() Bỏ focus đến cửa sổ close() Đóng cửa sổ open() Mở cửa sổ print() Thực hiện chức năng in Lập trình hướng đối tượng và mô hình DOM 24 print() Thực hiện chức năng in moveTo() Sử dụng để chuyển cửa sổ về vị trí xác định resizeTo() Sử dụng để thay đổi kích thước cửa cửa sổ về vị trí xác định Tham khảo thêm trang http://www.w3schools.com/jsref/obj_window.asp để biết thêm nhiều phương thức khác
  • 25. Sử dụng để mở một cửa sổ từ cửa sổ hiện thời url: url của trang web ten: tên của cửa sổ sẽ mở dactinh: các đặc tính mà cửa sổ được mở sẽ có (mỗi trình duyệt sẽ hỗ trợ một tập các đặc tính riêng) window.open window.open(url, ten, dactinh) window.open("http://www.google.com.vn/", "timkiem", "menubar = yes, width = 800, height = 600") Sử dụng để mở một cửa sổ từ cửa sổ hiện thời url: url của trang web ten: tên của cửa sổ sẽ mở dactinh: các đặc tính mà cửa sổ được mở sẽ có (mỗi trình duyệt sẽ hỗ trợ một tập các đặc tính riêng) Lập trình hướng đối tượng và mô hình DOM 25 window.open("http://www.google.com.vn/", "timkiem", "menubar = yes, width = 800, height = 600") Chú ý: - Chỉ nên sử dụng cách này khi thật cần thiết vì trình duyệt có thể bị disable javascript - Có thể sử dụng thẻ <a> để thay thế
  • 26. Mỗi người truy cập sử dụng màn hình có độ phân giải khác nhau, kích thước khác nhau, dải màu khác nhau…  Người lập trình phải nắm được thông tin này để hiển thị ảnh phù hợp, hiển thị trang web có kích thước phù hợp… Đối tượng screen cung cấp thuộc tính để lấy thông tin về màn hình của người truy cập Đối tượng Screen Lập trình hướng đối tượng và mô hình DOM 26 Thuộc tính Giải thích availHeight Trả về chiểu dài của màn hình (trừ kích thước của window taskbar) availWidth Trả về chiều rộng của màn hình (trừ kích thước của window taskbar) height Trả về chiều dài của màn hình with Trả về chiểu rộng của màn hình pixelDepth Trả về độ phân giải của màn hình colorDepth Trả về bảng màu để hiển thị ảnh
  • 27. Demo xác định chiều dài và chiều rộng của màn hình người truy cập alert("Chieu cao con lai la: " + screen.availHeight); alert("Tong so chieu cao la: " + screen.height); alert("Bang mau la: " + screen.colorDepth); Lập trình hướng đối tượng và mô hình DOM 27
  • 28. Mỗi trình duyệt có cách thức thi hành mã JavaScript riêng Có thể cùng thực hiện một chức năng, nhưng đối với từng trình duyệt, cần phải viết các đoạn mã khác nhau  Cần biết thông tin về trình duyệt để viết mã JavaScript phù hợp Đối tượng Navigator cung cấp các thông tin về trình duyệt Đối tượng Navigator Lập trình hướng đối tượng và mô hình DOM 28
  • 29. Các phương thức và thuộc tính của Navigator Thuộc tính Giải thích appCodeName Trả về mã của trình duyệt appName Trả về tên của trình duyệt appVersion Trả về phiên bản của trình duyệt cookieEnabled Xác định xem Cookie có được bật hay không platform Trả về nền tảng mà trình duyệt được biên dịch Lập trình hướng đối tượng và mô hình DOM 29 platform Trả về nền tảng mà trình duyệt được biên dịch Phương thức Giải thích javaEnabled() Xác định xem trình duyệt có kích hoạt Java hay không Tham khảo thêm trang http://www.w3schools.com/jsref/obj_navigator.asp để biết thêm nhiều phương thức khác
  • 30. Demo sử dụng Navigator để lấy thông tin trình duyệt document.write("appCodeName: " + navigator.appCodeName + "<br>"); document.write("appName: " + navigator.appName +"<br>"); document.write("version: " + navigator.version + "<br>"); document.write("cookieEnabled: " + navigator.cookieEnabled); Lập trình hướng đối tượng và mô hình DOM 30
  • 31. Chứa thông tin về URL hiện tại Đối tượng Location Thuộc tính Giải thích host Trả về tên host và cổng của URL hostname Trả về tên host href Trả về toàn bộ URL pathname Trả về tên đường dẫn của URL Lập trình hướng đối tượng và mô hình DOM 31 pathname Trả về tên đường dẫn của URL port Trả về cổng mà server sử dụng cho URL protocol Trả về protocol của URL Phương thức Giải thích assign() Load document mới reload() Load lại document hiện tại
  • 32. Demo hiển thị thông tin của URL document.write("host: " + location.host + "<br>"); document.write("hostname: " + location.hostname + "<br>"); document.write("href: " + location.href + "<br>"); document.write("pathname: " + location.pathname + "<br>"); document.write("port: " + location.port + "<br>"); document.write("protocol: " + location.protocol + "<br>"); Lập trình hướng đối tượng và mô hình DOM 32
  • 33. Vào trang http://www.braingia.org/location.html Demo hiển thị thông tin của URL Lập trình hướng đối tượng và mô hình DOM 33
  • 34. Demo sử dụng location để mở URL mới <html > <head> <script type="text/javascript"> function newDoc() { window.location.assign("http://www.w3schools.com") } </script> </head> <body> <input type="button" value="Load new document" onclick="newDoc()" /> </body> </html> Lập trình hướng đối tượng và mô hình DOM 34 <html > <head> <script type="text/javascript"> function newDoc() { window.location.assign("http://www.w3schools.com") } </script> </head> <body> <input type="button" value="Load new document" onclick="newDoc()" /> </body> </html>
  • 35. Chứa thông tin về các URL được người dùng truy cập Đối tượng History Thuộc tính Giải thích length Trả về số lượng URL trong danh sách History Lập trình hướng đối tượng và mô hình DOM 35 Phương thức Giải thích back() Load URL trước đó trong danh sách History forward() Load URL sau đó trong danh sách History go() Load URL cụ thể từ History
  • 36. Định nghĩa hàm trong thẻ JavaScript Gọi hàm Xem mã trong thư mục “Vi du History Object” Demo sử dụng History function goBack() { history.back(); } function goNext() { history.forward(); } Định nghĩa hàm trong thẻ JavaScript Gọi hàm Xem mã trong thư mục “Vi du History Object” Lập trình hướng đối tượng và mô hình DOM 36 function goBack() { history.back(); } function goNext() { history.forward(); } <p><a href = "#" onclick="goBack()">Back</a></p> <p><a href = "#" onclick="goNext()">Next</a></p>
  • 37. Tổng kết bài học Có rất nhiều phương thức lập trình. Mỗi phương thức phù hợp cho một mục đích riêng. phương thức lập trình hướng đối tượng là được phát triển rộng rãi nhất Mỗi đối tượng có các thuộc tính và phương thức riêng Các đối tượng có các thuộc tính và phương thức giống nhau thuộc cùng một lớp Browser Object Module là tập hợp các đối tượng được xây dựng sẵn giúp lập trình viên thao tác với trình duyệt Mỗi trình duyệt hỗ trợ mô hình BOM theo các cách khác nhau nên lập trình viên cần phải tìm hiểu sâu về trình duyệt để viết mã chạy trên nhiều trình duyệt Có rất nhiều phương thức lập trình. Mỗi phương thức phù hợp cho một mục đích riêng. phương thức lập trình hướng đối tượng là được phát triển rộng rãi nhất Mỗi đối tượng có các thuộc tính và phương thức riêng Các đối tượng có các thuộc tính và phương thức giống nhau thuộc cùng một lớp Browser Object Module là tập hợp các đối tượng được xây dựng sẵn giúp lập trình viên thao tác với trình duyệt Mỗi trình duyệt hỗ trợ mô hình BOM theo các cách khác nhau nên lập trình viên cần phải tìm hiểu sâu về trình duyệt để viết mã chạy trên nhiều trình duyệt Lập trình hướng đối tượng và mô hình DOM 37
  • 38. Tổng kết bài học Trình duyệt được biểu diễn bằng đối tượng window. Đối tượng window có các đối tượng con là document, frames, history, location, navigator, screen Đối tượng document đại diện cho nội dung trang web Đối tượng history chứa thông tin về các url được người dùng truy cập Đối tượng location chứa thông tin về url hiện tại Đối tượng navigator chứa thông tin về trình duyệt Đối tượng screen chứa thông tin về màn hình Trình duyệt được biểu diễn bằng đối tượng window. Đối tượng window có các đối tượng con là document, frames, history, location, navigator, screen Đối tượng document đại diện cho nội dung trang web Đối tượng history chứa thông tin về các url được người dùng truy cập Đối tượng location chứa thông tin về url hiện tại Đối tượng navigator chứa thông tin về trình duyệt Đối tượng screen chứa thông tin về màn hình Lập trình hướng đối tượng và mô hình DOM 38