JavaScript Window

The term "Windows" refers to the global object window, which represents the browser window or tab in which your JavaScript code is running. The window object provides access to various properties, methods, and events related to the browser window and its content.

console.log()

The console property in the Window Object represents the browser console that provides the ability to log information and interact with a JavaScript program running in a web page.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Console.log() Methods</h1>

<script>
    window.console.log("Welcome to WebTutor.dev");
</script>

</body>
</html>

alert()

Displays an alert box with a message and an OK button.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript alert() Method</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        alert("Hello! I am an alert box!");
    }
</script>

</body>
</html>

prompt()

Displays a prompt box with a message, an input field, and OK and Cancel buttons.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript prompt() method</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
    function myFunction() {
        let x = prompt("Enter your name", "John Wallace");
        if (x != null) {
            document.getElementById("demo").innerHTML = "WebTutor Welcomes " + x;
        }
    }
</script>

</body>
</html>

confirm()

Displays a confirmation box with a message, OK and Cancel buttons, and returns a boolean value indicating whether the user clicked OK or Cancel.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript confirm() method</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
    function myFunction() {
        let msg;
        if (confirm("Press a button!") == true) {
            msg = "You pressed OK!";
        } else {
            msg = "You canceled!";
        }
        document.getElementById("demo").innerHTML = msg;
    }
</script>

</body>
</html>

location

Provides information about the current URL and allows scripts to change the current URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Location Object</h1>
<p id="demo"></p>

<script>
    let location = window.location.origin;
    document.getElementById("demo").innerHTML = location;
</script>

</body>
</html>

document

Represents the HTML document displayed in the window and provides methods for manipulating it.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Document Object</h1>
<p id="demo"></p>

<script>
    let urls = window.document.URL;
    document.getElementById("demo").innerHTML = urls;
</script>

</body>
</html>

innerWidth and innerHeight

Provide the width and height of the content area of the browser window, excluding toolbars and scrollbars.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript innerWidth and innerHeight Properties</h1>
<p id="demo"></p>

<script>
    let w = window.innerWidth;
    let h = window.innerHeight;
    document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
</script>

</body>
</html>

scrollTo()

Scrolls the document to the specified position.

Example

<!DOCTYPE html>
<html>
<style>
    body { height: 2000px; }
</style>
<body>

<h1>JavaScript scrollTo() Method</h1>
<button onclick="scrolldown()" style="position:fixed">Scroll to 200 horizontally!</button><br>

<script>
    function scrolldown() {
        window.scrollTo(0, 200);
    }
</script>

</body>
</html>

setTimeout()

Executes the function after the specified delay.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript setTimeout() Method</h1>
<h2 id="demo"></h2>

<script>
    const myTimeout = setTimeout(HappyBday, 3000);
    function HappyBday() {
        document.getElementById("demo").innerHTML = "Happy Birthday!"
    }
</script>

</body>
</html>

clearTimeout()

Cancels the setTimeout() method called earlier.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript clearTimeout() Method</h1>
<h2 id="demo"></h2>
<button onclick="myStopFunction()">Stop time</button>

<script>
    const myTimeout = setTimeout(HappyBday, 3000);

    function HappyBday() {
        document.getElementById("demo").innerHTML = "Happy Birthday!"
    }

    function myStopFunction() {
        clearTimeout(myTimeout);
    }
</script>

</body>
</html>

setInterval()

Executes the function repeatedly at the specified interval.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript setInterval() Method</h1>
<p id="demo"></p>

<script>
    const ele = document.getElementById("demo");
    setInterval(function() {ele.innerHTML += "WebTutor"}, 1000);
</script>

</body>
</html>

clearInterval()

Cancels a setInterval() method that was set earlier.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript clearInterval() Method</h1>
<input type="button" value="startTime" onclick="startTime()" />
<input type="button" value="stopTime" onclick="stopTime()" /><br><br>

<span class="h"></span><span class="m"></span><span class="s"></span>

<script>
    let times;
    function startTime() {
        times = setInterval(ChangeTime, 1000);
    }
    function ChangeTime() {
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        document.querySelector(".h").innerText = `${h} hours`;
        document.querySelector(".m").innerText =`${m} minutes`;
        document.querySelector(".s").innerText =`${s} seconds`;
    }
    function stopTime() {
        clearInterval(times);
    }
</script>

</body>
</html>

open()

The open() method is used to open a new browser window or tab programmatically.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript open() Method</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        window.open("https://www.webtutor.dev");
    }
</script>

</body>
</html>

close()

The close() method is used to close the current browser window or tab programmatically. It doesn't require any parameters. However, please note that this method can only close windows that were opened using JavaScript. It cannot close the main browser window or a window/tab that wasn't opened by JavaScript due to security restrictions

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript close() Method</h1>
<button onclick="winOpen()">Open</button>
<button onclick="winClose()">Close</button>

<script>
    let myWindows;
    function winOpen() {
        myWindows = window.open("", "", "width=300,height=150");
    }
    function winClose() {
        myWindows.close();
    }
</script>

</body>
</html>

resizeby()

The resizeBy() method is used to resize the current browser window by a specified amount in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript resizeBy() Method</h1>
<button onclick="winOpen()">Create window</button>
<button onclick="winResize()">Resize window</button>

<script>
    let myWindows;
    function winOpen() {
        myWindows = window.open("", "", "width=300, height=200");
    }
    function winResize() {
        myWindows.resizeBy(400, 300);
    }
</script>

</body>
</html>

resizeto()

The resizeTo() method is used to resize the current browser window to a specified width and height.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript resizeTo() Method</h1>
<button onclick="winOpen()">Create window</button>
<button onclick="winResize()">Resize window</button>

<script>
    let myWindows;
    function winOpen() {
        myWindows = window.open("", "", "width=200, height=200");
    }
    function winResize() {
        myWindows.resizeTo(400, 400);
    }
</script>

</body>
</html>

scroll()

The scroll() method is used to scroll the content of the current window to a specified position.

Example

<!DOCTYPE html>
<html>
<style>
    body { height: 2000px; }
</style>
<body>

<h1>JavaScript scroll() Method</h1>
<button onclick="myScroll()">Click Me</button>

<script>
    function myScroll(){
        window.scroll({
            top: 200,
            behavior: "smooth",
        });
    }
</script>

</body>
</html>

These window object methods provide ways to control the behavior and appearance of the browser window using JavaScript. However, please note that some browser security settings and restrictions may limit the functionality of these methods.

DOM Node Lists

JS Screen