Как вставить 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 в документ, называемый
<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 count_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
*/!*
</head>
<body>
*!*<input type="button" value="Считать кролей!"/>*/!*
</body>
</html>
Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:
<script src="/my/script.js"></script>
При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.
Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.
Чтобы подключить несколько скриптов — используйте нескол
Как подключить JavaScript в HTML
Скрипты являются еще одним важным фактором для корректной работы страницы. Если на HTML возлагается роль формирования ее структуры, а на стили – внешнего вида, то скрипты отвечают за поведение документа. Они позволяют создавать на страницах всевозможные подвижные элементы. Самым ярким примером будет анимация. Но есть и много других эффектов. Для создания скриптов применяется такой язык, как JavaScript.
Процесс подключения скриптов на странице точно такой же, как и стилей. То есть, существует два варианта. Первый заключается в том, чтобы написать код скрипта внутри самой страницы. Второй подразумевает подключение их с помощью внешних файлов.
Инлайновые скрипты
Для того, чтобы написать скрипт внутри страницы, следует использовать тег <script>. Приведем пример:
<script>
JavaScript-код
</script>По большому счету не имеет значения, где именно в HTML документе будет задействован тег <script>. Однако я рекомендую размещать его в конце кода страницы, непосредственно перед тегом </body>, который закрывает документ.
Следует отметить, что с течением времени определенные возможности языка JavaScript переходят в CSS. В качестве примера можно привести такую возможность, как указание плавного изменения значений свойств.
Внешние скрипты
Как правило, для подключения внешних скриптов используются файлы с расширением .js. Осуществляется данное действие с применением тега <script>, сопровождаемого атрибутом src, где задается путь к самому файлу. Например:
<script src="scripts.js"></script>Обратите внимание, что тег <script> является парным. Поэтому в данном случае, когда речь идет о внешних скриптах, внутри тега ничего писать не требуется.
Лучше всего осуществлять подключение скриптов из файла перед тегом </body>, который закрывает документ.
Куда вставлять 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, что символы → следует проигнорировать.
Как вставить HTML, CSS и JS в PHP-код?
Когда вы разрабатываете свой модуль, то иногда прибегаете к помощи верстки (HTML и CSS) и дополнительным скриптам.
Все это можно подключать отдельно – что-то в теле страницы, что-то в отдельных файлах. Но некоторые дополнения лучше вставлять непосредственно в сам PHP-файл.
Сегодня я покажу два варианта, как можно вставить HTML, CSS или JavaScript в код PHP.
Первый вариант вставки элементов в PHP-код
Я думаю, что если вы хоть немного знакомы с PHP, то знаете, что такое «echo» (тег, с помощью которого вы можете вывести сообщение на экран).
Вот с помощью него и можно вывести один из перечисленных ранее кодов. Пример:
<?php
$content = "<div>Hello, world!</div> <style>.main {color: red;}</style> <script src='/jquery.nicescroll.js'></script>";
echo $content;
?>На что здесь стоит обратить внимание? Кавычки. Если вы используете внешние кавычки в виде » «, то внутренние кавычки элементов должны быть ‘ ‘ и наоборот, иначе вы получите ошибку. Если вы принципиально хотите использовать одинаковые и внешние, и внутренние кавычки, то во внутренних ставьте знак экранизации:
<?php
$content = "<div class=\"main\">Hello, world!</div> <style>.main {color: red}</style> <script src=\"/jquery.nicescroll.js\"></script>";
echo $content;
?>В этом случае все будет работать корректно.
Второй вариант вставки элементов в PHP-код
Этот вариант мне нравится куда больше, чем первый. Здесь мы будем также использовать «echo», как и в предыдущем варианте, но добавим еще элемент «HTML»:
<?php
echo <<<HTML
<style>
.main {
color: red;
}
</style>
<script src="/jquery.nicescroll.js"></script>
HTML;
?>Сюда вы можете вставлять любой элемент, будь то HTML-код или же JavaScript. Кавычки здесь не играют роли (можете вставить любые), а по желанию можно внедрить переменные для вывода:
<?php
$content = "<div>Hello, world!</div>";
echo <<<HTML
{$content}
<style>
.main {
color: red;
}
</style>
<script src="/jquery.nicescroll.js"></script>
HTML;
?>Весьма удобный способ для реализации ваших идей.