Откройте (или создайте) html-страницу и поместите в нее следующий код:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript">
document.write("Моя первая страница.");
</script>
</head>
<body>
</body>
</html>
Откройте эту страницу в браузере, она выглядит так:
Давайте разберемся, как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):
При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:
На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document(текущая страница) может иметь дочерний объект form (форма) и т.д.
Все объекты имеют методы (отделяются от объекта точкой), например:
- document.write позволяет писать текст в текущую страницу,
- window.open открывает новое окно браузера.
Также объекты имеют свойства, например:
- document.bgcolor содержит значение фонового цвета текущей страницы,
- document.title содержит заголовок страницы.
Все инструкции программного кода
заканчиваются точкой с запятой. Об этом надо помнить.
Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. Т.е. в ответ на пользовательское событие.
Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:
<div onClick="addText();"></div>
Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).
Перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.
Событие
|
Когда происходит
|
Обработчик события
|
Blur
|
потеря объектом фокуса
|
onBlur
|
Change
|
пользователь изменяет значение элемента
|
onChange
|
Click
|
пользователь щелкает мыщью по объекту
|
onClick
|
DblClick
|
пользователь делает двойной щелчок мышью по объекту
|
onDblClick
|
DragDrop
|
пользователь перетаскивает мышью объект
|
onDragDrop
|
Error
|
возникновение javascript-ошибки
|
onError
|
Focus
|
окно или элемент формы получает фокус
|
onFocus
|
KeyDown
|
пользователь нажимает клавишу клавиатуры
|
onKeyDown
|
KeyPress
|
пользователь удерживает нажатой клавишу клавиатуры
|
onKeyPress
|
KeyUp
|
пользователь отпускает клавишу клавиатуры
|
onKeyUp
|
Load
|
документ загружается в браузер
|
onLoad
|
MouseDown
|
пользователь нажимает кнопку мыши
|
onMouseDown
|
MouseOut
|
указатель мыши выходит за пределы элемента
|
onMouseOut
|
MouseOver
|
указатель мыши помещается над элементом
|
onMouseOver
|
MouseUp
|
пользователь отпускает кнопку мыши
|
onMouseUp
|
Move
|
пользователь перемещает окно
|
onMove
|
Reset
|
пользователь нажимает кнопку "reset" формы
|
onReset
|
Resize
|
пользователь изменяет размеры окна или элемента
|
onResize
|
Select
|
пользователь выбирает элемент формы
|
onSelect
|
Submit
|
пользователь нажимает кнопку "submit" формы
|
onSubmit
|
Unload
|
пользователь закрывает документ
|
onUnload
|
Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций.
