Спонсор: Microsoft
Воронежский государственный университет
Опубликован: 04.02.2009 | Доступ: свободный | Студентов: 8216 / 665 | Оценка: 4.14 / 3.78 | Длительность: 19:54:00
Самостоятельная работа 3:

Введение в JavaScript. Программное взаимодействие с HTML документами на основе DOM API

< Лекция 3 || Самостоятельная работа 3: 123 || Самостоятельная работа 4 >

Свойства узлов

В HTML DOM каждый узел является объектом, который может иметь методы (функции) и свойства. Наиболее важными являются следующие свойства:

  • nodeName ;
  • nodeValue ;
  • nodeType.

Свойство nodeName указывает на имя узла. Это свойство имеет следующие особенности:

  1. Свойство nodeName предназначено только для чтения;
  2. Свойство nodeName узла элемента точно соответствует имени тэга;
  3. Свойство nodeName узла атрибута соответствует имени атрибута;
  4. Свойство nodeName текстового узла всегда равно #text
  5. Свойство nodeName узла документа всегда равно #document

Замечание: nodeName всегда содержит имя тэга HTML элемента в верхнем регистре.

Свойство nodeValue указывает на значение узла. Это свойство имеет следующие особенности:

  • Свойство nodeValue узла элемента не определено;
  • Свойство nodeValue текстового узла указывает на сам текст;
  • Свойство nodeValue узла атрибута указывает на значение атрибута.

Свойство nodeType возвращает тип узла. Это свойство предназначено только для чтения:

Наиболее важными типами узлов являются следующие:

Тип элемента Тип узла
Element 1
Attribute 2
Text 3
Comment 8
Document 9

Изменение 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 поддерживается работа со следующими диалоговыми элементами интерфейса:

  1. Alert. Применяется для уведомления пользователя, работающего с веб-браузером.
    Синтаксис:
        alert("сообщение");
  2. Confirm. Применяется для выбора пользователем одного из двух вариантов ответа "Да/Нет". Соответственно Confirm возвращает значение true/false.
    Синтаксис:
    
        confirm("вопрос");
  3. 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;

Примерный вид результата работы сценария:


< Лекция 3 || Самостоятельная работа 3: 123 || Самостоятельная работа 4 >
Михаил Олифиренко
Михаил Олифиренко
Александр Табачук
Александр Табачук

Это только у меня не работает кнопочка "Получить код DreamSpark"? Пишет "временно не доступно..." А когда заработает?