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

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>
    var tin = new Object();
</script>

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

<script>
    var laptop = {}; 
    var 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>
document.getElementById("data").innerHTML=hs1.ho+" "+hs1.ten+". Ngày sinh: "+ hs1.ngaysinh;
</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>
var sv = {
    ten: "Út Vẹo",
    ho: "Nguyễn Thị",
    namsinh: 2001,
    hoten: function() {
       var ht = this.ho +" " + this.ten; 
       ht = ht.toUpperCase();
       return ht;
    }
};
</script>

Truy xuất:

<script>  
   var 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>    
    var w;
    function moWin() {
       w= window.open("http://google.com","timkiem","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>
var 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