Содержание
- 2. События и узлы DOM У каждого элемента DOM есть свой метод addEventListener, позволяющий прослушивать события, происходящие
- 3. События и узлы DOM addEventListener позволяет добавлять любое количество обработчиков. Метод removeEventListener, вызванный с такими же
- 4. Объекты событий В объектах событий хранится дополнительная информация о событии. Нажатие клавиши var btn = document.querySelector("button");
- 5. Действия по умолчанию При клике на ссылку – переход по ней. При нажатии на стрелку вниз
- 6. События кнопок клавиатуры Нажмите на клавишу V addEventListener("keydown", function(event) { if (event.keyCode == 86) document.body.style.background =
- 7. События кнопок клавиатуры //Распознаем коды кнопок клавиатуры: console.log("3".charCodeAt(0)); // → 51 console.log("qwerty".charCodeAt(0)); // → 113 console.log("Привет".charCodeAt(0));
- 8. Кнопки мыши Получение точных координат места, где произошло событие мыши – свойства pageX и pageY –
- 9. Движение мыши При движении курсора мыши запускается событие «mousemove». Его можно использовать для отслеживания позиции мыши.
- 10. Установка таймеров Для отрисовки обновлений могут быть использованы методы для вызова некоторой функции, через заданный промежуток
- 11. Установка таймеров Функция setTimeout схожа с requestAnimationFrame. Она планирует запуск функции в будущем. Первый аргумент –
- 12. Установка таймеров setInterval и clearInterval используются для установки таймеров, которые будут повторяться через каждое указанное количество
- 13. Элемент холста Canvas Canvas (холст) – это элемент из стандарта HTML5, который даёт разработчикам возможность создания
- 14. Элемент холста Canvas HTML: Before canvas After canvas. JavaScript: var canv = document.querySelector("canvas"); var context =
- 15. Элемент холста Canvas Рисуем закрашенный треугольник: var ct = document.querySelector("canvas").getContext("2d"); ct.beginPath(); ct.moveTo(50, 10); ct.lineTo(10, 70); ct.lineTo(90,
- 16. Элемент холста Canvas Метод drawImage позволяет выводить на холст пиксельные данные. var cx = document.querySelector("canvas").getContext("2d"); var
- 17. Этапы рисования кадра Очистить canvas – всё что было нарисовано ранее необходимо стереть. Например, при помощи
- 18. Управление анимацией var width = 100, height = 100, frames = 4, currentFrame = 0; var
- 19. Курсовая работа Необходимо разработать игру «Кошки-мышки». Описание: На игровом поле бегают мышки, у каждой своя скорость
- 20. Передача данных в html-файл Передать данные в html-файл можно с помощью URL-адреса. После адреса ставиться знак
- 22. Скачать презентацию