W3docs
ru
Войти

Начало работы с Javascript

Узнайте, как добавить JavaScript на страницу с помощью тега script, подключить внешние .js файлы, управлять загрузкой через defer и async и использовать консоль браузера.

Что охватывает эта глава

Это ваша отправная точка для написания кода на JavaScript. По её окончании вы будете знать, как:

  • добавить JavaScript непосредственно на HTML-страницу с помощью тега <script>,
  • перенести код в отдельный файл .js и подключить его,
  • управлять моментом запуска скрипта с помощью атрибутов defer и async,
  • написать первые строки кода, и
  • использовать консоль браузера для просмотра вывода и поиска ошибок.

Если вы совсем новичок в этом языке, сначала прочитайте краткое Введение в JavaScript для общего представления, а затем возвращайтесь сюда, чтобы начать писать код.

Зачем нужен JavaScript

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

Добавление JavaScript на страницу означает, что вы пишете компьютерную программу. Большинство скриптов для начинающих коротки, но они имеют те же строительные блоки, что и более крупные программы: значения, условия и пошаговые инструкции. Хороший способ подготовиться перед написанием кода — разбить задачу на небольшие шаги. Например, чтобы поприветствовать посетителя по имени — «Добро пожаловать, Иван Иванов!» — ваша программа должна:

  1. спросить у посетителя его имя,
  2. считать ответ, и
  3. вывести сообщение на страницу.

Когда шаги станут понятны, вы переводите их в код. Изучение языка во многом похоже на изучение разговорного языка: вы запоминаете новые слова (let, if, function) и учитесь их сочетать.

Как добавить JavaScript на страницу

Браузер читает HTML сверху вниз. Чтобы сказать ему «идёт JavaScript», вы оборачиваете код в HTML-тег <script>. Всё, что находится между открывающим <script> и закрывающим </script>, выполняется как JavaScript:

Скрипт «Hello, world!» внутри HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Попробуйте сами »

Тег <script> может содержать сам код (называемый встроенным кодом) или указывать на внешний файл с помощью атрибута src (рассматривается в следующем разделе). Теги <script> можно размещать в <head> страницы или в любом месте <body>.

Куда поместить тег <script>

Скрипт блокирует разбор страницы во время выполнения, поэтому расположение имеет значение:

  • Непосредственно перед закрывающим тегом </body> — это простейшее безопасное место. К моменту запуска скрипта HTML выше него уже существует, поэтому код может находить элементы страницы.
  • В <head> — ваш код остаётся организованным в одном месте, но обычный <script> там выполняется до разбора тела страницы — поэтому он ещё не видит элементы страницы. Чтобы это исправить, используйте атрибут defer (см. ниже).

Устаревшие атрибуты <script>, которые вы ещё можете встретить

Современным скриптам редко нужны какие-либо атрибуты, но два из них встречаются в старом коде:

  • type — HTML4 требовал type="text/javascript". Он больше не нужен; современный стандарт повторно использует type только для JavaScript-модулей (type="module"), которые являются продвинутой темой, рассматриваемой позже.
  • language — language="javascript" когда-то объявлял язык скрипта. JavaScript является языком по умолчанию, поэтому этот атрибут устарел.

О всех доступных атрибутах можно прочитать в главе об атрибутах HTML.

Управление моментом загрузки скрипта: defer и async

Когда браузер встречает внешний <script src="...">, он обычно останавливает построение страницы, скачивает файл и выполняет его, прежде чем продолжить. На странице с несколькими скриптами это замедляет отрисовку. Два атрибута изменяют это поведение:

  • defer — скачивает скрипт параллельно и запускает его только после полного разбора HTML, в том порядке, в котором скрипты расположены. Это рекомендуемый вариант по умолчанию для скриптов, которые взаимодействуют со страницей.
  • async — скачивает параллельно и запускает сразу по готовности, без гарантии порядка. Лучше всего подходит для независимых скриптов (аналитика, реклама), которые не зависят от другого кода или от готовности страницы.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Оба атрибута применяются только к внешним скриптам (src). Для встроенного кода просто разместите <script> в нижней части <body>.

Внешние файлы JavaScript

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

Чтобы использовать внешний файл, укажите атрибут src (source, источник) тега <script> на него и оставьте тег пустым:

Подключение скрипта из той же папки

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

Путь в src работает как любой другой URL в HTML. Он может быть:

  • Относительным к текущей странице — my-script.js (та же папка) или js/my-script.js (подпапка).
  • Абсолютным (от корня сайта) путём — начинается с /:
<script src="/path/W3DocsScript.js"></script>
  • Полным URL, что удобно для библиотек, размещённых на CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Чтобы загрузить несколько файлов, используйте один тег <script> на файл. Они выполняются сверху вниз:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>

Распространённая ловушка: один тег <script> не может одновременно иметь атрибут src и встроенный код. Если src задан, всё, что находится между тегами, игнорируется:

src задан — встроенный alert никогда не выполнится

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Попробуйте сами »

Чтобы использовать одновременно внешний файл и встроенный код, разделите их на два отдельных тега:

Два тега: один внешний, один встроенный

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Попробуйте сами »

Ваша первая программа на JavaScript

Напишем полноценную первую программу. Создайте HTML-файл и непосредственно перед закрывающим тегом </body> добавьте <script> с одной строкой, которая выводит всплывающее сообщение:

Диалоговое окно alert()

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Попробуйте сами »

Когда вы открываете эту страницу в браузере, появляется диалоговое окно с текстом Welcome to W3Docs. Страница приостанавливается до нажатия OK; после закрытия окна отрисовывается остальная часть страницы. alert() удобен для быстрых проверок в процессе обучения, но он прерывает работу пользователя, поэтому в рабочем коде он используется редко.

Вывод текста на веб-страницу

alert() показывает всплывающее окно, но часто нужно поместить текст непосредственно на страницу. Классическая обучающая команда для этого — document.write(), которая вставляет переданную строку прямо в документ по мере его загрузки:

Использование document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Попробуйте сами »

Как и функция alert(), document.write() выводит всё, что вы помещаете между скобками — здесь элемент <p>, поэтому браузер добавляет новый абзац под заголовком.

Внимание: document.write() подходит для первых экспериментов, но избегайте его в реальных проектах. Если он выполняется после завершения загрузки страницы, он полностью стирает документ. Современный код обновляет страницу через DOM (например, element.textContent = '...').

Консоль JavaScript в браузере

Каждый современный браузер поставляется со встроенной консолью — самым полезным инструментом при обучении. Она показывает сообщения, которые вы выводите, сообщает об ошибках с указанием точного номера строки и позволяет вводить JavaScript и запускать его мгновенно.

Выводите в неё сообщения с помощью console.log(). В отличие от alert(), это не прерывает страницу, а в отличие от document.write(), никогда не перезаписывает документ — поэтому это предпочтительный способ проверки значений:

Вывод в консоль

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Попробуйте сами »

Чтобы открыть консоль:

  • Chrome / Edge: Ctrl + Shift + J (Windows/Linux) или Cmd + Option + J (Mac), либо через меню → Дополнительные инструменты → Инструменты разработчика и выберите вкладку Console.
  • Firefox: Ctrl + Shift + K (Windows/Linux) или Cmd + Option + K (Mac).
  • Safari: включите меню Разработка в Настройки → Дополнения, затем нажмите Cmd + Option + C.

Для более глубокого знакомства с инструментами отладки см. Отладка DOM и инструменты.

Резюме

  • Добавляйте JavaScript с помощью тега <script> — встроенный код помещается между тегами; внешний файл указывается в атрибуте src (никогда то и другое в одном теге).
  • Размещайте обычные скрипты непосредственно перед </body> или используйте defer для внешних скриптов, чтобы запускать их после разбора страницы.
  • Внешние файлы .js дают возможность повторного использования и кэширования на многих страницах.
  • alert() показывает всплывающее окно, document.write() записывает на страницу (используйте умеренно), а console.log() выводит в консоль, не нарушая работу страницы.

Далее узнайте, как хранить данные в переменных JavaScript и как документировать код с помощью комментариев.

Практика

Практика
Какие из следующих утверждений верны о начале работы с JavaScript в веб-разработке?
Какие из следующих утверждений верны о начале работы с JavaScript в веб-разработке?
Was this page helpful?