Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 01.12.2023
Просмотров: 99
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
Предложенная первоначально технология WWW с ее гипертекстовыми документами позволяла получать статические страницы HTML. Но с введением в
HTML 2.0 форм, позволяющих получать от пользователя и передавать на сервер информацию, возникла необходимость в создании приложений, которые могут обрабатывать эту вводимую в поля формы пользователем информацию. Для сервера был разработан специальный интерфейс Common Gateway Interface (CGI)
(стандарт), доступный приложениям, выполняемым на машине сервера
(используются языки C, Perl).
Компьютер клиента
Браузер
Компьютер сервера
Интернет- сервер
Интернет
CGI-сценарий
Локальный диск
HTTP-запрос
HTTP-ответ
Каждое обращение клиента к CGI-сценарию выполняется в собственном процессе, создаваемом операционной системой. Получение передаваемой и отсылаемой информации реализовано через стандартные потоки ввода/вывода — stdin и stdout. Следует отметить, что выполнение серверных CGI-сценариев обычно достаточно медленное, даже если они и реализованы в виде выполнимых
10 exe-файлов, так как в этой технологии всегда приходится организовывать межпроцессное взаимодействие.
Компания Microsoft для своего сервера IIS реализовала кроме CGI-интерфейса дополнительный интерфейс ISAPI — Internet Server Application Programming
Interface (компания Netscape для своего сервера реализовала интерфейс NSAPI).
Этот интерфейс позволяет создавать серверные приложения, выполняющиеся в том же процессе, в котором выполняется и программа самого сервера, а также он позволяет создавать сценарии, обладающие дополнительными возможностями взаимодействия сервера и сценария.
Одним из недостатков CGI-технологии является то, что страница HTML формируется полностью с нуля при каждом запросе к CGI-сценарию. Компания
Microsoft, разработав технологию IDC (Internet Database Connector), уже в ней реализовала идею шаблона — документа HTML, в определенные места которого вставлялись данные по запросу пользователя из базы данных. Эта технология была реализована через ISAPI.
Дальнейшее развитие серверных технологий привело к появлению технологии
ASP — Active Server Pages, в которой совмещены наилучшие стороны всех рассмотренных технологий. Страница ASP — это заготовка документа HTML, в который кроме кода HTML встроен выполняемый во время обработки до отсылки клиенту код, написанный на одном из двух, поддерживаемых в ASP языков сценариев, — JavaScript (JScript) или VBScript. Кроме этого в ASP были реализованы специальные компоненты, выполняющие наиболее часто встречающие задачи: определение характеристик программы просмотра
Интернета и операционной системы клиента, взаимодействие с БД и т.п. Таким образом, приложение на основе технологии ASP представляет собой трехуровневую архитектуру:
Исследования работы приложений Интернета показали, что в 70% случаев для выполнения определенных действий пользователя нет необходимости обращаться к серверу — эти действия можно реализовать на клиенте, если бы он позволял каким-то образом их запрограммировать. Так появился встроенный в программу
11 просмотра Интернета язык JavaScript, который расширил возможности языка разметки HTML, предоставляя разработчику возможность встраивать в документ
HTML код программы, выполняющейся на клиенте.
Урок 2. Сценарии JavaScript в документах HTML
Языки сценариев
Язык сценариев — это язык программирования, используемый для выполнения функций настройки и автоматизации работы какой-либо существующей системы
(например, программы просмотра Интернета, Интернет-сервера, операционной системы). Обычно в подобных системах их функциональность уже доступна через интерфейс пользователя. Языки сценариев раскрывают ее для программного управления. При этом немаловажно то, что сама система обеспечивает специальную среду, обычно состоящую из объектов и подпрограмм, которая дополняет возможности языка сценариев.
В операционной системе Windows имеется средство Windows Scripting Host
(WSH), предназначенное для программной настройки системы, которое создает специальную среду со специальными объектами, позволяющими программно настраивать операционную систему, создавая файлы сценариев. В этой среде методы автоматически создаваемого объекта
WScript позволяют организовать диалог с пользователем, а также создавать объекты из иерархической модели объектов этой среды (например, объект
Shell соответствует оболочке операционной системы, в семействе
Environment которого хранятся значения всех переменных среды). В качестве языка сценария в WSH можно использовать либо JScript (реализация компанией Microsoft языка JavaScript) или поддерживаемый и разрабатываемый ею же собственный сценарный язык
VBScript. Сценарий пишется на любом из указанных языков и сохраняется соответственно в файле с расширением
.js или
.vbs
. Запуск сценария WSH осуществляется двойным щелчком на файле в проводнике Windows.
Пример 1. Сценарий Windows Scripting Host
Создадим в любом текстовом редакторе представленный ниже сценарий WSH на языке
JScript и сохраним его в файле с расширением
.js
. После чего запустим его на выполнение двойным щелчком в проводнике Windows. Со всеми действиями этого сценария можно ознакомиться, прочитав внедренные в текст сценария комментарии.
// Отображение диалогового окна с приветствием
WScript.Echo("Привет!"); text = "";
12
// Создание объекта Shell shell = WScript.CreateObject("WScript.Shell")
// Присоединение к семейству WScript.Shell.Environment
// итератора для организации перебора элементов семейства e = new Enumerator(shell.Environment);
// Перебор элементов семейства Environment
// и сохранение их значений в переменной text for ( ; !e.atEnd(); e.moveNext()){ text += e.item() + "\n";
}
// Отображение полученных значений в диалоговом окне
WScript.Echo(text)
Встроенный в документ HTML сценарий JavaScript имеет доступ к объектной модели обозревателя, в котором этот документ отображается (при условии, конечно, поддержки обозревателем языка сценариев JavaScript и раскрытия своей модели объектов), а также к объектной модели (DOM) самого документа (опять- таки при ее реализации в обозревателе).
Пример 2. Сценарий JavaScript в обозревателе Internet Explorer
Создадим приведенный ниже документ HTML и отобразим его в обозревателе
Internet Explorer. Каждый щелчок на кнопке Новое окно документа будет приводить к отображению еще одного окна обозревателя размером 300
50 пикселей, но без строки меню, полос прокрутки, строки состояния, панели инструментов и адресной строки.
13
14 прошел ряд версий, соответствие которых браузеру этой компании представлено в следующей таблице:
Поддержка JavaScript в браузерах Internet Explorer
Версия браузера
Версия языка
Internet Explorer 3.0 1.0
Internet Explorer 4.0 3.0
Internet Explorer 5.0 5.0
Internet Explorer 5.5 5.5
Internet Explorer 6.0 5.6
Следует отметить, что свой язык JScript компания Microsoft использовала не только в браузере, но и в других своих продуктах.
Разработка языков происходила без какого-либо взаимодействия двух компаний в режиме соревнований, что привело к известной "войне браузеров". Однако впоследствии здравомыслие восторжествовало и в 1996 году компании договорились о разработке единого стандарта под эгидой Европейской ассоциации производителей компьютеров (ECMA). И в июле 1997 года появился новый язык, получивший название ECMAScript. Сегодняшние последние версии языка JavaScript, реализованные в популярных браузерах, полностью соответствуют стандарту языка ECMAScript, известному под названием ECMA-
262, редакция 5.1 от 2011 г.
Задачи, решаемые с помощью встроенных в документ HTML сценариев
JavaScript:
динамическое создание содержимого документа HTML во время его загрузки в браузер;
оперативная проверка достоверности заполняемых пользователем полей форм
HTML до передачи их на сервер;
создание динамических страниц HTML совместно с каскадными таблицами стилей и объектной моделью документа;
взаимодействие с пользователем при решении "локальных" задач, реализуемых приложением JavaScript, встроенном в страницу HTML.
Основные положения синтаксиса
Сценарий JavaScript, являясь, по-существу, обычной программой, представляет собой последовательность операторов этого языка.
Каждый оператор с необязательным в конце разделителем (символ ;) обычно располагается в отдельной строке кода программы: var m=5 alert('Подсказка'+m) m = "five";
// но можно и так
15
Разделитель обязателен только в случае задания нескольких операторов на одной строке: var m=5; alert('Подсказка',m)
Любой оператор для удобства чтения может быть продолжен на следующую строку без использования какого-либо символа продолжения: alert("Подсказка"); alert(
"Подсказка"
);
Нельзя продолжать на другую строку строковый литерал — он должен располагаться полностью на одной строке текста программы или разбит на два строковых литерала, соединенных операцией конкатенации +: alert("Подсказка") // Правильно alert("Под // Не правильно сказка") alert("Под" + // Правильно "сказка")
Пробельные символы в тексте программы являются незначащими, если только они не используются в строковых литералах.
Комментарии в программе JavaScript двух видов — однострочные и многострочные:
// комментарий, расположенный на одной строке.
/* комментарий, расположенный на нескольких строках.
*/
Язык JavaScript чувствителен к регистру.
Размещение операторов языка на странице
Способы встраивания сценария JavaScript в страницу HTML:
заданием операторов языка JavaScript внутри элемента SCRIPT документа
HTML;
указанием файла с кодом JavaScript в атрибуте SRC открывающего тега элемента SCRIPT;
определением обработчика событий в открывающем теге любого элемента
HTML.
Использование элемента SCRIPT
Элемент SCRIPT состоит из открывающего тега
. Между ними записывается код JavaScript. Для совместимости с
16 обозревателями, не поддерживающими язык сценариев JavaScript, рекомендуется код JavaScript заключать в теги комментария HTML. Необязательный атрибут
LANGUAGE элемента SCRIPT задает используемый в сценарии язык (по умолчанию JavaScript).
Иногда перед закрывающим тегом комментария HTML ставят символы однострочного комментария JavaScript (как в приведенном примере). Это исторический казус, относящийся к версии 3.0 MS Internet Explorer, в котором этот тег рассматривался как оператор языка JavaScript и приводил к ошибке интерпретации.
Элементов SCRIPT в документе может быть несколько, и они могут располагаться в любом его месте. Но обычно его (или их) располагают в элементе
HEAD и в нем (в них) определяют функции, реализующие реакцию документа
HTML на действия пользователя, перехватываемые заданными в документе обработчиками событий (см. ниже).
Следует помнить, что сценарий JavaScript, как и весь документ HTML, обрабатывается постепенно, начиная с первой строки. Поэтому если в сценарии используется, например, переменная, определяемая в элементе SCRIPT, расположенном ниже, или ссылка на объект, соответствующий элементу HTML документа, расположенному после элемента SCRIPT, то значение переменной или ссылка на объект для выполняемого в данный момент оператора будут не доступны. После завершения загрузки документа в обозреватель все глобальные переменные и ссылки на объекты HTML, естественно, становятся доступными.
Задание файла с кодом JavaScript
В атрибуте SRC открывающего тега
Такой подход удобен, если на многих страницах сайта используются, например, одни и те же функции.
Подгружаемый указанным способом файл сценария не должен содержать никакой разметки HTML.
Содержимое элемента SCRIPT в последних версиях обозревателя Internet Explorer
(версии 5.0 и выше) не выполняется никогда. Тогда как в предыдущих версиях оно выполнялось в случае, если по какой-то причине файл сценария, указанный в атрибуте SRC не был загружен.
17
Обработчики событий
С помощью обработчиков событий, представляющих собой введенные в стандарт
HTML дополнительные атрибуты для всех элементов HTML, реализуется реакция отображаемого в обозревателе Интернета документа на действия пользователя или системы. По-существу с их помощью документ становится "живым", реализуя событийно-управляемое приложение.
Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11): onclick обработчик события click (щелчок мышью) onmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)
Значением атрибута, соответствующего обработчику события, является код
JavaScript. Обычно в нем задается вызов функции, реализующей "реакцию" страницы на действия пользователя, но может быть задана и целая последовательность операторов: onmouseout="color(this)" onclick="click++; myFunc();">. . .
Функция или процедура – это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined): function имя_функции([параметры]) {
[операторы JavaScript]
[return значение]
}
Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).
Пример 3. Сценарий, вычисляющий время обработки документа
В этом примере представлен документ HTML со всеми возможными способами внедрения кода сценария JavaScript, реализующий вычисление времени обработки браузером документа HTML и отображения этой информации в диалоговом окне.
Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега
Начинается отображение страницы, в которую внедрен сценарий JavaScript.
Следующая строка сгенерирована внедренным сценарием:
1 2 3 4 5 6 7 8 9 10 11
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
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
32
Если количество итераций цикла заранее не известно, то в этом случае следует воспользоваться циклами while while(условие) {
[операторы]
} или do do {
[операторы]
} while (условие)
Оба они выполняются пока истинно заданное в них условие. Отличие заключается в том, что цикл while является циклом с предусловием — сначала проверяется условие завершения цикла, а потом выполняется его тело, поэтому тело цикла может вообще не выполниться ни одного раза, если при входе в него условие ложно. Тогда как цикл do представляет собой цикл с постусловием — проверка завершения итераций выполняется после выполнения тела цикла, поэтому тело этого цикла всегда выполняется хотя бы один раз.
Для завершения этих циклов в теле каждого из них должна быть предусмотрена возможность изменения выражения-условия окончания цикла. Обычно это реализуется изменением значения какой-либо переменной, входящей в условие.
Пример 5. Перебор всех символов строки
Мы используем цикл while для организации посимвольного перебора содержимого строковой переменной и отображения каждого символа на отдельной строке (вертикальное отображение содержимого строковой переменной):
33
В этом сценарии для получения очередного символа строки используется метод substr() объекта String, к которому автоматически преобразуется любая строка JavaScript. Метод выделяет из заданной строки подстроку, начиная с позиции, указанной первым параметром, и длиной, равной значению второго параметра. Если указанная начальная позиция превосходит позицию последнего символа строки, то метод возвращает пустую строку, которая в булевом контексте условия окончания цикла трактуется как ложь, что приводит к завершению выполнения цикла while.
Позиция очередного символа исходной строки вычисляется увеличением на единицу переменной i.
Таким образом, не зная количества символов в исходной строке, с помощью цикла while нам удалось перебрать и подсчитать все символы строки.
Отметим, что можно было бы использовать для решения поставленной задачи и цикл for. Дело в том, что у каждой строки как объекта String есть свойство length
, возвращающее количество ее символов, и это значение можно было бы использовать в качестве условия завершения цикла for.
Иногда необходимо завершить цикл не по условию, задаваемому в заголовке цикла, а в результате вычисления некоторого условия в теле цикла. Для этой цели в JavaScript существуют операторы break и continue.
Оператор break завершает выполнение цикла и передает управление оператору, непосредственно следующим за оператором цикла. Оператор continue прекращает выполнение текущей итерации и начинает выполнение следующей, т.е. в цикле while он передает управление на проверку выражения условие цикла, а в цикле for – на вычисление выражения изменяющее_выражение.
Пример 6. Простая игра
Создадим страницу HTML со сценарием игры в угадывание числа. При ее загрузке в бесконечном цикле do-while отображается диалоговое окно с полем ввода, в котором пользователь вводит какое-либо число. После нажатия кнопки
OK сценарий проверяет, ввел ли пользователь число. Если да, то проверяется его равенство на "загаданное" число 30. В случае равенства операцией break осуществляется выход из бесконечного цикла, в противном случае операцией continue осуществляется переход на очередную итерацию. Пользователь в любой момент может прекратить выполнение сценария, нажав кнопку Отмена на диалоговом окне, или закрыв окно нажатием на кнопку с крестиком в правом верхнем углу.