1. Об'єкти браузера

Як ти вже знаєш, мова JavaScript працює всередині браузера, отже їй якось потрібно взаємодіяти з цим браузером. Для цього браузер має кілька об'єктів і функцій, які доступні з JavaScript.

По-перше, це об'єкт window, що описує вікно браузера. Точніше, раніше описував, коли браузери були без вкладок. Тепер об'єкт window описує поточну вкладку браузера, на якій завантажено сторінку зі скриптом.

По-друге, це об'єкт document, який відповідає за документ, що відображається у вкладці. Це може дещо плутати. Для простоти скажемо, що document – це те, що відображається користувачеві, а window – це те, у чому цей document відображається.

Вебінар JavaRush

По-третє, це об'єкт console, який відповідає за виведення в консолі браузера. Так, у браузерів теж є консоль: вона використовується переважно для дебага скрипту та виведення повідомлень про помилки. Зазвичай її можна відкрити за допомогою кнопки F12 у твоєму браузері.

Объект window – це об'єкт верхнього рівня для всіх об'єктів сторінки. І хоча ви можете прямо писати імена об'єктів document і console вашому скрипті, насправді їхні імена – window.document і window.console.

2. Діалоги у JavaScript

Метод alert()

Також в об'єкта window є кілька функцій, які бачить скрипт сторінки. Найчастіше використовується функція alert(). Вона дозволяє відобразити діалогове вікно з повідомленням користувача. Робота скрипта припиняється, доки користувач не натисне OK.

Приклад:


        alert("JavaScript is the best!");

Метод prompt()

Також є функція, за допомогою якої можна попросити користувача ввести якесь значення – це prompt().

Приклад:


        var age = prompt("Вкажіть рік народження");

Метод confirm()

Можна вивести діалогове вікно з двома кнопками: Ok, Cancel – спитати в користувача про якусь дію.

Приклад:


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

3. Подія onload()

Ось іще один корисний та цікавий момент. У вікна браузера є event (подія), що виникає, коли документ повністю завантажено. Ти можеш зазначити код, який повинен виконатися після того, як документ буде завантажено та відображено.

Зробити це можна трьома способами.

По-перше, можна вбудувати JavaScript-код прямо в HTML-сторінку як значення атрибута:


  <body onload="alert('документ завантажено');">
    <img src="big-image.png">
  </body>

По-друге, можна вбудувати JavaScript-код прямо в HTML-сторінку:


<head>
    <script>
        function load()
        {
            alert('документ завантажено');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

По-третє, можна записати трохи коротше: оголосити анонімну функцію:


<head>
    <script>
        window.onload = function () {
            alert('документ завантажено');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4. Подія onclick()

І нарешті, ще одна важлива подія (event) – це event OnClick. Вона виникає у будь-якого елемента, на який натиснув користувач. Так само, як і event OnLoad його можна вказати різними способами, тому наведемо лише найпростіший:


  <body>
    <img src="big-image.png" onclick="alert('користувач клікнув по картинці');">
  </body>