Как назвать файл js для html

Обновлено: 07.07.2024

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

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

Как подключить JavaScript к HTML-документу

Можно добавить JavaScript в HTML-документ при помощи специального тега <script>. Он может быть помещен в раздел <head> HTML-документа, <body> или после него. В зависимости от того, когда необходимо загрузить JavaScript .

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

Но если ваш сценарий должен запускаться в определенном месте разметки страницы, тогда его размещают в <body>.

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

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

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

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

При загрузке приведенного выше HTML-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:

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

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

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

Имена файлов являются частью вашего URL и, следовательно, являются важной частью вашего HTML.

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

Не используйте специальные символы

Для достижения наилучших результатов вы должны использовать только буквы a-z, A-Z, цифры 0-9, дефисы (-), подчеркивания (_) и точки (.). Любой другой символ может вызвать у вас проблемы, из-за чего файл не загружается или страница загружается неправильно.

Не используйте пробелы

Начать имя файла с буквы

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

Использовать все строчные

Это также не является абсолютным требованием, но это хороший план для поддержания вашего сайта. Хотя многие операционные системы персональных компьютеров не чувствительны к регистру, большинство операционных систем веб-сервера чувствительны к регистру. Это означает, что ваш компьютер с Windows может увидеть «Filename.htm» так же, как «filename.htm», но ваш веб-сервер увидит это как два разных файла. Это очень распространенная причина, по которой изображения не отображаются на новичках.

Ваши имена файлов должны быть короткими

Не забудьте расширение файла

Большинство редакторов HTML добавляют расширение для вас, но если вы пишете свой HTML в текстовом редакторе, таком как Блокнот, вам нужно будет включить его самостоятельно. У вас есть два варианта для файлов HTML:

На самом деле нет никакой разницы между двумя расширениями, это в основном вопрос личных предпочтений, которые вы выбираете.

Соглашения об именах файлов HTML

Когда вы называете свои HTML-файлы, вы должны помнить следующее:

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

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

Определить встроенный сценарий, который располагается непосредственно между парой тегов <script> и </script>
Подключить внешний файл с JavaScript-кодом

Примечание: элемент <script> может быть расположен в любом месте внутри элемента <head> и/или внутри элемента <body> и использоваться любое количество раз.

Встроенный сценарий

JavaScript код можно вставить непосредственно внутри элемента <script>. Сценарий, расположенный непосредственно внутри элемента, называется встроенным .

Внешний сценарий

В HTML документ можно также добавить JavaScript код, расположенный во внешнем файле. Сценарий, расположенный внутри внешнего файла, называется внешним . Подключение внешнего файла выполняется с помощью атрибута src тега <script> следующим образом:

Создадим папку и назовём её к примеру example , внутри этой папки создаём текстовый файл с расширением .js , например myscript.js (имя файла может быть любым), открываем его и добавляем строку JavaScript-кода:

Примечание: если вы не знаете как менять расширение у файлов, то можете прочитать об этом в разделе: смена расширения файла.

Обратите внимание, что внутри внешнего файла JavaScript-код не нужно располагать между тегами <script> и </script> . Сохраняем изменения в файле и закрываем его.

Теперь создадим ещё один файл и назовём его myscript2.js , открываем его и добавляем следующую строку JavaScript кода:

Сохраняем изменения в файле и закрываем его.

И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. В той же папке, где хранятся наши два сценария (example), создаём HTML-документ и называем его к примеру test.html . Теперь c помощью элемента <script> подключаем два внешних файла c JavaScript-кодом:

Вот и всё! Сохраняем изменения в HTML-документе, открываем его в браузере и смотрим результат. У вас должно получиться нечто подобное:

Будьте внимательны, так как мы указали с помощью тега <meta> кодировку utf-8 в HTML-документе, кодировка самих файлов ( test.html, myscript.js и myscript2.js ) также должна быть utf-8 .

Примечание: если подключается внешний сценарий, то внутри того же самого элемента <script> нельзя одновременно располагать встроенный сценарий.

Сравнение внешних и встроенных сценариев

Использование внешних сценариев даёт ряд преимуществ перед встроенными:

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

Примечание: располагать сценарий (как внешний так и встроенный) лучше всего в конце HTML-документа, перед закрывающим тегом </body> . Такое расположение сценария позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.

Всегда используйте одинаковые правила кодирования для всех ваших проектов JavaScript.

Соглашения о кодировании JavaScript

Соглашения о кодировании — это руководство по стилю программирования. Они обычно охватывают:

Правила именования и объявления для переменных и функций.
Правила использования пробелов, отступов и комментариев.
Практика и принципы программирования

Правила кодирования безопасное качество:

Улучшает читаемость кода
Упростить обслуживание кода

Соглашения о кодировании могут быть документированы правилами для команд, или просто вашей индивидуальной практикой кодирования.

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

Имена переменных

В html5 css мы используем camelCase для имен идентификаторов (переменных и функций).

Все имена начинаются с буквы.

В нижней части этой страницы вы найдете более широкое обсуждение правил именования.

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Пространства вокруг операторов

Всегда ставьте пробелы вокруг операторов (= +-*/), и после запятой:

Примеры:

Отступ кода

Всегда используйте 4 пробела для отступа блоков кода:

Функции:

function toCelsius(fahrenheit) <
return (5 / 9) * (fahrenheit - 32);
>

Не используйте вкладки (таблицы) для отступа. Различные редакторы интерпретируют вкладки по-разному.

Правила операторов

Общие правила для простых инструкций:

Всегда заканчивайте простой оператор точкой с запятой.

Примеры:

Общие правила для сложных (составных) операторов:

Поместите открывающую скобку в конец первой линии.
Используйте один пробел перед открывающей скобкой.
Поместите закрывающую скобку на новую линию без пробелов.
Не заканчивайте сложный оператор точкой с запятой.

Functions:

function toCelsius(fahrenheit) <
return (5 / 9) * (fahrenheit - 32);
>

Петли:

Условий:

if (time <20) <
greeting = "Good day";
> else <
greeting = "Good evening";
>

Правила объекта

Общие правила для определений объектов:

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

Пример

var person = <
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
>;

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

Длина линии <80

Для удобочитаемости Избегайте строк длиной более 80 символов.

Если инструкция JavaScript не умещается на одной строке, лучше всего ее разбить, после оператора или запятой.

Пример

Соглашения об именовании

Всегда используйте одно и то же соглашение об именах для всего кода. Например:

Имена переменных и функций, написанные как camelCase
Глобальные переменные, написанные в верхнем регистре (мы не, но это довольно часто)
Константы (например, PI), написанные в верхнем регистре

Если вы используете Hyp-кур, camelCase, или ундер_скорес в именах переменных?

Это вопрос, который часто обсуждают программисты. Ответ зависит от того, кого вы спрашиваете:

Дефисы в HTML и CSS:

Атрибуты HTML5 могут начинаться с данных-(данные-количество, данные-цена).

CSS использует дефисы в именах свойств (размер шрифта).

Дефисы можно ошибочно считать попытками вычитания. Дефисы не допускаются в именах JavaScript.

Подчеркивает:

Многие программисты предпочитают использовать подчеркивания (дате_оф_бирс), особенно в базах данных SQL.

Подчеркивания часто используются в документации PHP.

Паскалкасе:

Паскалкасе часто предпочитают программисты C.

camelCase

camelCase используется самим JavaScript, jQuery и другими библиотеками JavaScript.

Не запускайте имена с помощью знака $. Это поставит вас в конфликт со многими именами библиотек JavaScript.

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут Type не нужен):

Доступ к элементам HTML

Следствие использования «неопрятных» стилей HTML может привести к ошибкам JavaScript.

Эти два JavaScript-заявления будут давать разные результаты:

var obj = getElementById("Demo")

var obj = getElementById("demo")

If possible, use the same naming convention (as JavaScript) in HTML.

Расширения файлов

HTML-файлы должны иметь расширение .HTML (не .htm).

CSS-файлы должны иметь расширение .CSS .

JavaScript-файлы должны иметь расширение .js .

Использовать имена файлов нижнего регистра

Большинство веб-серверов (Apache, UNIX) чувствительны к регистру имен файлов:

Лондон. jpg не может быть доступен как London. jpg.

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру:

Лондон. jpg можно получить как Лондон. jpg или Лондон. jpg.

Если вы используете смесь верхнего и нижнего регистра, вы должны быть очень последовательны.

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

Чтобы избежать этих проблем, всегда используйте имена файлов нижнего регистра (если это возможно).

Производительности

Соглашения о кодировании не используются компьютерами. Большинство правил мало влияют на выполнение программ.

Отступы и лишние пробелы не имеют большого значение в небольших скриптах.

Для кода в разработке следует предпочесть удобочитаемость. Более крупные сценарии производства должны быть minified.

Читайте также: