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

Случайный выбор фраз и изображений

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

Концепция

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

Сценарий

<HTML>
<BODY>
<SCRIPT type="text/javascript">
   var0="От пирогов не толстеют"
   var1="Кто ходит в гости по утрам"
   var2="До пятницы я совершенно свободен"
  now=new Date()
  num=(now.getSeconds() )%3

   if (num == 0)
    {cliche=var0}
   if (num == 1)
    {cliche=var1}
   if (num == 2)
     {cliche=var2}
  document.write(cliche + "<br>")  
  document.write("Случайное число: " 
    + num)
</SCRIPT>
<p>.... как я обычно говорю.
</BODY>
</HTML>

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

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

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

Начнем со случайного числа:

var0="От пирогов не толстеют"
   var1="Кто ходит в гости по утрам"
   var2="До пятницы я совершенно свободен"
  now=new Date()
  num=(now.getSeconds() )%3
document.write("Случайное число: " 
    + num)

Оператор document.write должен располагаться на одной строке!

Это вы можете разобрать и сами, все было на прошлых уроках.

Мы создали три переменные. Это неизменяемые фрагменты текста и потому заключены в двойные кавычки.

Следующий шаг: программа создает случайное число с помощью часов компьютера. %3 указывает на то, что будет выбрана цифра из 0, 1 и 2. На этот раз мы не прибавляем к num единицу, так как нам подходит и 0.

Наконец, команда document.write() используется для вывода выбранного числа на странице.

Теперь посмотрим на вторую часть сценария:

if (num == 0)
    {cliche=var0}
   if (num == 1)
    {cliche=var1}
   if (num == 2)
     {cliche=var2}
  document.write(cliche + "<br>") >

Помните, что условия после IF требуют двойного знака равенства ==.

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

Обратите внимание еще раз, что условие заключено в (круглые скобки), а результат — в {фигурные}.

Наконец команда document.write(cliche) выведет на странице то изречение, которое было присвоено переменной cliche (см. начало сценария).

Задание

Измените программу так, чтобы она показывала рисунок, выбранный случайным образом из трех: pic1.gif, pic2.gif и pic3.gif.

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

Необходимо создать три переменные для трех рисунков и вписать имена переменных в команду document.write. Ниже представлены два варианта решения. Второй немного более компактный и немного более хитроумный. Попробуйте разобраться в нем самостоятельно.

Первый вариант

<body bgcolor="хххххх">
<center>
<h1>Моя домашняя страница</h1>
<script language="JavaScript">
   var1="pic1.gif"
   var2="pic2.gif";
   var3="pic3.gif"
   now=new Date()
   num=(now.getSeconds() )%3
   num=num+1
   quot="'"
   document.write("Случайная цифра: " + num + "<br>")
   if (num == 1)
       {cliche=var1} 
   if (num == 2)
       {cliche=var2}
   if (num == 3)
       {cliche=var3}
  document.write("<img src=" + quot + cliche + quot +">")
</script>
<p>Такое у меня сегодня настроение.
</center>
</body>
</html>

Для самых умных

<h1>Моя домашняя страница</h1>
<script language="JavaScript">
   var1="pic1.gif"
   var2="pic2.gif";
   var3="pic3.gif"
   now=new Date()
   num=(now.getSeconds() )%3
   num=num+1
   quot="'"  
   document.write("Случайная цифра: " + num + "<br>")
   document.write("<img src=" + quot + "pic" + eval(num) + ".gif" + quot +">")
</script>
<p>Такое у меня сегодня настроение.
</center>
</body>
</html>
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^