2.3. ЛАБОРАТОРНАЯ РАБОТА № 3
Тема: Циклы в Javascript
Цель: научится работать с циклами в Javascript Задачи: Познакомится с циклами в Javascript
Теоретические сведения:
При написании скриптов зачастую встает задача сделать однотипное действие много раз.
Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код.
Для многократного повторения одного участка кода – предусмотрены
циклы.
Цикл while
Цикл while имеет вид:
while (условие) {
// код, тело цикла
}
Пока условие верно — выполняется код из тела цикла. Например, цикл ниже выводит i пока i < 3:
var i = 0;
while (i < 3) {
alert( i );
i++;
}
Повторение цикла по-научному называется «итерация». Цикл в примере выше совершает три итерации.
Если бы i++ в коде выше не было, то цикл выполнялся бы (в теории) вечно. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.
Цикл do..while
Проверку условия можно поставить под телом цикла, используя специальный синтаксис do..while:
do {
// тело цикла
}while (условие);
Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
Например:
var i = 0;
115
do {
alert( i );
i++;
} while (i < 3);
Синтаксис do..while редко используется, т.к. обычный while нагляднее
— в нём не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.
Цикл for.
Чаще всего применяется цикл for. Выглядит он так:
for (начало; условие; шаг) {
// ... тело цикла ...
}
Пример цикла, который выполняет alert (i) для i от 0 до 2 включительно
(до 3):
var i;
for (i = 0; i < 3; i++) { alert( i );
}
Здесь:
Начало: i=0.
Условие: i<3.
Шаг: i++.
Тело: alert(i), т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)
Цикл выполняется так:
1.Начало: i=0 выполняется один-единственный раз, при заходе в
цикл.
2.Условие: i<3 проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.
3.Тело: alert(i).
4.Шаг: i++ выполняется после тела на каждой итерации, но перед проверкой условия.
5.Идти на шаг 2.
Самостоятельная работа
Написать скрипт выводящий на экран таблицу Пифагора
Контрольные вопросы
1.Цикл For.
2.Цикл while.
116
2.4.ЛАБОРАТОРНАЯ РАБОТА № 4
Тема: «Массивы в Javascript »
Цель: научится работать с массивами в Javascript Задачи: Создать массив в Javascript
Теоретические сведения:
Массив – это тип данных, хранящий пронумерованные значения. Каждое пронумерованное значение называется элементом массива, а число, с которым связывается элемент, называется его индексом. Массивы JavaScript нетипизированы, это значит, что элемент массива может иметь любой тип, причем разные элементы одного массива могут иметь разные типы. Помимо этого массивы JavaScript являются динамическими, это значит, что объявлять фиксированный размер не нужно и можно добавить новые элементы в любое время.
Создание массива
Массив можно создать двумя способами, первый: создать массив с помощью литерала массива - квадратные скобки, внутри которых расположен список элементов, разделенных запятыми.
var empty = []; //пустой массив
var numbers = [4, 1, 2, 5]; //массив с 5 числовыми
элементами
var diff = [1.5, false, "текст"]; //массив с 3 элементами
различного типа
Значения не обязательно должны быть простыми (числа или строки) - это также могут быть и любые другие выражения, например: литералы объектов, другие массивы или функции.
var num = 700;
var tab = [function(a) { alert(a) }, { name: 'Петя' }, [1,
2, 3], num + 1];
Второй способ создания массива - вызов конструктора Array(). Вызвать конструктор Array() можно тремя способами.
Вызов конструктора без аргументов:
var b = new
Array();
Вэтом случае создается пустой массив, эквивалентный пустому литералу [].
Вконструкторе явно указываются значения n элементов массива:
var b = new Array(1, 3, 5, 8, "строка",
117
true);
В этом случае конструктор получает список аргументов, которые становятся элементами нового массива. Аргументы записываются в массив в том порядке, в котором указаны.
Выделение места для последующего присваивания значений. Это делается путем указания при определении массива одного числа в круглых скобках:
var b = new Array(5);
Этот способ определения массива предполагает выделение массиву определенного количества элементов (каждый из которых имеет значение undefined) с возможностью последующего присваивания значений по ходу сценария. Такая форма обычно используется для предварительного размещения массива, если его длина известна заранее.
2.5.ЛАБОРАТОРНАЯ РАБОТА № 5
Тема: Объекты JavaScript
Краткие теоретические сведения
Объекты (они же - ассоциативные массивы, хэши) и работа с ними в Javascript - реализованы не так, как в большинстве языков. С этим связано много ошибок.
Рассмотри базовые свойства объектов javascript, создание и изменение, перечисление свойств.
Объект в javascript представляет собой обычный ассоциативный массив или, иначе говоря, "хэш". Он хранит любые соответствия "ключ => значение" и имеет несколько стандартных методов.
Метод объекта в javascript - это просто функция, которая добавлена в ассоциативный массив. Далее - подробнее.
Создание и работа со свойствами
Создание объекта Следующие два варианта создания объекта эквивалентны: // эквивалентные записи
var o = new Object()
var o = {}
118
Добавление свойств
Есть два синтаксиса добавления свойств в объект. Первый - точка, второй - квадратные скобки:
// эквивалентные записи
o.test = 5
o["test"] = 5
Квадратные скобки используются в основном, когда название свойства находится в переменной:
var name
= 'test'
o[name] = 5
Здесь имя свойства "test" является ключом в ассоциативном массиве, по которому лежит значение 5.
Доступ к свойствам Доступ к свойству осуществляется точно так же:
alert(o.test)
alert(o['test'])
Если у объекта нет такого свойства, то результат будет 'undefined'
var o = {}
alert(o.nosuchkey) // =>
undefined
Никакой ошибки при обращении по несуществующему свойству не будет, просто вернется специальное значение undefined.
Проверка глобальной переменной
В javascript нельзя проверить существование глобальной переменной простым if:
if (x) { ...
}
Если x не определен, то конструкция if (x) вызовет ошибку javascript. Распространенное решение – использовать typeof:
if (typeof x != 'undefined') { ... } // или
typeof(x)
Однако зная, что глобальная переменная в javascript - всего лишь свойство объекта window - мы можем записать проще:
if (window.x) { ... } |
// правильный аналог |
if(x)
// или
119