События javascript

Здравствуйте уважаемые начинающие программисты.

Прежде чем перейти к элементам javascript, узнаем что такое событие.

Событие — это реакция программы на действия посетителя и внутреннее взаимодействие скриптов.

По простому — клик или наведение мыши, перетаскивание, изменение размеров, нажатие клавиши, начало и окончание загрузки документа, отправка формы и т.п.

Для того что-бы событие возникло, его нужно объявить. Делается это просто.

В определённое место кода, например в html тег, вводится обработчик события с указанием функции, которая будет срабатывать при возникновении события.

Все события имеют имя и здесь я покажу их все, для того, чтобы в дальнейшем можно было перейти на эту страницу и выбрать нужное.

У всех событий для обработки впереди приписывается on, за исключением специальных методов, где указывается чисто имя события.

MouseDown — onMouseDown — пользователь нажимает кнопку мыши

MouseOut — onMouseOut — указатель мыши выходит за пределы элемента

MouseOver — onMouseOver — указатель мыши помещается над элементом

MouseUp — onMouseUp — пользователь отпускает кнопку мыши

Click — onClick — пользователь щелкает мыщью по объекту

DblClick — onDblClick — пользователь делает двойной щелчок мышью по объекту

DragDrop — onDragDrop — пользователь перетаскивает мышью объект

Resize — onResize — пользователь изменяет размеры окна или элемента

Move — onMove — пользователь перемещает окно

Select — onSelect — пользователь выбирает элемент формы

Submit — onSubmit — пользователь нажимает кнопку «submit» формы

Reset — onReset — пользователь нажимает кнопку «reset» формы

Blur — onBlur — потеря объектом фокуса

Focus — onFocus — окно или элемент формы получает фокус

KeyDown — onKeyDown — пользователь нажимает клавишу клавиатуры

KeyPress — onKeyPress — пользователь удерживает нажатой клавишу клавиатуры

KeyUp — onKeyUp — пользователь отпускает клавишу клавиатуры

Load — onLoad — документ загружается в браузер

Unload — onUnload — пользователь закрывает документ

Change — onChange — пользователь изменяет значение элемента

Error — onError — возникновение javascript-ошибки

В качестве примера создадим очень простой, но симпатичный калькулятор.

Для его создания применим таблицы и формы html, стили css и событие Click jvascript.

Калькулятор работает

Код:

HTML

CSS

Разбор кода.

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.

Тег <table> — контейнер для таблицы.

Теги <tr> и <td> ячейки таблицы, в нашем случае дисплей и кнопки калькулятора.

Тег <br> — перенос строки.

CSS — оформление внешнего вида калькулятора.

Тег <input> — создаёт различные формы на странице и обрабатывает javascript.

Атрибут type=»button» — создаёт кнопку в ячейках таблицы.

Атрибут value=»» — создаёт символы в кнопке.

OnClick=»calc.input.value += ‘1’» — событие javascript выводящее на дисплей символ из value при клике мыши.

eval() — Jvascript метод выполняющий действие набранное на дисплее.

Как видите здесь только математика. Чтоб добавить в калькулятор алгебру и геометрию, нужны будут функции и метод Math, но об этом в следующих уроках.

А здесь для практики вы можете добавить клавиши проценты % и точку, изменив порядок клавиш и ширину калькулятора.

И ещё, данный код корректно работать будет только в редакторе файлов, например в Notepad++.

В CMS обычно всем элементам данного кода по умолчанию задаётся стилевое оформление, поэтому для того, чтобы разместить этот калькулятор на своём сайте, потребуется дополнительная отладка кода под конкретный шаблон.

Структура javascript < < < В раздел > > > Javascript основные элементы