События javascript

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

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

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

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

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

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

<img src="images/28.phg" onClick="addText();">
// Событие - клик по картинке

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

У всех событий для обработки впереди приписывается 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

<form name="calc" id="calculator">
 <table>
  <tr>
   <td>
    <input type="text" name="input" size="16" class="display">
   </td>
  </tr>
   <tr>
   <td class="buttons">
    <input type="button" value="1" OnClick="calc.input.value += '1'" class="klav">
    <input type="button" value="2" OnClick="calc.input.value += '2'" class="klav">
    <input type="button" value="3" OnClick="calc.input.value += '3'" class="klav">
    <input type="button" value="+" OnClick="calc.input.value += '+'" class="klav">
<br>
    <input type="button" value="4" OnClick="calc.input.value += '4'" class="klav">
    <input type="button" value="5" OnClick="calc.input.value += '5'" class="klav">
    <input type="button" value="6" OnClick="calc.input.value += '6'" class="klav">
    <input type="button" value="-" OnClick="calc.input.value += '-'" class="klav">
<br>
    <input type="button" value="7" OnClick="calc.input.value += '7'" class="klav">
    <input type="button" value="8" OnClick="calc.input.value += '8'" class="klav">
    <input type="button" value="9" OnClick="calc.input.value += '9'" class="klav">
    <input type="button" value="x" OnClick="calc.input.value += '*'" class="klav">
<br>
    <input type="button" value="c" OnClick="calc.input.value = ''" class="klav">
    <input type="button" value="0" OnClick="calc.input.value += '0'" class="klav">
    <input type="button" value="=" OnClick="calc.input.value = eval(calc.input.value)" class="klav">
    <input type="button" value="/" OnClick="calc.input.value += '/'" class="klav">
   </td>
  </tr>
 </table>
</form>

CSS

        #calculator * {
	  font-size: 18px;
	  color: #666;
	}
	#calculator table {
	  border: solid 3px silver; 
	  border-spacing: 3px; background-color: #EEE; 
	}
	#calculator table td {
	  border-spacing: 3px;
	}
	input.display {
	  width: 166px; 
	  text-align: right;
        }
	td.buttons {
	  border-top: solid 1px silver;
	}	
	 .klav {
	  width: 50px; 
	  height: 30px;
	}

Разбор кода.

Тег <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 основные элементы

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *