03LoopsAndArrays.md 6.9 KB

Занятие 3. Циклы и массивы.

Отладка

Developer Tools содержит в себе множество средств отладки кода. Для хорошего понимания управляющих конструкций (условий и циклов) полезно разобраться с пошаговой отладкой - выполнением кода по шагам. Это позволяет увидеть, какие блоки кода выполняются или не выполняются в условных операторах и каковы значения переменных в каждый момент времени выполнения кода.

Для начала пошаговой отладки устанавливается точка останова - строка кода, с которой обычный режим выполнения прерывается и начинается отладка по шагам. В Developer Tools найдите вкладку Source, в ней свой файл c кодом, и кликните на номере нужной строки слева от текста кода.

Если вы используете http://repl.it или другие онлайн-IDE, или же console для большой части кода, то у вас будут определенные сложности с нахождением вашего кода и строки в нём. Поэтому вы можете вставить ключевое слово debugger в ваш код - это работает так же, как точка останова на строке в Developer Tools.

Отладка по шагам.

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

  • Step over next function call (F10) - следующий шаг/оператор в вашем коде. После выполнения каждой команды вы можете ознакомится со значениями переменных, наведя на них курсор мыши, написав их в консоли, или же используя вкладку Watch
  • Resume script execution, (F8) - переход из режима отладки по шагам в обычный режим выполнения кода. Таким способом вы пропускаете хорошо отлаженные части кода. Этот режим может быть прерван следующей точкой останова или ключевым словом debugger в коде.

Пошаговая отладка и консоль.

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

Задание 1

Поиграться с вашим ДЗ, добавив туда точки останова, и посмотреть, чему равны переменные и как ведут себя if и switch в зависимости от значения переменных.

Циклы.

Цикл - последовательность операторов, которая повторяется.

Цикл состоит из:

  • тела цикла, т. е. блока кода, который повторяется,
  • условия, которое проверяется перед очередным повтором цикла.

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

Ключевые слова break и continue.

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

  • break обрывает выполнение цикла в любом месте тела - программа продолжается после цикла;
  • continue обрывает выполнение текущей итерации и начинает следующую итерацию.

Цикл while

Цикл while выполняется, пока условие истинно и прекращает свое выполнение как только условие становится ложно:

var password = '';
var rightPassword = 'qwerty';

while (password != rightPassword){ //Пока пароль не равен верному...
	password = prompt('Введите пароль:', ''); //спрашивать пароль
} //возвращаемся на while (....)

Цикл while в некотором смысле схож с if - тело выполняется если условие верно; однако if выполняет тело однократно, а while выполняет тело пока условие верно.

break

var password = '';
var rightPassword = 'qwerty';

while (password != rightPassword){ //Пока пароль не равен верному...
	password = prompt('Введите пароль:', ''); //спрашивать пароль
	if (password == null){ //пользователь нажал отмену...
		break; //прерываем цикл
	}
}

continue

var user 	  = '';
var rightUser     = 'admin';
var password 	  = '';
var rightPassword = 'qwerty';

while (user != rightUser || password != rightPassword){ //Пока пользователь не равен верному или пароль не равен верному...
	user     = prompt('Введите имя пользователя:', ''); //спрашивать пользователя
	if (user != rightUser){ //нет смысла спрашивать пароль, если пользователь неверный, поэтому...
		continue;      //новая итерация.
	}
	password = prompt('Введите пароль:', ''); //спрашивать пароль
}