JavaScript в HTML: встраивание кода и лучшие практики

HTML-файл создан, добавлена иконка, запущен Live Server. Добавим код JavaScript. Существуют два способа: встраивание непосредственно в HTML-документ или размещение в отдельном файле с последующей ссылкой на него. Рассмотрим первый вариант.

Встраивание в HTML-документ

Скрипты обычно добавляются перед закрывающим тегом <body>. Это обеспечивает быструю загрузку содержимого HTML и предотвращает ошибки при попытке JavaScript изменить ещё не отображённое содержимое.

Добавим скрипт:

Для встраивания JavaScript используется теги <script> и </script>. Введите <script> и нажмите Tab. Между открывающим и закрывающим тегами размещается код JavaScript. Например:

console.log("Greeting from the JavaScript");

Сохраним файл и проверим результат в консоли.

Результат: Greeting from the JavaScript

Live Server автоматически перезагружает содержимое папки при внесении изменений. Добавим восклицательный знак:

console.log("Greeting from the JavaScript!");

Синтаксис будет рассмотрен позже. Важно понимать, что JavaScript легко встраивается в HTML с помощью тегов <script> и </script>. Например:

console.log("Greeting from the embedded JavaScript");

Сохранение отобразит два сообщения в консоли.

Добавим ещё одну строку:

console.log(2 + 2);

Результат: 4.

Консоль отображает имя файла и номер строки для каждого сообщения.

Рассмотрено встраивание JavaScript-кода непосредственно в HTML-файл. В следующем уроке создадим отдельный файл JavaScript и добавим ссылку на него в HTML-файл.

Что будем искать? Например,программа