The window object is created for each window that appears on the screen. A window can be the main browser window, an iframe, or even a new window created with JavaScript (pop-up).
The properties and methods of the window object gives you some control over browser windows.
- A list with properties and methods of the window object, with code and examples it is to the page: coursesweb.net/javascript/properties-methods-window


Some examples

The parent property refers to the parent of the current window (if that content is into an <iframe>).
<h4>Example parent</h4>
<p>Click on the button to change the background color of the parent window of this iframe.</p>
<button id='btn1'>Parent background</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 parent.document.body.style.background ='#bfbffe';
});
</script>
The self property refers to the current window.
- With this property you can check if the content is in <iframe> or in the main window.
<h4>Example self</h4>
<p>Click on the button to see if this content is into an iframe or in the main window.</p>
<button id='btn1'>Check window</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 if(window.top != window.self) var msg ='This content is in iframe.';
 else var msg ='This content is in the main window.';
 document.getElementById('resp').innerHTML = msg;
});
</script>
The top property refers to the main window in browser.
<h4>Example top</h4>
<p>When click on the button, the background color of the main (top) window is changed.</p>
<button id='btn1'>Top background</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 top.document.body.style.background ='#c0c0fe';
});
</script>
outerHeight - returns the height of the outside of the browser window (including toolbar), in pixels.
<h4>Example outerHeight</h4>
<p>Click on the button to see the height of this window.</p>
<button id='btn1'>Get outerHeight</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='outerHeight: '+ window.outerHeight;
});
</script>
outerWidth - returns the width of the outside of the browser window (in pixels).
<h4>Example outerWidth</h4>
<p>Click on the button to see the width of this window.</p>
<button id='btn1'>Get outerWidth</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='outerWidth: '+ window.outerWidth;
});
</script>

Pop-Up window

Pop-up windows can be created from JavaScript with specified dimensions and positions on screen.
Use this syntax:

window.open('URL', 'name', 'props')
- 'URL' - address for page content in the window. If a blank string is added, it will display an empty page.
- 'name' - the name of the pop-up window.
- 'props' - (optional) nume=valoare pairs (separated by comma) with properties for defining the window. If the 'props' is not added, the window will open as a new tab in the browser.

- Example, clicking on a button it opens a pop-up window with specified size and position.
<h4>Example window.open()</h4>
<p>When click on the button it opens a pop-up window with these properties: <em>'width=650, height=450, left=30, top=50, menubar=0, titlebar=0'</em>.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('//gamv.eu/', 'TestWin', 'width=650, height=450, left=30, top=50, menubar=0, titlebar=0');
});
</script>

Pop-Up window with content from javascript

The window.open() method returns a reference to the opened window. Using this reference, you can open pop-up window with content created directly from JavaScript. In this case, the argument for 'URL' is an empty string.
In the pop-up window you can add a button that can close that window.

- Example, a button to open a pop-up window with content and Close button created from JavaScript.
<h4>Example, window with content from JS and Close button</h4>
<p>When you click on the button, it opens a window with HTML elements and Close button added from JavaScript.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
//opens pop-up
var popup = window.open('', 'TestWindow', 'width=350, height=300, left=20, top=25');

//adds html and text in pop-up
popup.document.write('<h1>Be Happy, Smile</h1>');
popup.document.write(`<blockquote style="color:#0000e0; font-size:18px;">Your most precious wealth, no one can take it from you,<br>
You can give and share without decreasing.<br>
You are always, yourself, your state of being.<br>
Give joy and peace through your state,<br>
What and how you give, you receive.</blockquote>
<h4>Share Peace and Joy, be Happy!</h4>`);
popup.document.write('<p> - I\'m not telling you what to do, the world reflects you, You transmit this to you.</p>');

//adds close button
popup.document.write('<button onclick="window.close()">Close</button>');

//sets a background to the body in pop-up
popup.document.body.style.background ='#fefee9';
});
</script>

Scroll bars

The scroll bars of the page belong to the window object. It contains properties and methods for reading and setting the position of the page scroll bars.


• To detect when the page is scrolled, you can register the 'scroll' to the window object.

- Example, button for scroll with scrollTo(), and displays the coordinates of the scroll bars.
<h4>Example scrollTo()</h4>
<p style='background:#fdfddb; height:1500px; width:130%;'>When you click the button, the horizontal scroll bar moves to position 300, and the vertical bar scrolls down to position 1100 (pixels).<br>
The coordinates of the scroll bars are displayed in the button (with the 'scroll' event).<br>
 - At the bottom is a scroll-top button.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>
<button onclick='window.scrollTo(0,0)' style='display:block; margin:5px 25px 8px auto;'>Go-Top</button>

<script>
var btn = document.getElementById('btn1');

btn.addEventListener('click', (ev)=>{
 window.scrollTo(300, 1100);
});

//detecs the scroll event
window.addEventListener('scroll', (ev)=>{
 //displays in btn the scroll bars coordinates
 btn.textContent = window.scrollX +', '+ window.scrollY;
});
</script>

Saving data in browser

With the localStorage property you can store data from JavaScript in the user's browser for unlimited time, until they are deleted by the user or other script.
Datas stored with localStorage are saved as string, and can be accessed on the website from which they were added, each time the user visits that site.
- This property returns an object with methods to add and reads data stored in the browser.


- Example, a button to save in web browser data added into an input field, and another button to display data stored in localStorage.
<h4>Example localStorage</h4>
<p>When click on the button, the text from the input field is saved in browser.<br>
Then, click on the next button to display the text saved in localStorage.</p>
<div id='dv1'>
Text: <input type='text' value='coursesweb.net' id='txt1'><br>
<button id='btn1'>Add in storage</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from storage</button>
<blockquote id='resp'>#resp</blockquote>
</div>

<script>
//stores in browser the value from #txt1, with key 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var str = document.getElementById('txt1').value;
 localStorage.setItem('some_key', str);

 //display the div with the next button
 document.getElementById('dv1').style.display ='none';
 document.getElementById('dv2').style.display ='block';
});

//adds in #resp the text saved in localStorage, 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = localStorage.getItem('some_key');
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Window Object

Last accessed pages

  1. Ajax-PHP Chat Script (37775)
  2. PHP-MySQL Scripts (3924)
  3. Create simple Website with PHP (20532)
  4. Select in MySQL, Output results in HTML Table (5636)
  5. Convert XML to JSON in JavaScript (18580)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (415)
  2. Read Excel file data in PHP - PhpExcelReader (331)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (257)
  4. PHP getElementById and getElementsByTagName (208)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)