Динамическое добавление скриптов на web-страницу. Как добавить скрипт на страницу
JavaScript — это язык программирования, используемый в веб-разработке. Он используется для создания интерактивных веб-страниц и веб-приложений. Современные браузеры поддерживают JavaScript при помощи тега HTML script и не требуют установки дополнительных плагинов.
JavaScript необходимо загружать и запускать одновременно с разметкой. Это можно сделать как внутри HTML-документа , так и в отдельном файле, который браузер загрузит одновременно с HTML .
В этой статье мы расскажем о том, как подключить JavaScript в создаваемых веб-страницах в виде скрипта в HTML-документ и отдельного файла.
Добавление JavaScript в HTML-документМожно добавить JavaScript-код в HTML-документ при помощи специального тега . Он может быть помещен в раздел HTML-документа, или после него. В зависимости от того, когда необходимо загрузить JavaScript .
Как правило, JavaScript-код помещается внутри раздела , что позволяет держать его за пределами основного содержимого HTML-документа .
Но если ваш сценарий должен запускаться в определенном месте разметки страницы, тогда его размещают в .
Рассмотрим следующий HTML-документ с заголовком Today’s Date :
index.html
Today"s Date
На данный момент файл содержит разметку без тега script в HTML . Допустим, мы хотим добавить в него следующий JavaScript-код :
let d = new Date(); alert("Today"s date is " + d);
Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.
Начнем с того, что добавим скрипт между тегами . Он даст сигнал браузеру о том, что нужно запустить сценарий, прежде чем загрузится остальное содержимое страницы:
index.html
Today"s Date let d = new Date(); alert("Today"s date is " + d);
Теперь при загрузке страницы с HTML script вы увидите сообщение, которое будет выглядеть так:
Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега и перезагрузить страницу. Поскольку HTML-документ достаточно прост, вы не заметите никакой разницы.
Чтобы внести изменения в структуру HTML-документа , нужно разместить код после раздела . Теперь дата будет отображаться на странице:
index.html
Today"s Date let d = new Date(); document.body.innerHTML = "Today’s date is " + d + ""
При загрузке приведенного выше HTML-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:
Небольшие сценарии могут отлично работать внутри HTML-файла . Но для больших скриптов этот подход неэффективен. Их внедрение делает разметку громоздкой и сложной для понимания. Далее мы рассмотрим, как подключить отдельный JavaScript-файл в HTML-документе .
Работа с отдельным JavaScript-файломЧтобы разместить большие сценарии, которые будут использоваться для нескольких веб-страниц, JavaScript-код помещают в один или несколько js-файлов . Они подключаются к HTML-документу точно так же как CSS .
Преимущества использования отдельного JavaScript-файла :
- Разделение HTML-разметки и JavaScript-кода делает их более простыми для понимания;
- Отдельные файлы проще поддерживать;
- Когда JavaScript-файлы кэшированы, страницы загружаются быстрее.
Для демонстрации подключения JavaScript-файла к документу без тега script в HTML создадим небольшой веб-проект. Он будет состоять из файла script.js , расположенного в каталоге js/ , файла style.css , расположенного в каталоге css/ и главной страницы index.html , расположенной в корне проекта:
Можно начать с HTML-шаблона из раздела выше:
index.html
Today’s Date
Теперь переместим JavaScript-код , который будет показывать дату в виде заголовка , в файл script.js :
script.js
let d = new Date(); document.body.innerHTML = "Today’s date is " + d + ""
Тег указывает на файл script.js, размещенный в каталоге js/ веб-проекта. Посмотрим на эту строку в контексте нашего HTML-файла, размещенную под разделом :
index.html
Today’s Date
Отредактируем файл style.css , добавив цвет фона и стиль заголовка :
style.css
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; }
index.html
Today’s Date
JavaScript-код , размещенный в отдельном файле, а не в HTML script src , можно вызвать из других страниц тем же способом, описанным выше.
Перевод статьи “HOW TO ADD JAVASCRIPT TO HTML ” был подготовлен дружной командой проекта .
Скрипт добавляется на страницу с помощью тэга . Его можно разместить в любом месте страницы, как в тэге , так и в тэге . На странице может быть несколько скриптов. Они связаны между собой. Данные, полученные одним скриптом, могут быть использованы следующими скриптами. Раньше нужно было указывать атрибуты type и language . Но в HTML5 при работе в JavaScript их указывать не обязательно.
Скрипт можно добавить двумя способами - разместить код скрипта внутри тэга или создать файл скрипта, а в теге указать путь к файлу. Создадим страницу и добавим на неё скрипт. Этот скрипт будет выводить окно с сообщением. Код скрипта пока Вам не понятен, поэтому Вы можете просто скопировать его.
Сохраним файл с именем filescript, тип файла должен быть Java Script files. Разместим файл в той же папке, где находится созданная ранее страница. Теперь присоединим файл к странице. Для этого добавим на страницу ещё один тэг . Файл нужно указать в атрибуте src . Путь к файлу указывается так же, как и к файлам других типов.
Теперь при запуске страницы на экране должны появляться по очереди два сообщения. Сначала первое, а после нажатия кнопки OK, второе.
Если тэгу задан атрибут src , то код внутри тэга игнорируется и используется код из файла скрипта.
При изучении JavaScript мы будем писать код скриптов внутри страниц, чтобы не создавать отдельный файл скриптов для каждого примера. Но при создании сайтов, большинство скиптов создаётся в файлах. На странице размещаются только очень маленькие скрипты, буквально несколько строк. Файл скрипта можно присоединить к разным страницам сайта. Но даже если скрипт используется только на одной странице, то для него всё равно лучше создать файл. Этот файл сохранится в кеш-памяти браузера и не будет загружаться каждый раз при открытии страницы.
В настройках браузера можно запретить сценарии. В этом случае скрипты выполняться не будут. Поэтому в HTML есть тэг . Внутри него можно разместить элементы, которые будут показаны только в том случае, если в браузере запрещены сценарии. Если скрипты работают, то содержание этого тэга будет скрыто. А если скрипты запрещены, то элементы из этого тэга отобразятся на странице. В них можно написать сообщение, что скрипты не работают. Пример:
| В Вашем браузере не работают скрипты |
Некоторые старые браузеры не поддерживают тэг , но в современных браузерах он работает.
К себе в компьютер, распаковать (если они помещены в архив) и ознакомиться с инструкцией. Мы все относимся к инструкциям как к чему-то полезному, но нудному и не очень нужному, но ведь серверный скрипт, установленный неправильно может испортить ваш сайт! К тому же, автор может указать на полезные, но не очевидные особенности скрипта, которые вы сможете использовать.
Файл скрипта может быть один или несколько - для работы могут быть нужны разные библиотеки функций, файлы стилей, изображения и т.д. Все необходимое надо загрузить на сервер сайта, соблюдая структуру каталогов (если файлы размещены в папки). Делать это можно специальной программой - ФТП-клиентом. Например, FlashFXP, Cute FTP, WS FTP, FileZilla, Smart FTP и т.д. Такие программы бывают и платными и бесплатными, подходящую в сети не составит труда. Загрузка происходит по ФТП-протоколу (File Transfer Protocol - «протокол передачи файлов»). Но можно загрузить все файлы и непосредственно через браузер, не используя дополнительных программ. Для этого следует воспользоваться файл-менеджером, который входит в состав практически каждой системы управления сайтом или панели управления хостинг-провайдера. К сожалению, единого стандарта ни на системы управления, ни на панели хостеров не существует, поэтому вам надо найти - где именно в вашем варианте расположен этот файл-менеджер.После закачки файлов на сервер, возможно, потребуются дополнительные операции с ними. Если это серверный скрипт (например, на PHP) и он в процессе работы файлы, то потребуется закрепить за ним это право редактирования. Нужно ли это - должно быть написано в инструкции к скрипту. Такая операция «установка прав пользователя» или CHMOD ( от CHange MODe). В инструкции должно быть описано какие значения которым файлам следует выставлять. Как правило, чтобы скрипт имел возможность редактировать файлы, им следует выставить атрибут чтения = 777, а записывающему файлу = 755 или 644.
После загрузки файлы будет нужно к страницам сайта. Эта операция сугубо индивидуальна для каждого скрипта - тут уж без инструкции от автора не обойтись. В самом простом варианте вам потребуется добавить ссылку на JavaScript-файл в html-код страницы. Такая ссылка может выглядеть так: Располагаться она должна перед тегом нужной страницы. Для php-скрипта аналогичный тег может выглядеть так:include "myPHPscript.php";Этот тег должен вставляться сразу после