5. Типы событий в языке JavaScript.Примеры.

Тип события – это строка, определяющая тип происшествия. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Тип события иногда называется именем события(как показано в таблице примеров).

Цель события - это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента <button>.

Обработчик события - это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызовет обработчик.

Объект события - это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента. Все объекты событий имеют свойство type, определяющее тип события, и свойство target, определяющее цель события. Примеры:

Onkeypress-нажатие с удерживанием определенной клавиши

Onkeydown –нажатие определенной клавиши

Onmousemove-при движении мыши (используется для изменения состояния элементов холста)

Onclick-событие произойдет по клику мыши

Ondblclick-cобытие произойдет по двойному клику мыши

Onselect-событие выделит текст в поле ввода или в области с текстом.

Onload-cобытие завершает загрузку документа(страницы или функции)

Onchange- Событие возникает при изменении значения элемента формы, вроде текстового поля или списка(фактически событие реагирующее на любое изменение исходного состояния страницы)

Onkeyup-событие произойдет как только пользователь отпусти назначенную клавишу

Onmousedown-событие произойдет при нажатии на любую из клавишей мыши

6.Доступ к элементам страницы с использованием элемента id

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

1. по значению атрибута id;

2. по значению атрибута name;

3. по имени тега;

4. по имени класса или классов CSS;

5. по совпадению с определенным селектором CSS.

Доступ по атрибуту id выполняется функцией document.getElementById("primer") Эта функция возвращает объект документа имеющий значение id = "primer". Все указанные свойства станут свойствами возвращенного объекта и будут иметь соответствующие значения, при изменении которых будут меняться свойства объекта документа. Значение атрибута id должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута id.

7.Использования элемента canvas

Canvás - элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптования на языке JavaScript. Начало отсчета блока находится слева сверху. От него и строится каждый элемент блока. По умолчанию его ширина равна тремстам пикселям, а высота стапятидесяти.

Для использования элемента canvas сначало нужно получить объект canvas, определенный в теле html страницы, например в теге <canvas>, с помощью document.getElementById().Для того, чтоб на холсте можно было рисовать, необходимо получить содержимое этого холста, которое возвращается методом getContext("2d") этого объекта и с помощью методов, которые существуют у объекта контекст можно рисовать на холсте.

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

8.Определение положения курсора на странице

Координаты можно узнать через свойства событий. e.clientX и e.clientY - принимают значения координат курсора при любых событиях? где e - событие переданное в функцию обработки в качестве аргумента. Можно не передавать аргумент, изменив форму записи. window.event.clientX и window.event.clientY. Так же поля pageX и pageY хранят координаты курсора относительно страницы.

function mousemove(event) { var coords = {}; coords.xx = event.clientX; coords.yy = event.clientY; return coords; }

при движении мыши будет возвращаться объект с координатами

9.Использование простых графических команд canvas

В основу создания системы рисования с использованием canvas, положено понятие путь (path). Рисование осуществляется с помощью графических команд (ряд методов объекта контекст).

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

Картинка или сцена, нарисованная на канвас, как правило, строиться из нескольких путей.

С каждым путём связывается некоторый набор графических параметров, таких как: толщина линии контура, стиль заливки и стиль контура.

Стиль позволяет установить цвет или способ рисования. Для всех элементов пути определяется одинаковый набор атрибутов – графическое состояние.

Список графических команд:

ctx.beginPath() – начать новый путь.

ctx.closePath() – завершить путь. Конечная точка пути соединяется с начальной с использованием текущих атрибутов графического состояния.

ctx.lineWidth = w – установить толщину линии равной w.

ctx.fillStyle = style – Установить стиль заливки. а)Style – может иметь значение одного из предопределённых цветов (red, green, black и т.д.) например: ctx.fillStyle = “red”. б)Style – можно определить, используя палитру rgb, rgba. Например: ctx.fillStyle = “rgb(255,255,100)”. Параметры в скобках после rgb задаютя целыми числами от 0 до 255. Они задают интернсивность красного, синего и зелёного в результирующем цвете. 0 показывает, что соответствующий цвет не присутствует, а 255 - что его интенсивность максимальна. Таким образом rgb(255,255,255) – белый, а rgb(0,0,0) – чёрный. В палитре rgba добавляется четвёртый параметр – альфа, которая задаёт прозрачность цвета, например, ctx.fillStyle = “rgba(255,255,100,0.5)”. в) Стиль можно определить с помощью пиксельного рисунка. Пусть img – некоторое изображение, тогда

style = ctx.createPattern(img,’repet’) показывает, что область ил линия контура будет заполнены цветами из соответствующих областей рисунка img. Если площади изображения img не хватает по длине или высоте, размещение img повторяется справа или снизу.

ctx.strokeStyle = style – установить стиль контура.

ctx.fill() – залить сформированные области с использованием текущего стиля залвки.

ctx.stroke() – Нарисовать сформированные линиии и области с использованием текущего стиля контура.

ctx.clip() – выделить область, ограниченную сформированным предшествующими графическими камандами путём. Последуещее рисование будет выполняться в формированной области. Элементы сцены, выходящие за пределы области будут отсекаться.

ctx.save() – сохранить графическое состояние

ctx.restore() – восстановить графическое состояние

ctx.clearRect(l,t,w,h) –очистить прямоугольную область с координатами верхнего левого угла (l,t).Установить шрину области очистки w и высоту h.

ctx.fillRect(l,t,w,h) – залить прямоугольную область с координатами верхнего левого угла (l,t). Установить шрину области очистки w и высоту h.

ctx.strokeRect(l,t,w,h) – обвести контуром прямоугольную обл с координатами верхнего левого угла (l,t).Установить шрину области очистки w и высоту h.

ctx.moveTo(x,y) – переместить текущую точку в положение (x,y).

ctx.lineTo(x,y) – соединить текущую точку пути с точкой (x,y).

ctx.rect(l,t,w,h) – Добавляем к текущему пути прямоугольник. Параметры l,t задают координаты левого угла. Парметры w, h задают высоту ширину прямоугольной области. Использование метода неявно вызывает функцию ctx.moveTo(0,0) – устанавливая текущую точку рсования в начало координат.

ctx.arc(cx,cy,r,omega,phi,direction) – рисует дугу окружности с центром (cx,cy), раиусом r, с начальным углом omega, конечным углом phi. Параметр direction – булевский, если его значение true, рисование идёт против часовой стрелки. Если false, по часовой стрелке. ПРИМЕЧАНИЕ! К начальной точке дуги ведёт линия от текущей точки пути!