Практикум по программированию на JavaScript

Операторы if/else

Показывать лекцию целиком

Концепция

Этот второй пример с if включает случайное число, две функции и знакомство с If / Else.

Операторы If / Else (если/иначе) предоставляют дополнительный контроль над программой, позволяя принимать решение в обоих случаях: и когда условие выполнено, и когда не выполнено.

Сценарий

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
 function rand()
  {now=new Date();
   num=(now.getSeconds())%10;
   num=num+1;
   }
 function guessnum()
  {guess=prompt("Угадай, какое?")
   if (eval(guess) == num)
   {alert("ПРАВИЛЬНО!!");
    rand();
    }
     else
    alert("Нет.  Попробуй еще.");
      }
  </SCRIPT>
</HEAD>
<BODY onLoad="rand()">

  <h1>Я загадал число от 1 до 10</h1>

  <FORM NAME="myform">

    <INPUT TYPE="button" VALUE="Угадай" 
       NAME="b1" onClick="guessnum()">

  </FORM>
</BODY>
</HTML>

Результат работы сценария

На странице выводится текст "Я загадал число от 1 до 10" и кнопка с предложением "Угадай". При нажатии на кнопку выводится окно с полем ввода и словами "Угадай, какое". В зависимости от введенного числа пользователь получит то или иное сообщение.

Разбор сценария

Начнем с команды BODY.

<body bgcolor="white" onLoad="rand()">

На этот раз функция запускается не событием onClick в описании кнопки, а событием onLoad в команде BODY. В этом случае к тому времени, когда пользователь нажмет кнопку, число уже будет выбрано. Если сделать это по-другому, то каждый раз, нажимая на кнопку, вы будете получать новое случайное число. А оно должно оставаться одним и тем же, пока вы пытаетесь угадать.

Теперь первая функция:

function rand() {
now=new Date();
num=(now.getSeconds())%10;
num=num+1;
}

Функция выбирает наугад число из даты и времени от 0 до 9 и присваивает его num. Потом прибавляет к num единицу, чтобы выбор осуществлялся между 1 и 10. Мы делали это в прошлом уроке.

Теперь вторая функция:

function guessnum()
  {guess=prompt("Угадай, какое?")
   if (eval(guess) == num)
   {alert("ПРАВИЛЬНО!!!");
    rand();
    }
     else
    alert("Нет. Попробуй еще раз.");
    }

В памяти компьютера уже есть число, полученное через первую функцию. Вторая дает возможность угадать его. Смотрите, что происходит:

  • С помощью запроса prompt создается переменная guess (догадка). Функция eval() вычисляет или выполняет строку в скобках (выражение, команду или последовательность команд) и подставляет полученное значение вместо себя. Она не является методом какого-либо объекта, но может использовать свойства уже существующего. Обратите внимание на {фигурные скобки}. Все это очень похоже на Урок 21.
  • Переходим к IF/Else. Если ( if ) guess (догадка) равна загаданному числу num, тогда запускается команда alert("ПРАВИЛЬНО").
  • Если это не так ( else ), тогда запускается другая команда alert.
    •

    Остальное уже знакомо:

    <form name="myform" action="">
<input type="button" value="Угадай" name="b1" onClick="guessnum()">
</form>

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

    Задание

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

    Подсказка! В этом случае возможны только три результата: слишком много, слишком мало или правильно. Подумайте вот о чем: нужна ли команда Else или будет достаточно и парочки дополнительных If?

    Возможное решение

    Используем подсказку. Возможны только три результата: слишком мало, слишком много и точно. То есть каждый раз, когда пользователь вводит свою догадку, будет задействовано одно из трех условий. Здесь даже не понадобится ELSE. Таким образом, требуется только три утверждения IF.

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

    <html>
<head>
  <SCRIPT type="text/javascript">
    function rand()
      {now=new Date();
       num=(now.getSeconds())%10;
       num=num+1;
      }
    function guessnum()
      {guess=prompt("Угадай, какое?");
      if (eval(guess) == num)
         {alert("Точно!!!");
         }
      if(eval(guess) > num)
       {alert("Слишком много, жми еще.")}
      if(eval(guess) < num)
       {alert("Слишком мало, жми еще.")}
     }
  </script>
<body bgcolor="white" onLoad="rand()">
  <h2>Я загадал число от 1 до 10</h2>
  <form name="myform">
    <input type="button" value="Угадай" name="b1" onClick="guessnum()">
  </form>
</body>
</html>
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^