Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="cascade.css">
<script language="javascript">
document.write("Моя первая страница.");
</script>
</head>
<body>
</body>
</html>
|
При просмотре в браузере:
| Моя первая страница. |
Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write(«Моя первая страница.»); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):
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 |
