Введение в JavaScript

Продолжительность: 20 мин

В предыдущих модулях мы разобрались с HTML и CSS — научились создавать структуру страницы и оформлять её внешний вид. Но страница при этом оставалась статичной: она просто отображает информацию и никак не реагирует на действия пользователя.

В третьем модуле мы познакомимся с языком программирования JavaScript — именно он отвечает за интерактивность веб-страниц.

Что такое JavaScript

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

реагировать на действия пользователя (клики, ввод текста, прокрутка);
изменять содержимое и стили страницы без перезагрузки;
отправлять запросы на сервер и получать данные;
создавать анимации и сложные интерактивные элементы.

Если вы заходили на страницу с формой, которая проверяет корректность email прямо в браузере, или с каруселью, переключающей слайды — всё это JavaScript.

Немного истории

JavaScript был создан в 1995 году разработчиком Бренданом Айком в компании Netscape всего за 10 дней. Изначально он предназначался исключительно для браузера и решал небольшие задачи — например, валидацию форм.

Со временем язык сильно изменился. Сейчас JavaScript — один из самых популярных языков программирования в мире. Он используется не только в браузере, но и на сервере (Node.js), в мобильной разработке и даже в настольных приложениях.

Несмотря на похожее название, JavaScript и Java — это два совершенно разных языка. Название было выбрано в маркетинговых целях, когда Java была на пике популярности.

Как подключить JavaScript к странице

Как и CSS, JavaScript можно добавить двумя способами.

Внутри тега <script> — прямо в HTML-документе:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Привет!</h1>

    <script>
      console.log('JavaScript работает!');
    </script>
  </body>
</html>
html

Тег <script> принято размещать в конце <body>, перед закрывающим тегом. Это связано с тем, что браузер выполняет скрипт сразу при встрече с ним — если поставить его в начало, он может попытаться работать с элементами, которые ещё не загрузились.

Внешний файл — создаём отдельный файл script.js и подключаем его атрибутом src:

<script src="script.js"></script>
html

Внешний файл — предпочтительный способ для реальных проектов, по тем же причинам что и с CSS: код отделён от разметки, его можно переиспользовать на нескольких страницах.

Первый инструмент: консоль

Мы уже знакомы с панелью инструментов разработчика. В ней есть вкладка Console (Консоль) — это интерактивная среда, в которой браузер выполняет JavaScript и выводит результаты.

console.log() — это встроенная функция, которая выводит переданное значение в консоль. Это основной инструмент для отладки и проверки работы кода:

console.log('Привет, мир!');
console.log(2 + 2);
console.log(true);
js

Попробуйте открыть консоль и написать туда любое выражение — например, 2 * 10. Браузер сразу покажет результат. Консоль — удобное место для быстрых экспериментов с кодом.

В следующем уроке разберём одну из фундаментальных концепций любого языка программирования — переменные.

Это платный урок

Выберите тариф, чтобы открыть полный доступ к курсу

Самостоятельный

Учитесь в своём темпе. Всё, что нужно, чтобы освоить основы.

4 900 ₽7 900 ₽

Скидка 38%

Доступ ко всем урокам навсегда
Практические задания с автоматической проверкой кода в SourceCraft
Два проекта для портфолио
Первый модуль — бесплатно, без регистрации
Возврат денег в течение 14 дней

Популярный

С поддержкой

Личное код-ревью и прямая связь с автором, чтобы не застрять.

10 900 ₽13 900 ₽

Скидка 22%

Всё из тарифа «Самостоятельный»
Личное код-ревью ваших заданий от автора
Чат с автором в Telegram или MAX — задавайте любые вопросы
Одна персональная видеовстреча 30 минут

Премиум

Максимальное сопровождение: разбор кода вживую и еженедельные созвоны.

25 000 ₽29 000 ₽

Скидка 14%

Всё из тарифа «С поддержкой»
Живое код-ревью в реальном времени
Персональная видеовстреча 30 минут каждую неделю — 2 месяца (8 встреч)
Чат с автором в Telegram или MAX на всё время обучения

Безопасная оплата через ЮKassa · возврат в течение 14 дней