Чтобы прочесть данную статью, нужно знать строки в JavaScript.
Блок – это последовательность команд JavaScript, заключённая в фигурные скобки (“{” и “}”). В управляющих конструкциях блок может использоваться вместо одной команды.
Условные конструкции
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Условные конструкции</title> </head> <body> <script> var stroka, b = 5, c = 7; /* Если "c" больше "b", то "stroka" равна "c больше b", иначе "stroka" равна "c меньше b" */ stroka = (c > b) ? 'c больше b' : 'c меньше b'; alert(stroka); // Выводится "c больше b" </script> </body> </html> |
В данном примере используется конструкция: “(a) ? b : c”, где “a” – логическое значение, например, условие; “b” – значение конструкции, если “a” равно “true”; “c” – значение конструкции, если “a” равно “false”.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Условные конструкции</title> </head> <body> <script> var stroka = 'Вы можете смотреть фильм!', vozrast = 10; // Если возраст меньше 18, то Вам ещё рано if(vozrast < 18) stroka = 'Вам ещё рано смотреть этот фильм!'; // Выводится "Вам ещё рано смотреть этот фильм!" alert(stroka); </script> </body> </html> |
В данном примере используется конструкция “if(a) b; else c;”, где “a” – логическое значение; “b” – команда или блок, которые выполняются, если “a” равно “true”; “c” – команда или блок при “a” равном “false”. Часть “else c;” может быть не указана. Также “c” может быть следующей конструкцией “if…else…” как в следующем примере:
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Условные конструкции</title> </head> <body> <script> var stroka = '', summa = 150, napitok = 0, bulki = 0; /* Если сумма меньше 100, то ничего. Если сумма от 100 до 200, то один завтрак. Иначе завтрак на двоих */ if(summa < 100) stroka = 'Ничего'; else if(summa >= 100 && summa < 200) { stroka = 'Завтрак'; napitok = 1; bulki = 2; } else { stroka = 'Завтрак на двоих'; napitok = 2; bulki = 4; } // Выводится "Завтрак. Напиток: 1 шт. Булки: 2 шт." alert(stroka + '. Напиток: ' + napitok + ' шт. Булки: ' + bulki + ' шт.'); </script> </body> </html> |
Пример 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Условные конструкции</title> </head> <body> <script> var stroka = '', vremia = 'день'; // Перебор значений переменной "vremia" switch(vremia) { case 'утро': stroka = 'Доброе ' + vremia; break; case 'день': case 'вечер': stroka = 'Добрый ' + vremia; break; case 'ночь': stroka = 'Спокойной ночи'; break; default: stroka = 'Доброго времени суток'; } // Выводится "Добрый день!" alert(stroka + '!'); </script> </body> </html> |
В данном примере в фигурных скобках конструкции “switch” перебираются значения переменной “vremia” и выполняются команды соответствующие значениям. Каждый вариант значений указывается в команде “case a:”, где “a” – значение. После этой команды идут другие, выполняющиеся при этом значении. Команда “break” вызывает выход из конструкции “switch”. Если значение переменной не соответствует ни одному из вариантов, то выполняются команды после “default:”.
Циклы
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Циклы</title> </head> <body> <script> var chislo = 10, faktorial = 1; // Пока "chislo" больше 0 while(chislo > 0) { // Домножаем "faktorial" на "chislo" faktorial *= chislo; // Уменьшаем "chislo" на 1 chislo--; } // Выводится "Факториал = 3628800" alert('Факториал = ' + faktorial); </script> </body> </html> |
В данном примере используется цикл “while(a) b;”, где “a” – логическое значение, которое пока равно “true” выполняется команда или блок “b”.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Циклы</title> </head> <body> <script> var chislo = 10, faktorial = 1; do { // Домножаем "faktorial" на "chislo" faktorial *= chislo; // Уменьшаем "chislo" на 1 chislo--; } while(chislo > 0) // Пока "chislo" больше 0 // Выводится "Факториал = 3628800" alert('Факториал = ' + faktorial); </script> </body> </html> |
В данном примере используется цикл “do b; while(a) “, где выполняется команда или блок “b”; “a” – логическое значение, которое пока равно “true” выполняется команда или блок “b” ещё.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Циклы</title> </head> <body> <script> var chislo = 10, faktorial = 1; /* В начале "i" равно 1, потом пока "i" меньше или равно "chislo", то "faktorial" домножается на "i" и "i" увеличивается на 1 */ for(var i = 1; i <= chislo; i++) faktorial *= i; // Выводится "Факториал = 3628800" alert('Факториал = ' + faktorial); </script> </body> </html> |
В данном примере используется цикл “for(a; b; c) d;”, где “a” – команды через запятую, которые выполняются в начале; “b” – условия через запятую, при которых выполняется команда или блок “d”; “c” – команды через запятую, которые выполняются после каждого исполнения “d”.
Функции
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Функции</title> </head> <body> <script> // Описание функции "soobshenie" function soobshenie() { alert('Привет!'); } // Вызовы функции "soobshenie" soobshenie(); // Выводится "Привет!" soobshenie(); // Выводится "Привет!" soobshenie(); // Выводится "Привет!" </script> </body> </html> |
Функция с именем “soobshenie” описывается с помощью конструкции “function”. После “function” должно идти имя функции. Потом круглые скобки (“(” и “)”) с параметрами через запятую. Параметров в скобках может не быть как в данном примере. Далее идут фигурные скобки (“{” и “}”) с командами – тело функции. Параметр – это переменная, которая может использоваться в теле функции.
В данном примере после описания функции “soobshenie” указаны 3 вызова функции. При вызове функции записывается имя функции со значениями параметров в круглых скобках.
В месте описания функции команды не выполняются, а в местах вызовов функции исполняются команды из тела функции с параметрами, значения которых указаны при вызовах функции.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Функции</title> </head> <body> <script> // Описание функции "summa" function summa(a, b) { var c = a + b; alert('Сумма: ' + c); } // Вызовы функции "summa" summa(3, 5); // Выводится "Сумма: 8" summa(9, 1); // Выводится "Сумма: 10" summa(0, 5); // Выводится "Сумма: 5" </script> </body> </html> |
Описывается функция “summa”, которая выводит на экран сумму двух своих параметров. Потом эта функция вызывается 3 раза с разными значениями параметров.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Функции</title> </head> <body> <script> // Описание функции "slojenie" function slojenie(a, b) { return a + b; } /* Выводится: Сумма: 8 Сумма: 10 Сумма: 5 */ alert('Сумма: ' + slojenie(3, 5) + '\nСумма: ' + slojenie(9, 1) + '\nСумма: ' + slojenie(0, 5)); </script> </body> </html> |
В описании функции “slojenie” используется команда “return a;”, которая прекращает выполнение команд тела функции и в месте вызова создает значение “a” – возвращает результат функции (в данном примере сумму параметров функции). Значение “a” может не указываться.
Пример 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Функции</title> </head> <body> <script> // Описание функции "faktorial" function faktorial(chislo) { if(chislo == 1) return 1; else return faktorial(chislo - 1) * chislo; } // Выводится "Факториал = 3628800" alert('Факториал = ' + faktorial(10)); </script> </body> </html> |
Функция “faktorial” в своём описании вызывает саму себя. Это называется рекурсией.
