- •Часть I. Язык сценариев JavaScript 3
- •Часть II. Среда клиента 73
- •Часть III. Динамический html 95
- •Клиентское Web-программирование
- •Часть I. Язык сценариев JavaScript Урок 1. Модель клиент-сервер в Интернете Распределенные системы и приложения
- •Http-запрос
- •Http-ответ
- •Урок 2. Сценарии JavaScript в документах html Языки сценариев
- •Язык JavaScript
- •Основные положения синтаксиса
- •Размещение операторов языка на странице
- •Упражнения
- •Урок 3. Переменные и литералы
- •Числовой тип
- •Строковый тип
- •Булевый тип
- •Специальные типы данных
- •Переменные
- •Определение типа переменной
- •Упражнения
- •Урок 4. Выражения и операции
- •Арифметические операции
- •Логические выражения
- •Строковые операции
- •Комбинированные операции присваивания
- •Условная операция
- •Приоритет операций
- •Упражнения
- •Урок 5. Операторы
- •Операторы выбора
- •Операторы цикла
- •Упражнения
- •Урок 6. Функции
- •Упражнения
- •Урок 7. Встроенные объекты (1)
- •Объект Array
- •Объект Date
- •Объект Math
- •Объект String
- •Объект Function
- •Объект Boolean
- •Объект Number
- •Упражнения
- •Урок 8 Встроенные объекты (2) Объект Object
- •Стандартные функции верхнего уровня (объект Global)
- •Манипулирование объектами
- •Обработка ошибок
- •Упражнения
- •Урок 9. Создание собственных объектов
- •Упражнения
- •Часть II. Среда клиента Урок 10. Объектная модель ms Internet Explorer
- •Объект window
- •Объект navigator
- •Объект location
- •Объект history
- •Упражнения
- •Урок 11. Объекты доступа к странице и ее элементам Объект document
- •Объект body
- •Объект form
- •Упражнения
- •Урок 12. Обработка событий в ms Internet Explorer Обработчики событий
- •Вызов процедуры обработки события
- •Событийная модель
- •Объект event (ie)
- •Упражнения
- •Часть III. Динамический html Урок 13. Объектная модель документа dhtml
- •Структура документа
- •Иерархия объектов
- •Свойства и методы объектов
- •Упражнения
- •Урок 14. Примеры динамических страниц html Раскрывающийся список
- •Движущийся элемент
- •Динамическое изменение таблиц
- •Родственные отношения
- •Упражнения
- •Урок 15. Объектная модель документа dom
- •Узлы объектной модели dom
- •Перемещение по объектной модели
- •Изменение объектной модели документа
- •Упражнения
Упражнения
0. Как определить целый тип числа.
1. Объявить в сценарии переменную var1 оператором var, не присваивая ей никакого значения, а переменную var2 не объявлять. Отобразить их содержимое функцией alert() и объяснить результаты.
2. Предложить способ сложения двух чисел, хранящихся в виде строковых литералов. Например, в выражении "2.1"+"3.0" будет выполнена операция конкатенации строк с результатом "2.13.0", а не сложение чисел, хранящихся в указанных строках. Задача состоит в том, чтобы получить число 5.1.
3. Можно ли в JavaScript определить, содержит ли переменная число или строку с литералом числа. Приведите, если это возможно, максимальное число способов проверки.
4. Чему будет равно значение переменной a после выполнения операторов:
а) 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.
Операторы выбора могут быть вложенными друг в друга. В этом случае рекомендуется использовать фигурные скобки всегда во избежание ошибок при интерпретации подобных сложных операторов.
Если необходимо проверять одно и то же выражение на равенство разным значениям, то эффективнее использовать не группу вложенных операторов ветвления, а оператор 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
Если тело цикла состоит из одного оператора, то фигурные скобки, ограничивающее тело цикла, можно опустить.
Пример 4. Цикл for в сценарии JavaScript
Создадим сценарий, который при загрузке документа вычисляет степени числа 2 и выводит в документ таблицу степеней двойки.
<html>
<head>
<script>
document.write("<table border=1 cellspacing=0>" +
"<tr><th>Степень</th><th>Результат</th></tr>")
for(i=0; i<=5; i++){
document.write("<tr>",
"<td align=center><p>2<sup>", i, "</sup></td>",
"<td align=right>", Math.pow(2,i), "</td>",
"</tr>")
}
document.write("</table>")
</script>
</head>
<body>
</body>
</html>
Результат работы этого сценария представлен ниже:
Степень |
Результат |
20 |
1 |
21 |
2 |
22 |
4 |
23 |
8 |
24 |
16 |
25 |
32 |
В сценарии используется метод write объекта document для формирования содержимого страницы. На каждой итерации цикла for формируется очередная строка таблицы, в первую ячейку которой заносится соответствующая степень двойки, а во вторую результат ее возведения в указанную степень. Для выполнения этого действия используется встроенный объект Math и его метод pow(), возводящий первый параметр в степень, заданную вторым параметром.
Обратите внимание, что метод write может вызываться с любым количеством фактических параметров. Результатом его работы в любом случае является вывод в документ строки, полученной конкатенацией всех параметров, переданных в метод.
Если количество итераций цикла заранее не известно, то в этом случае следует воспользоваться циклами while
while(условие) {
[операторы]
}
или do
do { [операторы] } while (условие)
Оба они выполняются пока истинно заданное в них условие. Отличие заключается в том, что цикл while является циклом с предусловием — сначала проверяется условие завершения цикла, а потом выполняется его тело, поэтому тело цикла может вообще не выполниться ни одного раза, если при входе в него условие ложно. Тогда как цикл do представляет собой цикл с постусловием — проверка завершения итераций выполняется после выполнения тела цикла, поэтому тело этого цикла всегда выполняется хотя бы один раз.
Для завершения этих циклов в теле каждого из них должна быть предусмотрена возможность изменения выражения-условия окончания цикла. Обычно это реализуется изменением значения какой-либо переменной, входящей в условие.
Пример 5. Перебор всех символов строки
Мы используем цикл while для организации посимвольного перебора содержимого строковой переменной и отображения каждого символа на отдельной строке (вертикальное отображение содержимого строковой переменной):
<script>
s = "JavaScript";
// Позиция первого символа в строке
i=0;
// Цикл пока не дойдем до последнего символа строки s
while(ch = s.substr(i,1)) {
// Отображение очередного символа
document.write("<p><b>", ch, "</b></p>")
// Вычисляем позицию следующего индекса
i += 1
}
document.write("<p>Количество символов: <b>", i, "</b></p>")
</script>
В этом сценарии для получения очередного символа строки используется метод 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 осуществляется переход на очередную итерацию. Пользователь в любой момент может прекратить выполнение сценария, нажав кнопку Отмена на диалоговом окне, или закрыв окно нажатием на кнопку с крестиком в правом верхнем углу.
<script>
var x = "";
// Бесконечный цикл
do
{
// Отображение диалогового окна для ввода числа
x = window.prompt("Какое мое любимое число?", x);
// Завершил ли пользователь игру
if (x == null)
break;
// Проверка ввода числа
if (x = Number(x)){
if(x == 30) break;
continue;
}
// Можно вводить только числа
window.alert("Вводить можно только числа!");
} while (true)
if (x == null)
window.alert("Вы прекратили играть");
else
window.alert("Верно, мое любимое число "+x);
</script>
Для отображения диалогового окна используется метод prompt() объекта window, представляющего окно браузера. Этот объект является верхним объектом в иерархии объектов среды браузера. Первым параметром метода prompt() является строка подсказки, отображаемая на диалоговом окне, а вторым параметром значение по умолчанию, отображаемое в поле ввода этого окна. Метод при нажатии кнопки OK возвращает строку с содержимым поля ввода, а при нажатии кнопки Отмена или закрытия окна специальное значение null.
Для проверки ввода числа используется конструктор числа Number(), возвращающий число, если его параметр является правильным числовым литералом или строкой, содержащей правильный числовой литерал. В противном случае он возвращает специальное значение NaN, в булевом контексте трактуемое как ложь.