Window Object [JAVASCRIPT]


Window Object là gì ? Khi ta mở trình duyệt web lên thì lúc đó Window Object sẽ được tạo. Window Object chứa các thuộc tính (properties) và các phương thức (method). Ta console log xem các thuộc tính và phương thức của Window Object xem sao.
console.log(window); 
// Window
// <default properties>
// Symbol(Symbol.toStringTag): "Window"
// <prototype>: WindowPrototype { … }

Ta thấy window object sẽ có rất nhiều thuộc tính ví dụ như console, document, innerHeight, innerWidth, localStorage, location, name v..v.

Ngoài ra còn có rất nhiều method, ví dụ setTimeout, open, close. alert.

Ví dụ khi ta alert thông báo ta hay viết là :

alert('Hello Javascript');
// hoặc
window.alert('Hello Javascript');

Khi ta khai báo 1 biến (var ...) hoặc 1 funciton thì biến và function này sẽ được đua vào window.

var myName = 'Mr D';
function sayHi(){
  console.log('Hi');
}
console.log(window); 
// myName: "Mr D"
// sayHi: function sayHi
// <default properties>
// Symbol(Symbol.toStringTag): "Window"
// <prototype>: WindowPrototype { … }

Ta có thể truy cập vào myName hoặc function sayHi bằng 2 cách sau.

console.log(myName); // Mr D
console.log(window.myName); // Mr D
sayHi(); // Hi
window.sayHi(); // Hi

Ta viết thử 1 chương trình dùng các thuộc tính và phương thức của window object để khi click vào button đợi 5s sẽ chuyển sang https://dblog24h.com.

|-index.html
|-app.js

|- index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window Object</title>
</head>
<body>
<p id="showCount">0</p>
<button id="btn">Google</button>
<script src="app.js"></script>
</body>
</html>

|- app.js

 
var btn = document.getElementById('btn');
var countShow = document.getElementById('showCount');
btn.addEventListener('click', function(){
  let count = 0;
  setInterval(function(){
    count += 1;
    countShow.innerText = count;
    if (count == 5) {
    window.location.href = "https://dblog24h.com";
  
    }
  },1000); 
});

0

Qua ví dụ nay ta đã học được cách dùng window.location.href để chuyển sang trang web khác, dùng document.getElementById() để lấy xác định được các thẻ , dùng addEventListener để add sự kiện click, setInterval để set thời gian. Các thuộc tính và phương thức này là của Window Object. Ngoài ra Window Object còn có rất nhiều thuộc tính và phương thức khác. ^_^