Window Object

<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>

<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>

<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>

<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>