34. Не из задачника.

Взять регистрационную форму, которые вы делали в разделе задач по HTML. Добавить к ней обработчик события submit. Данные из формы не отправляются, если не выполнено хотя бы одно из требований:

• Поле «Логин» заполнено

• Значения в полях «Пароль» и «Повторите пароль» совпадают, длина пароля – не менее 6 символов, он состоит из цифр, строчных и заглавных латинских букв.

• Выбрано какое-то значение в поле «Пол»

• Выбрано хотя бы одно музыкальное предпочтение

• В select-е выбран пункт списка, не являющийся первым

У формы задать атрибут name, с помощью которого можно обращаться к форме. Элементам формы задать атрибут tabindex, чтобы можно было перемещаться по ним, нажимая клавишу Tab. Сообщения об ошибках («такое-то поле не заполнено») выводить в заранее заготовленные элементы SPAN, которые расположены возле соответствующих элементов формы.

35. Не из задачника.

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

Использовать вызовы методов getElementsByTagName.

36. Не из задачника.

Создать страницу со следующим содержимым:

1. Node1

2. Node2

• Node21

• Node22

3. Node3

1. Node31

2. Node32

• Node321

• Node322

3. Node33

4. Node34

5. Node35

4. Node4

Изначально у нас имеется ссылка на элемент document.body. Используя методы элементов childrenNodes, children, parentNode, previousSibling, nextSibling, сделать следующее:

Добраться до элемента Node31.

Его родителю сделать зеленый цвет фона.

С помощью nextSibling добраться до всех соседей элемента Node31 и сделать цвет текста у них красным.

Используя getElementsByTagName, найти на странице все ненумерованные списки. В конец каждого из них добавить новые пункты под названием “newNode” (используя методы createElement и appendChild), а все остальные пункты этих списков удалить (используя метод removeChild).

37. Не из задачника.

Создать на странице элемент TEXTAREA. С помощью обработчиков событий mouseover, mousemove, mouseout сделать так, чтобы пока курсор движется над текстовым полем, в него записываются координаты курсора относительно левого верхнего угла TEXTAREA. Чтобы узнать координаты этого угла, использовать функцию getBoundingClientRect. В тот момент, когда курсор уходит с текстового поля, в него записывается пустая строка.

38. Не из задачника.

Поместить на страницу картинку, задав ей абсолютное позиционирование. У объекта document определить обработчик события keydown, такой, что нажатие клавиши “W” сдвигает картинку на 5 пикселей вверх, “S” – вниз, “A” – влево, “D” – вправо.

39. Не из задачника.

Создать на странице таблицу с квадратными ячейками, в таблице 4 строки и 4 столбца. В одну из ячеек поместить картинку. С помощью техники Drag'n’Drop сделайте так, чтобы с помощью мыши можно было перетаскивать картинку из одной ячейки в другую. Используйте делегирование, обработчики событий mousedown, mousemove, mouseup вешайте на объект document.

Совет: чтобы в обработчике события mouseup определить, над каким элементом страницы находится картинка, надо сначала сделать ее невидимой (style.display = “none”), затем вызвать функцию, которая по текущим координатам курсора вернет элемент страницы, над которым сейчас находится курсор. Затем вновь сделать картинку видимой.