4.1 Объекты браузера

Как ты уже знаешь, язык JavaScript работает внутри браузера, поэтому ему как-то нужно взаимодействовать с этим самым браузером. Для этого у браузера есть несколько объектов и функций, которые доступны из JavaScript.

Во-первых, это объект window, который описывает окно браузера. Вернее, раньше описывал, когда браузеры были без вкладок. Теперь объект window описывает текущую вкладку браузера, в которую загружена страница со скриптом.

Во-вторых, это объект document, который отвечает за отображаемый во вкладке документ. Это может немного путать. Для простоты скажем, что document – это то, что отображается пользователю, а window – это то, в чем этот document отображается.

Java-университет

В-третьих, это объект console, который отвечает за вывод в консоль браузера. Да, у браузеров тоже есть консоль, она используется преимущественно для отладки скрипта и вывода сообщений об ошибках. Обычно открыть ее можно нажав кнопку F12 в вашем браузере.

Объект window, является объектом верхнего уровня для всех объектов страницы. И хотя вы можете прямо писать имена объектов document и console в вашем скрипте, на самом деле их имена window.document и window.console.

4.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");

4.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.4 Событие onclick()

И наконец еще одно важное событие (event) – это event OnClick. Который возникает у любого элемента, на который кликнул пользователь. Так же, как и event OnLoad его можно задать разными способами, поэтому мы приведем только самый простой:


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