# 3.1 Window

BOM = Browser Object Model，中文即「瀏覽器物件模型」。

在 practice 資料夾下，建立 `window.html` 來練習。

## 認識 window 物件

打開 Google 頁面(或任何網站都可)，在 console 中，輸入 window 物件。如下圖：

![window 物件](/files/-MEH7zMX-nbzf8UtYeGb)

有龐大的函式、物件等可以使用。例如簡單常用的：

```javascript
alert("popup 訊息");
```

完整的寫法，是：

```javascript
window.alert("popup 訊息");
```

## window 視窗寬高

* window\.innerWidth
* window\.outerWidth
* window\.innerHeight
* window\.outerHeight

下圖以高度(Height)為例(寬度同理)：

![](/files/-MEmRy2LLI9MfHclv3lc)

編輯 `window.html`，完整內容如下，執行看看：

```markup
<!DOCTYPE html>
<html lang="zh-Hant" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <button type="button" id="btn">按鈕</button>
    
    <!-- script 寫在 body 的結束標籤之前 -->
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function(){
        console.log("視窗的 innerWidth：" + window.innerWidth);
        console.log("視窗的 outerWidth：" + window.outerWidth);
        console.log("視窗的 innerHeight：" + window.innerHeight);
        console.log("視窗的 outerHeight：" + window.outerHeight);
      });
    </script>
  </body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/javascript-web/3.-bom-liu-lan-qi-wu-jian-mo-xing/3.1-window.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
