В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.
Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.
Когда браузер читает HTML-страничку, и видит <script>
- он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.
Так, в следующем примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.
03 |
< h1 >Считаем кроликов</ h1 > |
05 |
< script type = "text/javascript" > |
06 |
for(var i=1; i<=3; i++) { |
07 |
alert("Из шляпы достали "+i+" кролика!") |
В этом примере использовались следующие элементы.
-
<script type="text/javascript"> ... </script>
-
Тег
<script>
сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type
говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.
-
Конструкция for
-
Обычный цикл, по синтаксису аналогичный другим языкам программирования.
-
Объявление var i
-
Объявление переменной внутри цикла:
i
- локальная переменная.
-
Функция alert
-
Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК
Обычно javascript стараются отделить от собственно документа.
Для этого его помещают внутрь тега HEAD
, а в теле страницы по возможности оставляется чистая верстка.
В следующем примере javascript-код только описывает функцию count_rabbits
, а ее вызов осуществляется по нажатию на кнопку input
.
04 |
< script type = "text/javascript" > |
05 |
function count_rabbits() { |
06 |
for(var i=1; i<=3; i++) { |
07 |
// оператор + соединяет строки |
08 |
alert("Из шляпы достали "+i+" кролика!") |
15 |
< input type = "button" onclick = "count_rabbits()" value = "Считать кролей!" /> |
Для указания запускаемой по клику функции в input
был использован атрибут onclick
. Это лишь вершина мощного айсберга javascript-событий.
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:
< script src = "/my/script.js" ></ script > |
При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>
.
Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.
Чтобы подключить несколько скриптов - используйте несколько таких тегов:
< script src = "/js/script1.js" ></ script > |
< script src = "/js/script2.js" ></ script > |
При указании атрибута src
содержимое тега игнорируется.
То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>
: первый с src
, второй - с командами, которые будут выполнены после выполнения внешнего файла.
Современное оформление тэга <script>
.
На плохое оформление сейчас ругается только валидатор. Поэтому эту заметку можно не читать.
Однако, знать это полезно хотя бы для того, чтобы сразу отличать современный и профессиональный скрипт от написанного эдак лет 5-6 назад.
-
Атрибут
<script type=...>
-
По стандарту этот атрибут нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому даже атрибута
type
нет - все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут.
Иногда используют <script type="text/html">
как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает <script>
с неизвестным типом. В этом плане он ничем не отличается от обычного <div> с вечным style="display:none"
.
-
Атрибут
<script language=...>
-
В старых скриптах нередко можно увидеть атрибут
language
. Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript.
-
Комментарии до и после скрипта
-
В старых руководствах по javascript встречается указание "прятать" javascript-код от старых браузеров, заключая его в HTML-комментарии <!-- ... -->.
Браузер, от которого прятали код (старый Netscape), давно умер. Современные браузеры комментарии просто игнорируют. Не ставьте их.