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

Скачать файл
Заказать решение

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

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

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

Добавлен: 01.12.2023

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

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

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

СОДЕРЖАНИЕ

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: Раскрывающийся список


Программирование клиентской части Интернет-
приложений с использованием JavaScript
Матросов А.В., Селицкая Е.А.
Санкт-Петербург
2016

2
Часть I. Язык сценариев JavaScript ................. 5
Урок 1. Модель клиент-сервер в Интернете .................................................................................... 5
Распределенные системы и приложения ...................................................................................... 5
Урок 2. Сценарии JavaScript в документах HTML ........................................................................ 11
Языки сценариев ........................................................................................................................... 11
Язык JavaScript .............................................................................................................................. 13
Упражнения ................................................................................................................................... 19
Урок 3. Переменные и литералы ..................................................................................................... 20
Числовой тип ................................................................................................................................. 20
Строковый тип............................................................................................................................... 21
Булевый тип ................................................................................................................................... 21
Специальные типы данных .......................................................................................................... 22
Переменные ................................................................................................................................... 22
Определение типа переменной .................................................................................................... 23
Упражнения ................................................................................................................................... 23
Урок 4. Выражения и операции ....................................................................................................... 24
Арифметические операции .......................................................................................................... 24
Логические выражения ................................................................................................................. 25
Строковые операции ..................................................................................................................... 26
Комбинированные операции присваивания ............................................................................... 27
Условная операция ........................................................................................................................ 27
Приоритет операций ..................................................................................................................... 27
Упражнения ................................................................................................................................... 28
Урок 5. Операторы ............................................................................................................................ 29
Операторы выбора ........................................................................................................................ 29
Операторы цикла ........................................................................................................................... 30
Упражнения ................................................................................................................................... 35
Урок 6. Функции ............................................................................................................................... 35
Упражнения ................................................................................................................................... 39
Урок 7. Встроенные объекты (1) ..................................................................................................... 40
Объект Array .................................................................................................................................. 40
Объект Date .................................................................................................................................... 44
Объект Math ................................................................................................................................... 51
Объект String ................................................................................................................................. 52
Объект Function ............................................................................................................................. 55
Объект Boolean .............................................................................................................................. 56
Объект Number .............................................................................................................................. 56
Упражнения ................................................................................................................................... 57
Урок 8 Встроенные объекты (2) ...................................................................................................... 58
Объект Object................................................................................................................................. 58
Стандартные функции верхнего уровня (объект Global) .......................................................... 61
Манипулирование объектами ...................................................................................................... 63
Обработка ошибок ........................................................................................................................ 65
Упражнения ................................................................................................................................... 69
Урок 9. Создание собственных объектов ....................................................................................... 70
Упражнения ................................................................................................................................... 74
Часть II. Среда клиента ....................................... 74
Урок 10. Объектная модель MS Internet Explorer .......................................................................... 74
Объект window .............................................................................................................................. 75
Фреймы .......................................................................................................................................... 79

3
Объект navigator ............................................................................................................................ 82
Объект location .............................................................................................................................. 82
Объект history ................................................................................................................................ 83
Упражнения ................................................................................................................................... 83
Урок 11. Объекты доступа к странице и ее элементам ................................................................. 84
Объект document ........................................................................................................................... 84
Объект body ................................................................................................................................... 85
Объект form ................................................................................................................................... 86
Упражнения ................................................................................................................................... 88
Урок 12. Обработка событий в MS Internet Explorer ..................................................................... 89
Обработчики событий .................................................................................................................. 89
Вызов процедуры обработки события ........................................................................................ 91
Событийная модель ...................................................................................................................... 91
Объект event (IE) ........................................................................................................................... 93
Упражнения ................................................................................................................................... 96
Часть III. Динамический HTML .......................... 97
Урок 13. Объектная модель документа DHTML ........................................................................... 97
Структура документа .................................................................................................................... 97
Иерархия объектов ........................................................................................................................ 98
Свойства и методы объектов ..................................................................................................... 100
Упражнения ................................................................................................................................. 103
Урок 14. Примеры динамических страниц HTML ...................................................................... 104
Раскрывающийся список ............................................................................................................ 104
Движущийся элемент ................................................................................................................. 107
Динамическое изменение таблиц .............................................................................................. 109
Родственные отношения ............................................................................................................. 110
Упражнения ................................................................................................................................. 111
Урок 15. Объектная модель документа DOM .............................................................................. 112
Узлы объектной модели DOM ................................................................................................... 113
Перемещение по объектной модели ......................................................................................... 114
Изменение объектной модели документа ................................................................................. 116
Упражнения ................................................................................................................................. 121

4
Аннотация
В курсе изучается программирование клиентской части традиционного Интернет- приложения на базе модели клиент-сервер. Он состоит из трех частей.
В первой части читатель знакомится с основами модели клиент-сервер и с одним из наиболее популярных языков программирования сценариев, встраиваемых в документы HTML, — языком JavaScript. В настоящее время этот язык реализован во всех популярных браузерах – программах просмотра Интернета. В пособии однако описываются только те его возможности, которые соответствуют стандарту языка ECMA-262 редакции 5.1 от 2011 г.
Вторая часть посвящена объектам среды выполнения клиентского сценария — объектам программы просмотра Интернета (браузера).
В третьей, последней части курса рассказывается о двух объектных моделях документа, представляющих API доступа к элементам HTML документа. Первая
— это объектная модель DHTML, реализованная компанией Microsoft в ее браузере Internet Explorer и предшествовавшая объектной модели документа
(DOM). Вторая — модель Document Object Model (DOM) ныне рекомендованная консорциумом WWW и реализованная во всех современных браузерах.
Использование одной из этих моделей или их совместное употребление вместе с каскадными таблицами стилей (CSS) и любым языком программирования реализует то, что называется динамическим HTML (DHTML).
В каждом уроке курса приводятся примеры, которые читателю рекомендуется повторить самостоятельно для лучшего усвоения прочитанного материала.
Выполнение упражнений после каждого урока (кроме первого) также способствует закреплению пройденного материала.
При описании синтаксиса языка JavaScript квадратные скобки [...] используются для указания необязательных элементов конструкций, которые могут не задаваться в конкретных случаях.
Данное пособие может быть рекомендовано бакалаврам и магистрам, обучающимся на направлениях «прикладная математика и информатика» и
«фундаментальные информатика и информационные технологии».

5
Часть I. Язык сценариев JavaScript
Урок 1. Модель клиент-сервер в Интернете
Распределенные системы и приложения
Распределенная система — это набор независимых компьютеров, представляющийся их пользователям единой объединенной системой.
В распределенной системе можно выделить два аспекта:

первый — все компьютеры автономны;

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

уровень пользовательского интерфейса;

уровень обработки;

уровень данных.
Формы организации архитектуры клиент-сервер отличаются тем, какие задачи решаются клиентом и сервером:

6
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
Приложение
(обработка)
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
База данных кли ен т се рв ер се рв ер кли ен т
Взаимодействие клиента и сервера в Интернете осуществляется с помощью запросов, посылаемых клиентом серверу, и ответов сервера на запрос клиента:
Клиент
Сервер
HTTP-ответ
HTTP-запрос документ HTML приложение ISAPI сценарий CGI сценарий ASP или JSP сервлет Java документ HTML
Суть распределенных систем — связь между процессами, реализующими не только взаимодействие компьютеров, но и частей (уровней) приложений.
Взаимодействие частей приложений реализуется с помощью протоколов, описывающих состав и формат данных, пересылаемых соответствующими частями клиентских и серверных приложений друг другу для решения поставленной задачи. В Интернете разбиение приложений на части осуществляется на базе стека протоколов TCP/IP:
Сети
FTP
TELNET
SMTP
DNS
HTTP
TCP
UDP
IP
ARPANET
SATNET
Пакетное радио
Локальная сеть
Протоколы
Прикладной уровень
Транспортный уровень
Сетевой уровень
Физический уровень
+ передачи данных
Первоначально в Интернете существовала только возможность пересылки файлов
(протокол FTP), почтовых сообщений (e-mail) и подключение компьютера как удаленного терминала сервера (TELNET). Технология World Wide Web (WWW) и производство доступных для пользователей средств коммуникации (модемы) изменили Интернет и сделали его основным средством получения и опубликования информации.

7
Основу WWW составляет гипертекстовый документ, создаваемый с помощью языка разметки гипертекстовых документов (HTML), и протокол передачи гипертекстовых документов (HTTP).
Суть гипертекстового документа заключена в том, что весь документ разбит на части, которые могут храниться не обязательно на одном компьютере в сети, а в соответствующие части документа встроены гиперссылки на его другие части:
JavaScript
VBScript
Основная страница
Языки сценариев
JavaScript
PerlScript
VBScript
Pithon
VBScript
JavaScript
Основная страница
Pithon
Следующая
Основная страница
Pithon (1)
PerlScript
Основная страница
PerlScript
Perl
Основная страница
Perl
В настоящее время используется язык HTML версии 4.01, поддерживаемый организацией WWW-консорциум (http://www.w3.org).
Для передачи гипертекстовых документов применяется протокол HTTP версии
1.1 (RFC 2616).
Его основу составляют HTTP-сообщения, подразделяемые на:

запрос (request) клиента к серверу;

ответ (response) сервера клиенту.
HTTP-запрос
строка запроса: метод URI HTTP-версия
заголовки сообщения: имя: значение (их много, каждый в отдельной строке)
пустая строка:
тело сообщения: передаваемая информация
В строке запроса указывается адрес (URI) документа, запрашиваемого клиентом с сервера, а метод может указывать, каким образом передается информация, введенная пользователем в формах HTML, от клиента к серверу. Методом GET информация передается непосредственно в строке запроса, добавляясь после знака вопроса ? к адресу запрашиваемого документа (тело HTTP-запроса в этом

8 случае пусто). Методом POST передаваемая информация помещается в тело запроса. Кроме указанных двух методов HTTP-запрос поддерживает и ряд других методов, позволяющих выполнить определенные действия на сервере.
Методы: OPTIONS запрос информации о доступных опциях коммуникаций
GET получение информации, определенной в URI запроса
HEAD аналогичен GET, но информация не пересылается
POST запрос и пересылка информации, определенной в теле запроса
PUT сохранение на сервере под указанным в запросе URI пересылаемой в его теле информации
DELETE удаление на сервере документа с указанным в запросе URI
TRACE определяет, что будет получено из концевой цепочки запросов
CONNECT используется с прокси-сервером
Пример HTTP-запроса методом GET:
GET /search?keywords=servlets+jsp HTTP/1.1
Accept: image/gif, image/jpg, */*
Encoding: gzip, deflate
Accept-Language: en-us
Connection: Keep-Alive
Cookie: userID=id456578
Host: 212.250.238.67
Referer: http://www.somebookstore.com/findbooks.html
User_Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows
XP)
HTTP-ответ
строка состояния: HTTP-версия код_состояния строка_причина
заголовки сообщения: имя: значение (их много, каждый в отдельной строке)
пустая строка:
тело сообщения: передаваемая информация
Пересылаемый в ответ на запрос клиента сервером документ всегда содержится в теле HTTP-ответа.

9
Пример HTTP-ответа сервера:
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Connection: Keep-Alive
Date: Thu, 8 Jul 1999 10:27:16 GMT
Content-Type: text/html
Accept-Ranges: bytes
Content-Length: 2964
Last-Modified: Thu, 8 Jul 1999 10:27:16 GMT
Cookie: userID=id456578

Смотрите также файлы