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

Массивы

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

Концепция

В этом уроке рассматриваются массивы (array). Мы уже изучили переменные. Каждая переменная содержит в данный момент одно значение, но иногда требуется использовать массив (array) или переменную, которая содержит множество значений.

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

Сценарий

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
     tv=new Array()
     tv[0]="ОРТ"
     tv[1]="РТР"
     tv[2]="ТВЦ"
     tv[3]="НТВ"
     tv[4]="ТВ6"
     num=0
function picktv()
    {
       now=new Date()
       num=(now.getSeconds())%5
     }
function whichtv()
{
picktv()
guess=" "
while (tv[num] != guess.toUpperCase())

{guess=prompt("Угадайте мой любимый телеканал: 
  ОРТ, РТР, ТВЦ, НТВ или ТВ6?")

  if (guess.toUpperCase() == tv[num])
  {alert("Это мой любимый телеканал!")}
  else
  {alert("Нет, попробуйте еще раз.")}}
  }
</SCRIPT>    
</HEAD>
<BODY>
<FORM>

<INPUT TYPE="button" VALUE="Угадайте телеканал!" 
     onClick="whichtv()">

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

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

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

В зависимости от ввода пользователю предлагается попробовать еще раз или программа завершается.

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

<SCRIPT type="text/javascript">
     tv=new Array()
     tv[0]="ОРТ"
     tv[1]="РТР"
     tv[2]="ТВЦ"
     tv[3]="НТВ"
     tv[4]="ТВ6"
     num=0

tv=new Array() объявляет tv как массив объектов. С пустыми (скобками) массив может быть какой угодно длины. Можно также указать длину массива, например, tv=new Array(5).

Помните, что массив может иметь множество значений. Можно представить себе массив в виде таблицы:

tv
tv[0] tv[1] tv[2] tv[3] tv[4]
ОРТ РТР ТВЦ НТВ ТВ6

Обратите внимание, мы заранее указываем переменную num, у которой одно значение, равное 0, и массив tv, который имеет 5 значений.

Теперь функция picktv():

function picktv()
    {
       now=new Date()
       num=(now.getSeconds())%5
     }

Функция picktv() случайно выбирает число от 0 до 4, которое становится индексом tv. Помните, от нуля до четырех ПЯТЬ чисел. То есть если num равно 2, то любимый телеканал — tv[2], или ТВЦ.

Теперь функция whichtv():

function whichtv()
{
picktv()
guess=" "
while (tv[num] != guess.toUpperCase())

{guess=prompt("Угадайте мой любимый телеканал: 
  ОРТ, РТР, ТВЦ, НТВ или ТВ6?")

  if (guess.toUpperCase() == tv[num])
  {alert("Это мой любимый телеканал!")}
  else
  {alert("Нет, попробуйте еще раз.")}}
  }

Команда guess=prompt(...) должна находиться полностью на одной строке.

Вот кое-что новое! Видите, первым делом функция вызывает другую функцию, picktv(). Таким образом, когда бы вы ни нажали на кнопку, будет выбираться новый телеканал.

Обратите внимание на строку while (tv[num] != guess.toUpperCase()). Метод или действие toUpperCase() (в верхний регистр) используется для перевода всего, что было введено, в верхний регистр символов.

Программа повторяет цикл While, пока пользователь не угадает правильный телеканал. Фрагмент с циклом While должен быть уже вполне знакомым.

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

Теперь кнопка, которая все это запускает:

<FORM>
<INPUT TYPE="button" VALUE="Угадай телеканал!" 
    onClick="whichtv()">
</FORM>

Тут ничего нового.

Еще кое-что о массивах

В JavaScript есть несколько встроенных массивов. Формы можно хранить в массивах. На форму можно ссылаться с помощью document.myform или document.forms[0], если это первая форма. Массивы всегда начинаются с нуля. Вторая форма будет document.forms[1]. Третья — document.forms[2] и так далее...

Изображения также можно хранить во встроенном массиве. Можно ссылаться на pic1.gif как document.pic1.src или как document.images[0].src. Просто продолжайте следовать схеме, указывая номер в [квадратных скобках].

Теперь, наверное, стало понятно, что такое массивы.

Задание

Напишите программу JavaScript, которая содержит кнопку с надписью: "Щелкните, чтобы попасть на случайный сайт". Когда пользователь нажимает ее, выполняется функция, которая выберет случайное число и сайт из массива с помощью команды JavaScript top.location.href = url[num]. top (вершина) — это свойство объекта window, оно относится к главному окну браузера. location.href, другой объект и свойство, содержит адрес URL.

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

Это задание очень напоминает пример из этого урока, за исключением того, что нужно указать ряд адресов URL по схеме url[0]. Однако в результате сценарий должен отправить пользователя на выбранную страницу.

<html>
<head>
<script language="JavaScript">
     url=new Array()
     url[0]="http://www.jsp.newmail.ru/les5.htm"
     url[1]="http://www.jsp.newmail.ru/les10.htm"
     url[2]="http://www.jsp.newmail.ru/les15.htm"
     url[3]="http://www.jsp.newmail.ru/les20.htm"

function rand()
   {
     now=new Date()
     num=(now.getSeconds())%4
     top.location.href = url[num]
   }
</script>    
</head>
<body>
<center>
    <h2>Случайный URL</h2>
    <form>
        <input type="button" value="Случайное блуждание по сайтам!" onClick="rand()">
    </form>
</center>
</body>
</html>
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^