1. BOM trong JavaScript là gì?
BOM là viết tắt của Browser Object Model hay dịch sang tiếng việt có thể hiểu nghĩa của nó là đối tượng liên quan đến trình duyệt. BOM là một cấu trúc đối tượng được tạo bởi trình duyệt cho bất kỳ trang web nào. Nó là một hệ thống phân cấp các đối tượng trình duyệt cho phép Js tương tác với các trình duyệt. Với BOM, ta có thể làm việc với mọi thứ ngoại trừ document . Mỗi một trình duyệt sẽ có những đối tượng khác nhau nên giữa các BOM với nhau nó sẽ không tồn tại một chuẩn chung nào cả.
Tuy nhiên người ta vẫn quy ước ra những loại BOM để có tính thống nhất giữa các trình duyệt với nhau. Đó là:
- window
- screen
- location
- history
- navigator
- popup
- timing
- cookies
Vì các trình duyệt hiện đại đã triển khai gần như là hầu hết các phương thức và thuộc tính giống nhau cho khả năng tương tác của Js, nên nó thường được gọi là các phương thức và thuộc tính của BOM.
2. Đối tượng Window trong JavaScript
Trong các đối tượng BOM trên có phân cấp lẫn nhau và trong đó window là cấp cao nhất vì nó đại diện cho browser. Vì vậy mà nó được hỗ trợ bởi tất cả các trình duyệt. Tất cả các đối tượng, hàm, biến Js toàn cục đều là của đối tượng window . Ta có thể truy cập tùy ý mà không cần tham chiếu đến nó.
Ví dụ: sử dụng window.alert() để cảnh báo một ý gì đó nhưng chúng ta có thể sử dụng trực tiếp alert() mà không cần tham chiếu đến đối tượng window .
<script>
function msg() {
alert("Lập trình từ đầu");
}
</script>
<input type="button" value="click" onclick="msg()" />
Các biến toàn cục là thuộc tính và các hàm toàn cục là phương thức của đối tượng window . Ngay cả document thuộc HTML DOM mà ta đã học các bài trước cũng là thuộc tính của đối tượng window . Viết như sau:
window.document.getElementById("id");
Cho kết quả tương tự như cách viết tắt ở các bài trước :
document.getElementById("id");
3. Lấy kích thước của trình duyệt với JavaScript
Đối tượng window có thuộc tính khác nhau để lấy chiều cao và chiều rộng của cửa sổ
Hai thuộc tính đại diện cho kích thước bên trong của cửa sổ
- innerHeight : Tính chiều cao trình duyệt tính bằng pixel
- innerWidth : Tính chiều rộng trình duyệt tính bằng pixel
Ví dụ:
<p id="output"></p>
<button onclick="show()">Hiển thị kích thước cửa sổ bên trong</button>
<script>
function show() {
var height = window.innerHeight;
var width = window.innerWidth;
document.getElementById("output").innerHTML = "Window's InnerHeight = " + height + "<br>" + "Window's InnerWidth = " + width;
}
</script>
Hai thuộc tính khác đại diện cho kích thước bên ngoài của window
- outerHeight : tính chiều cao bằng pixel
- outerWidth : tính chiều rộng bằng pixel
Ví dụ:
<p id="output"></p>
<button onclick="show()">Hiển thị kích thước cửa sổ bên ngoài</button>
<script>
function show() {
var height = window.outerHeight;
var width = window.outerWidth;
document.getElementById("output").innerHTML = "Window's outerHeight = " + height + "<br>" + "Window's outerWidth = " + width;
}
</script>
Chú ý
Kích thước không bao gồm các thanh cuộn (scroll) và thanh toolbars và sẽ luôn trả về là pixel
Và do sự tương thích giữa các trình duyệt nên nếu làm thông thường như trên sẽ hơi rối. Để lấy được width và height của tất cả các trình duyệt thì có một cách sau :
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Hai dấu || (hoặc) sẽ giúp ta nếu vế trái không thực hiện được thì nó sẽ lấy vế phải. Cứ như vậy cho tới khi lấy được thì dừng.
4. Mở một cửa sổ mới với JavaScript
Để mở một cửa sổ mới trên trình duyệt với đối tượng window thì chúng ta sẽ sử dụng phương thức open() với cú pháp như sau:
window.open(url, name, specs, replace);
Trong đó:
- url là địa chỉ mà chúng ta muốn mở.
- name là tên bạn muốn đặt cho cửa sổ
- specs là các thông số cho cửa sổ như:
- Chiều cao của trình duyệt: height=pixel
- Chiều rộng của trình duyệt: width=pixel
- Vị trí hiển thị của của sổ trình duyệt: top=pixel (cách trên), left=pixel (các trái)
- Hiển thị thanh menu: yes|1 là có, no|0 là không.
- Hiển thị thanh trạng thái: yes|1 là có, no|0 là không.
- replace (không bắt buộc) là chỉ định xem URL có tạo ra mục nhập mới hay thay thế mục hiện tại trong danh sách lịch sử không. True là có và False là không.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div>Click vào button để xem kết quả</div>
<button type="button" onclick="openW()">Mở cửa sổ</button>
<script type="text/javascript">
function openW() {
window.open('https://laptrinhtudau.com/', 'laptrinhtudau', 'width=500,height=600');
return false;
}
</script>
</body>
</html>
5. Đóng cửa sổ với JavaScript
Để đóng một cửa sổ bằng Js thì chúng ta cần phải biết được đối tượng cửa sổ mà ta muốn đóng. Ta sẽ sử dụng phương thức close() tham chiếu đến đối tượng cửa sổ mà ta muốn đóng
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div>Click vào button để xem kết quả</div>
<button type="button" onclick="openW()">Mở cửa sổ</button>
<button type="button" onclick="closeW()">Đóng cửa sổ</button>
<script type="text/javascript">
function openW() {
laptrinhtudau = window.open('https://laptrinhtudau.com', 'laptrinhtudau', 'width=500,height=600');
return false;
}
function closeW() {
laptrinhtudau.close();
}
</script>
</body>
</html>
6. Di chuyển cửa sổ với JavaScript
Cũng giống như đóng cửa sổ, để di chuyển cửa sổ thì bạn cũng cần biết được đối tượng cử sổ cần di chuyển. Ta sẽ sử dụng phương thức moveTo() tham chiếu đến đối tượng cửa sổ mà ta muốn di chuyển
Cú pháp : window_new.moveTo(left,top)
- window_new : đối tượng window ta muốn di chuyển
- top : là khoảng cách với lề trên
- left : là khoảng cách với lề trái
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div>Click vào button để xem kết quả</div>
<button type="button" onclick="openW()">Mở cửa sổ</button>
<button type="button" onclick="moveW()">Di chuyển cửa sổ</button>
<script type="text/javascript">
function openW() {
laptrinhtudau = window.open('https://laptrinhtudau.com/', 'laptrinhtudau', 'width=300,height=200');
return false;
}
function moveW() {
laptrinhtudau.moveTo(500,700);
laptrinhtudau.focus();
}
</script>
</body>
</html>
7. Thay đổi kích thước cửa sổ với JavaScript
Ta sẽ sử dụng phương thức resizeTo() để thay đổi kích thước của cửa sổ thành giá trị đã truyền.
Cú pháp : window_new.resizeTo(width,height)
- window_new : là đối tượng window ta muốn thay đổi kích thước
- width : là chiều rộng
- height : là chiều cao
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div>Click vào button để xem kết quả</div>
<button type="button" onclick="openW()">Mở cửa sổ</button>
<button type="button" onclick="resizeW()">Thay đổi kích cỡ</button>
<script type="text/javascript">
function openW() {
laptrinhtudau = window.open('https://laptrinhtudau.com/', 'laptrinhtudau', 'width=300,height=200');
return false;
}
function resizeW() {
laptrinhtudau.resizeTo(500,700);
laptrinhtudau.focus();
}
</script>
</body>
</html>
8. Một số phương thức khác
Sử dụng alert() để hiển thị hộp thoại cảnh báo. Nó có thông báo và nút ok.
<script type="text/javascript">
function msg() {
alert("Lập Trình Từ Đầu");
}
</script>
<input type="button" value="click" onclick="msg()" />
Sử dụng confirm() để hiển thị hộp thoại xác nhận có chứa thông báo với nút ok và hủy.
<script type="text/javascript">
function msg() {
var v = confirm("Bạn muốn đóng nó?");
if (v == true) {
alert("ok");
} else {
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()" />
Sử dụng prompt() để hiển thị hộp thoại để nhận dữ liệu nhập từ người dùng.
<script type="text/javascript">
function msg() {
var v = prompt("Bạn muốn nói gì?");
alert("Tôi muốn nói là " + v);
}
</script>
<input type="button" value="click" onclick="msg()" />
Sử dụng location.href để lấy đường dẫn hiện tại của trang web
let url = window.location.href;
