размещение JavaScripts непосредственно в файл, содержащий HTML для веб-страницы, идеально подходит для коротких сценариев, используемых при изучении JavaScript. Однако, когда вы начинаете создавать сценарии, чтобы обеспечить значительную функциональность для вашей веб-страницы, количество JavaScript может стать довольно большим, и включение этих больших скриптов непосредственно на веб-страницу создает две проблемы:
- Это может повлиять на рейтинг вашей страницы в различных поисковых системах, если JavaScript занимает большую часть контента страницы. Это снижает частоту использования ключевых слов и фраз, определяющих содержание.
- Это затрудняет повторное использование одной и той же функции JavaScript на нескольких страницах вашего сайта. Каждый раз, когда вы захотите использовать его на другой странице, вам нужно будет скопировать его и вставить на каждую дополнительную страницу, а также любые изменения, необходимые для нового местоположения.
Намного лучше, если мы сделаем JavaScript независимым от веб-страницы, которая его использует.
Выбор кода JavaScript для перемещения
К счастью, Разработчики HTML и JavaScript обеспечили решение этой проблемы. Мы можем переместить наши JavaScripts с веб-страницы и по-прежнему работать точно так же.
Первое, что нам нужно сделать, чтобы сделать JavaScript внешним по отношению к странице, которая его использует, это выбрать сам код JavaScript (без тегов окружающего HTML-скрипта) и скопировать его в отдельный файл.
Например, если на нашей странице есть следующий скрипт, мы бы выбрали и скопировали часть, выделенную жирным шрифтом:
Раньше практиковалось размещение JavaScript в HTML-документе внутри тегов комментариев, чтобы старые браузеры не отображали код; однако, новые стандарты HTML говорят, что браузеры должны автоматически обрабатывать код внутри HTML-теги комментариев в качестве комментариев, и это приводит к тому, что браузеры игнорируют ваш Javascript.
Если вы унаследовали HTML-страницы от кого-то другого с JavaScript внутри тегов комментариев, вам не нужно включать теги в код JavaScript, который вы выбираете и копируете.
Например, вы должны скопировать только жирный код, оставив HTML-теги комментариев а также в примере кода ниже:
Сохранение кода JavaScript в виде файла
Выбрав код JavaScript, который вы хотите переместить, вставьте его в новый файл. Дайте файлу имя, которое указывает, что скрипт делает или идентифицирует страницу, к которой принадлежит скрипт.
Дайте файлу .js суффикс, чтобы вы знали, что файл содержит JavaScript. Например, мы могли бы использовать hello.js в качестве имени файла для сохранения JavaScript из примера выше.
Ссылка на внешний скрипт
Теперь, когда у нас есть JavaScript, скопированный и сохраненный в отдельный файл, все, что нам нужно сделать, это сослаться на внешний файл скрипта на нашем HTML веб-страница документа.
Сначала удалите все между тегами скрипта:
Это еще не говорит странице о том, какой JavaScript нужно запустить, поэтому нам нужно добавить дополнительный атрибут к самому тегу сценария, который сообщает браузеру, где найти сценарий.
Наш пример теперь будет выглядеть так:
SRC = "hello.js">
Атрибут src сообщает браузеру имя внешнего файла, из которого следует прочитать код JavaScript для этой веб-страницы (который hello.js в нашем примере выше).
Вам не нужно помещать все ваши скрипты Java в то же место, что и документы HTML-страницы. Вы можете поместить их в отдельную папку JavaScript. В этом случае вы просто изменяете значение в ЦСИ атрибут, чтобы включить местоположение файла. Вы можете указать любой относительный или абсолютный веб-адрес для местоположения исходного файла JavaScript.
Используя то, что вы знаете
Теперь вы можете взять любой сценарий, который вы написали, или любой сценарий, полученный из библиотеки сценариев, и переместить его из кода веб-страницы HTML в файл JavaScript с внешней ссылкой.
Затем вы можете получить доступ к этому файлу сценария с любой веб-страницы, просто добавив соответствующие теги HTML-сценария, которые вызывают этот файл сценария.