Создаем программу, выводящую данные об основании городов

Параллельные массивы JavaScript. Часть 1

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

Вот пример кода:

Поскольку пишем страницу целиком, для начала определим основные ее параметры, вроде кодировки, Title и т.п.

<html>
<head>
<meta charset="utf-8">
<title>Поиск по городам</title>
<script type="text/javascript">
Теперь переходим непосредственно к описанию нашего скрипта, создав 2 массива данных. В один добавим названия городов, а в другой - года их основания в соответствующем порядке...
var town = ["Москва","Санкт-Петербург","Екатеринбург"];
var years = ["1147","1703","1723"];
Теперь следует описать функцию, которая будет сравнивать введенное значение со значением в массиве и выводить соответствующий элемент другого массива как результат. Обозначим функцию:
function getTown(){
Теперь необходимо сообщить программе данные, введенные пользователем на странице. Сделать это можно при помощи переменной и команды getElementById:
var typedtown = document.getElementById("inputA").value ;
Теперь, когда программа получила данные от пользователя, следует указать ей, что с ними делать. Предлагаю использовать для этого цикл, который будет сравнивать введенные данные с данными массива, содержащим названия городов. Делать это программа будет при помощи перебора, начиная с i элемента, равному нулю до тех пор, пока i будет меньше длины массива town с шагом в 1 (i++)
for (var i=0; i< town.length; i++)
{
И если название введенного города совпадет с элементом массива, получим сообщение на экран, что город был основан в соответствующем году, при том этот год будет взят из массива years. Главное, что порядковый номер в том и другом массиве [i]  будут совпадать
if (typedtown==town[i])
{ document.getElementById("output").value= ("Город " + typedtown+ " основан в " + years[i]+" году.");
break;}
В противном случае, (если совпадения не найдены), выведем сообщение об ошибке
else {
document.getElementById("output").value= ("Что-то пошло не так. Вы ошиблись с вводом.");
}
}
}
</script>
На этом наш скрипт закончен и следует заставить его работать на страничке:
</head>
<body>
Для этого создадим форму ввода. При этом, важно помнить о том, чтобы задать ей id, соответствующий тому, что мы придумали, когда обращались к команде getElementById("inputA")
<form name="adder">
<p align= "center">Введи интересующий тебя город и получишь год основания (Москва, Санкт-Петербург, Екатеринбург):
<input type="text" name="inputA" id="inputA" value="" size="10"/>
<br/>
Ну и по нажатию на кнопку, будем запускать написанную выше функцию getTown():
<input type="button" id="test" value="Проверить!" onclick="getTown()">
<p align= "center">_______________</p>
<p align= "center"><output type="text" name="output" value="0" id="output" size="6"/>
</form>
</body>
</html>
На генерируемой странице будет предложено вписать название города. Если оно совпадет с названием города, имеющимся в массиве TOWN под любым номером (i-элементом, то в результирующем сообщении получим данные из массива YEARS (из того же i-элемента)...
Я не стал вводить в массивы большое количество городов и не делаются поправки на ошибки или опечатки пользователя - смысл тут совершенно не в том. Ниже представлен код целиком и  ссылка на страницу с рабочим JavaScript
<html>
<head>
<title>Поиск по городам</title>
<script type="text/javascript">
var town = ["Москва","Санкт-Петербург","Екатеринбург"];
var years = ["1147","1703","1723"];
function getTown(){
var typedtown = document.getElementById("inputA").value ;
for (var i=0; i< town.length; i++)
{
if (typedtown==town[i])
{ document.getElementById("output").value= ("Город " + typedtown+ " основан в " + years[i]+" году.");
break;}
else {
document.getElementById("output").value= ("Что-то пошло не так. Вы ошиблись с вводом.");
}
}
}
</script>
</head>
<body>
<form name="adder">
<p align= "center">Введи интересующий тебя город и получишь год основания (Москва, Санкт-Петербург, Екатеринбург):
<input type="text" name="inputA" id="inputA" value="" size="10"/>
<br/>
<input type="button" id="test" value="Проверить!" onclick="getTown()">
<p align= "center">_______________</p>
<p align= "center"><output type="text" name="output" value="0" id="output" size="6"/>
</form>
</body>
</html>
Продолжение темы параллельных массивов рассмотрим в статье о параллельных массивах. Часть 2.