Lập trình Javascript

Lập trình đối tượng trong Javascript và mô hình BOM

31/03/2020

Tổng quan về lập trình đối tượng

Khái niệm về lập trình đối tượng

Lập trình đối tượng trong Javascript tức là xử lý thông tin bằng cách mô phỏng chúng như những đối tượng thực. Mỗi đối tượng có nhiều hành động và thuộc tính.

Các hành động của đối tượng còn gọi là các hàm hay phương thức, còn các thuộc tính của nó là các biến mà bạn khai báo. Trong Javascript , hầu như mọi thứ đều là đối tượng

Date là đối tượng
Math là đối tượng
Regular expressions là đối tượng
Array, function đối tượng
Biến kiểu object cũng là đối tượng
Boolean là đối tượng nếu định nghĩa bằng từ khóa new
Number là đối tượng nếu định nghĩa bằng từ khóa new
String là đối tượng nếu định nghĩa bằng từ khóa new

Và bạn cũng có thể tạo các đối tượng mới cho mình khi lập trình javacript

Khai báo đối tượng trong javascript

Cách 1: Sử dụng từ khóa new Object() . Ví dụ:

<script>
  let tin = new Object();
</script>

Cách 2: Sử dụng từ khóa {}. Ví dụ:

<script>
  let laptop = {}; 
  let hs1 = { 
     ten: "Tèo", 
     ho: "Nguyễn Văn", 
     ngaysinh: "1/2/2004"};
</script>

Gán và truy xuất thuộc tính của đối tượng

Dùng cú pháp như sau:

tênĐốiTượng.tênThuộcTính

Ví dụ: gán giá trị cho thuộc tính

<script>
  hs1.ten = "Tý"; 
  hs1.ngaysinh = '27/4/2001';
  tin.tieude = "Người suốt đời gặp may";
  tin.ngaydang = "20/3/2020";
</script>

Ví dụ: lấy giá trị của thuộc tính

<h2>Test Objects</h2>
<p id="data"></p> <hr>
<script>
let str = hs1.ho +" " + hs1.ten + ". Ngày sinh: " + hs1.ngaysinh;
document.getElementById("data").innerHTML =  str ;
</script>

Khai báo hàm trong đối tượng và từ khóa this

Khi lập trình đối tượng trong Javascript , mỗi đối tượng bạn có thể nhiều hàm cho nó, mỗi hàm thực hiện một chức năng gì đó. Cách tạo hàm trong một đối tượng là như sau:

tendoituong.tenham = function(){
   //Viết mã cho hàm ở đây
}

Trong hàm của đối tượng, bạn có thể dùng từ khóa this để ám chỉ đối tượng hiện hành. Thông qua từ khóa này bạn có thể truy cập các biến của đối tượng. Ví dụ this.ten nghĩa là thuộc tính tên của đối tượng hiện tại

Ví dụ: Khai báo hàm trong đối tượng và sử dụng

<script>
let sv = {
    ten: "Út Vẹo",
    ho: "Nguyễn Thị",
    namsinh: 2001,
    hoten: function() {
       let ht = this.ho +" " + this.ten; 
       ht = ht.toUpperCase();
       return ht;
    }
};
</script>

Truy xuất:

<script>  
  let code = "<p>Họ tên sv: <b>" + sv.hoten()  + "</b></p>";
  document.write(code); 
</script>

Như vậy, lập trình đối tượng trong Javascript không khó, bạn tạo các biến bằng từ khóa new Object() hoặc {}. Sau đó có thể định nghĩa các thuộc tính, các hàm cho đối tượng để sử dụng. Sau đây al2 một số đối tượng sẵn có trong javascript, giúp các bạn điều khiển cửa sỗ trình duyệt, nội dung trang web… chúng gọi chung là mô hình BOM.

Mô hình BOM

Mô hình BOM (Browser Object Model) là một hệ thống phân cấp hình cây các đối tượng có sẵn trong trình duyệt. Gồm các đối tượng: window, document, history, location, navigator, screen…

window là đối tượng cửa sổ trỉnh duyệt , bạn có thể điều khiển cửa sổ trình duyệt trong qua đối tượng này (mở, đóng, resize, in ấn, di chuyển…)
document là đối tượng nội dung trang web hiện tại. Bạn có thể truy xuất và can thiệp vào nội dung của trang thông qua đối tượng này (gán nội dung mới cho 1 tag, xóa 1 tag , định dạng lại 1 tag…)
history : đối tượng này chứa địa chỉ các trang web mà user đã xem. Bạn có thể dùng đối tượng này để chuyển tới lui qua lại các trang user đã xem
location chứa thông tin về địa chỉ của trang web hiện hành đang được xem. Gồm domain, protocol, port, địa chỉ đầy đủ của trang, lệnh nạp lại trang…
navigator: đây là đối tượng chứa thông tin về trình duyệt hiện tại,. Bạn dùng đối tượng này sẽ biết user đang dùng trình duyệt gì để xem trang web của bạn, version bao nhiêu…
screen : đối tượng chứa thông tin về màn hình của user. Nhờ đối tượng này mà bạn sẽ biết độ phân giải màn hình của họ.

1. Đối tượng window trong javascript

Đối tượng window diễn tả cửa sổ của trỉnh duyệt mà user đang dùng, bạn có thể điều khiển cửa sổ trình duyệt trong qua đối tượng này.

Trong đối tượng window có nhiều hàm bạn có thể sử dụng sau đây.

Method	Description
alert()	Hiện ra 1 hộp thoại popup với 1 thông báo gì đó.
clearInterval()	Xóa timer của lệnh SetInterval
clearTimeout()	Xóa timer của lệnh SetTimeout
close()	Đóng cửa sổ trình duyệt
confirm()	Hiện ra hộp thoại có 2 nút OK, Cancel và 1 thông báo để hỏi user 1 việc gì đó.
focus()	Cho cửa sổ trình duyệt hiện lên trên các cửa sổ khác
moveBy()	Di chuyển cửa sổ trình duyệt 1 khoảng so với vị trí hiện tại
moveTo()	Di chuyển cửa sổ trình duyệt đến tọa độ chỉ định
open()	Mở 1 trang web trong cửa sổ trình duyệt mới
print()	In ra giấy nội dung trang.
prompt()	Yêu cầu người dùng nhập 1 giá trị
resizeBy()	Tăng giảm kích thước cửa sổ trình duyệt 1 khoảng pixel
resizeTo()	Gán kích thước cửa sổ trình duyệt là width, height chỉ ra
scrollBy()	Cuộn document với số pixel được chỉ ra
scrollTo()	Cuộn document đến tọa độ chỉ định
setTimeout()	Thực hiện mã lệnh javscript 1 lần sau khoảng thời gian chỉ định (tính bằng miligiây)
setInterval()	Thực hiện mã lệnh javscript nhiều lần cứ sau khoảng thời gian chỉ định (tính bằng miligiây)

Hàm open trong đối tượng window

Dùng để mở 1 cửa sổ mới. Cú pháp như sau:

tênbiến = window.open(url, tên, đặcđiểm)

Trong đó:

url: là địa chỉ trang web muốn mở
tên: là tên tùy ý bạn đặt cho cửa sổ mới
đậcđiểm: là các thông số bạn muốn quy định cho cửa sổ mới như width, height, left, top…
tênbiến: là tên biến sẽ giữ handle cho cửa sổ mới, bạn có thể tương tác với cửa sổ mới mở (resize, close, print…) thông qua biến này.

<script>    
let w;
function moWin() {
 let url = "http://google.com";
 w = window.open(url,"tk","width=600,height=300,left=450,top=50");
} 
</script>
<button onclick="moWin()"> 
   Mở Google
</button>

Hàm close trong đối tượng window

Hàm close trong đối tượng window dùng để đóng 1 window đã mở . Ví dụ:

<button onclick="w.close()">
  Đóng Google 
</button>

Hàm print trong đối tượng window

Hàm print trong đối tượng window dùng để thực hiện in nội dung trang web ra giấy.

<button onclick="window.print()"> 
  In ấn 
</button>

Hàm confirm trong đối tượng window

Hàm confirm trong đối tượng window dùng để hiện 1 hộp thoại hỏi lại user 1 cái gì đó cho chắc. Hộp thoại có 2 nút OK và Cancel để user nhấp . Trả về true nếu user nhắp OK, trả về false nếu user nhắp Cancel

<a href="xoa.php" onclick="return window.confirm('Xóa hả')">
  Xóa
</a>

Hàm alert trong đối tượng window

Hàm alert trong đối tượng window dùng để hiện 1 hộp thoại thông báo cho user 1 cái gì đó. Hộp thoại có nút OK.

<script>
   window.alert("Đã cập nhật ý kiến của bạn! Cảm ơn nhé");
</script>

Tham khảo thêm: https://www.w3schools.com/jsref/obj_window.asp

Hàm moveBy trong đối tượng window

Hàm này giúp di chuyển 1 cửa sổ mà bạn đã mở bằng lệnh window.open. Tọa độ di chuyển tính từ vị trí hiện tại.

https://www.w3schools.com/jsref/met_win_moveby.asp

Hàm moveTo trong đối tượng window

Hàm này giúp di chuyển 1 cửa sổ mà bạn đã mở bằng lệnh window.open. Tọa độ tính từ góc trên trái của màn hình.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_moveto

Hàm setTimeout trong đối tượng window

Hàm này giúp thực hiện 1 lệnh nào đó sau 1 khoảng thời gian chỉ định

https://www.w3schools.com/jsref/met_win_settimeout.asp

Hàm setInterval trong đối tượng window

Hàm này giúp thực hiện 1 lệnh nào đó định kỳ cứ sau 1 khoảng thời gian chỉ định

https://www.w3schools.com/jsref/met_win_setinterval.asp

2. Đối tượng Screen

Đối tượng screen chứa thông tin về màn hình của user, nhờ đối tượng này mà bạn sẽ biết độ phân giải màn hình của họ.

Property	Description
availHeight	Returns the height of the screen (excluding the Windows Taskbar)
availWidth	Returns the width of the screen (excluding the Windows Taskbar)
colorDepth	Returns the bit depth of the color palette for displaying images
height	Returns the total height of the screen
pixelDepth	Returns the color resolution (in bits per pixel) of the screen
width	Returns the total width of the screen

<script>
let w = screen.width, h = screen.height; 
document.write("<p>Width = " + w  + "</p>");
document.write("<p>Height = "  + h  + "</p>");
document.write("<p>availWidth="  + screen.availWidth + "</p>");
document.write("<p>availHeight="  + screen.availHeight + "</p>");
document.write("<p>colorDepth="  + screen.colorDepth + "</p>");
document.write("<p>pixelDepth="  + screen.pixelDepth + "</p>");
</script>

Tham khảo thêm: https://www.w3schools.com/js/js_window_screen.asp

3. Đối tượng Navigator

Đối tượng navigator chứa thông tin về trình duyệt như version, tên trình duyệt, hệ điều hành…

Property	Description
appCodeName	Returns the code name of the browser
appName	Returns the name of the browser
appVersion	Returns the version information of the browser
cookieEnabled	Determines whether cookies are enabled in the browser
language	Returns the language of the browser
platform	Returns for which platform the browser is compiled
userAgent	Returns the user-agent header sent by the browser to the server

<script>
document.write("<h4>appCodeName= " + navigator.appCodeName +" </h4>");
document.write("<h4>appName= " + navigator.appName +" </h4>");
document.write("<h4>appVersion= " + navigator.appVersion +" </h4>");
document.write("<h4>platform= " + navigator.platform +" </h4>");
document.write("<h4>userAgent= " + navigator.userAgent +" </h4>");
document.write("<h4>language= " + navigator.language +" </h4>");
</script>

4. Đối tượng location

Đối tượng location chứa địa chỉ của trang hiện hành, gồm domain, protocol, port địa chỉ đầy đủ của trang, lệnh nạp lại trang…

hash	Sets or returns the anchor part (#) of a URL
host	Sets or returns the hostname and port number of a URL
hostname	Sets or returns the hostname of a URL
href	Sets or returns the entire URL
origin	Returns the protocol, hostname and port number of a URL
pathname	Sets or returns the path name of a URL
port	Sets or returns the port number of a URL
protocol	Sets or returns the protocol of a URL
search	Sets or returns the querystring part of a URL
reload()	Reloads the current document

Tham khảo: https://www.w3schools.com/jsref/obj_location.asp

Ví dụ:

<script>
 document.write("<p>href= " + location.href +"</p>"); 
 document.write("<p>port= " + location.port +"</p>");
 document.write("<p>host= " + location.host +"</p>");
 document.write("<p>hostname= " + location.hostname+"</p>");
 document.write("<p>pathname= " + location.pathname +"</p>");
 document.write("<p>search= " + location.search +"</p>");  
 document.write("<p>protocol= " + location.protocol +"</p>");  
 document.write("<p>hash= " + location.hash +"</p>");  
</script>

http://127.0.0.1:5500/window1.html?p=detail&idTin=1#comment

Tham khảo: https://www.w3schools.com/jsref/obj_location.asp

5. Đối tượng History

Đối tượng history chứa địa chỉ các trang mà user đã xem. Trong đối tượng history có 3 hàm bạn có thể dùng để chuyển user qua lại các trang trong history

Method	Description
back()	Hàm này đưa người xem quay lại trang trước
forward()	Hàm này đưa người xem tới trang kế (ngược với back)
go()	Đưa người xem tới trang chỉ định trong tham số

Ví dụ:

<button onclick="history.back()"> Trở lại </button>

Tham khảo: https://www.w3schools.com/jsref/obj_history.asp

6. Đối tượng document

Đối tượng document mô tả tài liệu hiện tại, bạn có thể truy xuất và can thiệp vào nội dung của trang thông qua đối tượng document (gán nội dung mới cho 1 tag, xóa 1 tag , định dạng lại 1 tag…)

Hàm getElementById

Hàm này dùng để chọn 1 tag trong trang theo id của nó

<script>
function abc(){
    document.getElementById("kq").innerHTML="<b>Chúc an lành</b>";
}
</script>
<button onclick="abc()">Action</button><hr>
<div id="kq"></div>

Các bài cơ bản javascrit cần đọc : https://longnv.name.vn/lap-trinh-javascript/cau-truc-dieu-khien-ham-va-su-kien-trong-javacript , https://longnv.name.vn/lap-trinh-javascript/vai-van-de-bo-sung-trong-javascript