Введение в JavaScript

Free Preview
Продолжительность: 8 мин

В предыдущих модулях мы разобрались с 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. Браузер сразу покажет результат. Консоль — удобное место для быстрых экспериментов с кодом.

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

Предыдущий урокСледующий урок