Что такое JavaScript и где он живёт

Урок 4.1 · Интерфейсы и сайты с нуля · Модуль 4. Оживляем страницу: JavaScript · Бесплатно

Цель урока: Понять, зачем нужен JavaScript, и вывести первое сообщение в консоль.

Нужно знать заранее: Урок 3.3

Объяснение

Зачем это нужно: HTML — это скелет страницы, CSS — её внешний вид. Но ни тот, ни другой не умеют реагировать на действия: посчитать, проверить, показать другое. Для этого в браузере живёт JavaScript — язык, который оживляет страницу. Кнопка, которая отвечает, счётчик, игра, калькулятор — всё это JavaScript.

Как это работает: Код JavaScript пишут между тегами <script> и </script>. Браузер читает страницу сверху вниз и, дойдя до скрипта, выполняет его. Поэтому скрипт обычно ставят в конец страницы — чтобы все элементы уже существовали, когда код попробует к ним обратиться. Первая команда, которую пишут все: console.log(...). Она печатает значение в консоль — служебное окно браузера. Консоль не видна на странице, но именно туда смотрят, когда проверяют, что код работает. В нашем превью консоль открыта под страницей.

Пример с разбором: <script> console.log('Привет из JavaScript!') console.log(2026) </script> Первая строка печатает текст, вторая — число. Текст всегда в кавычках, число — без. Кавычки могут быть одинарными или двойными, главное — чтобы они совпадали.

Разбор по шагам: 1. Добавьте на страницу тег <script>. 2. Внутри напишите console.log('Привет из JavaScript!'). 3. Откройте консоль под превью — там появится сообщение. 4. Добавьте вторую строку console.log(42) — с числом. 5. Убедитесь, что в консоли два сообщения, а не одно.

Частая ошибка: Забыть кавычки: console.log(Привет) — браузер решит, что Привет — это имя переменной, и выдаст ошибку. Вторая ошибка — написать console.log вне тега <script>: тогда это просто текст на странице, а не код.

Важно: JavaScript не заменяет HTML и CSS. Он ими управляет: находит элементы, меняет текст, добавляет классы, считает. Поэтому сначала разметка, потом оформление, потом поведение.

Итог: JavaScript живёт в <script>, печатает в консоль через console.log и начинает реагировать на действия. С этого начинается любая интерактивность.

<p>Проверьте консоль ниже.</p>

<script>
  console.log('Привет из JavaScript!')
  console.log(2026)
</script>

Уроки модуля 4

• 4.1 Что такое JavaScript и где он живёт — вы здесь (бесплатно)
• 4.2 Кнопка, которая отвечает (по подписке)
• 4.3 Счётчик: переменные и число на странице (по подписке)
• 4.4 Условие if: страница решает сама (по подписке)
• 4.5 Поле ввода: прочитать то, что написал человек (по подписке)
• 4.6 Классы из кода: как менять оформление (по подписке)
• 4.7 Мини-проект: калькулятор скидки (по подписке)
• 4.8 Разбор кода: что не так (по подписке)