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 điều khiển Cấu trúc lựa chọn Cấu trúc lựa chọn
Lệnh lựa chọn đơn Lệnh lựa chọn đơn Lệnh lựa chọn kép Lệnh lựa chọn kép Lệnh đa lựa chọn Lệnh đa lựa chọn
Cấu trúc lặp Cấu trúc lặp
Lặp không biết trước số lần 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 Lặp biết trước số lần lặp
Hàm 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 Phương thức lập trình hướng đối tượng 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 Khái niệm đối tượng, thuộc tính và phương thức Tạo đối tượng Tạo đối tượng Thêm thuộc tính và phương thức và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 Khái niệm về lớp Định nghĩa lớp, tạo đối tượng từ 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 Các thao tác với đối tượng trong lớp
Browser Object Model Browser Object Model
Lập trình hướng đối tượng và mô hình DOM 3
PHƯƠNG THỨC PHƯƠNG THỨC
LẬP TRÌNH 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 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 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 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) 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 Phương thức lập trình (programing paradigm) đặc tả cách thức giải quyết vấn đề 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 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ỗ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 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 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ó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: 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 sự kiện lập trình hướng thành phần lập trình hướng thành phần lập trình cấu trúc lập trình cấu trúc lập trình hướng đối tượng 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 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ả 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 PHƯƠNG THỨC LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG 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ự Đối tượng là tất cả mọi thứ trong cuộc sống (các đồ vật, sự vật) vật)
Quả bóng, cái bàn, ô tô, bông hoa, con người, nhà máy… 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 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: Ý 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 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… 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 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ế 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
Voi có những đặc tính: Voi có những đặc tính:
Mèo có những đặc tính: Mèo có những đặc tính: Màu lông: tam thể Màu lông: tam thể Nặng: 2kg Nặng: 2kg Móng: sắc Móng: sắc
Màu da: nâu Màu da: nâu Nặng: 2 tấn Nặng: 2 tấn Vòi: 1m Vòi: 1m
Mèo có những hành động: Mèo có những hành động:
Voi có những hành động: Voi có những hành động:
Bắt chuột Bắt chuột Liếm lông Liếm lông
Phun nước Phun nước Ăn cỏ Ăn cỏ
Trong lập trình: đặc tính được gọi là thuộc tính, hành 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 độ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 meo = new Object var hoa = 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 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 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 Thêm phương thức
tendoituong.tenphuongthuc = function(){
//Viết mã cho phương thức ở đây
} hoaDao.toaHuong= function () { hoaDao.toaHuong= function () {
alert("Toi co mau Hong, toi dang toa huong"); alert("Toi co mau Hong, toi dang toa huong");
} }
Gọi phương thức 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 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 loại hoa có màu sắc, số cánh khác nhau
var hoaDao = new Object var hoaDao = new Object hoaDao.mau = " Hong" hoaDao.mau = " Hong" hoaDao.soCanh = "5" hoaDao.soCanh = "5" hoaDao.toaHuong= function () { hoaDao.toaHuong= function () {
var hoaCuc = new Object var hoaCuc = new Object hoaCuc.mau = " Vang" hoaCuc.mau = " Vang" hoaCuc.soCanh = " 20" hoaCuc.soCanh = " 20" hoaCuc.toaHuong= function () { hoaCuc.toaHuong= function () {
alert("Toi co mau Hong, toi dang alert("Toi co mau Hong, toi dang
alert("Toi co mau vang, toi dang alert("Toi co mau vang, toi dang
toa huong!"); toa huong!"); } } var hoaHong = new Object var hoaHong = new Object hoaHong.mau = " Do" hoaHong.mau = " Do" hoaHong.soCanh = " 10" hoaHong.soCanh = " 10" hoaHong.toaHuong= function () { hoaHong.toaHuong= function () {
toa huong!"); toa huong!"); } } var hoaLan = new Object var hoaLan = new Object hoaLan.mau = "Tim" hoaLan.mau = "Tim" hoaLan.soCanh = "3" hoaLan.soCanh = "3" hoaLan.toaHuong= function () { hoaLan.toaHuong= function () {
alert("Toi co mau Do, toi dang alert("Toi co mau Do, toi dang
alert("Toi co mau tim, toi dang alert("Toi co mau tim, toi dang
toa huong!"); toa huong!"); } }
toa huong!"); toa huong!"); } }
Tạo một khuôn mẫu chung (lớp) 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…){ function tenlop (tenbien1, tenbien2…){ tenthuoctinh1 = tenbien1; tenthuoctinh1 = tenbien1; tenthuoctinh2 = tenbien2; tenthuoctinh2 = tenbien2;
tenphuongthuc = function(){ tenphuongthuc = function(){
//Viết mã cho phương thức ở đây //Viết mã cho phương thức ở đây
} }
} }
function Hoa(mauHoa, soCanhHoa){
this.mau = mauHoa; this.soCanh = soCanhHoa; this.toaHuong = function(){
alert("toi co mau " + this.mau + ", toi dang toa
huong");
}
}
Lậ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 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 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 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 Tìm một đối tượng trong thuộc lớp
if ("Dao" in Hoa) { if ("Dao" in Hoa) {
alert(" Doi tuong Dao da duoc tao"); alert(" Doi tuong Dao da duoc tao");
} else { } else {
alert(" Đối tượng Dao chua duoc tao"); alert(" Đối tượng Dao chua duoc tao");
} }
Thêm thuộc tính cho đối tượng thuộc lớp 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
Browser 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 Browser Object Model là một hệ thống phân cấp hình cây gồm các đối tượng gồm các đối tượng
trình duyệt (browser)
window window window
frames frames frames
location location location location
history history history history
navigator navigator navigator navigator
document document document document document
screen screen screen screen screen
Các đối tượng cung cấp thuộc tính và phương thức cho lập 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 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 Đố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 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 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 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 window
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 closed
defaultStatus
name
opener
status status
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 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 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) 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ổ
innerHeight
document
Trả về đối tượng document của cửa sổ
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
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 IE không hỗ FireFox hỗ trợ thuộc tính này trong khi IE không hỗ trợ trợ Tham khảo trang w3school để biết được trình duyệt nào hỗ 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 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” Đố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 Phiên bản 8 của Firefox không hỗ trợ default status bar 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()
blur()
close()
open()
print() print()
moveTo()
resizeTo()
Chuyển focus đến cửa sổ Bỏ focus đến cửa sổ Đóng cửa sổ Mở cửa sổ Thực hiện chức năng in Thực hiện chức năng in Sử dụng để chuyển cửa sổ về vị trí xác định 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
Lập trình hướng đối tượng và mô hình DOM 24
window.open
Sử dụng để mở một cửa sổ từ cửa sổ hiện thời 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 url: url của trang web ten: tên của cửa sổ sẽ mở 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 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) sẽ hỗ trợ một tập các đặc tính riêng)
window.open("http://www.google.com.vn/", "timkiem", window.open("http://www.google.com.vn/", "timkiem", "menubar = yes, width = 800, height = 600") "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ẻ để thay thế
Lập trình hướng đối tượng và mô hình DOM 25
Đối tượng Screen
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
Thuộc tính Giải thích availHeight
availWidth
height
with
pixelDepth
colorDepth
Trả về chiểu dài của màn hình (trừ kích thước của window taskbar) Trả về chiều rộng của màn hình (trừ kích thước của window taskbar) Trả về chiều dài của màn hình Trả về chiểu rộng của màn hình Trả về độ phân giải của màn hình Trả về bảng màu để hiển thị ảnh
Lập trình hướng đối tượng và mô hình DOM 26
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
Đối tượng Navigator
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
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 appCodeName
appName
appVersion
cookieEnabled
platform platform
Giải thích Trả về mã của trình duyệt Trả về tên của trình duyệt Trả về phiên bản của trình duyệt Xác định xem Cookie có được bật hay không Trả về nền tảng mà trình duyệt được biên dịch Trả về nền tảng mà trình duyệt được biên dịch
Phương thức javaEnabled()
Giải thích 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
Lập trình hướng đối tượng và mô hình DOM 29
Demo sử dụng Navigator để lấy thông tin trình duyệt
document.write("appCodeName: " + navigator.appCodeName + "
");
document.write("appName: " + navigator.appName +"
");
document.write("version: " + navigator.version + "
");
document.write("cookieEnabled: " + navigator.cookieEnabled);
Lập trình hướng đối tượng và mô hình DOM 30
Đối tượng Location
Chứa thông tin về URL hiện tại
Thuộc tính host
hostname
href
pathname pathname
port
protocol
Giải thích Trả về tên host và cổng của URL Trả về tên host Trả về toàn bộ URL Trả về tên đường dẫn của URL Trả về tên đường dẫn của URL Trả về cổng mà server sử dụng cho URL Trả về protocol của URL
Giải thích
Phương thức assign()
reload()
Load document mới Load lại document hiện tại
Lập trình hướng đối tượng và mô hình DOM 31
Demo hiển thị thông tin của URL
document.write("host: " + location.host + "
");
document.write("hostname: " + location.hostname + "
");
document.write("href: " + location.href + "
");
document.write("pathname: " + location.pathname + "
");
document.write("port: " + location.port + "
");
document.write("protocol: " + location.protocol + "
");
Lập trình hướng đối tượng và mô hình DOM 32
Demo hiển thị thông tin của URL
Vào trang http://www.braingia.org/location.html
Lập trình hướng đối tượng và mô hình DOM 33
Demo sử dụng location để mở URL mới
onclick="newDoc()" />
Lập trình hướng đối tượng và mô hình DOM 34
Đối tượng History
Chứa thông tin về các URL được người dùng truy cập
Thuộc tính length
Giải thích Trả về số lượng URL trong danh sách History
Giải thích
Phương thức back()
Load URL trước đó trong danh sách History Load URL sau đó trong danh sách History
forward()
go()
Load URL cụ thể từ History
Lập trình hướng đối tượng và mô hình DOM 35
Demo sử dụng History
Định nghĩa hàm trong thẻ JavaScript Định nghĩa hàm trong thẻ JavaScript
function goBack() { function goBack() { history.back(); history.back();
} }
function goNext() { function goNext() { history.forward(); history.forward();
} }
Gọi hàm Gọi hàm
Xem mã trong thư mục “Vi du History Object” 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
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 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 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 trình hướng đối tượng là được phát triển rộng rãi nhất nhất Mỗi đối tượng có các thuộc tính và phương thức riêng 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 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 nhau thuộc cùng một lớp Browser Object Module là tập hợp các đối tượng 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 được xây dựng sẵn giúp lập trình viên thao tác với trình duyệt duyệt Mỗi trình duyệt hỗ trợ mô hình BOM theo các cách 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ề 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 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. 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, Đối tượng window có các đối tượng con là document, frames, history, location, navigator, screen frames, history, location, navigator, screen Đối tượng document đại diện cho nội dung trang web Đố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 Đối tượng history chứa thông tin về các url được người dùng truy cập dùng truy cập Đối tượng location chứa thông tin về url hiện tại Đố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 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 Đố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
