Как спрятать скрипт в файл

Что такое JavaScript

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

При желании любой посетитель вашего сайта может посмотреть исходный код страницы. И если сценарии встроены непосредственно в страницу, то их исходные коды также будут видны.

Если вы этого не хотите, то сценарий можно поместить в отдельный файл. Правда, пользователь и этот файл может посмотреть. Но всё-таки при таком подходе исходные коды сценариев не будут явно видны в HTML-коде страницы.

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

И сегодня я расскажу, как поместить скрипт в файл, и использовать этот файл в HTML-странице...

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

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Скрипты JavaScript во внешних файлах

Тег <script> поддерживает атрибут src. Значение этого атрибута задает URL-адрес файла, содержащего код на JavaScript. Использовать эту возможность можно примерно так:

<script src="URL-адрес"></script>

Что такое URL-адрес, надеюсь, вы знаете. Если нет, то см. по ссылке выше.

Непосредственно имя файла с кодом на JavaScript может быть любым допустимым именем. Но нежелательно использовать в имени пробелы и русские буквы. Исходный файл на JavaScript обычно имеет расширение .js и содержит JavaScript-код в “чистом виде”, то есть без тегов <script> или любого другого HTML-кода.

Пример подключения файла с кодом к HTML-странице:

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

Тег <script> с атрибутом src ведет себя точно так же, как если бы JavaScript-код, который имеется в файле, находился бы непосредственно между тегами <script> и </script>. Любой код, указанный между этими тегами, не отображается браузерами.

Обратите внимание, что закрывающий тег </script> обязателен даже в том случае, когда указан атрибут src и между тегами отсутствует JavaScript-код.

Использование тега с атрибутом src может быть полезным, потому что:

HTML-файлы становятся меньше, так как из них можно убрать большие участки кода на JavaScript. Это помогает отделить содержимое от поведения, что также положительно сказывается на индексации страниц поисковыми системами.
Функции JavaScript или другой JavaScript-код, используемый несколькими HTML-файлами, можно держать в одном файле. Это уменьшает объем занимаемой дисковой памяти и намного облегчает поддержку программного кода.
Когда функции JavaScript требуются нескольким страницам, размещение кода в виде отдельного файла позволяет браузеру кэшировать его и тем самым ускорять загрузку. Когда JavaScript-код совместно используется несколькими страницами, экономия времени, достигаемая за счет кэширования, существенно перевешивает небольшую задержку, требуемую браузеру для открытия отдельного сетевого соединения и загрузки файла с кодом на JavaScript при первом запросе на его исполнение.
Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому программа JavaScript или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. То есть создав, например, библиотеку функций на одном своём сайте, вы сможете использовать её на любых других своих сайтах, а также предоставить доступ к ней другим программистам.

Как поместить сценарий в файл

Ну а теперь простой пример для закрепления полученных знаний. Создадим файл с именем myscript.js и напишем в этом файле такой код:

var myvar = 100;

function Test(x)
{
  return x * x;  
}

Далее создадим HTML-файл и там у нас будет:

<html>
<head>  
<title>Примеры на JavaScript</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=Author content="Поляков Андрей Валерьевич, info-master.su">
<script src="myscript.js"></script>
</head>

<body>

<script>
  //Используем переменную из файла myscript.js
  document.write(myvar + '<br>'); 
  //Используем функцию из файла myscript.js
  document.write(Test(15) + '<br>');
  
</script>

</body>

</html>

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

Ну вот и всё. Если хотите знать больше и изучить JavaScript в полной мере, то см. здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Вступить в группу "Основы программирования"

Подписаться на канал в РУТУБ

Подписаться на Дзен-канал

Подписаться на рассылки по программированию

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript

Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...

Главная
Контакты