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 trình bày về phương thức lập trình, phương thức lập trình hướng đối tượng, browser object model.

Bài 4: Lậ p trình hư ng đố i tư ợ ng mơ hình BOM Hệ thố ng 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 mơ hình DOM Mụ c tiêu 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 phư ng thứ c Tạ o đố i tư ợ ng Thêm thuộ c tính phư ng thứ c vào đố i tư ợ ng Khái niệ m 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 lớ p Browser Object Model Lậ p trình hư ng đố i tư ợ ng mơ hình DOM PHƯ Ơ NG THỨ C LẬ P TRÌ NH Lậ p trình hư ng đố i tư ợ ng mô hình DOM Phư ng thứ c lậ p trình Lậ p trình để giả i quyế t vấ n đề cuộ c số ng Bài tốn tính tố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 quyế t đị nh (dự báo thờ i tiế t) Bài toán n lý 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 mơ hình DOM 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ó vào thự c tiễ n lậ p trình Mộ t số phư ng thứ c lậ p trình đư ợ c hư ng ứ ng bở i mộ t nhóm ngư i hay 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 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 Lậ p trình hư ng đố i tư ợ ng mơ hình DOM PHƯ Ơ NG THỨ C LẬ P TRÌ NH HƯ Ớ NG ĐỐ I TƯ Ợ NG Lậ p trình hư ng đố i tư ợ ng mơ hình DOM Lậ p trình hư ng đố i tư ợ ng Đố i tư ợ ng tấ t mọ i thứ cuộ c số ng (các đồ vậ t, vậ t) Quả bóng, bàn, ô tô, hoa, ngư i, nhà máy… Mỗ i đố i tư ợ ng có đặ c tính 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 lậ p trình Trong cuộ c số ng có nhữ ng đố i tư ợ ng bóng, bàn… vớ i đặ c tính hành độ ng riêng lậ p trình mơ phỏ ng đố i tư ợ ng vớ i đặ c tính hành độ ng Lậ p trình hư ng đố i tư ợ ng mơ hình DOM Thuộ c tính 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: 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 thuộ c tính, hành độ ng đư ợ c gọ i phư ng thứ c Lậ p trình hư ng đố i tư ợ ng mơ hình DOM Lớ p Các đố i tư ợ ng có thuộ c tính phư ng thứ c đư ợ c gom lạ i thành mộ t lớ p Hay: Lớ p đị nh nghĩa tậ p hợ p đố i tư ợ ng có thuộ c tính phư ng thứ c Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 10 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 c n ng in moveTo() Sử dụ ng ể chuyể n cử a sổ vị trí xác ị nh resizeTo() Sử dụ ng ể thay ổ i kích thư c cử a cử a sổ 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 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ổ mở dactinh: đặ c tính mà cử a sổ đư ợ c mở có (mỗ i trình duyệ t hỗ trợ mộ t tậ p đặ c tính riêng) window.open("http://www.google.com.vn/", "timkiem", "menubar = yes, width = 800, height = 600") Chú ý: - Chỉ nên sử dụ ng cách thậ t cầ n thiế t trình duyệ t bị disable javascript - Có thể sử dụ ng thẻ để thay Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 25 Đố i tư ợ ng Screen Mỗ i ngư i truy cậ p sử dụ ng 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 để 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 hình củ a ngư i truy cậ p Thuộ c tính Giả i thích availHeight Trả chiể u dài củ a hình (trừ kích thư c củ a window taskbar) availWidth Trả chiề u rộ ng củ a hình (trừ kích thư c củ a window taskbar) height Trả chiề u dài củ a hình with Trả chiể u rộ ng củ a hình pixelDepth Trả colorDepth Trả bả ng màu ể hiể n thị ả nh ộ phân giả i củ a hình Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 26 Demo xác đị nh chiề u dài chiề u rộ ng củ a hình ngư i truy cậ p alert("Chieu cao 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 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ể thự c hiệ n mộ t c năng, ng đố i vớ i từ ng trình duyệ t, cầ n phả i viế t đoạ n mã khác Cầ n biế t thơng tin trình duyệ t để viế t mã JavaScript phù hợ p Đố i tư ợ ng Navigator cung cấ p thông tin trình duyệ t Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 28 Các phư ng thứ c thuộ c tính củ a Navigator Thuộ c tính Giả i thích appCodeName Trả mã củ a trình duyệ t appName Trả tên củ a trình duyệ t appVersion Trả 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ả 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 Lậ p trình hư ng đố i tư ợ ng 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 mơ hình DOM 30 Đố i tư ợ ng Location Chứ a thông tin URL hiệ n tạ i Thuộ c tính Giả i thích host Trả tên host cổ ng củ a URL hostname Trả tên host href Trả toàn URL pathname Trả tên ng dẫ n củ a URL port Trả cổ ng mà server sử dụ ng cho URL protocol Trả 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 Lậ p trình hư ng đố i tư ợ ng 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 mơ hình DOM 32 Demo hiể n thị thông tin củ a URL Vào trang http:/ / w w w braingia.org/ location.html Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 33 Demo sử dụ ng location để mở URL mớ i function newDoc() { window.location.assign("http://www.w3schools.com") } Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 34 Đố i tư ợ ng History Chứ a thông tin URL đư ợ c ngư i dùng truy cậ p Thuộ c tính Giả i thích length Trả số lư ợ ng URL danh sách History Phư ng thứ c Giả i thích back() Load URL trư c ó danh sách History forward() Load URL sau ó danh sách History go() Load URL cụ thể từ History Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 35 Demo sử dụ ng History Đị nh nghĩa hàm thẻ JavaScript function goBack() { history.back(); } function goNext() { history.forward(); } Gọ i hàm

Back

Next

Xem mã thư mụ c “Vi du History Object” Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 36 Tổ ng kế t 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 đư ợ c phát triể n rộ ng rãi nhấ t Mỗ i đố i tư ợ ng có thuộ c tính phư ng thứ c riêng Các đố i tư ợ ng có thuộ c tính phư ng thứ c giố ng thuộ c mộ t lớ p Brow ser Object Module tậ p hợ p đố 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ách khác nên lậ p trình viên cầ n phả i tìm hiể u sâu trình duyệ t để viế t mã chạ y nhiề u trình duyệ t Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 37 Tổ ng kế t họ c Trình duyệ t đư ợ c biể u diễ n bằ ng đố i tư ợ ng w indow Đố i tư ợ ng window có đố i tư ợ ng document, frames, history, location, navigator, screen Đố i tư ợ ng document đạ i diệ n cho nộ i dung trang web Đố i tư ợ ng history a thông tin url đư ợ c ngư i dùng truy cậ p Đố i tư ợ ng location a thông tin url hiệ n tạ i Đố i tư ợ ng navigator a thơng tin trình duyệ t Đố i tư ợ ng screen a thông tin hình Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 38 ... NH Lậ p trình hư ng đố i tư ợ ng mơ hình DOM Phư ng thứ c lậ p trình Lậ p trình để giả i quyế t vấ n đề cuộ c số ng Bài tốn tính tốn phứ c tạ p: Lậ p trình cho tên lử a bay vào vũ trụ Bài toán... 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ó vào thự c tiễ n lậ p trình Mộ t số phư ng thứ c lậ p trình đư... 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 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 đư