Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 04.02.2009 | Уровень: специалист | Доступ: платный | ВУЗ: Воронежский государственный университет
Самостоятельная работа 3:
Введение в JavaScript. Программное взаимодействие с HTML документами на основе DOM API
Свойства узлов
В HTML DOM каждый узел является объектом, который может иметь методы (функции) и свойства. Наиболее важными являются следующие свойства:
- nodeName ;
- nodeValue ;
- nodeType.
Свойство nodeName указывает на имя узла. Это свойство имеет следующие особенности:
- Свойство nodeName предназначено только для чтения;
- Свойство nodeName узла элемента точно соответствует имени тэга;
- Свойство nodeName узла атрибута соответствует имени атрибута;
- Свойство nodeName текстового узла всегда равно #text
- Свойство nodeName узла документа всегда равно #document
Замечание: nodeName всегда содержит имя тэга HTML элемента в верхнем регистре.
Свойство nodeValue указывает на значение узла. Это свойство имеет следующие особенности:
- Свойство nodeValue узла элемента не определено;
- Свойство nodeValue текстового узла указывает на сам текст;
- Свойство nodeValue узла атрибута указывает на значение атрибута.
Свойство nodeType возвращает тип узла. Это свойство предназначено только для чтения:
Наиболее важными типами узлов являются следующие:
Изменение HTML элементов
HTML элементы могут быть изменены с посредством использования JavaScript, HTML DOM и событий.
В примере 6.5 показано, как можно динамически изменять текстовое содержимое тэга <p>:
<html>
<body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Пример
6.5.
Диалоговые элементы
В JavaScript поддерживается работа со следующими диалоговыми элементами интерфейса:
-
Alert. Применяется для уведомления пользователя, работающего с веб-браузером.
Синтаксис: alert("сообщение"); -
Confirm. Применяется для выбора пользователем одного из двух вариантов ответа "Да/Нет". Соответственно Confirm возвращает значение true/false.
Синтаксис: confirm("вопрос"); -
Prompt. Применяется для ввода пользователем значения. При нажатии "OK" возвращается введенное значение, в случае "Cancel" возвращается значение null.
Синтаксис: prompt("вопрос/запрос","значение по умолчанию");
Ниже приводится код веб-страницы, в которой пользователь имеет возможность выбрать цвет текста с помощью диалогового элемента
<html>
<body>
// здесь будет отображаться текст
<div id="c" style="color:blue">Вы выбрали цвет текста: синий</div>
<script language="JavaScript">
// пользователь выбирает цвет текста
var tcolor = prompt("Выберите цвет текста: red, blue, green, yellow, black","black");
// задается текст
document.getElementById("c").innerHTML = "Вы выбрали цвет текста: " + tcolor;
// задается цвет текста
document.getElementById("c").style.color = tcolor;
</script>
</body>
</html>
Пример
6.6.
Порядок выполнения работы
Используя Microsoft Expression Studio 2 (или другой редактор), подготовьте на основе примеров 1-2, 4-6 соответствующие веб-страницы и просмотрите их с помощью веб-браузера.
Контрольное задание. Создание таблицы случайно выбранных цветов
Взяв за основу сценарий построения таблицы умножения, постройте таблицу случайно выбранных цветов. Цвет ячейки таблицы задается с помощью атрибута bgcolor. Цвет ячейки описывается в рамках трехкомпонентной модели RGB, например: <td bgcolor="#c0a145">. Для генерации каждой компоненты можно использовать генератор случайных чисел с помощью методов объекта Math и преобразование в шестнадцатиричный формат:
color = Math.round(255.0*Math.random()); r = color.toString(16);
Результирующий цвет образуется путем конкатенации компонентов:
color = r + g + b;
Примерный вид результата работы сценария:
