Имя события
|
Описание
|
|
|
onClick
|
При щелчке кнопки мыши на элементе
|
onDblClick
|
При двойном щелчке кнопки мыши на элементе
|
onMouseDown
|
При нажатии кнопки мыши на элементе
|
onMouseUp
|
При отпускании кнопки мыши на элементе
|
onMouseOver
|
При попадании курсора мыши на элемент
|
onMouseMove
|
При движении курсора мыши по элементу
|
onMouseOut
|
При попадании курсора мыши за пределы элемента
|
onKeyPress
|
При нажатии и отпускании клавиши на элементе
|
onKeyDown
|
При нажатии клавиши на элементе
|
onBlur
|
При потере элементом фокуса
|
onSelect
|
При выделении пользователем текста в поле ввода текста или пароля
|
onFocus
|
При получении элементом фокуса, т.е.когда пользователь предпринял шаги (нажатием мышки, с помощью табуляции) к тому, чтобы начать менять элемент.
|
и добавлять их на страницу. Для создания элементов разметки используем функцию createElement, а в качестве аргумента передаем “div”.
var A=document.createElement("div");
По условию задачи нужно создать 10 блоков. Чтобы облегчить данную процедуру, однообразные действия записывают в цикл. В данном случае используем цикл с параметром.
For ( i=0; i<10;i++)
{
var A=document.createElement(“div”);
}
Чтобы созданные блоки не были пустыми, зададим текст внутри них, добавив следующую строку внутри цикла:
A.innerText = i;
После создания элементов и заполнения их контентом, эти элементы должны быть добавлены в общее DOM дерево элементов страницы. Для этого пишем следующую строку внутри цикла:
document.getElementsByTagName("body")[0].appendChild(A);
В данном случае добавляем блоки к корневому элементу - телу страницы. Результат выполнения кода после нажатия кнопки показан на рис.4.2
Рис.4.2 Промежуточный результат выполнения JS скрипта.
Для генерации цвета в формате RGB (например: rgb(255, 255, 255)) создаем пользовательскую функцию color (), которая возвращает значение функции генерации случайного числа в диапазоне от 0 до 255.
function color()
{
return Math.floor(Math.random()*255);
}
В данном случае мы используем функции объекта Math. Функция random() – генератор случайных чисел, функция floor() – округление до меньшего.
Следующую строку добавляем в цикл функции block(). Тем самым каждому созданному блоку задаем стиль фона – в нашем случае просто цвет.
A.style.backgroundColor = "rgb("+color()+", "+color()+", " +color()+")";
Рис. 4.3 Конечный результат выполнения кода.
4.2 Варианты заданий:
Написать скрипт по которому всем блокам документа задается цвет фона в произвольном порядке.
Написать скрипт по которому в всплывающем окне можно ввести данные, и затем они должны отобразиться в новом созданном блоке внизу основной части документа.
Написать скрипт по которому в всплывающем окне нужно ввести число. В соответствии с введенным числом изменить пропорции окна.
Написать скрипт по которому при наведении курсора на любую картинку на странице все картинки меняются на другие.
Написать скрипт по которому при вводе даты рождения, вычисляется возраст и знак гороскопа вводящего.
Написать скрипт по которому элементы существующего списка идут в обратном порядке.
Написать скрипт валидатора поля ввода email (должен содержать @ и точку и не должен содержать символы »№;%:?*()+/)
Создать массив N на M. На основе его, построить таблицу с случайными числами внутри. Ячейки со значениями большими 50 красить другим цветом
Написать скрипт по которому при нажатии кнопки все ссылки страницы изменят цвет и путь на который они указывают.
Написать скрипт по которому при нажатии кнопки все блоки расположенные справа поменяются с блоками расположенными слева.
Напишите функцию для создания таблицы размером NхM. Такой, чтобы каждая ячейка заполнялась случайной буквой русского алфавита и случайным цветом фона (для выполнения задания, воспользуйтесь методом random() объекта Math; кроме того создайте массив в элементами – буквами алфавита)
Вывести таблицу 10 × 10, заполненую числами от 1 до 100
Сделать, чтобы при наведении указателя мыши на изображение, это изображение переворачивалось вверх ногами
В папке images есть изображения 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, 8.jpg, 9.jpg. Вывести случайное изображение из этой папки
Написать скрипт валидатора пароля (должен содержать цифру, заглавную букву, и не должен содержать символы »№;%:?*()_+/)
Написать скрипт, который обращается к другому css документу при ширине окна меньшей 500px.
Создать ссылку, по нажатию на которую будет открываться новое окно 300x200 и в этом окне должно отображаться текущее время. Секунды, минуты должны изменяться.
Написать скрипт, для HTML страницы, содержащей картинку и две ссылки. По нажатию на первую ссылку анимационно увеличивать картинку,на вторую - уменьшать
