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

Оператор if и ветвление

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

Концепция

Этот пример знакомит с оператором IF (если), который позволяет решить, что делать, "если" выполняется какое-то условие. Программа спрашивает пользователя, любит ли он спорт. Если он отвечает "да", то программа отвечает "Я тоже люблю спорт". Если пользователь говорит "нет", то программа отвечает "Я тоже ненавижу спорт". Это немного глуповато, но для краткого знакомства вполне подходит.

Отметим, что если пользователь вводит что-то отличное от "да" или "нет", то программа выводит сообщение "Отвечайте да или нет".

За оператором IF следует условие и указание, что делать, если оно верно. Можно проверять одно условие или несколько. Программа знает, где начинаются и кончаются исполняемые после условия операторы, потому что они заключены в {фигурные скобки}.

Сценарий

<HTML>
<HEAD>
 <SCRIPT type="text/javascript">
  function askuser()
  {
   var answer="   "
   var statement="Отвечайте да или нет"
   var answer=prompt("Вы любите спорт?")
   if ( answer == "да")
    {statement="Я тоже люблю спорт!"}
   if(answer == "нет")
    {statement="Я тоже ненавижу спорт!"}
   alert(statement)
    }
  </SCRIPT>
</HEAD>
<BODY>
 <h1>Деятельность</h1>
  <FORM action="">
   <INPUT TYPE="button" VALUE="Нажми здесь!"  
     onClick="askuser()">
  </FORM>
</BODY>
</HTML>

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

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

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

Начнем с кнопки:

<FORM>
<INPUT TYPE="button" VALUE="Нажми здесь!" onClick="askuser()">
</FORM>

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

Фрагмент сценария с функцией:

function askuser()
 {
  var answer="   "
  var statement="Отвечайте да или нет"
  var answer=prompt("Вы любите спорт?")
  if ( answer == "да")
   {statement="Я тоже люблю спорт!"}
  if(answer == "нет")
   {statement="Я тоже ненавижу спорт!"}
  alert(statement)
 }

Значение переменной answer (ответ) равно трем пробелам. Это пустое пространство будет заполнено тем ответом, который пользователь введет в поле ввода.

На те случаи, когда пользователь не отвечает "да" или "нет", создается переменная statement. Скоро будет понятно, зачем это нужно.

Затем переменная answer задается как результат запроса prompt. Теперь у нас две переменные под одним именем. Помните об этом.

Следом за if идет условие в (круглых скобках). Не забывайте о них.

В условии, которое состоит из того, что находится между скобок, используется не знак =, а знaк == (два знака равенства)! Одинарный знак = используется вне скобок.

Помните, строковые значения должны заключаться в кавычки. "да" и "нет" являются строками текста.

Процесс происходит следующим образом:

  • prompt предлагает ответить на вопрос;
  • проверяется введенное значение;
  • если ответ "да", появляется окно со словами: "Я тоже люблю спорт!"
  • если ответ "нет", появляется окно со словами: "Я тоже ненавижу спорт!"
  • если ответ ни тот, ни другой, переменная answer остается пустой и строка "Отвечайте да или нет" посылается в alert.
    •

    Помните, что JavaScript различает регистр символов. Tо есть, если написать "НЕТ" или "Нет", условие не будет выполнено! Чтобы условие было верно, необходимо ввести "нет". Исправить это можно, добавив еще несколько условий IF на все случаи жизни.

    Задание

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

    if (answer == "М")

    Если ввести "м", то условие не будет выполняться!

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

    <html>
   <head>
  <SCRIPT type="text/javascript">
    function askuser()
     {
       answer=prompt("Вы мужчина (М) или женщина (Ж)?")
       if ( answer == "Ж")
          {document.bgColor="pink"}
       if(answer == "М")
          {document.bgColor="lightblue"}
      }
  </script>

  </head>
  <body bgcolor="lightyellow">
    <h1>Привет</h1>
    <form>
      <input type="button" 
	  value="Укажите свой пол"  
	  onClick="askuser()">
    </form>
  </body>
  </html>

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^