Как добавить javascript в html – Как вставить html в методами js, храня этот html в отдельном файле templates? — Хабр Q&A

Как вставить JavaScript в HTML страницу.

JavaScript — это язык сценариев, который работает работает только в браузере пользователя, то есть на стороне клиента. Для вызова этого языка в HTML-код пишут теги <script> и </script>.

Вот пример простой программки, выводящей в окно браузера фразу «Привет, Мир!»:

<html>
<head>
	<title>Пример JavaScript</title>
</head>
<body>
<script>
	document.write("Привет, Мир!")
</script>
</body>
</html>

В этом скрипте команда document.write(«Привет, Мир!») вывела на экран фразу «Привет, Мир!». В команде document.write(«») внутри кавычек можно писать любой текст и теги. Теги будут интерпретироваться браузером.

Подробнее про эту команду мы поговорим позже, а сейчас вернёмся к теме этой статьи — вставка сценария JavaScript в код HTML.

На самом деле расширеная и более точная запись тега <script> выглядит так: <script type=»text/javascript»>. В атрибуте type мы указывает тип языка, на котором написан скрипт. В нашем случае это JavaScript. В реальности у JavaScript сейчас нет заметных конкурентов, поэтому во всех современных браузерах по умолчанию будет использоваться JavaScript.

Но для достоверности давайте приведём пример расширенного использования тега:

<html>
<head>
	<title>Пример JavaScript</title>
</head>
<body>
<script type="text/javascript">
	document.write("Привет, Мир!<br><br>Я рад тебя видеть!")
</script>

<noscript>
	Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках.
</noscript>
</body>
</html>

В этом примере также обратите внимание на пару тегов <noscript> и </noscript>. Этот тег будет выводить текст на экран только в том случае, если в браузере пользователя отключён JavaScript или он не поддерживается.

Сценарий можно вставлять не только в раздел <boby>, но и в раздел <head>.

<html>
<head>
	<title>Пример JavaScript</title>
<script type="text/javascript">
	var i = "Привет, Мир!"
</script>
</head>
<body>
<script type="text/javascript">
	document.write(i)
</script>

<noscript>
	Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках.
</noscript>
</body>
</html>

К этому примеру требуется некоторое пояснение. В разделе <head> мы командой var мы создали переменную i и присвоили ей текстовое значение Привет, Мир!. Потом, в разделе <body> мы командой document.write(i) вывели значение этой переменной на экран. Подробнее про переменные написано в статье переменные JavaScript, тут же вы узнали что код JavaScript можно вставить в оба раздела HTML-документа: <head> и <boby>.

Второй способ — включение файла

В статье что такое CSS был описан способ присоединения файла с кодом стилей CSS в документ, называемый

связывание. Также можно связывать документ с файлом, в котором записан код JavaScript. Для этого в раздел <head> вставляем тег, как в примере:

<html>
<head>
	<title>Пример JavaScript</title>
	<script src="/my/script.js"></script>
	<script src="/my/script_2.js" type="text/javascript"></script>
	<script src="http://ivan-monetkin.info/javascript/script.js"></script>
</head>
<body>

</body>
</html>

Как видете, к документу можно прикрепить два и более файлов с JavaScript сценариями. Можно использовать файлы сценариев, расположенные на стороннем домене, для этого в атрибуте src тега <script> нужно указать URL файла со скриптом. Также можно игнорировать атрибут type, если есть желание.

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

В самом файле.js с кодом JavaScript теги <script> использовать не нужно. Это приведёт к ошибке.

Устаревшие и нестандартные браузеры

Чтобы поддерживать весьма устаревшие браузеры, которые не понимают код JavaScript, его нужно взять в комментарии используя теги комментариев HTML <!— и —>. Если не сделать этого, то браузер не понимающий JavaScript-код выведет его на экран как обычный текст. Но таких браузеров уже не осталось. Хотя такой код вы можете встретить, и, чтобы понимать его, — давайте разберёмся в этом.

<html>
<head>
	<title>Пример JavaScript</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.write("Привет, Мир!")
// -->
</script>

</body>
</html>

В данном примере открывающий HTML тег комментария <!— вставлен сразу после открывающего тега <script type=»text/javascript»>, а тег, закрывающий комментарий, — —>, непосредственно перед тегом </script> завершающим код нашего сценария.

Двойной прямой слэш // — это уже комментарий JavaScript, он показывает что вся строка, идущая после него — это комментарий с точки зрения JavaScript. Подробнее про комментарии JavaScript читайте тут: комментарии в JavaScript. Этот JavaScript-комментарий вставлен для браузеров с поддержкой JavaScript, чтобы они проигнорировали символы —>, не восприняли их как часть кода сценария.

Такое решение имеет не самый красивый вид, практической пользы от него мало и она уменьшается с каждым годом, но его ещё можно встретить в некоторых местах. Например счётчики посещаемости сайтов от liveinternet.ru имеют такой код.

Подключение и выполнение javascript

В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.

Javascript подключается напрямую в HTML-файл. Самый простой способ — это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

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

Так, в следующем примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.

<html>
<body>
    <h2>Считаем кроликов</h2>

    *!*
    <script type="text/javascript">
        for(var i=1; i<=3; i++) {
            alert("Из шляпы достали "+i+" кролика!")
        }
    </script>
    */!*
    <h2>...Посчитали</h2>
</body>
</html>

В этом примере использовались следующие элементы.

<script type=»text/javascript»> … </script>
Тег <script>
сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать — разницы нет, но с точки зрения стандарта его следует указать.
Конструкция for
Обычный цикл, по синтаксису аналогичный другим языкам программирования.
Объявление var i
Объявление переменной внутри цикла: i — локальная переменная.
Функция alert
Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html>

    <head>
        *!*
        <script type="text/javascript">
            function 

Как подключить JavaScript в HTML

Как подключить JavaScript в HTML

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

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

Инлайновые скрипты

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

<script>
  JavaScript-код
</script>

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

Следует отметить, что с течением времени определенные возможности языка JavaScript переходят в CSS. В качестве примера можно привести такую возможность, как указание плавного изменения значений свойств.

Внешние скрипты

Как правило, для подключения внешних скриптов используются файлы с расширением

.js. Осуществляется данное действие с применением тега <script>, сопровождаемого атрибутом src, где задается путь к самому файлу. Например:

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

Обратите внимание, что тег <script> является парным. Поэтому в данном случае, когда речь идет о внешних скриптах, внутри тега ничего писать не требуется.

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

loader

Куда вставлять Javasсript

Чтобы код Javascript сработал в браузере пользователя, его необходимо вставить между тегами

<script> и </script>.


<html>
<head>
	<title>Пример JavaScript</title>
</head>
<body>
<script>
	document.getElementById("demo").innerHTML = "Первый сценарий на JavaScript";
</script>

<noscript>
	Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках.
</noscript>

<div></div>
</body>
</html>

В данном примере, как только HTML страница будет загружена, браузер запустит команду document.getElementById(«demo»).innerHTML = «Первый сценарий на JavaScript», которая ищет элемент с идентификатором «demo» и, найдя его, помещает в него строку «Первый сценарий на JavaScript».

В действительности полная запись тега <script> имеет следующий вид: <script type=»text/javascript»>. В атрибуте type указывается используемый язык скриптов. Однако в настоящее время существует не так уж много таких языков, и в HTML язык Javascript установлен как язык скриптов по умолчанию. Поэтому атрибут type использовать не нужно.

Также, обратите внимание на теги <noscript> и </noscript>. Этот тег срабатывает, когда по той или иной причине, например, выполнение сценариев отключено в настройках браузера, невозможно выполнить сценарий Javasсript.

Функции и события JavaScript

Функция JavaScript — это блок кода, который выполняется по «вызову».

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

Подробнее о функциях и событиях вы узнаете позже в соответствующих главах.

JavaScript в теге <head> и <body>

В HTML документ можно вставлять любое число скриптов.

На HTML странице скрипты можно размещать внутри секции <body> или <head>, либо в обоих сразу.

В следующем примере функция JavaScript размещена в секции <head>. Эта функция вызывается при нажатии пользователем на кнопку:


<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>
</head>

<body>

<h2>Веб-страница</h2>
<p>Параграф</p>
<button type="button">Изменить</button>

</body>
</html> 

В следующем примере функция JavaScript размещена в секции <body>:


<!DOCTYPE html>
<html>

<body>

<h2>Веб-страница</h2>
<p>Параграф</p>
<button type="button">Изменить</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>
</body>
</html> 

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

Внешний JavaScript

Скрипты также можно размещать во внешних файлах:

Внешний файл: myScript.js


function myFunction() {
   document.getElementById("demo").innerHTML = "Параграф изменен.";
} 

Внешние скрипты оправданы тогда, когда нужно один и тот же сценарий использовать в нескольких HTML документах.

Обычно у файлов JavaScript расширение .js.

Чтобы использовать внешний скрипт, нужно поместить имя файла Javascript в атрибут src тега <script>:


<script src="//msiter.ru/myScript.js"></script>

Подключать внешние скрипты можно внутри тега <head> или <body>.

Скрипт будет вести себя так же, как если бы он был вставлен непосредственно внутри тега <script>.

Внимание! Внешние скрипты не могут содержать теги <script>.

Преимущества внешних JavaScript

У размещения скриптов во внешних файлах есть ряд преимуществ:

  • Разделяется HTML и Javascript код
  • Становится проще читать и обслуживать HTML и JavaScript
  • Благодаря кешированию файлов JavaScript увеличивается скорость загрузки веб-страницы

Чтобы добавить несколько файлов скриптов на HTML страницу, достаточно вставить нужное число тегов <script>:


<script src="//msiter.ru/myScript1.js"></script>
<script src="//msiter.ru/myScript2.js"></script>

Внешние ссылки

В качестве ссылок на внешние скрипты может использоваться либо абсолютный URL, либо относительный путь к текущей веб-странице.

В следующем примере для подключения внешнего скрипта используется полный URL:


<script src="//msiter.ru/js/myScript1.js"></script>

В следующем примере скрипт расположен в подкаталоге текущего веб-сайта:


<script src="//msiter.ru/js/myScript1.js"></script>

В следующем примере скрипт расположен в том же подкаталоге что и текущая страница:


<script src="//msiter.ru/myScript1.js"></script>

Устаревшие и нестандартные браузеры

Для обеспечения совместимости со старыми браузерами, которые не умеют работать со скриптами Javascript, код скрипта размещают внутри тегов комментариев HTML <!— и —>. Если пренебречь этой предосторожностью, то браузер, не знающий Javascript, просто выведет на экран код скрипта в виде обычного текста. К счастью таких нестандартных браузеров в настоящее время практически не осталось. Однако подобный код все еще встречается, и стоит знать для чего он используется.


<html>
<head>
	<title>Пример JavaScript</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.write("Привет, Мир!")
// -->
</script>

</body>
</html>

В приведенном выше примере сразу же после тега <script type=»text/javascript»> вставлен открывающий тег HTML комментария <!—, а перед тегом </script> вставлен закрывающий тег комментария —>. При этом перед закрывающим тегом HTML комментария поставлен двойной прямой слэш //, который является уже комментарием JavaScript, показывающий, что строка после него является комментарием с точки зрения JavaScript. Назначения этого комментария JavaScript — указать браузерам, умеющим работат с JavaScript, что символы → следует проигнорировать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *