- •Введение
- •1. Язык html
- •1.1. Информационная система сети Интернет
- •1.2. Язык html
- •Использование специальных символов в нтмl документах
- •Дескрипторы связи
- •Команда вставки графики
- •Команда гипертекстовой ссылки
- •Относительные и абсолютные адреса файлов
- •1.3. Расширения html
- •2. Язык JavaScript
- •2.1. Особенности и назначение языка JavaScript
- •2.2.Основы языка JavaScript Типы данных
- •Переменные и оператор присвоения
- •Var имя_переменной
- •Область действия переменных
- •Операторы
- •Приоритет операторов в выражении
- •Функции
- •Встроенные функции
- •Пользовательские функции
- •Сценарии
- •Обработка событий
- •Встроенные объекты
- •Объект String (Строка)
- •Объект Array (Массив)
- •Копирование массива
- •Объект Math (Математика)
- •Объект Date (Дата)
- •Объектная модель JavaScript
- •Клиентская сторона
- •Серверная часть
- •Доступ к объектам
- •X.Src /* строка url, например, file:///с:/Мои%20документы/pict.Jpg */
- •Создание фреймов
- •Динамический html
- •Динамическое изменение элементов документа
- •Использование метода write()
- •Изменение значений атрибутов элементов
- •Управление процессами во времени
- •If (confirm("Прервать процесс ?"))
- •Работа с Cookie
- •Обработка данных форм
- •Работа с файловой системой и реестром Windows
- •Создание объекта файловой системы
- •Запуск приложений
- •Работа с реестром
- •Глоссарий
- •Императивное (операторное) программирование
- •Функциональное программирование
- •Объектно-ориентированное программирование
- •Модули и раздельная компиляция
- •Библиографический список
- •394026 Воронеж, Московский просп., 14
Динамическое изменение элементов документа
HTML-документ, загруженный в браузер, можно изменять с помощью сценариев. Поскольку речь идет не о файле на диске, а о его образе в браузере в оперативной памяти компьютера, то говорят о динамическом изменении документа. Существует три основных способа динамических изменений:
• с помощью метода write();
• путем изменения значений свойств, соответствующих атрибутам HTML-тегов и параметрам каскадных таблиц стилей;
• путем изменения значений свойств innerText, outerText, innerHTML, outerHTML ,
которые имеют почти все объекты, заданные с помощью тегов. Здесь:
innerText — весь внутренний текст, содержащийся в контейнере;
outerText — весь текст, содержащийся в контейнере, включая и его внешние теги;
innerHTML — строка, содержащая HTML-код, заключенный между открывающим и закрывающим тегами элемента;
outerHTML аналогично свойству innerHTML, но содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента.
Приведенный ниже HTML-код формирует документ, содержащий две кнопки. Сценарий обрабатывает событие onclick — щелчок мышью. Он привязан к элементу, заданному тегом <body>. Щелкнуть можно на любой кнопке, а также на незанятом месте окна браузера. В любом случае событие onclick будет обработано сценарием (функцией changetext()), поскольку кнопки заданы внутри тега <body>. Сценарий заменит текст, который находится внутри тега элемента, инициировавшего событие. Какой именно элемент инициировал событие, определяется с помощью свойства srcElement, а замена текста осуществляется посредством свойства innerText. Обратите внимание, что результат зависит от того, где находился указатель мыши в момент щелчка.
Пример. Динамическое изменение документа
<html>
<body onclick = "changetext()">
<button>Первая кнопка</button>
<button>Вторая кнопка</button>
</body>
<script>
function changetext() {
х = window.event.srcElement
x.innerText = "Уже щелкнули"
}
</script>
</html>
Использование метода write()
Метод write (принимает в качестве параметра строку, содержащую HTML-код и/или просто текст. Выполнение в сценарии выражения document.write(строка) приводит к дописыванию в текущий HTML-документ содержимого параметра строка и немедленной его интерпретации браузером. В результате документ и его объектная модель обновляются, а файл с исходным HTML-кодом остается без изменения. Если требуется полностью заменить текущий документ, то сначала применяют метод очистки документа
document.clear(),
а затем
document.write(строка).
Изменение значений атрибутов элементов
В объектной модели документа тегам элементов соответствуют объекты, а атрибутам — свойства этих объектов. В большинстве случаев названия свойств объектов совпадают с названиями атрибутов, но в отличие от последних записываются в нижнем регистре. Это же относится и к параметрам таблиц стилей. Например, тегу графического изображения
<img id = "myimg" src = "picture.jpg">
соответствует объект document.all.myimg, а атрибуту src — свойство document.all.myimg.src, значением которого является имя (URL-адрес) файла с изображением. С помощью сценария можно присвоить этому свойству новое значение, и в HTML-документе произойдет замена графического элемента.
Чтобы изменить в сценарии параметры стиля элемента, следует присвоить новые значения соответствующим свойствам объекта style:
document.all.myimg.style.top = 30
document.all.myimg.style.top = 100
document.all.myimg.style.zindex = -2
Параметр z-index в таблице стилей, указывающий слой (относительное положение выше-ниже) для элемента, в объектной модели представляется свойством zindex.