DHTML.Основы JavascriptПрограммируем формы на

: Автор Павел Сериков

Типы данных Javascript1) Литералы - данные, которые используются в программе непосредственно. А именно в присваивании значений переменным или в операциях сравнения.

Например: числовые литералы — 10, 2.31, 2.3e+2, строковые литералы — 'строка', "строка"

2) Переменные - это области памяти, имеющие свое имя и хранящие некоторые данные. Объявляются с помощью оператора var.

3) Массивы - упорядоченные наборы данных, идентифицируемых с помощью одного или нескольких индексов. Делятся на встроенные (document.links[], document.images[] и т.п. — их еще называют коллекциями) и определяемые пользователем. Для определения массива пользователя существует специальный конструктор Array. Методы: join(), sort(), reverse().

4) Функции - механизм многократного использования кода программы. Функция как тип данных определяется при помощи ключевого слова function.

5) Объекты - главный тип данных JavaScript. Любой другой тип данных имеет объектовую "обертку" (wrapper).

Каждая функция является не только именем для группы операторов, но одновременно и объектом. Объекты же (пользовательские) создаются с помощью функций (конструкторов).

Объектная модель документа (DOM — Document Object Model)

Суть: каждому HTML-контейнеру соответствует объект.Обращение к методам, свойствам и событиям объекта осуществляется при помощи точечной нотации.

Объект

методы свойства события

Атрибуты HTML = свойства объекта

Например:атрибуту HREF будет

соответствовать свойство href этого объекта

document.links[0].href='http://ya.ru/'

Атрибуты контейнера

расширяются атрибутами обработки

событияonClick

Определяют функции,

с помощью которых

выполняются действия

с этим объектомdocument.write()

, Свойства методы и события● Свойства. Многие 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-документа.

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

Коллекции в объектной моделидокумента

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

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".

Объект document является важнейшим свойством объекта window. Все элементы HTML-разметки, присутствующие на web-странице, — текст, абзацы, гиперссылки, картинки, списки, таблицы, формы и т.д. — являются свойствами объекта document. Можно сказать, что технология DHTML (Dynamic HTML), т.е. динамическое изменение содержимого web-страницы, заключается именно в работе со свойствами, методами и событиями объекта document (не считая работы с окнами и фреймами).

Mind map. Подводим итогиОператоры языка

{...}, if... else..., ()?, while, for, break, continue, return;

var, with

Типы данныхЛитералы, переменные,

массивы, функции, объекты

Объектыwindow,

document

Методыdocument.write()

Свойстваhref

СобытияonClick

Функции

Встроенныеdocument.write,

alert

как

Коллекцииforms[], images[], frames[]

Напримерwindow.document.forms[4] -

5-я форма на страницеСерверныеServer, Project,

Client, File

ВстроенныеArray, String, Date,

Number, Function, Boolean, Math

Пользовательские

Клиентскиеwindow, document, location, navigator

Пользовательскиеfunction f (...) {...}

виды