Практическое занятие № 3

Практическое занятие № 11

Тема: Работа с DOM деревом документа в JavaScript

Цель работы: получить практические навыки по извлечению элементов DOM дерева и их обработке, а также по созданию и добавлению новых элементов.

Ход работы

Задание 1. Работа с тегом body

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

Если пользователь меняет цвет, то меняется фон страницы и название цвета в заголовке.

Указания: на страницу добавьте выпадающий список с помощью тегов (коды цветов взяты произвольные). Красный цвет выбран по умолчанию.

<h2>Текущий цвет - красный</h2>

<option value="red" selected>красный</option>

<option value="green">зеленый</option>

<option value="blue">голубой</option>

<option value="yellow">желтый</option>

</select>

</div>

Для задания цвета фона по умолчанию и размещения списка цветов в правой части страницы зададим стили. В разделе head страницы введите текст:

<!--

body {

background: #FFAAA4;

}

#colors {

position: absolute;

top: 5px;

right: 5px;

}

-->

</style>

Напишем функцию для выполнения поставленной задачи. Для этого в разделе head вставим код скрипта:

Данную функцию нужно вызывать при каждой смене цвета. У списка есть событие onChange, в котором выполним вызов функции.

Найдите тег <select> и добавьте в него параметр

onchange="colors()"

Задание 2. Способы выделения разных элементов в документе

Пусть имеется документ, в котором есть блоки (div), абзацы, списки, встроенные блоки (span).

Выполните над текстом ряд действий:

- все нечетные абзацы текста окрасить серым цветом;

- первые строки каждого списка сделать размером в 28 px;

- все нечетные элементы списков взять в рамку красного цвета;

- содержимое тега span заменить на текст, который задается с помощью диалога и раскрасить синим цветом.

Все действия выбираются с помощью переключателя и выполняются с помощью кнопки.

Указания: исходный код страницы имеет вид:

<html>

<head>

<title>Новая страница 1</title>

</head>

<body>

<p>

В 1992 году компания Nombas (впоследствии приобретённая Openwave (англ.)) начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его. Главным отличием от Си была работа с памятью.

</p>

<p>

В новом языке всё управление памятью осуществлялось автоматически: не было необходимости создавать буферы, объявлять переменные, осуществлять преобразование типов. В остальном языки сильно походили друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нём Си «отпугивало» людей.

</p>

<p>

Поскольку требования были размыты, Айка перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования.енеджмент разработки браузера, включая Тома Пакина (Tom Paquin), Михаэля Тоя (англ.), Рика Шелла (Rick Schell), был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в <span>HTML</span>-код страницы.

</p>

<p>

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

</p>

<ul>

<li>объекты, с возможностью интроспекции; </li>

<li>функции как объекты первого класса; </li>

<li>автоматическое приведение типов; </li>

<li>автоматическая сборка мусора; </li>

<li>анонимные функции. </li>

</ul>

<p>

Объектная модель документа — интерфейс программирования приложений для <span>HTML</span> и XML-документов. Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

</p>

<ul>

<li>генерация и добавление узлов, </li>

<li>получение узлов, </li>

<li>изменение узлов, </li>

<li>изменение связей между узлами, </li>

<li>удаление узлов.</li>

</ul>

</body>

</html>

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

<input type="radio" name="R1" value="V1" checked>1-я задача<br>

<input type="radio" name="R1" value="V2">2-я задача<br>

<input type="radio" name="R1" value="V3">3-я задача<br>

<input type="radio" name="R1" value="V4">4-я задача<br>

Ниже разместите кнопку

Для раскрашивания абзацев серым цветом создадим предварительно класс. Для этого в разделе head введите текст:

<!--

.color{

background-color:gray;

}

-->

</style>

Напишем функцию для выполнения нужных действий. Для этого в разделе head напишем код скрипта:

В теге кнопки добавьте вызов созданной функции с помощью параметра:

onclick="format()"

Задание 3. Добавление элементов

Пусть имеется список вида:

<ul>

<li>Первая строка</li>

<li>Вторая строка</li>

<li>Третья строка</li>

</ul>

Для кнопки напишите функцию, которая запрашивает название нового пункта меню и добавляет его в конец списка.

Указания: в разделе head введите код функции:

Добавьте кнопку и для нее укажите параметр вызова функции с помощью записи:

onclick="append()"

Задание 4. Добавление фрагмента кода

Для предыдущего списка создайте еще одну кнопку, которая запрашивает количество новых элементов и добавляет их в список одним блоком. В качестве текста элемента используется название: Элемент № n.

Указания: в разделе head в теге script страницы создадим функцию для второй кнопки.

В теге второй кнопки укажите параметр вызова функции с помощью записи:

onclick="appendBlock()"

Задание 5. Создание спойлера

Пусть имеется страница вида:

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

</p>

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув к земле, вижу тысячи всевозможных былинок и чувствую, как близок моему сердцу крошечный мирок, что снует между стебельками, наблюдаю эти неисчислимые, непостижимые разновидности червяков и мошек и чувствую близость всемогущего, создавшего нас по своему подобию, веяние вселюбящего, судившего нам парить в вечном блаженстве, когда взор мой туманится и все вокруг меня и небо надо мной запечатлены в моей душе, точно образ возлюбленной, - тогда, дорогой друг, меня часто томит мысль: "Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - отражение предвечного бога!"

</div>

<p>

</p>

</div>

Блок div#spoyler по умолчанию не виден. При щелчке на кнопке блок отображается или скрывается. При этом на кнопке отображается или "+", или "-".

Указания: вначале зададим стили для блоков и кнопки. Для этого в разделе head введите текст:

<!--

/*стиль главного блока*/

#wrapper {

margin: 0px auto;

width: 900px;

}

/*стиль спойлера*/

#spoyler {

font: 10px Verdana, Geneva, sans-serif;

background: #999;

padding: 5px;

width: 730px;

border: 1px solid #000;

margin-left: 20px;

display: none;

}

/*стиль кнопки внутри главного блока*/

#wrapper input {

font-size: 9px;

height: 15px;

width: 15px;

padding: 0px;

}

-->

</style>

Напишем функцию для отображения спойлера. Для этого в разделе head введите код:

В теге кнопки укажите параметр вызова функции с помощью записи:

onclick="spoyler()"

Задание 6. Работа с таблицами

Пусть имеется произвольная таблица с числовыми данными с id="tbl1":

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Необходимо по каждой строке посчитать сумму и записать ее в последний столбец таблицы.

Все строки, суммы которых четные, закрасить серым цветом, остальные - голубым.

Самостоятельно: Найдите количество нечетных элементов в таблице и добавьте ниже таблицы ответ.

Перед таблицей добавьте название.

Указания: в разделе head вставьте код функции вида:

Добавьте кнопку и в ее теге укажите параметр вызова функции с помощью записи:

onclick="cols()"

Задание 7. Создание модального окна

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

Указания: создайте кнопку и присвойте ей класс для оформления.

Создайте блок div с формой

<tr>

<td>Логин</td>

</tr>

<tr>

<td>Пароль</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

Создайте стили для оформления блоков, форм и кнопок. В разделе head введите текст:

<!--

/*стили для всех тегов*/

* {

margin: 0px;

padding: 0px;

}

/*стили для блока перекрытия*/

#modal {

/*фоновый цвет в режиме rgb и прозрачность (0.5)*/

background-color: rgba(255,120,120,0.5);

height: 100%;

width: 100%;

position: absolute;

display: none;

}

/*стили для формы внутри блока перекрытия*/

#modal form {

margin: 50px auto 0px;

padding: 10px;

width: 280px;

background: #609;

text-align:center;

}

/*класс для кнопки*/

.button {

width: 100px;

text-align: center;

}

-->

</style>

Напишем функцию отображения модальной формы регистрации. В разделе head введите текст:

function reg()

{

//получаем ссылку на блок #modal

var modal=document.getElementById('modal');

//делаем блок видимым

modal.style.display='block';

}

</script>

Присвоим эту функцию кнопке "Регистрация". Для этого в теге кнопки добавьте параметр:

onclick="reg()"

Напишем функцию для кнопки на форме, которая закрываем окно и разблокирует страницу.

function post()

{

//получаем ссылку на блок #modal

var modal=document.getElementById('modal');

//===================================================

//здесь может быть код обработки введенной информации

//===================================================

//делаем блок невидимым

modal.style.display='none';

}

Присвоим эту функцию кнопке "Записать". Для этого в теге кнопки добавьте параметр:

onclick="post()"