Работа с JavaScript через веб-файлы

  1. Вступление
  2. Добавление JavaScript в HTML-документ
  3. Работа с отдельным файлом JavaScript
  4. Заключение

Вступление

JavaScript, также сокращенно JS, является языком программирования, используемым в веб-разработке. Как одна из основных технологий Интернета наряду с HTML и CSS, JavaScript используется для того, чтобы сделать веб-страницы интерактивными и создавать веб-приложения. Современные веб-браузеры, которые придерживаются общих стандартов отображения, поддерживают JavaScript через встроенные движки без необходимости в дополнительных плагинах.

При работе с файлами для Интернета необходимо загружать JavaScript и запускать его вместе с разметкой HTML. Это можно сделать либо встроенным в HTML-документ, либо в отдельный файл, который браузер будет загружать вместе с HTML-документом.

В этом руководстве рассказывается, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла.

Добавление JavaScript в HTML-документ

Вы можете добавить код JavaScript в HTML-документ, используя специальный тег HTML <script>, который оборачивает код JavaScript.

Тег <script> может быть размещен в разделе <head> вашего HTML, в разделе <body> или после тега </ body> close, в зависимости от того, когда вы хотите загрузить JavaScript.

Как правило, код JavaScript может входить в раздел документа <head> для того, чтобы они содержались вне основного содержимого вашего HTML-документа.

Однако, если ваш скрипт должен запускаться в определенной точке в макете страницы - например, при использовании document.write для генерации контента - вы должны поместить его в точку, где он должен быть вызван, обычно в разделе <body>.

Давайте рассмотрим следующий пустой HTML-документ с заголовком браузера «Сегодняшняя дата»:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> </ html>

Сейчас этот файл содержит только HTML-разметку. Допустим, мы хотели бы добавить следующий код JavaScript в документ:

let d = новая дата (); alert («Сегодняшняя дата» + d);

Это позволит веб-странице отображать предупреждение с текущей датой независимо от того, когда пользователь загружает сайт.

Чтобы добиться этого, мы добавим тег <script> вместе с некоторым кодом JavaScript в файл HTML.

Для начала мы добавим код JavaScript между тегами <head>, сигнализируя браузеру запустить скрипт JavaScript перед загрузкой на остальной части страницы. Например, мы можем добавить JavaScript ниже тегов <title>, как показано ниже:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> <script> let d = new Date (); alert («Сегодняшняя дата» + d); </ script> </ head> <body> </ body> </ html>

Как только вы загрузите страницу, вы получите предупреждение, которое будет выглядеть примерно так:

Вы также можете поэкспериментировать с размещением скрипта внутри или снаружи тегов <body> и перезагрузить страницу. Поскольку это не надежный HTML-документ, вы, вероятно, не заметите никакой разницы в загрузке страницы.

Если бы мы изменяли то, что показано в теле HTML, нам нужно было бы реализовать это после раздела <head>, чтобы оно отображалось на странице, как в примере ниже:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> <script> let d = new Date (); document.body.innerHTML = "<h1> Сегодняшняя дата -" + d + "</ h1>" </ script> </ body> </ html>

Вывод вышеупомянутого HTML-документа, загруженного через веб-браузер, будет выглядеть примерно так:

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

Работа с отдельным файлом JavaScript

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

Преимущества использования отдельного файла JavaScript включают в себя:

  • Разделение разметки HTML и кода JavaScript, чтобы сделать оба более простыми
  • Отдельные файлы облегчают обслуживание
  • Когда файлы JavaScript кэшируются, страницы загружаются быстрее

Чтобы продемонстрировать, как подключить документ JavaScript к документу HTML, давайте создадим небольшой веб-проект. Он будет состоять из файла script.js в каталоге js /, style.css в каталоге css / и основного index.html в корне проекта.

проект / ├── css / | Style── style.css ├── js / | Script── script.js └── index.html

Мы можем начать с нашего предыдущего HTML-шаблона из раздела выше:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> </ html>

Теперь давайте переместим наш код JavaScript, который будет отображать дату в виде заголовка <h1>, в файл script.js:

script.js

let d = новая дата (); document.body.innerHTML = "<h1> Сегодняшняя дата -" + d + "</ h1>"

Мы можем добавить ссылку на этот скрипт в раздел <body> или ниже, со следующей строкой кода:

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

Тег <script> указывает на файл script.js в каталоге js / нашего веб-проекта.

Давайте посмотрим на эту строку в контексте нашего HTML-файла, в данном случае ниже раздела <body>:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> <script src = "js / script.js"> </ script> </ html>

Наконец, давайте также отредактируем файл style.css, добавив цвет и стиль фона в заголовок <h1>:

style.css

body {background-color: # 0080ff; } h1 {color: #fff; семейство шрифтов: Arial, Helvetica, без засечек; }

Мы можем ссылаться на этот CSS-файл в разделе <head> нашего HTML-документа:

index.html

<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> <link rel = "stylesheet" href = "css / style.css"> </ head> <body> </ body> <script src = "js / script.js"> </ script> </ html>

Теперь, имея JavaScript и CSS, мы можем загрузить страницу index.html в выбранный нами веб-браузер. Мы должны увидеть страницу, похожую на следующую:

Теперь, когда мы поместили JavaScript в файл, мы можем вызывать его таким же образом с дополнительных веб-страниц и обновлять их все в одном месте.

Заключение

В этом руководстве рассказывалось, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла .js.

Отсюда вы можете узнать, как работать с Консоль разработчика JavaScript а также как писать комментарии в JavaScript ,