В этом разделе мы понемногу рассмотрим все основные элементы
javascript. Это позволит тут же писать и тестировать простейшие скрипты.
Выполнение javascript
Javascript подключается напрямую в HTML-файл. Самый простой способ -
это написать javascript-команды внутрь тега <script> где-нибудь в
теле страницы.
Например:
Выделить код <html>
<head>
<title>Простой скрипт</title>
</head>
<body>
<h1>Считаем кроликов</h1>
<script type="text/javascript">
for(var i=1; i<=3; i++) {
alert("Из шляпы достали "+i+" кролика!")
}
</script>
<h1>...Посчитали</h1>
</body>
</html> |
Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.
Так, в этом примере будет показано начало страницы, затем три раза выполнится функция alert, которая выдает окошко с информацией о текущем кролике, а только потом появится остальная часть страницы.
Открыть страницу со скриптом.
Обычно javascript стараются отделить, помещая его в HEAD-секцию
документа, а в теле страницы по возможности оставляется чистая верстка.
Вот так:
Выделить код <html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()"
value="Считать кролей!"/>
</body>
</html> |
Здесь javascript-код только описывает функцию, а ее вызов осуществляется по нажатию на кнопку input.
Посмотреть.
Современное оформление тэга <script>.
На плохое оформление сейчас ругается только валидатор. Поэтому эту заметку можно не читать.
Однако, знать это полезно хотя бы для того, чтобы сразу отличать
современный и профессиональный скрипт от написанного эдак лет 5-6 назад.
- Атрибут
<script type=...> - По стандарту этот атрибут нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому даже атрибута
type нет - все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут - Атрибут
<script language=...> - В старых скриптах нередко можно увидеть атрибут
language. Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript. - Комментарии до и после скрипта
- В старых руководствах по javascript встречается указание "прятать"
javascript-код от старых браузеров, заключая его в HTML-комментарии
<!-- ... -->:
<script type="text/javascript"><!--
alert("I'm here")
--></script> |
Браузер, от которого прятали код (старый Netscape), давно умер.
Современные браузеры комментарии просто игнорируют. Не ставьте их.
Реакция на действия посетителя. События
Основная ценность javascript - в его интеграции со страницей. Почти
любой HTML-элемент умеет инициировать различные события, а на событие,
зная его имя, можно назначить обработчик.
Примеры событий:
- Событие с именем
onmouseover - Курсор мыши появился над элементом
- Событие с именем
onclick - Клик мышкой по элементу
- ...
- В зависимости от типа элемента, есть еще и множество других событий
Функция-обработчик события может предпринять какие-то действия,
произвести изменения на странице, выдать предупреждение, отправить
запрос на сервер и т.п.
Самый простой способ назначить обработчик - записать обработчик в атрибут с именем события.
Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:
Выделить код <html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()"
value="Считать кролей!"/>
</body>
</html> |
Открыть страницу
Динамическое изменение страницы. DOM.
События позволяют скриптам реагировать на действия пользователя. Но надо и что-то делать в ответ.
Самая примитивная реакция - это показать alert. Что-то посложнее обычно предусматривает изменение на странице.
Например, чтобы показать сообщение в зеленой рамочке, можно добавить на страницу <div style="border: green 1px solid">...сообщение</div>.
Основным инструментом работы и динамических изменений на странице
является DOM (Document Object Model) - объектная модель, используемая
для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией.
Каждый таг образует отдельный элемент-узел, каждый фрагемент текста - текстовый элемент, и т.п.
Пример DOM-дерева
Рассмотрим, например, такую страничку:
Выделить код <html>
<head>
<title>
О лосях
</title>
</head>
<body>
Правда о лосях.
<ol>
<li>
Лось - животное хитрое
</li>
<li>
.. И коварное
</li>
</ol>
</body>
</html> |
Корневым элементом иерархии является html. У него есть два потомка. Первый - head, второй - body. И так далее, каждый вложенный таг является потомком тага выше:
На этом рисунке синим цветом обозначены элементы-узлы, черным - текстовые элементы.
А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:
Кстати, дерево на этом рисунке не учитывает текст, состоящий из
одних пробельных символов. Например, такой текстовый узел должен идти
сразу после <ol>. DOM, не содержащий таких "пустых" узлов, называют "нормализованным".
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?
Очень просто:
Каждый DOM-элемент является объектом и предоставляет свойства для
манипуляции своим содержимым, для доступа к родителям и потомкам.
Обход и манипуляции с DOM
Для манипуляций с DOM используется объект document. Он содержит массу полезных методов и свойств, которым будет посвящена отдельная статья. Используя document, можно получать нужный элемент дерева и менять его содержание.
Например, этот код получает первый элемент с тэгом ol, последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:
Выделить код var ol = document.getElementsByTagName('ol')[0]
var hiter = ol.removeChild(ol.firstChild)
var kovaren = ol.removeChild(ol.firstChild)
ol.appendChild(kovaren)
ol.appendChild(hiter) |
Для примера работы такого скрипта --- кликните где-нибудь на тексте на лосиной cтраничке
document.write
В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write.
В современных скриптах этот метод почти не используется, случаи его правильного применения можно пересчитать по пальцам.
Избегайте document.write.. Кроме случаев, когда Вы действительно
знаете, что делаете (а зачем тогда читаете эту статью - Вы и так гуру)
BOM
BOM (Browser Object Model) - специальные объекты браузера, такие как окна, куки и т.п.
В отличие от DOM, нет какого-либо единого стандарта, описывающего
BOM, но основные объекты: window/cookie/location во всех браузерах
унифицированы.
При помощи BOM можно открыть новое окно, поменять URL фрейма,
поставить куки или послать запрос на сервер. В частности, BOM
используется для популярной технологии AJAX.
ECMAScript
Стандарт (формальное описание синтаксиса и работы языка) javascript
называется ECMAScript. На нем, кстати, основан не только javascript, но
и несколько других языков, например ActionScript (Flash).
По ECMAScript есть спецификация, которая подробно описывает синтаксис, управляющие конструкции и базовые объекты языка.
Например, вот скрипт, который работает, используя только ECMAScript.
Кстати, поэтому он будет работать и в других языках, основанных на
ECMAScript, включая ActionScript:
Выделить код var max = 5
try {
for(var i=0; i<Number.POSITIVE_INFINITY; i++) {
if (i>max) throw new Error("failed to reach the stars")
}
} catch(e) { } |
Некоторые особенности синтаксиса ECMAScript
ECMAScript - и правда очень особенный язык. Особенно для тех, кто
пришел из PHP, C, Java. В нем особым образом устроены объекты и функции.
Здесь мы остановимся лишь на нескольких, самых простых отличиях.
Точка с запятой
При переходе на новую строку точку с запятой можно не ставить. А можно ставить.
Эти две строки полностью эквивалентны:
В javascript перевод строки подразумевает точку с запятой
В частности, многие новички сталкиваются с ошибками при многострочных присваиваниях и вызовах.
Вот так не будет работать:
var a = "длинная " +
" строка " |
Или, например, следующие два примера кода эквивалентны:
В обоих случаях будет возвращено значение undefined (это значение возвращает любая функция, где нет оператора return, либо оператор return вызван без аргумента), а не result.
Чтобы многострочные опрераторы работали как надо - перенос строки нужно указывать обратным слешем "\", вот так:
|
Выделить код
var a = "длинная " + \
" строка "
return \
result; |
Переменные
Директива var при объявлении переменной делает ее локальной. Все остальные переменные являются глобальными.
В этом примере переменная a в функции go объявлена как локальная. Поэтому глобальное значение a=1 не изменяется в процессе выполнения go.
Выделить код a = 1
function go() {
var a = 6
}
go()
alert(a) // => 1 |
А здесь - ключевое слово var опущено, поэтому значение меняется:
Выделить код a = 1
function go() {
a = 6
}
go()
alert(a) // => 6 |
Кстати, глобальных переменных в javascript на самом деле нет.
То, что называют "глобальными" - на самом деле свойства специального
объекта window. Например, в последнем примере alert(window.a) тоже выдало бы 6.
Все "глобальные" переменные привязаны к своему окну. Разные окна и
фреймы имеют разные "глобальные" переменные, которыми могут
обмениваться друг с другом.
Вообще, глобальных переменных в JS рекомендуется избегать, особенно
при написании библиотек и компонент, которые предполагается
использовать в разных приложениях.
Как правило - всё, что относится к компоненту, объявляется в виде
свойств единого глобального объекта: ExtJS, dojo и т.п. Вы можете
увидеть это в любом известном JS-фреймворке.
На этом введение заканчивается.
Следующий шаг приведет Вас в сундучок инструментов. Для первого
посещения лучше взять что-нибудь попроще. Например, поставить браузер Firefox и плагин Firebug.
