For…of

Для «var» не существует блочной области видимости

Область видимости переменных ограничивается либо функцией, либо, если переменная глобальная, то скриптом. Такие переменные доступны за пределами блока.

Например:

Так как игнорирует блоки, мы получили глобальную переменную .

А если бы мы использовали вместо , тогда переменная была бы видна только внутри :

Аналогично для циклов: не может быть блочной или локальной внутри цикла:

Если блок кода находится внутри функции, то становится локальной переменной в этой функции:

Как мы видим, выходит за пределы блоков , и подобных. Это происходит потому, что на заре развития JavaScript блоки кода не имели лексического окружения. Поэтому можно сказать, что – это пережиток прошлого.

10) addEvent()

Несомненно, важнейший инструмент в управлении событиями! Вне зависимости от того, какой версией вы пользуетесь и кем она написана, она делает то, что написано у неё в названии: присоединяет к элементу обработчик события.

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn)
	}
	else {
		elem = fn
	}
}

Этот код обладает двумя достоинствами — он простой и кросс-браузерный.

Основной его недостаток — в том, он не передает в обработчик для IE. Точнее, этого не делает .

Для передачи правильного this можно заменить соответствующую строку на:

elem.attachEvent("on"+evType, function() { fn.apply(elem) })

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

Существует два варианта обхода проблемы:

  1. Возвращать функцию, использованную для назначения обработчика:
    function addEvent(elem, evType, fn) {
    	if (elem.addEventListener) {
    		elem.addEventListener(evType, fn, false)
                    return fn
    	}
    
            iefn = function() { fn.call(elem) } 
            elem.attachEvent('on' + evType, iefn)
    	return iefn
    }
    
    function removeEvent(elem, evType, fn) {
    	if (elem.addEventListener) {
    		elem.removeEventListener(evType, fn, false)
                    return
    	}
     
            elem.detachEvent('on' + evType, fn)
    }
    

    Используется так:

    function handler() { 
        alert(this) 
    }
    var fn = addEvent(elem, "click", handler)
    ...
    removeEvent(elem, "click", fn)
    
  2. Можно не использовать в обработчике события вообще, а передавать элемент через замыкание:

    function handler() { 
       // используем не this, а переменную, ссылающуюся на элемент
        alert(*!*elem*/!*) 
    }
    ...
    

В качестве альтернативы и для примера более серьезной библиотеки обработки событий вы можете рассмотреть статью Кросс-браузерное добавление и обработка событий.

Breaking the loop

Normally, a loop exits when its condition becomes falsy.

But we can force the exit at any time using the special directive.

For example, the loop below asks the user for a series of numbers, “breaking” when no number is entered:

The directive is activated at the line if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop. Namely, .

The combination “infinite loop + as needed” is great for situations when a loop’s condition must be checked not in the beginning or end of the loop, but in the middle or even in several places of its body.

Цикл «for»

Более сложный, но при этом самый распространённый цикл — цикл .

Выглядит он так:

Давайте разберёмся, что означает каждая часть, на примере. Цикл ниже выполняет для от до (но не включая) :

Рассмотрим конструкцию подробней:

часть
начало Выполняется один раз при входе в цикл
условие Проверяется перед каждой итерацией цикла. Если оно вычислится в , цикл остановится.
шаг Выполняется после тела цикла на каждой итерации перед проверкой условия.
тело Выполняется снова и снова, пока условие вычисляется в .

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

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

Если тема циклов для вас нова, может быть полезным вернуться к примеру выше и воспроизвести его работу на листе бумаги, шаг за шагом.

Вот в точности то, что происходит в нашем случае:

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

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

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

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

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

Вот так:

Можно убрать и :

Это сделает цикл аналогичным .

А можно и вообще убрать всё, получив бесконечный цикл:

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

Тернарный оператор javaScript

Тернарный оператор языка javascript — это сокращенная форма конструкции .

Оператор включает в себя три операнда:
(1. условие 2. выполнить, если условие истинно 3. выполнить, если условие ложно)

В случае истинности условия выполняется то, что стоит до знака , в случае ложности условия — выполняется то, что стоит после знака .

Рассмотрим синтаксис тернарного оператора на примере:

Пример:

str1 = (y%2) ? "нечетное"  "четное"

В переменную будет записано значение «нечетное», в случае, когда имеет нечетное значение, и «четное» — в обратном случае.

Пример 3: Переменной присваивать значение в случае истинности условия и присваивать в случае истинности условия

Решение:

  • Создайте веб-страницу с html-скелетом и тегом script.
  • Добавьте следующий код:
var a = 10;
var b = (a>1) ? 100  200;
alert(b);

Если условие a>1 истинно, то переменной b присвоить значение 100, иначе переменной b присвоить значение 200.
Протестируйте сценарий в браузере.

Задание Js 3_4. Дополнить код: объявлено 3 локальные переменные с использованием ключевого слова . Необходимо в переменную присвоить значение следующего тернарного оператора: если больше , то возвращаем , иначе возвращаем .Фрагмент кода:

var a = 1, b = 2, max = ;
...
document.write(max);

Задание Js 3_5. Исправьте код с оператором IF на тернарный оператор:Код:

if (a * b < 6) {
  result = 'Мало';
} else {
  result = 'Много';
}

Вопросы для самоконтроля:

  1. Каков синтаксис тернарного оператора?
  2. Сколько аргументов у тернарного оператора?

Как JavaScript отличается от других языков программирования?

Причина, по которой JavaScript является одним из самых популярных языков программирования, его универсальность. К слову, много разработчиков обращаются к языку программирования JavaScript как к основному, а к другим языкам только, если им потребуется что-то более специфическое.

Давайте посмотрим на несколько популярных языков программирования:

JavaScript JavaScript или сокращённо JS создан для добавления интерактивности на сайте. Скрипты запускаются в браузере пользователя, а не на сервере и обычно обращаются к библиотекам третьей стороны для обеспечения более расширенных функций без надобности каждый раз писать этот код разработчикам.
HTML Сокращённо от «Hypertext Markup Language», HTML — это основной язык программирования для веб, формирующий строительные блоки веб-страницы. Пример: HTML тэги, включая <p> для параграфа и <img> для изображений.
PHP PHP — язык стороны сервера в отличие от JavaScript, который запускается на компьютере клиента. Его можно чаще всего встретить в системах управления контентом основанных на PHP как, например, WordPress, но он также широко используется для создания бэкенда, так как предоставляет удобные способы передачи информации в и из базы данных.
CSS CSS — сокращение от «Cascading Style Sheets» и позволяет веб-мастерам задать стили и определить как отображается различный тип контента. Вы можете делать это вручную для каждого элемента HTML, но с применением CSS вы убережёте себя от необходимости повторять способ отрисовки элементов каждый раз при их появлении.

Если мы сравним программирование со строительством дома, то HTML будет задавать структуру дома и где будут расположены стены и двери, в то время как CSS будет отвечать для обои и отделку, которые украшают дом, чтобы сделать его более привлекательным. JavaScript добавляет удобство и означает, что вы можете включить свет и открыть двери. Вы можете обойтись и без этого, но есть риск того, что ваш сайт будет выглядеть и вести себя как «привет из» 1995 года.

Приоритет операторов

В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.

Из школы мы знаем, что умножение в выражении выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.

Скобки важнее, чем приоритет, так что, если мы не удовлетворены порядком по умолчанию, мы можем использовать их, чтобы изменить приоритет. Например, написать .

В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.

Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):

Приоритет Название Обозначение
17 унарный плюс
17 унарный минус
16 возведение в степень
15 умножение
15 деление
13 сложение
13 вычитание
3 присваивание

Так как «унарный плюс» имеет приоритет , который выше, чем у «сложения» (бинарный плюс), то в выражении сначала выполнятся унарные плюсы, а затем сложение.

Оператор переключения в javaScript — switch

Оператор javascript служит для проверки переменной на множество значений:

Проверяется значение переменной или выражения: в каждом case проверяется одно из значений, в случае подходящего значения выполняется тот или иной блок операторов, соответствующий данному case.

Блок, начинающийся со служебного слова можно опустить. Операторы блока будут выполнены в случае, если ни одно из перечисленных значений во всех case не подходит.

Важно: Оператор обязателен после каждого рассмотренного значения переменной (после каждого case); если его не использовать, то будут выведены все, расположенные ниже операторы

Сравним с оператором IF:

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 2;
switch(a) 
{
	case  // if (a === 0)
	case 1 // if (a === 0)
		alert("Ноль или один"); // тогда выводим ...
		break;
	case 2 // if (a === 2)
	        alert("Два"); // тогда выводим ...
		break;
	default // else
		alert("Много"); // иначе выводим ...
}

Как сгруппировать несколько вариантов?
Для выполнения одних и тех же операторов возможно группировка нескольких case. Как в примере выше:

...
case  
case 1 
	alert("Ноль или один"); 
	break;
...

При и выполняется один и тот же оператор:

Пример 4: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета «синий» и «голубой» выдавать одно и то же значение.

Решение:

  • Создайте веб-страницу с html-скелетом и тегом script.
  • Инициализируйте переменную color значением, введенным пользователем в модальное окно:
var color = prompt("Какой цвет?");

Проверьте значение переменной с помощью конструкции switсh, выводя на каждое значение — соответствующий перевод:

2
3
4
5
6
7
8
9
switch (color) {
  case "красный" 
    alert("red");
    break;
  case "зеленый"
    alert("green");
    break;
  // ...

Если переменная color имеет значение «красный», то вывести в модальное окно перевод — «red» и выйти из конструкции (). Если переменная color имеет значение «зеленый», то вывести в модальное окно перевод — «green» и выйти из конструкции (break;).
Для цветов «синий» и «голубой» выполните группировку:

 // ...
 case "синий"
 case "голубой"
    alert("blue");
    break;
 // ...

Если переменная color имеет значение «синий» или переменная color имеет значение «голубой», то вывести в модальное окно перевод — «blue» и выйти из конструкции ().

Организуйте вывод для тех цветов, которые не предусмотрены программой:

 // ...
  default
    alert("y нас нет сведений по данному цвету")
} // конец switch

Протестируйте сценарий в браузере.

Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var number = prompt("Введите число 1 или 2:");
switch (number) { 
case "1"
  {
    document.write("Один");
  };
    break;
case "2"
  {
    document.write("Два");
  };
  break;
default
  {
    document.write("Вы ввели значение, отличное от 1 и 2");
  };
}

Задание Js 3_7. Что выведется на экране при выполнении следующего кода?:

1
2
3
4
5
6
7
8
9
10
11
12
13
var value = "2";
 switch (value) {
 case "1"
 case "2"
 case "3"
 document.write("Hello");
 break;
 case "4"
 case "5" 
 document.write("World");
 default
 document.write("Error");
 }

Задание Js 3_8. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение:

- На ветке сидит 1 ворона
- На ветке сидит 4 вороны
- На ветке сидит 10 ворон

Рекомендации:

  1. В зависимости от введенного числа, меняется окончание у слова «ворона».
  2. Для проверки использовать оператор javascript.
  3. Сохраните данную страницу в папке результатов (она пригодится для дальнейших работ).

Вопросы для самоконтроля:

  1. В каком случае целесообразно в качестве условного оператора использовать конструкцию switch?
  2. Для чего служит блок в операторе switch?
  3. Обязательно ли использование оператора в конструкции switch?
  4. Как осуществляется группировка для нескольких вариантов значений в операторе switch?

setTimeout и setInterval

В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они и .

Отличаются они друг от друга лишь тем, что выполняет вызов функции всего один раз, а – постоянно через указанный интервал времени.

Синтаксис и :

// setTimeout
window.setTimeout(func  );
// setInterval
window.setTimeout(func  );

Параметры:

  • – функция, которую нужно вызвать спустя указанное в количество миллисекунд;
  • – количество миллисекунд по истечении которых нужно выполнить ;
  • – дополнительные аргументы, которые нужно передать в .

Например, вызовем функцию один раз по прошествии 3 секунд:

// функция
function myFunc() {
  console.log('after 3 seconds');
}

// вызовем функцию myFunc после 3 секунд
window.setTimeout(myFunc, 3000);
// выведем сообщение в консоль
console.log('immediately');

При выполнение этого кода программа не остановится на месте, где мы зарегистрировали некоторую асинхронность посредством и не будет блокировать её дальнейшее выполнение на 3 секунды, через которые нужно будет вызвать . Выполнение скрипта продолжится дальше и сначала браузер выведет в консоль сообщение «immediately», а затем через 3 секунды – «after 3 seconds».

Другими словами, когда браузер доходит до исполнения , он как бы помещает функцию в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.

Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код, а также что такое event loop и как он работает.

Синхронный и асинхронный код

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

Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов (call stack). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.

Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.

В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.

Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.

Если функцию необходимо вызывать не один раз, а постоянно через каждые 3 секунды, то тогда вместо следует использовать :

window.setInterval(myFunc, 3000);

Пример, с передачей функции аргументов:

function sayHello(name) {
  alert(`Привет, ${name}!`);
}
setTimeout(sayHello, 3000, 'Василий'); // Привет, Василий!

Пример, с использованием в анонимной функции:

setTimeout(function (name) {
  alert(`Привет, ${name}!`);
}, 3000, 'Василий');

В и можно также вместо функции передавать строку с кодом, который нужно выполнить через определённый интервал времени. Но этот вариант использовать не рекомендуется по тем же причинам, что и функцию .

Если функция по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:

function sayHello() {
  console.log('Привет!');
}

// передаём в setTimeout не ссылку на функцию sayHello, а результат её вызова
setTimeout(sayHello(), 3000);

Цикл for

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

Описание синтаксиса:

  1. Инициализация. Присваивается первоначальное значение переменной, обычно – счетчика. Выполняется только один раз в начале выполнения оператора. Областью действия этой переменной будет тело цикла.
  2. Выражение – булево выражение, которое вычисляется на каждой итерации цикла. Представляет собой условие продолжения работы оператора цикла. После того, как значение счетчика достигнет указанного предела, цикл завершится.
  3. Обновление – это значение, на которое будет увеличиваться или уменьшаться счетчик цикла. Вычисляется по завершении каждой итерации цикла. Чтобы оно было полезным, как и выражение инициализации, оно должно иметь побочные эффекты. В общем случае таким побочным эффектом служит операция присваивания, инкремента или декремента.

Пример цикла for:

Выполнить код »
Скрыть результаты

Рассмотрим выполнение этого цикла более подробно:

  1. Инициализация: Переменная-счетчик, в данном случае х, инициализируется значением 1. Выполняется один-единственный раз, при заходе в цикл.
  2. Выражение: x – это условие продолжения цикла for, оно проверяется перед каждой итерацией и при входе в цикл на истинность. Если это так, то выполняются инструкции тела цикла (в данном случае – инструкция alert( x + » » );).
  3. Обновление: x++ – изменяет значение переменной-счетчика. Выполняется после тела на каждой итерации, но перед проверкой условия x .
  4. Тело цикла: alert( x + » » ) – тело цикла обрамляется фигурными скобками, если тело цикла состоит из одной операции, то фигурные скобки можно опустить.

Иными словами, поток выполнения цикла: Инициализация → (если условие выражения → тело цикла → обновление (x++)) → (если условие выражения → тело цикла → обновление (x++)) → … и так далее, пока верно условие – x .

Циклы for могут быть более сложными, чем в приведенных выше примерах. В некоторых циклах на каждой итерации может изменяться одновременно несколько переменных. В таких циклах часто применяется оператор «запятая» – он позволяет объединить несколько выражений инициализации и инкрементирования в одно, например:

Выполнить код »
Скрыть результаты

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

Директива – «облегчённая версия» . При её выполнении цикл не прерывается, а переходит к следующей итерации (если условие все ещё равно ).

Её используют, если понятно, что на текущем повторе цикла делать больше нечего.

Например, цикл ниже использует , чтобы выводить только нечётные значения:

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

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

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

С технической точки зрения он полностью идентичен. Действительно, вместо можно просто завернуть действия в блок .

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

Нельзя использовать справа от оператора „?“

Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором. В частности, использование таких директив, как , вызовет ошибку

Например, если мы возьмём этот код:

…и перепишем его, используя вопросительный знак:

…то будет синтаксическая ошибка.

Это ещё один повод не использовать оператор вопросительного знака вместо .

Метки для break/continue

Бывает, нужно выйти одновременно из нескольких уровней цикла сразу.

Например, в коде ниже мы проходимся циклами по i и j , запрашивая с помощью prompt координаты (i, j) с (0,0) до (2,2) :

Нам нужен способ остановить выполнение если пользователь отменит ввод.

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

Метка имеет вид идентификатора с двоеточием перед циклом:

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

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

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

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

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

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

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

Контроль потока

Запускаете ли вы таски параллельно, планируете цикл или создаёте каскадируемую структуру или пайплайн,  может упростить то, во что превращается ваш процесс, в коде с эффективным и читаемым контролем потока. Давайте пробежимся по популярным паттернам:

1. Параллельное выполнение

Нет конкретного синтаксиса для параллельного выполнения с помощью , но мы можем применить с массивом промисов, чтобы получить ожидаемые результаты:

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

2. Таймауты

Пожалуй самый малоизвестный герой саги об  это таймауты в промисах. Это эффективно и необходимо, особенно тогда, когда используется в контексте цикла (смотрите отложенный цикл ниже), мы можем оборачивать обычные таймеры (, ) в промисы, например как тут:

Мы можем пустить эти функции в дело, создав асинхронную паузу (без блокирования процесса), между двумя функциями, вне зависимости от того синхронные они или асинхронные:

Таким образом мы никогда не покинем контекст функции, что ведёт к более элегантному коду, который использовался должным образом.

Асинхронный Итератор

В ECMAScript 2018 была введена новая конструкция, способная циклически повторять массив промисов. Эта новая конструкция выглядит как , а новый символ — .

Функция  в итерируемых объектах возвращает итератор, который возвращает промис.

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

Объект f будет выглядеть так:

 — это асинхронный итератор. Он всегда возвращает промис, обладающий функцией resolve, которая возвращает значение на каждой итерации.

Чтобы выполнить итерацию через , используем новую конструкцию , вместо :

С помощью  можно также совершить цикл через массив промисов:

Синтаксис цикла while

Синтаксис циклов for и while очень похож.

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

Вот, как должен выглядеть код:

while ()  
{  
// вставьте сюда код, который должен выполняться циклично  
}

Самая трудная часть — это определить, какое условие или условия нужно поместить в цикл, чтобы он работал должным образом.

Следует помнить, что пока условие является истинным, цикл будет продолжать работать. Давайте рассмотрим пример использования в JavaScript while.

Цикл while()

Цикл while() называют еще циклом с предусловием. Это значит, что вы записываете в скобках после ключевого слова while некое условие, которое возвращает либо , либо . Если возвращается , цикл выполняется, если же , то нет. Синтаксис этого цикла таков:

Цикл while()

JavaScript

while( условие ){
//код цикла
операция 1;

операция n;
}

1
2
3
4
5
6

while(условие){

//код цикла

операция1;

операцияn;

}

Если переводить JavaScript-код на русский язык, то смысл цикла while можно выразить такой фразой: пока (while) выполняется условие, мы будем делать некоторые операции.

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

Использование цикла while для подсчете чисел в заданном диапазоне

JavaScript

<form name=»numbers»>
<p>
<label for=»from»>От числа</label> <input type=»number» min=»1″ max=»50″ value=»1″ id=»from»>
</p>
<p>
<label for=»to»>До числа</label> <input type=»number» min=»1″ max=»50″ value=»5″ id=»to»>
</p>
<p><input type=»button» value=»Подсчитать» id=»countBtn»></p>
</form>
<script>
document.numbers.countBtn.onclick = countNumbers;
function countNumbers () {
let from = +document.numbers.from.value,
to = +document.numbers.to.value;
if(from > to) {
let temp = from;
from = to;
to = temp;
}
let sum = from;
while(to>from){
from++;
sum += from;
}
alert(sum);
}
</script>

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

<form name=»numbers»>

<p>

<label for=»from»>Отчисла<label><input type=»number»min=»1″max=»50″value=»1″id=»from»>

<p>

<p>

<label for=»to»>Дочисла<label><input type=»number»min=»1″max=»50″value=»5″id=»to»>

<p>

<p><input type=»button»value=»Подсчитать»id=»countBtn»><p>

<form>

<script>

document.numbers.countBtn.onclick=countNumbers;

functioncountNumbers(){

let from=+document.numbers.from.value,

to=+document.numbers.to.value;

if(from>to){

let temp=from;

from=to;

to=temp;

}

let sum=from;

while(to>from){

from++;

sum+=from;

}

alert(sum);

}
</script>

В этом примере цикл не выполнится ни разу в том случае, если значения начального и конечного чисел совпадут. Если же первое число будет больше, чем второе,  мы поменяем их местами и цикл выполнится, как нужно.

Попробуйте сами:

Поскольку условие цикла while() должно вернуть либо , либо , мы можем использовать в нем диалоговое окно confirm(), которое как раз возвращает одно из этих логических значений в зависимости от выбора пользователя.

Использование диалогового окна confirm() в цикле while()

JavaScript

const prediction = ;
while (confirm(«Хотите получить предсказание»)) {
let rand = Math.floor(Math.random() * prediction.length);
alert(prediction);
}

1
2
3
4
5
6
7
8

constprediction=»У вас сегодня удачный день»,»Вам нужно задуматься о вашем выборе»,

«Сегодня вас ждет сюрприз»,»Вы — любимчик удачи»,»Попробуйте еще раз»,»Азартные игры не для вас»,

«Учите JavaScript — и вас ждет успех»,»Пора сделать зарядку»,»Перерыв на кофе-чай-печеньки сейчас будет кстати»,

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

while(confirm(«Хотите получить предсказание»)){

let rand=Math.floor(Math.random()*prediction.length);

alert(predictionrand);

}

Давайте немножко погадаем:

Получить предсказание

Примечание: цикл while — это тот цикл, с помощью которого лучше всего обычно получается «подвесить» браузер. Т.е. вы можете таким образом сформулировать условие в нем, что оно всегда будет возвращать , соответственно, цикл будет бесконечным и будет замедлять работу браузера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector