4.1 Browser objects

As you already know, the JavaScript language works inside the browser, so it somehow needs to interact with this same browser. To do this, the browser has several objects and functions that are available from JavaScript.

The first is an object window, which describes the browser window. Or rather, I used to describe when browsers were without tabs. Now the window object describes the current browser tab in which the page with the script is loaded.

Secondly, this is an object documentthe one that is responsible for the document displayed in the tab. This might be a little confusing. For simplicity, let's say that document is what is displayed to the user, and window is what this document is displayed in.

Java webinar

Thirdly, this is an object consolethe one that is responsible for the output to the browser console. Yes, browsers also have a console, it is mainly used for debugging the script and displaying error messages. You can usually open it by pressing the F12 button in your browser.

Object window, is the top-level object for all page objects. And although you can directly write object names documentin consoleyour script, in fact, their names window.documentand window.console.

4.2 Dialogs in JavaScript

alert() method

It also an object windowhas several functions that are visible to the page script. The most commonly used is the alert(). It allows you to display a dialog box with a message to the user. The script is then suspended until the user clicks OK.

Example:

alert("JavaScript is the best!");

prompt() method

There is also a function with which you can ask the user to enter some value - this is prompt().

Example:

var age = prompt("Enter Year of Birth");

confirm() method

You can display a dialog box with two buttons Ok- Cancelask the user about some action.

Example:

var isOK = confirm("Are you ready");

4.3 onload() event

And one more useful and interesting moment. The browser window has an event that fires when the document is fully loaded. You can specify code to be executed after the document is loaded and displayed.

This can be done in three ways.

First, you can embed JavaScript code directly into an HTML page as an attribute value:

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

Secondly, you can embed JavaScript code simply in an HTML page:

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

Third, we can write it a bit shorter by declaring an anonymous function:

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 onclick() event

And finally, another important event (event) is event OnClick. Which occurs on any element that the user clicked on. Just like event OnLoadit can be set in different ways, so we will give only the simplest one:

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>