JavaScript - Window Object: Cổng vào tương tác với Browser
Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Object Window. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua chủ đề hấp dẫn này. Vậy, hãy cầm lấy những枝 c魔法 (bàn phím) của bạn và cùng nhau thực hiện những chú pháp JavaScript!
Object Window là gì?
Hãy tưởng tượng cửa sổ trình duyệt như một门户网站 ma thuật dẫn đến internet. Object Window giống như người giữ cửa của portal này, kiểm soát mọi thứ bạn thấy và tương tác trên một trang web. Nó quan trọng đến nỗi thường được gọi là "Object Toàn cục" trong JavaScript.
Object Window như một Object Toàn cục
Khi bạn viết JavaScript cho một trang web, Object Window luôn ở đó, âm thầm quan sát mã của bạn. Nó giống như không khí chúng ta thở - nó ở mọi nơi, ngay cả khi chúng ta không luôn nhận ra nó.
Hãy bắt đầu với một ví dụ đơn giản:
console.log("Hello, World!");Bạn có biết rằng đây thực sự là viết tắt của:
window.console.log("Hello, World!");Phần window thường bị bỏ qua vì nó được hiểu rõ. Đẹp phải không?
Các thuộc tính của Object Window
Bây giờ, hãy khám phá một số thuộc tính ma thuật của Object Window. Những thuộc tính này giống như các phòng khác nhau trong lâu đài trình duyệt của chúng ta, mỗi phòng có mục đích đặc biệt.
1. window.innerWidth và window.innerHeight
Những thuộc tính này cho chúng ta biết kích thước của cửa sổ trình duyệt. Hãy xem chúng trong hành động:
console.log("Chiều rộng cửa sổ: " + window.innerWidth);
console.log("Chiều cao cửa sổ: " + window.innerHeight);Thử thay đổi kích thước cửa sổ trình duyệt và chạy mã này lại. Bạn sẽ thấy số liệu thay đổi!
2. window.location
Thuộc tính này giống như GPS của trình duyệt. Nó cho chúng ta biết vị trí hiện tại trên web và cho phép chúng ta điều hướng đến các nơi mới.
console.log("URL hiện tại: " + window.location.href);
// Để điều hướng đến một trang mới:
// window.location.href = "https://www.example.com";3. window.history
Hãy tưởng tượng này như nhật ký của trình duyệt, theo dõi nơi bạn đã去过.
console.log("Số lượng trang trong lịch sử: " + window.history.length);
// Để quay lại một trang:
// window.history.back();Dưới đây là bảng tóm tắt các thuộc tính này:
| Thuộc tính | Mô tả |
|---|---|
| innerWidth | Chiều rộng của cửa sổ trình duyệt |
| innerHeight | Chiều cao của cửa sổ trình duyệt |
| location | Thông tin về URL hiện tại |
| history | Lịch sử của trình duyệt |
Các phương thức của Object Window
Bây giờ, hãy học một số chú pháp (phương thức) mà chúng ta có thể thực hiện trên Object Window!
1. window.alert()
Phương thức này giống như la hét "Hey, nghe này!" với người dùng. Nó tạo một hộp thoại cảnh báo với một thông điệp.
window.alert("Chào mừng bạn đến với JavaScript!");2. window.prompt()
Phương thức này giống như hỏi người dùng một câu hỏi. Nó tạo một hộp thoại với một trường nhập văn bản.
let name = window.prompt("Tên của bạn là gì?");
console.log("Xin chào, " + name + "!");3. window.setTimeout()
Phương thức này giống như đặt một计时器 cho mã của bạn. Nó chạy một hàm sau một thời gian chờ xác định.
window.setTimeout(function() {
console.log("Tin nhắn này xuất hiện sau 3 giây!");
}, 3000);4. window.setInterval()
Phương thức này giống như đặt một báo thức lặp lại. Nó chạy một hàm liên tục với các khoảng thời gian xác định.
let counter = 0;
window.setInterval(function() {
counter++;
console.log("Tin nhắn này xuất hiện mỗi 2 giây. Đếm: " + counter);
}, 2000);Dưới đây là bảng tóm tắt các phương thức này:
| Phương thức | Mô tả |
|---|---|
| alert() | Hiển thị hộp thoại cảnh báo |
| prompt() | Hiển thị hộp thoại nhập văn bản |
| setTimeout() | Thực hiện một hàm sau một thời gian chờ |
| setInterval() | Thực hiện một hàm liên tục với các khoảng thời gian |
Kết hợp tất cả lại
Bây giờ chúng ta đã học về các thuộc tính và phương thức ma thuật, hãy sử dụng chúng để tạo một trang web tương tác đơn giản:
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Chào mừng!</h1>
<button onclick="startGame()">Bắt đầu Trò chơi</button>
<script>
function startGame() {
let name = window.prompt("Tên của bạn, người phiêu lưu?");
document.getElementById("greeting").innerHTML = "Chào mừng, " + name + "!";
let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " giây trước khi trò chơi bắt đầu!");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Trò chơi bắt đầu!");
}
}, 1000);
}
</script>
</body>
</html>Trong ví dụ này, chúng ta đã tạo một trò chơi đơn giản mà:
- Hỏi tên người chơi bằng
prompt() - Cập nhật lời chào bằng cách manipulates DOM
- Sử dụng
setInterval()để tạo một countdown - Sử dụng
alert()để thông báo cho người chơi về countdown và bắt đầu trò chơi
Và thế là xong, các học trò JavaScript trẻ! Chúng ta đã khám phá thế giới ma thuật của Object Window, từ các thuộc tính đến các phương thức. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy hãy tiếp tục thử nghiệm với những khái niệm này. Trước khi bạn biết, bạn sẽ thực hiện các chú pháp JavaScript như một chuyên gia!
Đến gặp lại lần sau, chúc các bạn viết mã vui vẻ!
Credits: Image by storyset