Bài giảng Bài 4: Lập trình hướng đối tượng và mô hình BOM - ĐH FPT

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


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


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 đề
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

5


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ậ
lậ
lậ
lậ

p
p
p
p

trình
trình
trình
trình

hư
hư
cấ
hư

ớ ng sự kiệ n
ớ ng thành phầ n
u trúc

ớ 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


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


Thuộ c tính và phư ơ ng thứ c củ a đố i tư ợ ng

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

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ỏ

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


Lớ p
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 trình hư ớ ng đố i tư ợ ng và mô hình DOM

10


Tạ o đố i tư ợ ng
Sử dụ ng từ khóa new

var tendoituong = new Object
var meo = new Object
var hoa = new Object

Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

11


Thêm và truy cậ p đế n thuộ c tính
Thêm thuộ c tính cho đố i tư ợ ng

tendoituong.tenthuoctinh = giatri

hoaDao.mau = "Hong"
hoaDao.soCanh = "5"
Truy cậ p đế n thuộ c tính củ a đố i tư ợ ng

tendoituong.tenthuoctinh
alert(hoaDao.mau)
alert(hoaDao.soCanh)
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

12


Thêm và gọ i phư ơ ng thứ c
Thêm 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");
}
Gọ i phư ơ ng thứ c

tendoituong.tenphuongthuc()
hoaDao.toaHuong();

Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

13

Tạ o mộ t khuôn mẫ u cho đố i tư ợ ng
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
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!");
}

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


Đị nh nghĩa
khuôn mẫ u ( lớ p) cho đố i tư ợ ng
Đị nh nghĩa lớ p
function tenlop (tenbien1, tenbien2…){
tenthuoctinh1 = tenbien1;
tenthuoctinh2 = tenbien2;
tenphuongthuc = function(){
//Viế t mã cho phư ơ ng thứ c ở đây
}
}

Lậ

function Hoa(mauHoa, soCanhHoa){
this.mau = mauHoa;
this.soCanh = soCanhHoa;
this.toaHuong = function(){
alert("toi co mau " + this.mau + ", toi dang toa
huong");
}

}
p trình hư ớ ng đố i tư ợ ng và mô hình DOM

15


Tạ o đố i tư ợ ng và sử

dụ ng đố i tư ợ ng

Tạ o đố i tư ợ ng

tenlop["tendoituong"] = new tenlop (giatri1, giatri2…)
Hoa ["Dao"] = new Hoa ("Hong", "5");
Hoa ["Hong"] = new Hoa ("Do", "10");
Hoa ["Cuc"] = new Hoa ("Vang", "20");
Hoa ["Lan"] = new Hoa ("Tim", "3");
Truy cậ p đế n thuộ c tính và phư ơ ng thứ c củ a đố i tư ợ ng

tenlop["tendoituong"].tenthuoctinh
tenlop["tendoituong"].tenphuongthuc
Hoa ["Dao"].toaHuong()
Hoa ["Hong"].toaHuong()
Hoa ["Cuc"].toaHuong()
Hoa ["Lan"].toaHuong()
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

16

Thao tác vớ i đố i tư ợ ng trong Lớ p
Lặ p qua các đố i tư ợ ng
for (var x in Hoa) {
Hoa[x].toaHuong();
}

Tìm mộ t đố i tư ợ ng trong thuộ c lớ p

if ("Dao" in Hoa) {
alert(" Doi tuong Dao da duoc tao");
} else {
alert(" Đố i tư ợ ng Dao chua duoc tao");
}

Thêm thuộ c tính cho đố i tư ợ ng thuộ c lớ p
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

17


Browser Object Model

Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

18

Brow ser Object Model
( Mô hình đố i tư ợ ng trình duyệ t)
Browser Object Model là mộ t hệ thố ng phân cấ p hình cây
gồ m các đố i tư ợ ng
window
document

frames

history

location

trình duyệ t
(browser)

navigator

screen

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

Đố i tư ợ ng Window
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 w indow

alert("Hi")
hoặ c
window.alert("Hi")

Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

20


Các thuộ c tính củ a Window
Thuộ c tính

Giả i thích

closed

Có giá trị là True khi cử a sổ

defaultStatus

Thiế t lậ p v n bả n mặ c ị nh trên thanh trạ ng thái củ a trình duyệ t

name

Thiế t lậ p hoặ c trả về tên củ a cử a sổ

opener

Tham chiế u ế n cử a sổ tạ o ra cử a sổ hiệ n tạ i

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ộ
chu t trên m
mộ t thành ph
phầ n trên ccử a ssổ (ví d
dụ khi ng
ngư ờ i dùng
di chuộ
chu t lên links)

innerHeight

Thiế t lậ p hoặ c trả về chiề u cao phầ n nộ i dung củ a cử a sổ

document

Trả về

ư ợ c óng

ố i tư ợ ng document củ a cử a sổ

Tham khả o thêm trang
/>để biế t thêm nhiề u thuộ c tính khác
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

21


Demo sử

dụ ng thuộ c tính innerHeight

alert(window.innerHeight)

FireFox hỗ trợ thuộ c tính này trong khi I E 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


Demo sử

dụ ng thuộ c tính defaultStatus

Đố i vớ i IE, để hiể n thị Status bar phả i chọ n “Status bar”

Chọ n
Status bar
window.defaultStatus= "JavaScript - Bai 4"

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


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
Thự
hiệ n ch
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
/>để biế t thêm nhiề u phư ơ ng thứ c khác
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

24


w indow .open
Sử dụ ng để mở mộ t cử a sổ từ cử a sổ hiệ n thờ i

window.open(url, ten, dactinh)
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(" "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ế

Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM

25