В этой статье мы создадим простой скрипт и посмотрим, как он работает.
Тег SCRIPT
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT. Например:
<!DOCTYPE HTML>
<html>
<head>
<!-- Тег meta для указания кодировки -->
<meta charset="utf-8">
</head>
<body>
<p>Начало документа...</p>
<script>
alert('Привет, Мир!');
</script>
<p>...Конец документа</p>
</body>
</html>
Показать в отдельном окне
METAПри попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой — выводятся «кракозяблы», «квадратики» и «вопросики» вместо русского текста.
Чтобы всё было хорошо, нужно:
- Убедиться, что в
HEADесть строка<meta charset="utf-8">. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку. - Убедиться, что редактор сохранил файл в кодировке UTF-8, а не, скажем, в
windows-1251. Соответствующий параметр может называться «charset» или «encoding».
Указание кодировки — часть обычного HTML, к JavaScript не имеет отношения.
Этот пример использует следующие элементы:
<script> ... </script>- Тег
scriptсодержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибутаtype, но сейчас он уже не нужен. Достаточно просто<script>.Браузер, когда видит
<script>:- Начинает отображать страницу, показывает часть документа до
script - Встретив тег
script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое. - Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Попробуйте этот пример в действии, обратите внимание что пока браузер не выполнит скрипт - он не может отобразить часть страницы после него.
- Начинает отображать страницу, показывает часть документа до
alert(...)- Отображает окно с сообщением и ждет, пока посетитель не нажмет «Ок»
Очень важно не только читать, но и тестировать, пробовать писать что-то самому.
Решите задачку, чтобы удостовериться, что вы все правильно поняли.
Сделайте страницу, которая выводит «Я - JavaScript!», т.е. работает вот так: tutorial/browser/script/alert/index.html.
Создайте ее на диске, откройте в браузере, убедитесь, что все работает.
SCRIPT
В старых скриптах оформление тега SCRIPT было немного сложнее. В них можно встретить следующие элементы:
- Атрибут
<script type=...> - В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так:
type="text/javascript".Если вы укажете некорректные данные в атрибуте
type, например<script type="text/html">, то содержимое тега не будет отображено. Но его можно получить средствами JavaScript. Этот хитрый способ используют для добавления служебной информации на страницу.
- Атрибут
<script language=...> - Этот атрибут ставить не обязательно, т.к. язык по умолчанию — JavaScript.
- Комментарии до и после скриптов
- В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри
SCRIPT, чтобы спрятать Javascript от браузеров, которые не поддерживают его.Выглядит это примерно так:
<script type="text/javascript"><!-- ... //--></script>Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
Внешние скрипты
Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:
<script src="/path/to/script.js"></script>
Здесь /path/to/script.js - это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Можно указать и полный URL. Вы также можете использовать путь относительно текущей страницы, т.е. src="script.js" если скрипт находится в том же каталоге, что и страница.
Например:
<html>
<head>
<meta charset="utf-8">
<script src="/files/tutorial/browser/script/rabbits.js"></script>
</head>
<body>
<script>
count_rabbits();
</script>
</body>
</html>
Показать в отдельном окне
Содержимое файла /files/tutorial/browser/script/rabbits.js:
function count_rabbits() {
for(var i=1; i<=3; i++) {
alert("Кролик номер "+i)
}
}
Показать в отдельном окне
Этот файл скачается и тут же выполнится.
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Одинаковый скрипт, например, меню или библиотека функций, может использоваться на разных страницах. При правильных настройках сервера, браузер скачает скрипт только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Чтобы подключить несколько скриптов, используйте несколько тегов:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> ...
Если указан атрибут src, то содержимое тега игнорируется.
Поэтому нельзя подключить внешний скрипт и исполнить внутренний в одном теге SCRIPT.
Вот так не cработает:
<script src="file.js"> alert(1); // внутренняя часть скрипта с src игнорируется </script>
Нужно два тега, один — с src, другой с кодом:
<script src="file.js"></script> <script> alert(1); // внутренняя часть скрипта с src игнорируется </script>
</script>Обработка страницы происходит по умолчанию в режиме HTML. Поэтому использовать самозакрывающийся тег в стиле XML <script src="..."/> нельзя.
Единственое исключение, когда можно — это если на сервере ставится специальный заголовок: Content-Type: application/xhtml+xml, который заставляет браузер обрабатывать документ в режиме XML и поддерживается всеми современными браузерами, включая IE9+.
Комментарии
- Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
- Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
- Комментарии без смысла, с рекламой или не о статье вообще - удаляются.