Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 01.12.2023

Просмотров: 104

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

document.write("<br>Сегодня <b>", time(), <br> "<br>"); <br>//--> <br> 19 20 5. Повторите упражнение 3, но только отсчет интервала времени следует вести от момента завершения обработки страницы браузером. Урок 3. Переменные и литералы Реализация JavaScript является примером языка свободного использования типов. Тип переменной зависит от типа хранимых в ней данных, причем при изменении типа данных, меняется и тип переменной. JavaScript поддерживает следующие простые типы данных: 1. Числовой (целый и вещественный) 2. Строковый 3. Булевый, или логический Сложные (ссылочные) типы данных: 1. Объектный 2. Массив Специальные типы данных: 1. null 2. undefined Числовой тип В языке JavaScript целые и вещественные числа не различаются — внутренне они представляются числами в формате плавающей точки. Используется стандарт IEEE 754 представления вещественных чисел в восьмибайтном формате чисел с плавающей точкой. Диапазон изменения абсолютных значений: от 5∙10-324 до 1.7976931348623157∙10 308Целые литералы 123, -123, +678 // целое: десятичные числа 0123, -0123, +0677 // целое: восьмеричные числа 0x18F, -0X8A, +0xAA // целое: положительное число Вещественные литералы 1.25 0.125е01 12.5Е-1 0.0125Е+2 Ошибка: 00.234 (начинается с нуля, а, следовательно, является восьмеричным целым и точки в литерале быть не должно) Специальные числовые литералы 1. NaN (Not a Number — не число) используется в качестве результата арифметических операций над строками и специальным значением undefined. 2. Infinity и -Infinity используются для значений чисел, выходящих за допустимый диапазон их изменения в JavaScript. 21 Строковый тип Строковое значение — последовательность ноль или более символов Unicode, которая используется в программе для представления текстовых данных. Строковые литералы В JavaScript строковые литералы можно задавать двумя равноправными способами — последовательность символов, заключенная в двойные или одинарные кавычки: "Анна" 'АННА' Один тип кавычек можно использовать в литерале, заданном другим типом кавычек: "It's a string" // значение строки равно It's a string "" // пустая строка В строковых литералах можно использовать ESC-последовательности, которые начинаются с символа обратной наклонной черты, за которой следует обычный символ. Некоторые подобные комбинации трактуются как один специальный символ: Esc-последовательности Символ \b Возврат на один символ \f Переход на новую страницу \n Переход на новую строку \r Возврат каретки \t Горизонтальная табуляция Ctrl-I \' Апостроф \" Двойные кавычки \\ Обратная наклонная черта ESC-последовательности форматирования "работают" при отображении информации в диалоговых окнах, отображаемых функциями alert(), prompt() и confirm(), а также если методом document.write() записывается содержимое элемента PPE. Булевый тип Имеет два значения — истина и ложь. Обычно значения этого типа используются в операторах принятия решения if и switch или в операторах цикла типа while. Булевы литералы Две лексемы true и false. Числовые значения в булевом контексте также трактуются как истина или ложь: 22 целый или вещественный нуль (0, 00, 0.0, 0e1), null и undefined трактуются как false; все остальные числовые значения рассматриваются как true. Строковые значения в булевом контексте также трактуются как истина или ложь: пустая строка "" трактуются как false; все остальные строковые значения рассматриваются как true. Специальные типы данных Тип данных null имеет одно значение null. Когда переменная имеет значение null, то это означает, что она "пуста" — ей не присвоено никакого значения допустимого типа. Присваивание переменной значения null не уничтожает ее, но просто делает ее переменной, не содержащей значения любого допустимого типа данных: числового, строкового, булевого, объектного или массива. Значение null трактуется как 0 в арифметических операциях и false в логических, но оно не равняется 0 (как в С и С++). Операция typeof для специального типа null возвращает Object (из-за совместимости с предыдущими версиями JavaScript). Тип данных undefined имеет единственное значение undefined, которое присваивается переменной в двух случаях: 1. переменная объявлена, но ей еще не присвоено никакое значение; 2. при попытке обратиться к несуществующему свойству объекта. В булевом контексте значение undefined трактуется как false, а в арифметическом как NaN. Нельзя сравнивать со значением undefined (такого просто не существует), но следует использовать операцию typeof, возвращающую тип undefined. Переменные Каждая переменная задается своим идентификатором — последовательностью буквенно-цифровых символов, начинающуюся с буквы (символ подчеркивания относится к букве): Temp1 MyFunction _my_Method Определить переменную можно двумя способами: оператором var; оператором присваивания. Оператор var используется как для задания, так и для инициализации переменной и может располагаться в любом месте сценария: var имя_переменной [= начальное_значение]; var weekDay = "Пятница"; 23 Оператор присваивания, составленный из единственной операции присваивания, для которой используется символ =, также может вводить новую переменную в любом месте сценария, а также он используется для изменения значения уже созданной переменной. В выражениях все переменные должны быть объявлены либо оператором var, либо в операторе присваивания. В противном случае будет сгенерирована ошибка, что отсутствует определение соответствующей переменной. Динамическое изменение типа переменной По ходу выполнения сценария переменной могут присваиваться разные значения, меняя, таким образом, ее тип: var weekDay // переменная определена, но не инициализирована // она имеет специальное значение undefined weekDay = "Пятница"; // Строковый тип weekDay = 5; // Целый тип Определение типа переменной Унарная операция typeof позволяет определить тип переменной, т. е. определить тип величины, хранящейся в данный момент в переменной. Синтаксис ее имеет вид: typeof(переменная) typeof переменная Эта операция возвращает одну из шести строк, соответствующих возможным типам данных JavaScript: "number" "string" "boolean" "undefined" "object" "function" Упражнения 1. Написать сценарий, который при загрузке страницы HTML в браузер методом document.write() формирует на странице элемент PRE и его содержимое в виде трех строк текста, в которых слова отделены символами табуляции. Это действие реализовать в одном вызове метода document.write(). 2. Написать сценарий, который после загрузки страницы отображает в диалоговом окне, создаваемом функцией alert(), три строки сообщения. 24 3. Проверить соответствие булеву значению false значений 0, 00, 0.0, 0e1, null, undefined, +1, -1.1, "", "0", "undefined", "xxxx". Для этого создать переменные с указанными значениями и распечатать, например, функцией alert(), результат вычисления выражения !v, где v является идентификатором переменной с одним из указанных значений. 4. Написать сценарий, в котором одной и той же переменной присваиваются разные значение. После изменения значения переменной распечатать ее тип (результат выполнения операции typeof). Урок 4. Выражения и операции Выражение – это комбинация переменных, литералов и операций, в результате вычисления которой получается одно единственное значение. Переменные в выражениях должны быть инициализированы либо в операторе var, либо оператором присваивания. Если при вычислении выражения встречается неинициализированная или вообще не определенная переменная, то в Internet Explorer версий меньше 6.0 интерпретатор генерирует ошибку "undefined variable" ("переменная не определена"), указывая ее местоположение на странице HTML. В Internet Explorer 6.0 ситуация с использованием в выражении неинициализированной переменной была приведена к стандарту — такая переменная, а с ней и все арифметическое выражение принимает значение NaN, трактуемое в булевом контексте как false, а в строковых операциях как строка "NaN", но при использовании необъявленной переменной интерпретатор генерирует ошибку "определение отсутствует". Присваивание является операцией, которая не только присваивает левому операнду значение правого, но и вычисляется равным значению выражения правой части. Таким образом, любая конструкция с операцией присваивания рассматривается как выражение. Кроме выражения присваивания в JavaScript определены еще три типа выражений: арифметическое — вычисляемым значением является число; строковое — вычисляемым значением является строка; логическое — вычисляемое значение равно true или false. Арифметические операции Операция Смысл + Сложение - Вычитание * Умножение / Деление (1/2=0.5) 25 % Остаток от деления чисел (12%5.1=1.5999999999999996) ++ Увеличение на 1 (префиксная и постфиксная) -- Уменьшение на 1 (префиксная и постфиксная) Пример: speed = 5.5; time = 4; distance = speed * time; distance = (speed ++)*time; Арифметические операции в выражении вычисляются слева направо с учетом общепринятого их математического старшинства. Скобками можно изменить порядок выполнения арифметических операций в выражении. Логические выражения Для создания логических выражений используются операции сравнения и логические операции, применяемые к переменным любого типа. Операции сравнения Операция Синтаксис Описание == a == b Истина, если оба операнда равны === a === b true, если значения операндов равны и сами операнды одного типа != a != b Не равно !== a !== b true, если значения операндов не равны и/или они не одного типа >= a >= b Больше или равно <= a <= b Меньше или равно > a > b Строго больше < a < b Строго меньше Логические операции Операция Синтаксис Описание && a && b логическое И Возвращает a, если оно преобразуется к false, иначе b || a || b логическое ИЛИ Возвращает a, если оно преобразуется к true, иначе b ! !a логическое НЕ Если a равно true, возвращает false; если a 26 равно false, возвращает true Вычисляются по укороченной схеме — если результат операции становится известным после вычисления первого операнда, то второй операнд вообще не вычисляется. В следующих выражениях второй операнд вычисляться не будет, так как результат их вычисления уже определен значением первого операнда вне зависимости от значения второго: false && операнд2 // всегда равно false true || операнд2 // всегда равно true Битовые логические операции Операция Синтаксис Описание И a & b Результирующий бит равен 1, если оба равны 1, иначе 0 ИЛИ a | b Результирующий бит равен 1, если хотя бы один бит равен 1 Исключающее ИЛИ a ^ b Результирующий бит равен 1, если хотя бы один бит равен 1, но не оба одновременно Отрицание a Инвертирует биты Смещение влево a << n Сдвигает все биты влево на n позиций, добавляя справа нулевые Смещение вправо a >> n Сдвигает все биты вправо на n позиций, используя значение знакового бита для заполнения "освобождаемых" слева битов Смещение вправо с заполнением нулями a >>> n Сдвигает все биты вправо на n позиций, заполняя "освобождаемые" слева биты нулями Строковые операции Существует только одна строковая операция – операция конкатенации (соединения) строк +, если не считать сокращенной формы операции присваивания со сложением += и сравнения строк. string = "Моя" + "строка"; // string равно "Моястрока" Операция конкатенации строк может использоваться со смешанными типами операндов. Все операнды приводятся к строковому типу, если хотя бы один из операндов содержит строковый литерал. "Май" + 2.003е3 результат "Май2003", "Май" + t результат "Майtrue", если переменная t содержит булево значение true. "1"+"1.1" результат "11.1" "1"+1.1 результат "11.1" 27 Комбинированные операции присваивания Под комбинированными операциями присваивания понимаются операции, совмещающие выполнение какой-либо определенной операции с одновременным присваиванием ее результата переменной, определяемой первым операндом. Общий синтаксис подобных комбинированных операций следующий: a OP= b, где OP заменяется на символ одной из рассмотренных ранее операций языка JavaScript. Операция Значение x *= y x = x * y x /= y x = x / y x += y x = x + y x -= y x = x - y x %= y x = x % y x <<= y x = x << y x >>= y x = x >> y x >>>= y x = x >>> y x &= y x = x & y x ^= y x = x ^ y x |= y x = x | y Условная операция Единственная операция в языке, требующая три операнда, причем первый операнд вычисляется в булевом контексте: (условие) ? операнд2 : операнд3; Семантика ее такова: если значение первого операнда-условия истинно, то возвращается вычисленное значение второго операнда, иначе третьего. Например, результатом выполнения следующего выражения будет присваивание переменной range строки "Пересдача", если значение переменной mark меньше или равно 2, в противном случае переменная range будет иметь значением строку "Зачтено": range = (mark <= 2) ? "Пересдача" : "Зачтено"; Приоритет операций В приводимой ниже таблице перечислены все операции JavaScript в нисходящем порядке. Операции с одинаковым приоритетом выполняются в выражении слева направо. Операции Описание . [] () Доступ к значению свойства объекта, вычисление 28 индекса массива, вызов функции и группирование в выражении ++ -- - ! delete new typeof void Унарные операции увеличения/уменьшения на единицу, вычисление числового содержимого с обратным знаком, побитовое инвертирование содержимого, логическое отрицание, удаление свойства объекта, создание объекта, получение типа данных, вычисление выражения, но возврат значения undefined * / % Умножение, деление, остаток от деления + - + Сложение, вычитание и конкатенация << >> >>> Битовые сдвиги < <= > >= instanceof Логические операции и операция проверки является ли данный объект экземпляром какого- либо объекта == != === !== Логические операция сравнения на равенство и неравенство & Побитовое AND ^ Побитовое XOR | Побитовое OR && Логическое AND || Логическое OR ?: Условная операция = OP= Присваивание и комбинированное присваивание , Операция последовательного выполнения Упражнения 0. Как определить целый тип числа. 1. Объявить в сценарии переменную var1 оператором var, не присваивая ей никакого значения, а переменную var2 не объявлять. Отобразить их содержимое функцией alert() и объяснить результаты. 2. Предложить способ сложения двух чисел, хранящихся в виде строковых литералов. Например, в выражении "2.1"+"3.0" будет выполнена операция конкатенации строк с результатом "2.13.0", а не сложение чисел, хранящихся в указанных строках. Задача состоит в том, чтобы получить число 5.1. 3. Можно ли в JavaScript определить, содержит ли переменная число или строку с литералом числа. Приведите, если это возможно, максимальное число способов проверки. 4. Чему будет равно значение переменной a после выполнения операторов: 29 а) var a=""; a && (a=true); б) var a="javascript"; a && (a="vbscript"); a || (a="javascript"); в) var b="1.1"; a = typeof b*0.1; б) var b="1.1"; a = typeof(b*0.1); Урок 5. Операторы Весь набор операторов языка можно разбить на три группы: операторы выбора, или условные; операторы цикла; операторы манипулирования с объектами. Операторы выбора Предназначены для организации ветвления в сценарии. Общий синтаксис следующий: if(условие) { операторы1 } [else { операторы2 } ] Обратите внимание, что группы операторов блоков if и else заключены в фигурные скобки, которые можно опускать, если группа представлена одним оператором: if(a == b) с = d else { с = e alert(c) } Семантика этого оператора такова: если проверяемое условие истинно, то выполняются операторы блока if, иначе блока else. Операторы выбора могут быть вложенными друг в друга. В этом случае рекомендуется использовать фигурные скобки всегда во избежание ошибок при интерпретации подобных сложных операторов. 30 Если необходимо проверять одно и то же выражение на равенство разным значениям, то эффективнее использовать не группу вложенных операторов ветвления, а оператор switch со следующим синтаксисом: switch (выражение){ case значение1 : [операторы1] [break;] case значение2 : [операторы2] [break;] [default :] [операторы] } Семантика его не отличается от подобных операторов в других языках программирования: выражение вычисляется и последовательно проверяется на равенство значениям, указанным в блоках case. Если равенство найдено, то выполняются операторы соответствующего блока case, если нет, то операторы блока default в случае его наличия. Необязательный оператор break, задаваемый в каждом из блоков case выполняет безусловный выход из оператора switch. Если он не задан, то продолжается выполнение операторов и в следующих блоках case до первого оператора break или до конца тела оператора switch. Операторы цикла Основное предназначение оператора for организовать циклическое выполнение группы операторов, если заранее известно количество итераций: for([инициал_выражение];[условие];[изменяющее_выражение]) { [операторы] } Инициализирующее выражение вычисляется один раз при входе в цикл. Изменяющее выражение предназначено для изменения значения переменной цикла, определяемой в инициализирующем выражении, и вычисляется каждый раз при переходе на очередную итерацию вместе с проверкой условия окончания выполнения цикла. Переменная цикла не может быть создана локальной (даже если использовать в инициализирующем выражении оператор var) — она будет доступна и после завершения работы цикла: for(var i=0; i < 10; i++){. . .}; a[i] = value; // переменная i равна 10 Если тело цикла состоит из одного оператора, то фигурные скобки, ограничивающее тело цикла, можно опустить. 31 Пример 4. Цикл for в сценарии JavaScript Создадим сценарий, который при загрузке документа вычисляет степени числа 2 и выводит в документ таблицу степеней двойки. 1   2   3   4   5   6   7   8   9   10   11

<b>Свойства объекта Math <br><b>Свойство Описание <br>E <br>Возвращает постоянную Эйлера <i>e — основание натурального логарифма. <br>LN2 <br>Возвращает натуральный логарифм числа 2. <br>LN10 <br>Возвращает натуральный логарифм числа 10. <br>LOG2E <br>Возвращает логарифм по основанию 2 постоянной Эйлера <i>e. <br> <div> <br>52 <br>LOG10E <br>Возвращает логарифм по основанию 10 постоянной Эйлера <i>e. <br>PI <br>Число π. <br>SQRT1_2 <br>Возвращает квадратный корень из 0.5. <br>SQRT2 <br>Возвращает квадратный корень из 2. <br><b>Объект String <br>Когда <a href="/zavisimoj-peremennoj-peremennoj-otklika-i-nezavisimoj-peremenn/index.html" title="Зависимой переменной (переменной отклика) и независимой переменной">переменной присваивается строковый литерал, она становится строковой переменной. На самом деле JavaScript создает встроенный объект String. Таким образом, любая строковая переменная или строковый литерал является объектом <br>String, к которому могут быть применены все методы этого объекта. <br>Хотя обычно в сценарии строка создается присваиванием переменной строкового литерала (а в этом случае создается и объект String), в JavaScript предусмотрен конструктор для этого типа объекта: имя_объекта = new String(строка); <br>Параметром конструктора является строковый литерал или переменная: myString = new String("Строка"); a = 2.67; myNumber = new String(a); // myNumber = "2.67" <br>Объект String имеет единственное свойство length, хранящее длину строки, содержащейся в строковом объекте, т. е. количество символов в строке. <br>И "Строка".length, и myString.length возвращают одинаковые значения <br>6, равные в первом случае длине строкового литерала, а во втором случае длине строки, содержащейся в строковом объекте. <br>Объект String имеет два типа методов: первые возвращают отформатированный <br>HTML-вариант строки, а вторые выполняют некоторые действия над содержимым строки. <br>Методы, возвращающие HTML-отформатированные варианты строк, возвращают строки, заключенные в открывающий и закрывающий теги определяемого методом элемента HTML. Например, следующий оператор вставляет в страницу <br>HTML гиперсвязь с ресурсом, расположенным по адресу, задаваемому параметром метода link строки: document.write(s.link("http://www.altavista.com")); <br>В документе отобразится содержимое строкового объекта s, представленное как гиперссылка на ресурс, заданный параметром метода. <br><b>Методы объекта String <br>anchor(name) <br>Возвращает строку, заключенную в теги HTML <br><a> и , и устанавливает атрибут name элемента A равным значению параметра name. big() <br>Возвращает строку, заключенную в теги HTML <br> <div> <br>53 <br><BIG> и . blink() <br>Возвращает строку, заключенную в теги HTML <br><BLINK> и . bold() <br>Возвращает строку, заключенную в теги HTML <br><b> и . fixed() <br>Возвращает строку, заключенную в теги HTML <br><TT> и . fontcolor(colorValue) <br>Возвращает строку, заключенную в теги HTML и , и устанавливает атрибут <br>COLOR этого тега равным значению параметра colorValue. fontSize(sizeValue) <br>Возвращает строку, заключенную в теги HTML и , и устанавливает атрибут <br>SIZE равным значению параметра sizeValue. italics() <br>Возвращает строку, заключенную в теги HTML <br><i> и . link(href) <br>Возвращает строку, заключенную в теги HTML <br><a> и , и устанавливает атрибут HREF элемента A равным значению параметра href. small() <br>Возвращает строку, заключенную в теги HTML <br><SMALL> и . strike() <br>Возвращает строку, заключенную в теги HTML <br><STRIKE> и . sub() <br>Возвращает строку, заключенную в теги HTML <br><sub> и . sup() <br>Возвращает строку, заключенную в теги HTML <br><sup> и . charAt(index) <br>Возвращает символ, находящийся на указанном месте (с индексом равным index) в строке. Индексы начинаются с 0. charCodeAt(index) <br>Возвращает код символа <br>(Unicode), расположенного на указанном месте (с индексом равным index) в строке. Если в строке нет символа с указанным индексом, возвращается значение NaN. Индексы в строке начинаются с 0. concat(string2) <br>Возвращает строку, представляющую собой <br> <div> <br>54 результат объединения двух строк. <br>String.fromCharCode( char1,char2,...) <br>Возвращает строку, составленную из указанных символов, заданных кодом Unicode. <br>Количество параметров не ограничено. indexOf(substring, startindex) <br>Возвращает целое число – позицию первого вхождения подстроки substring в строку, начиная с позиции startindex. Если такой подстроки не найдено, возвращает –1. lastIndexOf(substring, startindex) <br>Возвращает целое число – позицию последнего вхождения подстроки substring в строку, начиная с позиции startindex. Если такой подстроки не найдено, возвращает –1. localCompare(string) <br>Сравнение строк в соответствии с локальными языковыми установками: -1 строка раньше параметра, 1 наоборот и 0 строки равны. match(regExpression) <br>Возвращает массив, состоящий из символов, соответствующих регулярному выражению regExpression. replace(regExpr, replaceString) <br>Возвращает строку, в которой фрагменты исходной строки, соответствующие образцу регулярного выражения regExpression, заменены на строку replaceString. search(regExpression) <br>Возвращает позицию первой подстроки, соответствующей регулярному выражению. <br>Если такая строка не найдена, то возвращает <br>-1. slice(start[, end]) <br>Возвращает часть строки, начиная с позиции start и заканчивая позицией end. Если аргумент end отсутствует, то возвращается строка от start до самого конца. split(separator) <br>Возвращает массив строк, созданный из подстрок, разделенных разделителем separator<br>Разделитель также может являться регулярным выражением. substr(start <br> [,length]) <br>Возвращает <a href="/reshenie-1-v10/index.html" title="Решение. 1">подстроку данной строки, которая начинается с символа в позиции start и имеет указанную длину length. Если длина не указана, то возвращается вся строка, начиная с позиции start. Если позиция символа превосходит число символов в строке, <br> <div> <br>55 то возвращается пустая строка. substring(start, end) <br>Возвращает подстроку данной строки, заданной начальной и конечной позициями. <br>Наименьшее из двух заданных значений используется в качестве начальной позиции выделяемой подстроки. <br>Если начальная позиция превосходит число символов в строке, то возвращается пустая строка. toLowerCase() <br>Возвращает строку, в которой все буквенные символы преобразованы в строчные. toUpperCase() <br>Возвращает строку, в которой все буквенные символы преобразованы в прописные. toString() <br>Преобразует объект в строку. <br><b>Объект Function <br>Любая функция в JavaScript является объектом типа Function. Создать функцию можно не только конструкцией function, но и с помощью конструктора Function: var имя_функции = new Function([argname1, [... argnameN,]] тело_функции) <br>Все параметры являются строками. Сначала определяется список формальных параметров, а потом строка, содержащая операторы тела функции. <br>Пример задания функции с одним числовым параметром, возвращающей произведение этого числа на число π: var nPI = new Function("n", <br>"if(typeof n != 'number'){l=null}else{l= n*Math.PI};return l;"); <br>// вызов объявленной функции nPI nPI(56); <br>В JavaScript часто используется тот факт, что функция является объектом. Если вспомнить вызов метода сортировки массива, то, по-существу, параметром в нем является ссылка на функцию. Так что избегайте записывать вызов функции (или метода объекта) без круглых скобок. В JavaScript запись "вызова" функции без круглых скобок не является синтаксической ошибкой, но всего лишь ссылка на объект Function, которая часто используется для задания функции обработки событий объектов, соответствующих элементам HTML отображаемого в браузере документа. <br><b><span id='Свойства_объекта_Function'>Свойства объекта Function аrguments <br>Объект, хранящий переданные в функцию фактические параметры. Он не является массивом, но доступ к хранящимся в нем фактическим параметрам осуществляется как к элементу <br> <div> <br>56 массива с использованием целочисленного индекса, который изменяется от нуля и далее. caller <br>Возвращает ссылку на объект Function, представляющий функцию, вызвавшую исходную. Если свойство имеет значение null<br>, то функция вызвана из верхнего уровня сценария, а не из другой функции. callee <br>Возвращает ссылку на саму себя. Является свойством объекта arguments функции, а не самой функции. length <br>Возвращает количество обязательных параметров, которые следует передавать в функцию при ее вызове, т. е. тех параметров, которые определены в объявлении функции. <br>Все свойства объекта Function становятся доступными только тогда, когда функция, определяемая этим объектом, выполняется. Поэтому доступ к ним возможен только из тела функции. <br>Следующая функция проверяет количество переданных в нее при вызове фактических параметров и возвращает строку, содержащую требуемое количество обязательных параметров и количество фактически параметров было в нее передано. function ArgTest(a, b){ var i, s = "Обязательных параметров "; var numargs = ArgTest.arguments.length; var expargs = ArgTest.length; s += expargs + ". Передано " + numargs + "."; return(s); <br>} <br><b>Объект Boolean <br>Является объектным интерфейсом для типа данных Boolean. Создается неявным образом, когда булевый тип преобразуется к объекту, но может быть создан явно с помощью конструктора Boolean(): var b = new Boolean([параметр]); <br>В <a href="/zanyatie-po-teme-podbor-parametra-i-optimizaciya-poisk-resheni/index.html" title="Занятие по теме: «Подбор параметра и оптимизация (поиск решений) в Excel»">случае отсутствия параметра, или если он равен 0, NaN, false, null или пустой строке "", значение объекта есть ложь, иначе истина. <br>Объект Boolean используется достаточно редко. <br><b>Объект Number <br>Является объектным интерфейсом для числового типа данных. Создается неявным образом, когда числовой тип преобразуется к объекту, но может быть создан явно с помощью конструктора Number(): var b = new Number(числовое_значение); <br><b>Свойства объекта Number <br> <div> <br>57 <br>NaN <br>Специальное числовое значение, указывающее на то, что вычисление арифметического выражения не привело к числовому результату. <br>MAX_VALUE, <br>MIN_VALUE <br>Максимальное число и минимальное число, представимые в JavaScript. <br>POSITIVE_INFINITY, <br>NEGATIVE_INFINITY <br>Положительная и отрицательная бесконечность <br>(бесконечно большие числа). <br>Для получения значения указанных свойств не надо создавать объекта Number, а непосредственно обращаться к имени конструктора объекта (аналоги свойств класса в языках С++ и Java): <br>Number.NaN <br>Number.MAX_VALUE <br><b>Методы объекта Number toExponential(точность) <br>Возвращает строку, представляющую экспоненциальную форму числа с заданным количеством цифр в дробной части. toFixed(точность) <br>Возвращает строку, представляющую число в форме с фиксированной точкой с заданным количеством цифр в дробной части. toPrecision(точность) <br>Возвращает строку, представляющую число в форме с фиксированной точкой с заданным количеством цифр мантиссе. <br>Число 1760/7, хранящееся в переменной a, методом a.toExponential(10) преобразуется в строку 2.5142857143e+2 a.toFixed(10) преобразуется в строку 251.4285714286 a.toPrecision(10) преобразуется в строку 251.4285714 <br>Объект Number используется достаточно редко. <br><b>Упражнения <br>1. Стек — динамическая структура, строящаяся по принципу "последним пришел первым ушел". Ее можно сравнить со стопкой тарелок — чтобы взять нижнюю тарелку (она была самой первой тарелкой в растущей стопке), следует поочередно снять все позже поставленные тарелки. Самая последняя добавленная в стопку тарелку в то же время является и самой первой, до которой возможен доступ. <br>Реализуйте стек с помощью массива JavaScript, написав четыре функции — создание стека, помещение в него элемента, извлечение последнего добавленного элемента и извлечение <i>к-ого элемента стека. Реализовать два варианта — стек "растет" от конца массива (первый элемент стека хранится в первом элементе массива) и стек "растет" от начала массива (первый элемент стека хранится в последнем элементе массива). <br> <div> <br>58 2. Отсортировать массив, хранящий строковые значения, по возрастанию количества символов в элементах. Элементы, содержащие строки с одинаковым числом символов сортировать в лексикографическом (алфавитном) порядке. <br>Сделать то же самое, но по убыванию, причем элементы со строками одинаковой длины сортировать в обратном лексикографическом порядке. <br>3.Для трехмерного массива разработать функцию получения его произвольных сечений (двумерных и одномерных). Под сечением многомерного массива понимается массив меньшей размерности, являющейся подструктурой исходного. <br>Например, в двумерном массиве можно выделить одномерные подструктуры строк и столбцов, в трехмерном двумерные плоскости и одномерные строки. <br>4. Отобразить на странице HTML календарь на текущий месяц в виде следующей таблицы: ноябрь <br>Пн <br>3 10 17 24 <br>Вт <br>4 11 18 25 <br>Ср <br>5 12 19 26 <br>Чт <br>6 13 20 27 <br>Пт <br>7 14 21 28 <br>Сб 1 8 15 22 29 <br>Вс 2 9 16 23 30 5. Разработать функцию, подсчитывающую количество вхождений подстроки в заданную строку. Например, подстрока "qr" входит два раза в строку "qrqqr", а подстрока "q" три раза. Для ввода строки и подстроки использовать однострочное текстовое поле формы; для вывода количество вхождений также однострочное текстовое поле. Вызов функции подсчета осуществляется нажатием кнопки формы. <br>6. Отобразить таблицу значений функции exp(x) на интервале [0,5] с шагом 0,5. <br>Значения функции должны отображаться с пятью знаками после запятой. <br><b><span id='Урок_8_Встроенные_объекты_(2)_Объект_Object'>Урок 8 Встроенные объекты (2) <br><b>Объект Object <br>Расположен во главе всей иерархии объектов JavaScript. Любой объект JavaScript является наследует все его свойства и методы. Для создания объекта Object используется конструктор Object() с единственным необязательным параметром: var obj = new Object([значение]) <br>Если параметр конструктора не задан, то создается объект без значения. Если же он задан, то может быть любым из поддерживаемых JavaScript типов данных — <br> <div> <br>59 числовым, булевым или строковым. Если этот параметр является объектом, то возвращается неизмененным этот же объект (свойство constructor возвращает ссылку на конструктор объекта, а вот операция typeof будет возвращать строку "object"<br>, а не строку с типом объекта-параметра). Значения null и undefined этого параметра приводят к созданию объекта без содержимого. <br><b><span id='Свойства_объекта_Object'>Свойства объекта Object <br>constructor <br>Хранит ссылку на функцию-конструктор, с помощью которой создан экземпляр объекта. prototype <br>Возвращает ссылку на прототип класса объектов. Изменять прототип встроенных объектов нельзя, тогда как пользовательских можно. Это свойство "класса", а не экземпляра, поэтому оно применяется не к экземпляру объекта, а к его конструктору Object. propertyIsEnumerable(имя) <br>Логическое свойство, возвращающее true<br>, если указанное в качестве параметра свойство объекта существует и доступно при переборе свойств в цикле for...in. <br>Используя свойство constructor, которое наследуется также и всеми объектами JavaScript, можно проверить его принадлежность классу объектов. <br>Сравнивать значение этого свойства надо с конструктором соответствующего объекта (просто имя конструктора). Для пользовательского объекта этим именем является имя соответствующей функции-конструктора (см. урок 9), а для встроенных объектов следующие ключевые слова — String, Date, Function, <br>Array, Boolean, Number, Object: var str = "xxxxxx"; var obj = new Object(); <br>(str.constructor == String) ? true : false; // true <br>(obj.constructor == String) ? true : false; // false <br>(obj.constructor == Object) ? true : false; // true <br>Свойство prototype позволяет добавлять свойства и методы к "классу" объектов. Оно наследуется также каждым объектом JavaScript (пользовательским или встроенным кроме объектов Global и Math). После добавления свойств и методов к прототипу создание объектов этого класса приводит к тому, что у всех объектов будут существовать добавленные свойства и методы. Так как все объекты "происходят" от объекта Object, то добавление свойств и методов к его прототипу приводит к созданию соответствующих свойств и методов у всех объектов JavaScript. <br><br><b><span id='Пример_10._Добавление_свойств_и_методов_ко_всем_объектам'>Пример 10. Добавление свойств и методов ко всем объектам <br> <div> <br>60 <br>Добавим к прототипу объекта Object метод, возвращающий строку с названиями и значениями всех свойств объекта. <br>Для этого прежде всего создадим функцию props(), выполняющую указанное действие. В JavaScript есть специальный цикл for...in, который предназначен для просмотра всех свойств объекта (встроенного или пользовательского). На каждом шаге цикла его переменная хранит имя свойства, а доступ к значению этого свойства можно получить, выполнив для объекта операцию индексации со строковым индексом, равным имени свойства. Например, к свойству constructor объекта obj класса Object можно обратиться не только с использованием точечной нотации obj.constructor, но и с помощью индекса "constructor" следующим образом obj["constructor"]. <br>(Это справедливо для любого объекта JavaScript.) function props() { var s = "" for(var i in this){ s += i + ': ' + this[i] + '<br>'; <br> } return s; <br>} <br>Здесь следует, забегая вперед, пояснить использование ключевого слова this в функциях JavaScript. Оно используется исключительно в функциях, реализующих методы объектов, и имеет смысл "этот объект". Когда добавляется новый метод к прототипу встроенного объекта, то в реализующей его функции следует каким-то образом ссылаться на экземпляр объекта, который впоследствии будет создан. <br>Именно ключевое слово this и реализует эту функциональность. Поэтому в нашей функции props() цикл будет осуществляться по всем свойствам экземпляра объекта, ассоциированный с этой функцией метод которого будет вызываться. А конструкция this[i] будет возвращать значение очередного свойства этого объекта. <br>Теперь остается добавить новое свойство к прототипу объектов класса Object. <br>Назовем его propList и присвоим ему ссылку на функцию props(): <br>Object.prototype.propList = props; <br>Обращаем внимание, что присваивается ссылка props на объект Function, а не вызов функции props()! <br>Создадим объект String: var s = "*********"; <br>Теперь он имеет метод propList(), и следующий оператор распечатает все свойства объекта s с их значениями в окне браузера: document.write(s.propList()) <br> <div> <br>61 <br>Внимание! Метод propList() вызывается как обычная функция. Если бы для выполнения реализующей его функции props() требовались параметры, то их следовало бы передать при вызове метода propList() объекта s. <br><br>Не все свойства объектов могут быть перечислены в цикле for...in. Для проверки доступности свойства в указанном цикле у объекта Object (и, естественно, у всех объектов JavaScript) есть логическое свойство propertyIsEnumerable(имя)<br>, определяющее доступность свойства в цикле for...in. Имя свойства передается как строка. Исключение — свойства массива, представляющие собой индексы эго элементов. В этом случае имя может быть передано в свойство propertyIsEnumerable как число, и как строка, содержащая число. Заметим, что все добавляемые пользователем к встроенным объектам свойства являются перечисляемые, тогда как их собственные встроенные свойства не все могут быть перечисляемыми. <br><b>Методы объекта Object <br>toString <br>Возвращает строку, представляющую заданный объект. valueOf <br>Возвращает примитивное значение заданного объекта. <br><b><span id='Стандартные_функции_верхнего_уровня_(объект_Global)'>Стандартные функции верхнего уровня (объект Global) <br>Объект Global создается автоматически и все его свойства и методы доступны как свойств и методы класса с одним исключением — не надо указывать имя класса, более того в JavaScript классическая конструкция вызова или обращения к свойству класса, например Global.Infinity, приведет к ошибке во время выполнения. <br><b>Свойства объекта Global <br>Infinity <br>Специальное числовое значение, эквивалентное бесконечности. <br>NaN <br>Специальное числовое значение, соответствующее "не числу". undefined <br>Неопределенное значение, которое имеет любая объявленная оператором var переменная пока ей не было присвоено никакого значения. <br><b>Методы объекта Global parseFloat(строка) <br>Анализирует значение переданного ей строкового параметра на соответствие представлению вещественного числа в JavaScript. Если в строке при последовательном просмотре обнаруживается символ, отличный от символов, применяемых для формирования вещественных литералов (знаки + и -, десятичные цифры, точка и символы (е) или <br>(Е)), то она игнорирует оставшуюся часть строки и возвращает то числовое значение, которое ею <br> <div> <br>62 обнаружено до неправильного символа. Если первый символ в строке не является цифрой, она возвращает значение NaN. parseInt(строка, <br>[основание]) <br>Пытается выделить из строки, начиная с первого символа, целое число по заданному вторым параметром основанию. Если первый символ в строке не является цифрой, соответствующей системе с основанием, указанным вторым параметром, она также возвращает значение NaN. isNaN(параметр) <br>Тестирует значение своего параметра на соответствие нечисловому значению. Если ее <a href="/rasskaz-m-samarskogo-sirota/index.html" title="Рассказ М. Самарского «Сирота»">параметр действительно оказывается не числом, она возвращает true, в противном случае false. isFinite(значение) <br>Определяет, является ли указанное значение конечным числом. Если значение не равно положительной или отрицательной бесконечности и не является NaN, то этот метод возвращает true. eval(строка) <br>Анализирует содержание строки и выполняет содержащийся в ней код JavaScript. Обеспечивает возможность динамического выполнения кода. escape(строка) <br>Кодирует строку в формат Unicode, преобразуя все пробелы, знаки препинания, символы с надстрочными знаками и некоторые другие символы в %xx (хх является шестнадцатеричным номер символа в таблице кодов ASCII), символы с номером больше 255 преобразуются в %uxxxx, где xxxx является кодом символа в формате <br>Unicode. unescape(строка) <br>Декодирует строку, закодированную функцией escape. encodeURI(URIстрока) <br>Кодирует текстовую строку таким образом, чтобы она представляла собой адрес URI, который можно передавать по сети в запросе к серверу <br>(выполняет так называемое URL-кодирование). <br>Символы :, ;, / и ? не кодируются. decodeURI(URIстрока) <br>Декодирует строку, закодированную функцией encodeURI. encodeURIComponent <br>(URIстрока) <br>В отличие от encodeURI кодирует и символы, используемые в адресе URI, т. е. выполняет полное <br>URL-кодирование адреса, включая <br> <div> <br>63 символы :, ;, / и ?. decodeURIComponent <br>(URIстрока) <br>Декодирует строку, закодированную функцией encodeURIComponent. <br>Функции parseFloat() и parseInt() полезны для преобразования в числовые значения данных, вводимых пользователем в текстовых полях формы, а также для преобразования значений свойств каскадных таблиц стилей элементов, если они используются в вычислениях, так как эти большинство числовых значений этих свойств хранятся в виде строки, содержащей число с размерностью, например, "100px". <br>Функция eval() полезна, когда, например, пользователь вводит в сценарий строку, представляющую код JavaScript, и ее следует интерпретировать в сценарии (см. упражнение 6). <br>Функции escape() и unescape() нельзя использовать для URL-кодирования и декодирования строки запроса клиента. Для этих целей следует использовать функции encodeURI() и decodeURI(), а также encodeURIComponent() и decodeURIComponent() (см. упражнение 7). <br><b><span id='Манипулирование_объектами'>Манипулирование объектами <br>Для работы с объектами в JavaScript предназначены два оператора. С одним из них мы познакомились в примере 10 — цикл по свойствам объекта: for( переменная_цикла in объект) { <br>[операторы] <br>} <br>Этот цикл осуществляет перебор всех свойств объекта. В переменной цикла на каждой итерации сохраняется название свойства объекта. Значение свойства объекта можно получить с помощью конструкции объект[имя_свойства] <br>Количество итераций равно количеству перечисляемых свойств, существующих у заданного в заголовке цикла объекта. <br><br><b><span id='Пример_11._Перечисление_свойства_объекта_HTML'>Пример 11. Перечисление свойства объекта HTML <br>Для обеспечения возможности доступа в сценарии к элементу HTML отображаемого в браузере документа с помощью объекта в язык HTML была добавлена возможность идентификации любого элемента страницы с помощью атрибута id. Его значением является алфавитно-цифровой идентификатор, начинающийся с буквы. По этому имени в сценарии JavaScript можно получить ссылку на объект, соответствующий указанному элементу HTML. В Internet <br>Explorer для этого достаточно указать это имя и автоматически ссылка будет получена. После чего можно получать или изменять значения свойств этого объекта, обычно соответствующих атрибутам элемента HTML, соответствующего этому объекту. Однако у всех объектов есть свойства, которые не соответствуют <br> <div> <br>64 никаким атрибутам. Эти свойства реализованы в соответствии с используемой в браузере объектной моделью документа. <br>В представленном ниже сценарии при щелчке на кнопке Свойства абзаца вызывается функция properties(), в которую передается ссылка на объект par1, соответствующий абзацу страницы HTML. Эта функция возвращает строку с названиями и значениями всех свойств объекта, соответствующего абзацу с атрибутом id=par1, которая отображается на странице HTML. <br><body> <br>Получить в сценарии доступ к объекту, соответствующему какому-нибудь элементу HTML страницы, можно с помощью значений его атрибутов <b>id или <b>name. <br><input type=button value="Свойства абзаца" onclick="document.write(properties(par1))"> <br><div> <br>65 result += id + "." + i + " = " + [i] + "<br>" <br>} <br>Полезно использовать этот оператор для объекта Math. Тогда обращение к его свойствам и методам осуществляется без явного указания префикса Math. <br>Например: with(Math) { r = sin(2.0) // Вычисление синуса l = 2*PI*r // Вычисление длины окружности <br>} <br><b>Обработка ошибок <br>При выполнении сценария могут возникать ошибки. Браузер Internet Explorer отображает их либо в диалоговом окне: <br>Это окно появляется тогда, когда в браузере установлен режим уведомления об ошибках сценария и запрещена их отладка на вкладке <b>Дополнительно окна его свойств: <br>Если в этом окне сброшен флажок Запретить отладку сценариев, то появляется диалоговое окно следующего вида, предлагающее выполнить отладку сценария с помощью какой-либо специальной программы: <br> <div> <br>66 <br>Если ответить <b>Да, то браузер предложит в диалоговом окне <b>Just-In-Time <br><b>Debugging выбрать программу отладки: <br>Возможна ситуация, когда в сценарии потребуется перехватить непредвиденные ошибки, возникающие во время выполнения, дабы предотвратить появление диалогового окна об ошибке. Для этого в JavaScript имеется достаточно простой механизм, реализуемый оператором try...catch...finally: try{ <br>// Код, в котором могут содержаться ошибки <br>} catch(e){ <br>// Обработчик ошибки <br>} finally{ <br>// всегда выполняемый код <br>} <br>Код сценария с потенциальными ошибками заключается в блок try. Если при выполнении кода возникают ошибки, то диалоговое окно браузера не появляется, а управление передается блоку catch, в котором и обрабатываются все ошибки. <br>Переменная е (произвольный идентификатор) в блоке catch будет содержать ссылку на объект Error, хранящий информацию об ошибке. Код блока finally выполняется всегда — возникла или не возникла ошибка. <br>У объекта Error имеется четыре свойства: <br> <div> <br>67 <br><b><span id='Свойство_Описание'>Свойство <br><b>Описание <br>name <br>Название ошибки (только чтение). message <br>Сообщение ошибки (только чтение). description <br>Описание ошибки. number <br>Содержит 32-битный код ошибки. Старшие два байта (для их выделения воспользуйтесь операцией e.number>>16 & 0x1FFF<br>) содержат вспомогательный код, младшие (для их выделения воспользуйтесь операцией e.number & 0xFFFF<br>) код ошибки. <br><br><b><span id='Пример_12._Обработка_ошибок_При_загрузке_следующей_страницы_сценарий_отображает_диалоговое_окно_с_подтверждением_распечатать_свойства_объекта-абзаца_par1._Если_пользователь_отвечает_Да'>Пример 12. Обработка ошибок <br>При загрузке следующей страницы сценарий отображает диалоговое окно с подтверждением распечатать свойства объекта-абзаца par1. Если пользователь отвечает <b>Да, то возникает ошибка, так как к тому времени, когда в сценарии будет выполняться обращение к объекту par1, он еще не будет создан — тело документа к этому моменту еще не обработано. <br>Оператор if сценария заключен в блок try. Поэтому управление будет передано в блок catch, в котором будут распечатаны свойства сгенерированного объекта <br>Error — переменная e. При этом обязательно выполнится оператор блока finally. <br>Если пользователь отвечает <b>Нет, то ошибки не возникает, так как не будет обращения к объекту par1, операторы блока catch выполняться не будут, но блока finally выполнится обязательно. <br><script> reply = confirm("Распечатать содержимое абзаца par1?") try{ if(reply){ alert(par1.innerText); <br> } <br> }catch(e){ alert("Название ошибки: "+e.name + "\n"+ <br> "Сообщение ошибки: "+e.message + "\n"+ <br> "32-битный код ошибки: "+e.number+"\n"+ <br> "Вспомогательный код ошибки: "+ <br> (e.number>>16 & 0x1FFF) +"\n" + <br> "Истинный код ошибки: "+ <br> (e.number & 0xFFFF) +"\n" + <br> "Описание ошибки: "+e.description) <br> }finally{ <br> <div> <br>68 alert("Код блока finally выполняется всегда!") <br> } <br> Абзац с атрибутом id='par1'. 69 err.number = 801 err.description = "Не задан второй параметр."; // Генерирование ошибки throw err break; } // Возвращаемое значение функции return x+y; } // Обращение к функции add() с обработкой возможной ошибки try{ // функция add() сгенерирует ошибку с номером 801 alert(add(5)) } catch(e){ alert(e.description+"\n"+e.number) } Упражнения 1. Добавить метод propList() (пример 10) к прототипу объекта Object, а также добавить к прототипу этого же объекта свойство list со значением "Добавленное к прототипу Object". Проверить на объектах String, Date, Number, Function, Array, Boolean, действительно ли будут добавляться к экземплярам указанных объектов добавленные к прототипу объекта Object метод и свойство. 2. Добавить к прототипу объекта Array метод вычисления максимального элемента массива и посмотреть его работу на экземплярах объектов этого типа, содержащими только числовые элементы, только строковые и смешанные (числа и строки). 3. Создать массив, элементы которого хранят ссылки на все 6 типов встроенных объектов JavaScript. Случайным образом "перемешать" его элементы. После этого распечатать отчет о том, какие объекты хранятся в его элементах, начиная с первого. 70 4. Реализовать нижеприведенный сценарий. Проверить доступность свойств 0, 1, 2, 3 массива. Объяснить результаты. Поэкспериментировать с другими типами встроенных объектов. var a = new Array("apple", "banana", "cactus"); a["q"] = 9 document.write(a.propertyIsEnumerable("q")) 5. Отобразить на странице HTML таблицу, показывающую результаты выполнения методов toString и valueOf всех встроенных объектов JavaScript. 6. Разработать страницу HTML со встроенным сценарием, который получает введенный пользователем код JavaScript в текстовом поле страницы и выполняет его. Получить строку из текстового поля страницы HTML можно, используя свойство value объекта с идентификатором, равным значению атрибута name текстового поля fromText = txt1.value Интерпретацию строки можно организовать, используя кнопку 7. Написать сценарий, который кодирует строку, содержащую все небуквенные символы клавиатуры тремя возможными способами и отобразить результаты в виде таблицы: Символ escape encodeURI encodeURIComponent %20 %20 %20 ` %60 %60 %60 %7E ! %21 ! ! @ @ @ %40 # %23 # %23 Урок 9. Создание собственных объектов Объектная модель JavaScript отличается от объектных моделей других объектно- ориентированных языков тем, что в ней объекты создаются на основе прототипов. Для создания объектов в JavaScript можно использовать объектный литерал или специальным образом написанную функцию — конструктор объекта. 71 Объектный литерал представляет собой заданную в фигурных скобках последовательность свойств объекта и их значений. Свойства и значения задаются парами, разделенными символом :. Таким образом, объектный литерал имеет следующий синтаксис: {prop1:value1, ..., propN:valueN} Значением свойства может быть любой поддерживаемый JavaScript тип данных, включая объект: var Basil = {name:"Basil",surname: "Ivanoff", university:{name:"PGU",faculty:"AM",cours:5}} В качестве значения может снова выступать объектный литерал. В этом случае "точечная" нотация может быть продолжена для получения соответствующего свойства объекта, являющегося свойством созданного объекта. alert(Basil.university.name) Если в качестве значения свойства указывается ссылка на объект-функцию, то такое свойство на самом деле является методом создаваемого объекта: var Cat = {name:"Mourik", color:"red", voice:mew}; function mew(){ alert("mew... mew...") } Вызов метода осуществляется по всем правилам вызова функций JavaScript — указывается имя метода и при необходимости передаются ему фактические параметры: Cat.voice(); Но реально будет вызвана и выполнена функция, реализующая указанный метод (в нашем примере mew()). Второй способ позволяет быстро создавать экземпляры объекта определенного типа через специальную функцию-конструктор. Если с помощью объектного литерала мы непосредственно создаем экземпляр объекта и сохраняем в некоторой переменной ссылку на него, то здесь мы сначала "описываем" в конструкторе его свойства и методы, а потом операцией new создаем экземпляры этого типа объекта: // Объявление конструктора function CatWithoutOwner(sName, sColor) { this.name = sName this.color = sColor } // Создание экземпляра myCat = new CatWithoutOwner("Mourik", "red") Ключевое слово this в конструкторе предназначено для ссылки на конкретный экземпляр объекта, создаваемый операцией new. (Если в функции используется ключевое слово this, то это обязательно конструктор объекта.) Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами: 72 // Конструктор объекта person function person(name, age) { this.name = name this.age = age } // создаем экземпляр объекта person alex = new person("Alex", 50) // Конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner } // Создает экземпляр объекта CatWithOwner cat = new CatWithOwner("Mourik", "red", alex) // Отображаем имя владельца alert(cat.owner.name) Отличительной особенностью объектной модели JavaScript является то, что после создания экземпляра объекта к нему можно добавлять новые свойства и методы, которые будут присущи только этому конкретному экземпляру. Для этого достаточно в точечной нотации указать имя нового свойства и присвоить ему значение: cat.age = 6; cat.voice = mew Теперь у объекта cat появилось свойство age и метод voice, но только у этого объекта. Создаваемые конструктором CatWithOwner() объекты не будут иметь указанных свойства и метода. Но в JavaScript можно (после написания конструктора) в любой момент (чтобы не менять конструктор) добавить свойства и метолы непосредственно к объектному типу. Это приведет к тому, что создаваемые после этого экземпляры объектов с помощью того же конструктора будут обладать добавленными свойствами и методами. Для этих целей используется свойство prototype "объектного типа", совпадающего с именем конструктора: CatWithOwner.prototype.age = null CatWithOwner.prototype.voice = mew // теперь создаем экземпляр var cat1 = new CatWithOwner("Mourik", "red", alex) // у него есть свойство age (значение null) // и метод voice() alert(cat1.age); cat1.voice(); 73 // можем изменить значение свойства age cat1.age = "red" В конструкторе объекта вместо имен свойств (да и методов) можно использовать индексы: function CatWithOwner(sName, sColor, sOwner) { this[1] = sName this[2] = sColor this.owner = sOwner } cat1 = new CatWithOwner("Mourik", "black", alex) Теперь к свойствам, соответствующим имени и цвету, можно обращаться по индексу: alert(cat1[1]) Индексацию можно использовать и при доступе к свойствам, определенным с помощью имени, но в этом случае в качестве индекса берется строка с именем свойства: alert(cat1["owner"]) Для определения методов объекта в конструкторе следуем по схеме, аналогичной определению методов объекта в его конструкторе — определяем свойство, имеющее значением ссылку на функцию, реализующую создаваемый метод: function who() { var result = "Кот " + this.name + ",\nвладелец которого" + this.owner.name return result } // Новый конструктор объекта CatWithOwner function CatWithOwner(sName, sColor, sOwner) { this.name = sName this.color = sColor this.owner = sOwner this.whose = who } // Новый кот var cat2 = new CatWithOwner(); // Чей это кот alert(cat2.who()) В JavaScript не предусмотрено операции удаления объектов из памяти — они все удаляются либо по завершению работы сценария (закрытие страницы HTML в браузере), либо по завершению работы функции, в которой были созданы локальные объекты. 74 Существует операция delete, позволяющая удалить свойство объекта или элемента массива. Удалять можно только свойства созданных пользователем собственных объектов или свойства встроенных объектов, которые пользователь к ним добавил: myobj = new Number(); myoj["prop"] = "*********" delete myobj.prop В завершение рассказа о пользовательских объекта, в конструкторах которых применялось ключевое слово this для создания ссылки на текущий экземпляр объекта, напомним еще об одном случае использования этого ключевого слова. Его можно использовать в коде обработчика события элемента HTML для ссылки на объект, соответствующий этому элементу HTML: Здесь ключевое слово this ссылается на поле ввода и ссылка на него передается в функцию validate(), вызываемую при возникновении события изменения содержимого этого поля. Упражнения 1. Создать массив на основе объекта Object. Посмотреть, если у него свойство length, присущее массивам, созданным с помощью объекта Array. 2. Распечатать свойство constructor для всех известных объектов JavaScript. С помощью свойства prototype объекта Object для всех создаваемых в сценарии объектов добавить метод propertiesList(), возвращающий массив, содержащий названия всех свойств объекта и их значения. 3. Разработать объект Collection, позволяющий хранить и выбирать любые объекты JavaScript с использованием строкового ключа. Реализовать методы этого объекта: add(ключ, объект) — добавление объекта в семейство Collection, remove(ключ) — удаление объекта, count() — возвращает количество объектов в семействе, item(ключ) — возвращает объект по значению его ключа.

Привет!

Привет!

Пример 2.4: Раскрывающийся список

Привет!


Это учебная страница HTML.

100
При загрузке документа вызывается функция listOfAllElements(), которая в двух циклах просматривает семейство all объекта document и отображает диалоговое окно со всеми элементами HTML страницы.
Отметим, что по второму способу первым "объектом" семейства будет ссылка на свойство length семейства.

Иногда необходимо из всего множества объектов страницы выделить подмножество объектов, соответствующих некоторому типу элементов HTML. На странице обычно содержится несколько заголовков, например, первого уровня. В семействе all они расположены вперемежку с остальными объектами, но если необходимо выделить их из всего множества элементов, то подобную операцию можно осуществить, используя метод tags()семейства all:

Пример 24. Изменение цвета шрифта всех абзацев страницы
var paragraphs = document.all.tags('P') for (i=0; i < paragraphs.length; i++) paragraphs[i].style.color = 'blue';

Метод tags() возвращает семейство, хранящее ссылки на все элементы с указанным в качестве параметра именем тега. В дальнейшем работа со вновь созданным семейством осуществляется обычным способом.
Свойства и методы объектов
Большинство свойств объектов соответствуют атрибутам представляемых ими элементов HTML документа и имеют такие же имена, что и имена атрибутов. В сценарии можно получить значения интересующих атрибутов элемента или, наоборот, изменить их установку. Динамическое изменение свойств объектов, и, соответственно, представляемых ими элементов HTML, является основной концепцией динамического HTML.
Имена некоторых свойств объектов отличаются от имен атрибутов, но обычно достаточно близки к именам представляемых атрибутов. Например, свойство className соответствует атрибуту CLASS. Подобное несоответствие связано, в основном, с именами атрибутов, которые могут конфликтовать с зарезервированными ключевыми словами основных языков сценариев.
Некоторые свойства не соответствуют никаким атрибутам тегов. Эти свойства предоставляют дополнительную информацию об элементе и обычно являются свойствами только для чтения. С одним из подобных свойств мы уже знакомы.
Свойство tagName не соответствует никакому атрибуту и предоставляет информацию о типе тега элемента. Другим примером является свойство sourceIndex
, значением которого является индекс элемента в семействе all.


101
Некоторые свойства объектов доступны только для чтения. Это означает, что можно получить их значение, но нельзя изменить. Примером подобного свойства является свойство tagName, представляющее имя тега HTML элемента.
В объектной модели существуют свойства, представляющие целое множество свойств объекта. Они реализованы в виде семейств и к ним применима описанная выше технология работы с любым семейством JavaScript.
Свойство style объекта одно из таких свойств. Оно хранит значения всех свойств каскадных таблицей стилей, установленных для соответствующего элемента. Ключом доступа является имя свойства. Например, обратиться к свойству color какого-либо элемента HTML из сценария JavaScript можно с использованием следующего синтаксиса: ссылка_на_объект.style.color ссылка_на_объект.style['color']
В каскадных таблицах стилей свойства форматирования имеют названия, в которых используется дефис: background-color, margin-top, border- left и т.д. Имя такого свойства в сценарии определяется следующим образом:
1. Убирается из названия свойства дефис (-).
2. Часть имени свойства после дефиса присоединяется к предшествующей части с прописной буквы.
3. Предыдущие два пункта повторяются для всех вхождений дефиса в название свойства.
Например, свойство border-right-width в сценарии JavaScript будет выглядеть borderRightWidth, на свойство background-color можно ссылаться как backgroundColor.
Методы getAttribute(), setAttribute()и removeAttribute() любого элемента HTML позволяют, соответственно, получать, устанавливать значения его атрибутов или удалять их. Для методов getAttribute() и removeAttribute() параметром является строка, задающая имя атрибута, в метод setAttribute() кроме имени атрибута необходимо передать и его значение.
Эти три метода не чувствительны к регистру. Если для установки значения атрибута или для задания его имени важен регистр, то дополнительный, последний параметр, принимающий значения true или false, определяет чувствительность этих методов к регистру.
Выполнить прокрутку большого документа таким образом, чтобы какой-либо элемент HTML появился в окне браузера, можно методом scrollIntoView() этого элемента. Элемент может появиться вверху или внизу окна. Значение единственного параметра этого метода равное true (умалчиваемое значение) отображает элемент в верхней части области отображения, тогда как значение false соответствует отображению элемента в нижней части окна браузера.

102
Например, в следующем фрагменте сценария осуществляется быстрый переход к третьему заголовку первого уровня документа: var myH1=document.all.tags('H1'); if( myH1.length > 0 ) myH1[2].scrollIntoView(true);
Объектная модель позволяет осуществлять доступ к содержимому элементов и даже изменять не только содержимое, но и сами элементы заменять на другие.
Эти действия осуществляются с помощью следующих свойств объектов: innerHTML, innerText, outerHTML и outerText.
Свойства с префиксом inner отвечают за содержимое элемента HTML и позволяют в сценарии или получить его, или динамически заменить на новое, оставляя неизменными теги разметки самого элемента. Свойства с префиксом outer применяются ко всему элементу HTML (вместе с его открывающим и закрывающим тегами) и используются для замены элемента вместе с его содержимым на некоторый новый элемент.
Свойства с суффиксом Text работают с текстовым содержимым элемента HTML с удаленными тегами разметки, тогда как свойства с суффиксом HTML оперируют с размеченным тегами HTML содержимым.
На рисунке скобками отмечены "области влияния" рассмотренных четырех свойств элемента на его содержимое:
Содержимое элемента
innerHTML / innerText outerHTML / outerText
Для элемента P, представленного на рисунке, значением свойства innerText будет строка "Содержимое элемента"
Тогда как для свойства innerHTML строка "Содержимое элемента"
Значение свойства outerText совпадает со значением свойства innerText, а свойство outerHTML хранит полное описание элемента "
Содержимое элемента
"
Изменение в сценарии значений указанных свойств приводит либо к изменению содержимого элемента, либо его полной замене на новый элемент (в случае использования свойства outerHTML). Заметим, что можно задавать значения свойств с суффиксом Text и в виде строки с тегами разметки HTML, но в этом случае теги браузером не интерпретируются, а отображаются как обычный текст.
Методы insertAdjacentText и insertAdjacentHTML
В объектной модели DHTML для каждого элемента предусмотрены два метода, позволяющие добавить перед открывающим тегом (после закрывающего тега)


103 или в начало (конец) содержимого элемента простой текст или текст с разметкой
HTML: insertAdjacentText(положение, текст) insertAdjacentHTML(положение, текст)
Параметр текст является строковым литералом или строковой переменной. Для первого метода он содержит обычный простой текст, а для второго метода текст, размеченный тегами HTML, который интерпретируется браузером.
Параметр положение может принимать одно из следующих значений —
"beforeBegin", "afterBegin", "beforeEnd", "afterEnd". Место вставки текста в соответствии с указанными значениями этого параметра показано на рисунке:
Содержимое элемента
beforeBegin afterBegin afterEnd beforeEnd
Параметр
положение
Для размеченного текста HTML выполняется синтаксический разбор, и он отображается в соответствии с заданным форматированием. При этом корректируется объектная модель документа для отражения внесенного в документ изменения.
Упражнения
1. Разработать страницу для демонстрации возможностей свойств innerText, innerHTML, outerText, outerHTML и методов insertAdjacentText, insertAdjacentHTML. Страница может выглядеть следующим образом:
Страница состоит из абзаца и формы с полями, в которых отображаются значения указанных рядом с ними свойств абзаца. В этих же полях можно задать собственные значения свойств и нажатием расположенной слева соответствующей кнопки Изменить действительно изменить значения указанных свойств абзаца.

104
Для демонстрации работы методов в раскрывающемся списке Куда выбираются значения первого параметра, в поле Что задается второй параметр, а при нажатии на кнопку Вставить выполняется соответствующий метод абзаца.
2. Разработать страницу, текст которой представляет 3 главы книги (каждая глава занимает полторы области отображения браузера). В начале страницы поместить содержание, оформленное в виде гиперссылок. При щелчке на гиперссылке методом scrollIntoView() отобразить начало содержимого соответствующей главы. В конце каждой главы поставить ссылку, возвращающую пользователя на начало документа. Посмотреть действие параметра этого метода.
3. Разработать страницу, добавляющую при щелчке на любом элементе HTML к нему границу, определяемую с помощью свойств каскадных таблиц стилей.
4. Разработать страницу, тестирующую работу методов добавления, изменения и удаления атрибутов абзаца.
5. Разработать страницу, при загрузке которой в отдельном окне браузера отображается ее иерархическая структура DHTML со смещением названий тегов вложенных элементов вида: body p img b i p ul li b li p
Урок 14. Примеры динамических страниц HTML
Раскрывающийся список
Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков.
Поместим на страницу вложенный список:


105

  • > Один
      >
    • A
    • Б

  • Два
  • Три

Список idList составлен из трех элементов
  • и вложенного списка idListOneA
    , который не отображается (его свойство display равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в атрибуте TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов
    (вложенный список не отображается!) с маркерами.
    Чтобы сделать список раскрывающимся, необходимо запрограммировать действия для первого элемента внешнего списка.
    Но сначала запрограммируем изменение цвета этого элемента при наведении на него указателя мыши, чтобы пользователь обратил внимание на их "динамичность". Для этого добавим в его открывающий тег обработчики событий:
    ONMOUSEOVER="flashMe(this,'red')"
    ONMOUSEOUT="flashMe(this,'black')"
    Функция flashMe(), изменяющая цвет шрифта элемента, задается следующим кодом: function flashMe(eSrc, sColor) { eSrc.style.color=sColor
    }
    Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA
    , если он скрыт, и скрывающий его, если он видим:
    ONCLICK="toggleList(this.children[0])"
    При вызове функции для ссылки на вложенный список idListOneA используется конструкция this.children[0]. В ней this ссылается на элемент LI, а он непосредственно порождает единственный вложенный элемент
    — требуемый нам список idListOneA.
    Исходный текст функции toggleList() приведен ниже:

  • 106 function toggleListOneA(eTarget){ eTarget.style.display == "none" ? eTarget.style.display="block": eTarget.style.display="none"; eTarget.style.color = 'black';
    }
    Для того, чтобы раскрывшийся список idListOneA не был красного цвета, как и элемент LI, в который он вложен (свойство color наследуется), в функции toggleList() его цвет устанавливается черным.
    Окончательно исходный текст сценария раскрывающегося списка выглядит так:
    Раскрывающийся список
    1   2   3   4   5   6   7   8   9   10   11

    Пример 2.4: Раскрывающийся список




      107
    • ONMOUSEOVER="flashMe(this,'red')"
      ONMOUSEOUT="flashMe(this,'black')"
      TITLE="Щелкни и раскрой"
      > Один
        NAME="idListOneA"
        >
      • A
      • Б

    • Два
    • Три

      Графический файл item.jpg в свойстве каскадных таблицей стилей item- style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand).
      Раскрывшийся список закроется при щелчке на нем или на элементе LI, в который он вложен, так как в этом случае сработает эффект "всплытие" события.
      Если требуется, чтобы список закрывался только при щелчке на элементе LI, следует добавить в открывающий тег
        списка idListOneA обработчик события ONCLICK с кодом, прекращающим "всплытие" события:
        ONCLICK="window.event.cancelBubble=true"
        Движущийся элемент
        Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. В следующем примере реализовано движение раздела (элемент DIV) по окружности.
        Движущийся раздел текста


        Движущийся элемент


        Динамический HTML позволяет программно менять положение элемента!
        width: 200; background-color: lightsteelblue;">
        Добро пожаловать на страницу динамического HTML!


        109 window с интервалом в 100 миллисекунд вызывается функция move(), которая и реализует перемещение во времени раздела.
        Каждый раз при вызове функции move() изменяется значение параметра уравнений движения и в соответствии с ним определяется новое положение раздела — значения его свойств top и left. Уравнения движения — параметрическое уравнение окружности с центром в точке с координатами (x,y) и радиусом r.
        Метод parseInt() используется в сценариях для выделения целого числа из значения свойств объектов, которые задаются вместе с размерностью. К ним относятся все размерные свойства, соответствующие атрибутам элементов HTML, и свойства каскадных таблиц стилей, задающие размеры и положение.
        Динамическое изменение таблиц
        Пусть в каком-либо документе задана таблица из трех рядов:










        Ячейка 1 первого ряда Ячейка 2 первого ряда
        Ячейка 1 второго ряда Ячейка 2 второго ряда
        Этот ряд перемещаем Этот ряд перемещаем

        Необходимо переместить ее последний ряд на место предшествующего. Для решения этой задачи используются семейства rows объекта table, в котором хранятся ссылки на строки таблицы. У объекта, представляющего строку таблицы, есть семейство cells, хранящее ссылки на все ячейки таблицы.
        Используя свойство innerHTML можно получить или изменить значение любой ячейки таблицы.
        Приведем краткую сводку свойств, семейств и методов объектов, соответствующих элементам HTML, формирующим таблицу.
        Объект table:
        Семейства: all, children, cells, rows
        Методы: deleteRow([rowIndex]) insertRow([rowIndex]) moveRow(rowIndex, targetRowIndex),
        Объект tr:

        110
        Свойство: rowIndex
        Семейства: all, children, cells
        Методы: deleteCell([cellIndex]) insertCell([cellIndex])
        Объект td:
        Свойство: cellIndex
        Семейства: all, children
        Функция, перемещающая последний и предпоследний ряды таблицы, имеет следующий код:
        Перемещение рядов таблицы
        function fncInterchange(row){ var rowMove=row.rowIndex; var rowMove_Cell1=Table.rows[rowMove].cells[0].innerHTML; var rowMove_Cell2=Table.rows[rowMove].cells[1].innerHTML;
        Table.deleteRow(rowMove); rowMove --;
        Table.insertRow(rowMove);
        Table.rows(rowMove).insertCell(0);
        Table.rows(rowMove).insertCell(1);
        Table.rows(rowMove).cells[0].innerHTML+= rowMove_Cell1;
        Table.rows(rowMove).cells[1].innerHTML+= rowMove_Cell2;
        }
        В переменной rowMove сохраняется индекс перемещаемого ряда, передаваемого в качестве параметра. Переменные rowMove_Cell1 и rowMove_Cell1 хранят содержимое двух ячеек перемещаемого ряда. После этих подготовительных действий ряд удаляется методом rowDelete() объекта Table, и в таблицу вставляется новый ряд перед рядом, предшествующим удаленному. Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.
        Родственные отношения
        Объектная модель DHTML раскрывает все родственные отношения, но для некоторых отношений требуется небольшое программирование.
        Определить родителя объекта в объектной модели DHTML можно с помощью свойства parentElement.
        Для нахождения ближайшего предыдущего родственника для элемента, непосредственно порождаемого другим элементом, следует выполнить действия,

        111 определяемые в функции getPreviousSibling(), единственным параметром которой является объект, для которого ищется ближайший предыдущий родственник (в семействе children объекта-родителя): function getPreviousSibling(Obj){
        // Определение родителя var Parent=Obj.parentElement;
        // Определение ближайшего предыдущего родственника var iLength=Parent.children.length; for(var i=0;i < iLength;i++){
        // родственник найден if(Parent.children[i]== Obj){ return Parent.children[i-1]; break;
        }
        }
        }
        Здесь приходится организовывать цикл по набору children объекта-родителя, пока не встретится исходный объект, для которого ищется ближайший родственник.
        Упражнения
        1. На странице отображается графическое изображение. Создать для нее сценарии: а) при расположении указателя мыши над графическим изображением оно заменяется другим, при последующих аналогичных действиях появляется новое изображение (предусмотреть до 5 новых изображений); б) на странице предусмотреть надпись, например, AUTOMATE, при щелчке на которой изображения начинают сменяться с интервалом в 5 секунд.
        Предусмотреть возможность останова этого режима; в) предусмотреть две кнопки: щелчок на первой отображает предыдущее изображение, на второй — следующее. Картинки должны отображаться циклически: после последней первая и далее при щелчке на второй кнопке, а после первой последняя, предпоследняя и далее при щелчке на первой кнопке.
        2. На странице присутствует графическое изображение. При наведении указателя мыши на изображение оно автоматически начинает смещаться вправо. При достижении границы окна начинает двигаться по его периметру по часовой стрелке.
        3. Создать галерею изображений следующим образом. На странице представлен только список картин. При наведении указателя мыши на любой из элементов

        112 списка справа от него отображается соответствующая выбранному пункту картина, когда указатель перемещается на другой пункт списка, то отображается другая картина, а когда указатель покидает область списка, то последняя отображаемая картина исчезает.
        4. Создать сценарий, который при щелчке на рисунке сделает его невидимым не сразу, а постепенно "отрезая" от него все увеличивающиеся внешние части.
        5. Разработать страницу HTML такую, что при щелчке на некотором заранее определенном элементе за текстом страницы начинает "падать" снег; при последующем щелчке на этом элементе — снег перестает "падать".
        Урок 15. Объектная модель документа DOM
        Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:

        Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново

        Создавать новые элементы и присоединять их к структуре документа в любом ее месте

        Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа
        Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной.
        Основное – это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.
        Другой важный аспект модели DOM — она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.
        Объектная модель документов, таким образом, как объектная модель, определяет:

        интерфейсы и объекты, используемые для представления документа и манипулирования с ним;

        113

        семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;

        "родственные" связи и взаимодействие между этими интерфейсами и объектами.
        Узлы объектной модели DOM
        Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML,
        SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.
        Узлы в модели DOM документа HTML могут быть следующих типов:
        Тип
        Что представляет
        1
        Элемент HTML
        3
        Текстовое содержимое тега HTML
        8
        Комментарий HTML
        9
        Корневой элемент иерархической структуры
        11
        Фрагмент документа
        Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:
        #document
        9
        HTML
        1
        HEAD
        1
        BODY
        1
        Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).
        Текстовое содержимое элемента HTML хранится в специальном текстовом узле
        (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.

        114
        Например, рассмотрим следующий фрагмент документа HTML:
        Это содержимое абзаца документа HTML
        В объектной модели DOM он будет представлен следующим иерархическим деревом:
        #text тип 3
        Это
        #text тип 3 абзаца
        #text тип 3 содержимое
        I тип 1
        #text тип 3
        HTML
        #text тип 3 документа
        P тип 1
        B тип 1
        На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно
        #comment), являющихся листьями иерархического дерева объектов документа.
        Перемещение по объектной модели
        К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML.
        На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:

        • Узел 1
        • Узел 2

          • Потомок 1
          • Потомок 2
          • Потомок 3

        • Узел 3

        В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:

        115
        UL
        1 id=parent
        LI
        1 id=Node1
        LI
        1 id=Node2
        LI
        1 id=Node3
        #text
        3
        Узел1
        #text
        3
        Узел2
        UL
        1 id=inside
        #text
        3
        Узел3
        LI
        1 id=Child1
        LI
        1 id= Child2
        LI
        1 id= Child3
        #text
        3
        Потомок1
        #text
        3
        Потомок2
        #text
        3
        Потомок3
        Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и
        Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойства firstChild и lastChild.
        Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.
        Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling
        (следующий ближайший родственник).
        Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.
        Конечно, если все элементы HTML документа заданы с уникальными атрибутами
        ID
        , то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели
        DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.
        Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется

        116 свойство nodeValue, тогда как в модели DHTML следует применять свойства innerHTML и innerText для любого элемента HTML:
        // Объектная модель DOM
        Node.childNodes[0].nodeValue = "Новое содержимое";
        // Модель DHTML
        Node.innerHTML = "Новое содержимое";
        Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML или innerText объекта, соответствующего элементу HTML.
        Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в
        DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом
        1   2   3   4   5   6   7   8   9   10   11