Документ описывает основы программирования на DHTML с акцентом на использование JavaScript, включая типы данных, переменные, массивы, функции и объекты. Он также объясняет объектную модель документа (DOM), методы работы с HTML-элементами и основные события, связанные с взаимодействием пользователя с веб-страницей. Кроме того, рассматриваются особенности коллеций и свойства объекта document, которые являются ключевыми в динамическом изменении контента веб-страниц.

1. Основы DHTML.
Программируем формы на Javascript
Автор: Павел Сериков

2. Типы данных Javascript
1) Литералы - данные, которые используются в программе непосредственно. А именно в
присваивании значений переменным или в операциях сравнения.
Например: числовые литералы — 10, 2.31, 2.3e+2, строковые литералы — 'строка', "строка"
2) Переменные - это области памяти, имеющие свое имя и хранящие некоторые данные.
Объявляются с помощью оператора var.
3) Массивы - упорядоченные наборы данных, идентифицируемых с помощью одного или
нескольких индексов. Делятся на встроенные (document.links[], document.images[] и т.п. — их
еще называют коллекциями) и определяемые пользователем. Для определения массива
пользователя существует специальный конструктор Array. Методы: join(), sort(), reverse().
4) Функции - механизм многократного использования кода программы. Функция как тип данных
определяется при помощи ключевого слова function.
5) Объекты - главный тип данных JavaScript. Любой другой тип данных имеет объектовую
"обертку" (wrapper).
Каждая функция является не только именем для группы операторов, но одновременно и
объектом. Объекты же (пользовательские) создаются с помощью функций (конструкторов).

3. Объектная модель документа
(DOM — Document Object Model)
Суть: каждому HTML-контейнеру соответствует объект.
Обращение к методам, свойствам и событиям объекта
осуществляется при помощи точечной нотации.
Объект
методы свойства события
Определяют Атрибуты
функции, Атрибуты HTML = контейнера
с помощью свойства объекта расширяются
которых Например:
выполняются атрибуту HREF будет атрибутами
действия соответствовать свойство обработки
href этого объекта
с этим объектом document.links[0].href='http://ya.ru/' события
document.write() onClick

4. Свойства, методы и события
● Свойства. Многие HTML-контейнеры имеют атрибуты. Как мы уже знаем, каждому
контейнеру соответствует объект. При этом соответствии атрибутам отвечают свойства
объекта. Соответствие между атрибутами HTML-контейнеров и свойствами DOM-объектов не
всегда прямое. Обычно каждому атрибуту отвечает некоторое свойство объекта. Но, во-
первых, название этого свойства не всегда легко угадать по названию атрибута, а во-вторых, у
объекта могут быть свойства, не имеющие аналогов среди атрибутов. Кроме того, как мы
знаем, атрибуты являются регистро-независимыми, как и весь язык HTML, тогда как свойства
объектов нужно писать в точно определенном регистре символов. К свойствам можно также
обращаться с помощью скобочной нотации: объект['свойство']
● Методы объекта определяют функции, с помощью которых выполняются действия с этим
объектом, например, изменение его свойств, отображения их на web-странице, отправка
данных на сервер, перезагрузка страницы и т. п. Например, если у нас есть ссылка <A
HREF="http://intuit.ru/">intuit</A> (будем считать, она первая в нашем документе), то у
соответствующего ей объекта document.links[0] есть метод click(). Его вызов в любом месте
JavaScript-программы равносилен тому, как если бы пользователь кликнул по ссылке, что
демонстрирует пример:
<A HREF="http://intuit.ru/">intuit</A><SCRIPT> document.links[0].click(); </SCRIPT>
● События. Кроме методов и свойств, объекты характеризуются событиями. Собственно, суть
программирования на JavaScript заключается в написании обработчиков этих событий.
Например, с объектом типа button (контейнер INPUT типа button — "кнопка") может
происходить событие Click, т.е. пользователь может нажать на кнопку. Для этого атрибуты
контейнера INPUT расширены атрибутом обработки этого события — onClick. В качестве
значения этого атрибута указывается программа обработки события, которую должен
написать на JavaScript автор HTML-документа.

5. Иерархия классов объектов в DOM

6. Коллекции в объектной модели
документа
Коллекция — это структура данных JavaScript, похожая на массив. Отличие коллекции от
массивов заключается в том, что массивы программист создает сам в коде программы и
заполняет их данными; коллекции же создаются браузером и "населяются" объектами,
связанными с элементами Web-страницы. Коллекцию можно рассматривать как другой,
зачастую более удобный способ доступа к объектам Web-страницы.

7. Объект document
Объект document является важнейшим свойством объекта window.
Все элементы HTML-разметки, присутствующие на web-странице, —
текст, абзацы, гиперссылки, картинки, списки, таблицы, формы и т.д.
— являются свойствами объекта document. Можно сказать, что
технология DHTML (Dynamic HTML), т.е. динамическое изменение
содержимого web-страницы, заключается именно в работе со
свойствами, методами и событиями объекта document (не считая
работы с окнами и фреймами).
document.getElementsByTagName('P') -
коллекция всех элементов (точнее,
соответствующих им объектов) вида <P>,
т.е. абзацев.
document.getElementsByName('important')
выдаст коллекцию (объектов) HTML-
элементов любых типов, у которых был
задан атрибут NAME="important"
document.getElementById('id5') выдаст
тот HTML-элемент (если их несколько, то
первый), у которого был задан атрибут
ID="id5".

8. Mind map. Подводим итоги
Операторы языка
{...}, if... else..., ()?, while, Типы данных
for, break, continue, return; Литералы, переменные,
var, with массивы, функции, объекты
Методы
document.write() Объекты
Свойства События window, как Функции
href onClick document
ы
вид
Пользовательские
function f (...) {...}
Клиентские Встроенные
Array, String, Date,
window, document, Number, Function, Boolean, Коллекции
location, navigator Math forms[], images[], frames[] Встроенные
Например
window.document.forms[4] - document.write,
Серверные 5-я форма на странице alert
Server, Project, Пользовательские
Client, File