Understanding Javascript window object
Tags: javascript
Published: 2021-04-25 05:41:23

<img class="aligncenter size-full wp-image-13728" src="https://off.tokyo/wp-content/uploads/2021/04/javascript.jpg" alt="" width="1280" height="720" />
<h2>What is the window object?</h2>
&nbsp;

<code>Window</code> is the main JavaScript object root, aka the <code>global object</code> in a browser,

&nbsp;

Also can be treated as the root of the document object model.

&nbsp;

You can access it as <code>window</code>

&nbsp;

[What is the difference between window, screen, and document in Javascript?](https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript)

&nbsp;

In other words, in simple terms, you can use these to control your browser.

&nbsp;

Let's actually use the browser's console to control the browser in various ways.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">window.alert('hello,world');
</pre>
</div>
&nbsp;

<img class="aligncenter wp-image-13817" src="https://off.tokyo/wp-content/uploads/2021/04/window.alerthelloworld-scaled.jpg" alt="" width="771" height="374" />

The functions and objects prepared in advance in JavaScript are all properties of the window object.

&nbsp;

window.document, which is used to retrieve and manipulate HTML data,

&nbsp;

and window.location, which stores information such as URLs, are all properties of the window object.

&nbsp;

This is because information such as HTML and URLs is information that the browser window has.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">// Move to Your_Name Wiki
window.location.href('https://en.wikipedia.org/wiki/Your_Name');</pre>
</div>
&nbsp;
<h2>Omitting the window object</h2>
&nbsp;

The window object is handled in a special way in JavaScript,

&nbsp;

and the window can be omitted when accessing the window object's properties.

In other words, window.alert can be written simply as alert.

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">alert('hello,world');
</pre>
</div>
&nbsp;

This is a special rule only for the window object, and it is a rule like this.

&nbsp;

Here are the main objects in the properties of the "window" object.
<ul>
 	<li>document
The document object is mainly used to retrieve and manipulate HTML documents.</li>
 	<li>location ---- URL information
An object to get or change the URL information of the displayed page.</li>
</ul>
&nbsp;

Example 1- Getting the URL

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">var url = location.href;
document.write(url); //=&gt; Write out the URL of the currently displayed page</pre>
</div>
&nbsp;

<img class="aligncenter size-full wp-image-13818" src="https://off.tokyo/wp-content/uploads/2021/04/var-url-location.href-document.writeurl-Write-out-the-URL-of-the-currently-displayed-page-scaled.jpg" alt="" width="2560" height="1091" />

&nbsp;

Example 2- Change the URL to the assigned value

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">location.href = "http://test.jp"</pre>
</div>
&nbsp;
<ul>
 	<li>history --- history management
The history object manages the history. The main properties are summarized below.</li>
</ul>
&nbsp;
<ul>
 	<li>length : the number of pages in the history 5</li>
 	<li>back : Go back to the previous page (function without return value)</li>
 	<li>forward : Go to the next page.</li>
</ul>
For example, the usage of "history.back" ↓

&nbsp;
<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">// go back to the previous page
history.back();</pre>
</div>
&nbsp;
<ul>
 	<li>navigator --- Browser Metadata</li>
</ul>
The navigator object is an object used to handle metadata about the browser type and version.
The most commonly used one is "navigator.userAgent".

&nbsp;

<img class="aligncenter size-full wp-image-13819" src="https://off.tokyo/wp-content/uploads/2021/04/document.writenavigator.userAgent.png" alt="" width="3460" height="1700" />

&nbsp;

That's how it is.

&nbsp;

This article was adapted from this article in Japanese.

&nbsp;

[windowオブジェクト](https://qiita.com/tsukishimaao/items/39d22fd9178546d6cdeb)

source : [Understanding Javascript window object | off.tokyo]([https://off.tokyo/blog/understanding-javascript-window-object/)