Основы программирования на JavaScript. Учебное пособие

–скопируйте значение из name в admin;

–выведите admin (при этом должно получиться значение, введенное в name).

2. Инкремент и порядок срабатывания: запустите код, представленный ниже, а затем объясните, почему он выдает результаты, указанные в комментариях в конце строк.

var a = 1, b = 1, c, d;

c = ++a; console.log(c); // 2 d = b++; console.log (d); // 1

c = (2+ ++a); console.log (c); // 5 d = (2+ b++); console.log (d); // 4 console.log (a); // 3

console.log (b); // 3

3.Результат присваивания: определите, чему будет равно значение x в примере ниже, запустите код, добавив в конце вывод значения x, а затем объясните, каким образом получается это значение.

var a = 2;

var x = 1 + (a *= 2);

4.Типы данных: создайте набор переменных, чтобы с помощью функции typeof продемонстрировать все типы языка JavaScript.

Примечание. О типах данных можно узнать в [2].

5.Использование оператора if вместо оператора switch: напишите конструкцию if..else, соответствующую следующему switch.

Примечание. Обратите внимание на логические операторы: «||» – «или», «&&» – «и».

switch (browser) { case 'IE':

console.log( 'О, да у вас IE!' ); break;

case 'Chrome': case 'Firefox': case 'Safari': case 'Opera':

console.log( 'Да, и эти браузеры мы поддержи-

ваем' );

break;

default:

console.log( 'Мы надеемся, что и в вашем браузере все ок!' );

}

6.Использование оператора switch вместо оператора if: перепишите код с использованием одной конструкции switch. Проверьте работу программы для различных значений переменной a.

var a = 3; // считывание переменной

21

if (a == 0) { console.log( 0 );

}

if (a == 1) { console.log( 1 );

}

if (a == 2 || a == 3) { console.log( '2,3' );

}

7.Оператор if – проверка условия, содержащего строку с нулем: предположите, выведется ли строка «Привет, мир!», а затем проверьте свое предположение, запустив программу.

if ("0") {

console.log( 'Привет, мир!' );

}

8.Проверка стандарта: используя конструкцию if..else, напишите код, который будет спрашивать: «Каково «официальное» название JavaScript?». Если пользователь вводит «ECMAScript», то выводить «Верно!», если что-то другое – выводить «Не знаете? «ECMAScript»!», как представлено на рис. 2.

Конец

Рис. 2. Проверка «официального» названия JavaScript

9.Получение знака числа: используя конструкцию if..else, напишите код, который получает значение с клавиатуры, а затем выводит с помощью console.log:

– число 1, если введенное значение больше нуля;

– число –1, если введенное значение меньше нуля;

– число 0, если введенное значение равно нулю.

10.Решение квадратного уравнения на основе вычисления дискриминанта: напишите код, который получает на вход коэффициенты

22

a, b и c квадратного уравнения вида ax2 + bx + c = 0, а затем выводит количество корней, дискриминант и корни, если они есть.

11.Проверка, лежат ли 3 заданные точки на одной прямой: напишите код, который получает на вход координаты точек.

12.Реализация ввода трех произвольных чисел x, y и z с клавиатуры и проверка: если x больше z, то вывести на экран сумму x и y, иначе вывести на экран значение z.

2.2. Лабораторная работа и практическое занятие № 2. Массивы и циклы

Массивы

Массив (array) – это разновидность объекта, который предназначен для хранения пронумерованных значений и предлагает дополнительные методы для удобного манипулирования такой коллекцией. Обращение к элементам массива происходит следующим образом.

Элементы массива пронумерованы по порядку, начиная с нуля, что позволяет обращаться к элементу по его числовому индексу.

var spaceobjectsArray = [‘planet’, ‘star’, ‘meteorite’];

spaceobjectsArray[0]; // ‘planet’ spaceobjectsArray[1]; // ‘star’ spaceobjectsArray[2]; // ‘meteorite’ spaceobjectsArray.length; // 3 spaceobjectsArray[2] = ‘asteroid’; spaceobjectsArray[3] = ‘comet’; spaceobjectsArray;

// [‘planet’, ‘star’, ‘asteroid’, ‘comet’] spaceobjectsArray.length; // 4

Язык JavaScript позволяет хранить в массиве элементы, относящиеся к любым типам данных.

var array = [3, ‘sun’, {a: 2}, {x: ‘x’}]; array[2]; // {a: 2}

var matrix = [[3, 3], [4, 2], [0, 1]]; matrix[0]; // [3, 3]

matrix[1]; // [4, 2] matrix[2]; // [0, 1]

Циклы while и for

При написании скриптов зачастую встает задача сделать однотипное действие много раз. Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код. Для многократного повторения одного участка кода предусмотрены циклы.

23

Цикл «while»

Цикл while имеет следующий синтаксис: while (condition) {

// код, также называемый «телом цикла»

}

Код из тела цикла выполняется, пока условие condition истинно. Например, цикл ниже выводит i, пока i < 3:

let i = 0;

while (i < 3) { // выводит 0, затем 1, затем 2 console.log(i);

i++;

}

Одно выполнение тела цикла называется итерация. Цикл в примере выше совершает три итерации.

Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придется завершить процесс.

Любое выражение или переменная может быть условием цикла, а не только сравнение: условие while вычисляется и преобразуется в логическое значение. Например, while (i) – более краткий вариант while (i != 0):

let i = 3; while (i) {

//когда i будет равно 0, условие станет ложным

//и цикл остановится

console.log(i); i--;

}

Если тело цикла состоит лишь из одной инструкции, можно опустить фигурные скобки {…}:

let i = 3;

while (i) console.log(i--);

Цикл «do…while»

Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while.

do {

// тело цикла

}while (condition);

Цикл сначала выполнит тело, а затем проверит условие condition, и пока его значение равно true, он будет выполняться снова и снова.

let i = 0;

24

do { console.log(i); i++;

} while (i < 3);

Такая форма синтаксиса оправданна, если необходимо, чтобы тело цикла выполнилось хотя бы один раз, даже если условие окажется ложным. На практике чаще используется форма с предусловием: while (…) {…}.

Цикл «for»

Более сложный, но при этом самый распространенный цикл – цикл for. Выглядит он следующим образом:

for (начало; условие; шаг) { // ... тело цикла ...

}

Например, цикл ниже выполняет console.log(i) для i от 0 до (но не включая) 3.

for (let i = 0; i < 3; i++) {

// выведет 0, затем 1, затем 2 console.log(i);

}

Более подробно конструкция for рассмотрена в табл. 1.

В целом, алгоритм работы цикла выглядит следующим образом:

Выполнить начало

→(Если условие == true → Выполнить тело, Выполнить шаг)

→(Если условие == true → Выполнить тело, Выполнить шаг)

→...

Таким образом, начало выполняется один раз, а затем каждая итерация заключается в проверке условия, после которой выполняются

тело и шаг.

Если шаг за шагом воспроизвести работу цикла из примера выше, то получается следующий код:

//for (let i = 0; i < 3; i++) console.log(i)

//Выполнить начало

let i = 0;

//Если условие == true

//→ Выполнить тело, Выполнить шаг if (i < 3) {console.log(i); i++}

//Если условие == true

//→ Выполнить тело, Выполнить шаг if (i < 3) {console.log(i); i++}

//Если условие == true

//→ Выполнить тело, Выполнить шаг if (i < 3) {console.log(i); i++}

//...конец, потому что теперь i == 3

25

Таблица 1. Конструкция for

Встроенное объявление переменной

В примере переменная счетчика i была объявлена прямо в цикле. Это так называемое «встроенное» объявление переменной. Такие переменные существуют только внутри цикла.

for (let i = 0; i < 3; i++) { console.log(i); // 0, 1, 2

}

console.log(i); // ошибка, нет такой переменной

Вместо объявления новой переменной можно использовать уже существующую.

let i = 0;

for (i = 0; i < 3; i++) {

// используем существующую переменную console.log(i); // 0, 1, 2

}

console.log(i); // 3,

//переменная доступна,

//так как была объявлена снаружи цикла

Пропуск частей «for»

Любая часть for может быть пропущена.

Можно пропустить начало, если ничего не нужно делать перед стартом цикла.

let i = 0;

//уже есть объявленная i с присвоенным значением for (; i < 3; i++) {

//нет необходимости в «начале»

console.log(i); // 0, 1, 2

}

26

Можно убрать и шаг.

Это сделает цикл аналогичным while (i < 3). let i = 0;

for (; i < 3;) { console.log( i++ );

}

Можно вообще убрать все, получив бесконечный цикл. for (;;) {

// будет выполняться вечно

}

При этом сами точки с запятой «;» обязательно должны присутствовать, иначе получится синтаксическая ошибка.

Прерывание цикла «break»

Обычно цикл завершается при получении значения условия false. Но можно выйти из цикла в любой момент с помощью специальной директивы break.

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем выдает их.

let sum = 0; while (true) {

let value = +prompt("Введите число", ''); if (!value) break; // (*)

sum += value;

}

console.log('Сумма: ' + sum);

Директива break в строке (*) полностью прекращает выполнение цикла и передает управление на строку за его телом, то есть на console.log.

Сочетание «бесконечный цикл + break» можно использовать в тех ситуациях, когда условие, при выполнении которого нужно прерваться, находится не в начале или в конце цикла, а посередине.

Переход к следующей итерации «continue»

Директива continue – «облегченная версия» break. При ее выполнении цикл не прерывается, а переходит к следующей итерации (если условие все еще равно true). Ее используют, если понятно, что на текущем повторе цикла делать больше нечего.

Например, следующий цикл использует continue, чтобы выводить только нечетные значения.

for (let i = 0; i < 10; i++) {

//если true,

//то пропустить оставшуюся часть тела цикла if (i % 2 == 0) continue;

console.log(i); // 1, затем 3, 5, 7, 9

27

}

Для четных значений i директива continue прекращает выполнение тела цикла и передает управление на следующую итерацию for (со следующим числом). Таким образом, console.log вызывается только для нечетных значений.

Директива continue позволяет избегать вложенности.

Цикл, который обрабатывает только нечетные значения, мог бы выглядеть так:

for (let i = 0; i < 10; i++) { if (i % 2) {

console.log(i);

}

}

С технической точки зрения он полностью идентичен. Действительно, вместо continue можно просто описать действия внутри блока if. Однако при этом получается дополнительный уровень вложенности фигурных скобок. Если код внутри if более длинный, то это ухудшает читаемость, в отличие от варианта с continue.

Обратите внимание, что директивы break и continue не могут быть использованы с тернарным оператором «?». Например, следующий код содержит синтаксическую ошибку:

(i > 5) ? console.log(i) : continue; // continue здесь приведет к ошибке

Корректная запись в этом случае следующая: if (i > 5) {

console.log(i);

}else { continue;

}

Метки для break/continue

Иногда бывает, что нужно выйти одновременно из нескольких уровней цикла сразу. Например, в следующем коде есть два цикла: по i и по j, один вложен в другой. Внутри выполняется запрос координат (i, j) от (0,0) до (2,2) с помощью функции prompt:

for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) {

let input = prompt('Значение при координатах

(${i},${j})', '');

//Что если мы захотим перейти к «Готово!»

//прямо отсюда?

}

}

console.log('Готово!');

28

В этом случае нужна возможность остановить выполнение, если пользователь отменит ввод.

Обычный break после input прервет внутренний цикл, но этого недостаточно. Достичь желаемого поведения можно с помощью меток.

Метка имеет вид идентификатора с двоеточием перед циклом: labelName: for (...) {...}.

Вызов break <labelName> в следующем цикле ищет ближайший внешний цикл с такой меткой и переходит в его конец.

outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) {

let input = prompt('Значение при координатах

(${i},${j})', '');

//если пустая строка или «Отмена»,

//то выйти из обоих циклов

if (!input) break outer; // (*)

// сделать что-нибудь со значениями...

}

}

console.log('Готово!');

В этом примере это означает, что вызовом break outer будет разорван внешний цикл до метки с именем outer и управление перейдет со строки, помеченной (*), к console.log('Готово!').

Можно также размещать метку на отдельной строке: outer:

for (let i = 0; i < 3; i++) {...}

Директиву continue тоже можно использовать с меткой. В этом случае управление перейдет на следующую итерацию цикла с меткой.

Метки не дают возможность передавать управление в произвольное место кода. Например, нет возможности сделать следующее:

break label; // не прыгает к метке ниже label: for (...)

Вызов break или continue возможен только внутри цикла, и метка должна находиться где-то выше этой директивы.

Практические задания

1. При помощи цикла for выведите числа по варианту из табл. 2.

Таблица 2. Варианты задания

29

2. В исходном коде замените for на while и наоборот, используя условия (диапазон, операцию) по варианту из табл. 3.

Таблица 3. Варианты задания

3. Найдите в массиве var arr = [ … ] первое число (x), удовлетворяющее условию, и прекратите выполнение цикла. Массив и условие возьмите по варианту из табл. 4.

Таблица 4. Варианты задания

4. Натуральное число (больше единицы) называется простым, если оно ни на что не делится, кроме себя и единицы, т.е. n > 1 – простое, если при делении на любое число от 2 до n – 1 есть остаток.

Напишите код, который выводит все простые числа из диапазона по варианту из табл. 5.

Таблица 5. Варианты задания

30