Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Советы программисту:
Отношения с заказчиком станут менее формальными, если программа начисления зарплаты вместо 'ИТОГО' будет печатать 'ИГОГО'

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Уронил терабайтный HDD и поймал в десяти см. от пола. За секунду все файлы с этого HDD пронеслись у меня перед глазами...

  Моя группа в контакте:



JavaScript, обработчики событий

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш 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
1 2 3 4 5 6 7 8

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь