3.3. Примеры
Сейчас мы просто рассмотрим ряд примеров, которые помогут нам хорошенько закрепить циклы, тем более наглядно покажут нам приемы, с которыми мы будем работать.
1. Задание: Вывести на экран десять звездочек.
Решение: если посмотреть на пример выше, то логично понятно, что можно его скопировать, в тело цикла вставить вывод звездочки (одной) и дело в шляпе. Для тех, кто до сих пор не понял, объясняем: необходимо операцию вывода звездочки document.write(‘*’) повторить десять раз. Для этого мы воспользуемся конструкцией while, которая позволяет повторять действия. Для того, чтобы заставить ее повторить вывод именно десять раз, необходимо считать сколько раз повторилось данное действие вообще. Соответственно, мы создадим переменную, которая будет считать именно это. С самого начала она будет равна нуля, а каждый вывод на экран (после него) мы будем ее увеличивать на единицу. Наш цикл будет повторяться до тех пор, пока (не забыли, что пока переводиться как while) наш счетчик, не достиг десяти, другими словами пока он меньше десяти. Вот и все.
<html> <head> <script type="text/javascript"> var count = 0; while (count < 10); { document.write("*"); count ++; } </script> </head>
2. Задание: Запросить у пользователя, сколько звездочек вывести. Соответственно столько звездочек и вывести.
Решение: Эта задача подобна прошлой. У нас появляется новая переменная, в которую мы запишем пожелание пользователя (сколько раз будет выполнен цикл). Как вы думаете, как сделать, чтобы наш цикл выполнялся именно столько раз? Конечно, вместо 10-ки (из прошлой задачи) подставить эту переменную.
<html> <head> <script type="text/javascript"> var count = 0; var kol = prompt("Введите сколько звездочек вы хотите видеть?", 10); kol = parseInt(kol); while (count < kol) { document.write("*"); count++; } </script> </head>
Единственная незадача – это то, что если нажать отмена, то выведется одна звездочка. Подумайте, как это предотвратить.
3. Задание: Запросить у пользователя, сколько звездочек он хочет увидеть и в каком расположении он их хочет увидеть: горизонтальном или вертикальном.
Решение: с первого взгляда, кажется, что эта задача сложная, хотя давайте размышлять логически: необходимо создать новую переменную и запросить у пользователя еще одни данные: пусть 1 – это горизонтальная линия из звездочек, а 2 – это вертикальная. Давайте подумаем, чем отличается вертикальная линия, от горизонтальной при выводе? Конечно, всего-навсего переносом курсора после каждой звездочки. Т.е. если у нас горизонтальная линия, то мы выводим обычную звездочку, а если вертикальная, то звездочку и тег <BR>.
<html> <head> <script type="text/javascript"> var count = 0; var kol = prompt("Введите сколько звездочек вы хотите видет?", 10); kol = parseInt(kol); var vert = prompt("1. Горизонтальная линия, 2. Вертикальная линия", 1); vert = parseInt(vert); while (count < kol) { document.write("*"); if (vert == 2) document.write("<BR>"); count++; } </script> </head>
4. Задание: Необходимо выводить звездочки, пока пользователь не остановит этот процесс. Соответственно, после вывода каждой звездочки спрашивать у пользователя хочет ли он еще.
Решение: Все просто используем конструкцию confirm(), которая возвращает true, если пользователь нажал ОК. Эту конструкцию можно засунуть, прям в условие, ведь она выдает либо true, либо false. Если мы зададим следующий вопрос: «Хотите увидеть звездочку?», то если пользователь ответит да, то конструкция вернет true и цикл продолжиться, в следующий раз он опять будет проверять условие и опять сработает эта конструкция. В этом случае вообще не нужен счетчик, потому что в данном случае мы не знаем сколько раз будет выполнен скрипт. Вот вам первый пример, когда не нужно использовать счетчик.
<html> <head> <script type="text/javascript"> while (confirm("Хотите увидеть звездочку?")) { document.write("*"); } </script> </head>
5
.
Следующий пример прокомментируем так:
если вы будете запрашивать у пользователя,
к примеру, ввести один из двух вариантов:
1 или 2, то если пользователь введет 3, к
примеру, то не понятно как работать
программе. Можно поставить проверку и
вывести, что пользователь допустил
ошибку. Но, чтобы ввести заново эти
данные, пользователю придется перезапустить
скрипт. Это не сильно эргономично.
Представьте сайт солидной организации,
у которой вам нужно перезапускать
скрипт, если вы что-то не так сделали.
Следующий скрипт показывает, как
выбраться из этой ситуации.
<html> <head> <script type="text/javascript"> var num = prompt("Введите число 1 или 2.", 1); num = parseInt(num); while (num != 1 && num != 2) { var num = prompt("Вы ввели не правильное число. Введите число 1 или 2.", 1); num = parseInt(num); } </script> </head>
Либо можно сделать следующее:
<html> <head> <script type="text/javascript"> do { if (num != undefined) var error = 'Вы ввели не правильное число. '; else var error = ''; var num = prompt(error + "Введите число 1 или 2.", 1); num = parseInt(num); } while (num != 1 && num != 2); </script> </head>
А можно еще сократить код:
<html> <head> <script type="text/javascript"> do { var num = prompt((num != undefined ? 'Вы ввели не правильное число. ' : '') + "Введите число 1 или 2.", 1); num = parseInt(num); } while (num != 1 && num != 2); </script> </head>
Теперь понятно, зачем нам нужно два цикла: while и do..while. Под каждую задачу есть своя реализация, но, честно говоря, в большинстве случаев люди пользуются теми конструкциями, к которым они больше привыкли.
6. Еще пару слов о цикле do..while. Задание: Предположим, нам необходимо написать программу, в которой пользователю предоставляется право выбора какого-то действия несколько раз подряд. Реализуем данную задачу сначала с помощью while, а затем с помощью do while. Проанализируйте код:
<html> <head> <script type="text/javascript"> var answer, A, B, RES; // запрос на выбор операции answer = prompt("\nВыберите операцию:\n\n 1 - если вы хотите увидеть сумму.\n\n 2 - если вы хотите увидеть разницу.\n\n 3 - если вы хотите выйти.\n\n", 1); answer = parseInt(answer); while(answer != 3) //проверка условия { switch(answer){ case 1: //если пользователь выбрал сложение A = prompt("Введите первое число: ", 1); A = parseInt(A); B = prompt("Введите второе число: ", 1); B = parseInt(B); RES = A+B; alert("Результат: " + RES); break; // остановка switch case 2: // если пользователь выбрал вычитание A = prompt("Введите первое число: ", 1); A = parseInt(A); B = prompt("Введите второе число: ", 1); B = parseInt(B); RES = A-B; alert("Результат: " + RES); break; // остановка switch case 3: // если пользователь выбрал выход alert("Выход!!!"); break; default: // если выбранное действие некорректено alert("Ошибка, эта операция не корректна. Повторите ввод."); } // запрос на выбор операции answer = prompt("\nВыберите операцию:\n\n 1 - если вы хотите увидеть сумму.\n\n 2 - если вы хотите увидеть разницу.\n\n 3 - если вы хотите выйти.\n\n", 1); answer = parseInt(answer); } alert("Пока!!!"); </script> </head>
В данном примере пользователю предлагается выбрать действие. Затем, после ввода, программа проверяет: если это действие – выход из программы – программа завершается, если нет, то производится вход в цикл, анализ действия и выполнение математической операции. Затем программа, снова спросит у пользователя, что он хочет сделать.
Данный код является неоптимальным решением. Как видите, фрагмент запроса у пользователя действия повторяется несколько раз. В этом случае следует использовать do while. Данная конструкция приведет код к надлежащему виду:
<html> <head> <script type="text/javascript"> var answer, A, B, RES; do { // запрос на выбор операции answer = prompt("\nВыберите операцию:\n\n 1 - если вы хотите увидеть сумму.\n\n 2 - если вы хотите увидеть разницу.\n\n 3 - если вы хотите выйти.\n\n", 1); answer = parseInt(answer); switch(answer){ case 1: //если пользователь выбрал сложение A = prompt("Введите первое число: ", 1); A = parseInt(A); B = prompt("Введите второе число: ", 1); B = parseInt(B); RES = A+B; alert("Результат: " + RES); break; // остановка switch case 2: // если пользователь выбрал вычитание A = prompt("Введите первое число: ", 1); A = parseInt(A); B = prompt("Введите второе число: ", 1); B = parseInt(B); RES = A-B; alert("Результат: " + RES); break; // остановка switch case 3: // если пользователь выбрал выход alert("Выход!!!"); break; default: // если выбранное действие некорректено alert("Ошибка, эта операция не корректна. Повторите ввод."); } } while (answer != 3); //проверка условия alert("Пока!!!"); </script> </head>
Исходя из вышесказанного, вы должны понимать, что обе описанные в сегодняшнем уроке конструкции полезны. Вам необходимо лишь научиться выбирать ту или иную, в зависимости от задачи.
