Создание программы с использованием параллельных массивов

Параллельные массивы в Javascript. Часть 2.

Основы использования такого приема в Javascript, как параллельные массивы, мы рассмотрели в части 1 статьи "Параллельные массивы в JavaScript", но не успели в ее рамках закончить начатое. Суть этого поста в том, что тем, кто разобрался с той статьей, может показаться очевидным: параллельных массивов не обязательно должно быть 2. Эти массивы, как и параллельные прямые, могут иметь огромное число.
Не будем, конечно, задавать очень много данных, ограничимся для наглядности всего 3 массивами и разберемся с ними на примере создания простой программы...

Представим, что нам необходимо, чтобы пользователь вводил название планеты, а при нажатии на кнопку получал данные о расстоянии до Солнца и ее диаметр. Вывод информации сделать в разных полях.
<html>
<head>
<meta charset="utf-8">
<title>Справочная по планетам</title>
<script type="text/javascript">
Создаем массивы с данными:
var planets = ["Меркурий","Венера","Земля","Марс", "Юпитер", "Сатурн", "Уран", "Нептун","Плутон"];
var totheSun = ["52","108","149","228","778,5", "1433","2871","4495", "4400-7900"];
var diametr = ["4880","12100","12750","6800","139822","116464","50724","49244","2376"]
Функция, которая извлекает введенные значения и выводит результаты:
function getInfo(){
var planetname = document.getElementById("inputA").value ;
Сравниваем введенное с тем, что есть в массиве planets путем перебора каждого элемента
for (var i=0; i< planets.length; i++)
{
Если найдено совпадение, то создаем 3 места для вывода информации
if (planetname==planets[i])
{ document.getElementById("output").value= ("Планета: "+planetname);
document.getElementById("output2").value= ("Расстояние до Солнца: "+totheSun[i]+ " млн. км");
document.getElementById("output3").value= ("Диаметр: " + diametr[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="getInfo()">
<p align= "center">_______________</p>
Наконец, разместим блок вывода информации
<p align= "center"><output type="text" name="output" value="0" id="output" size="6"/></p>
<p align= "center"><output type="text" name="output2" value="0" id="output2" size="6"/></p>
<p align= "center"><output type="text" name="output2" value="0" id="output3" size="6"/></p>
</form>
</body>
</html>
На этот раз сделано довольно краткое описание, потому как этот код писался по аналогии с статьей Параллельные массивы JavaScript. Часть 1, но при разборе становится понятно, что данный прием вполне можно использовать для решения тех или иных задач.

<html>
<head>
<title>Справочная по планетам</title>
<script type="text/javascript">
//определяем данные
var planets = ["Меркурий","Венера","Земля","Марс", "Юпитер", "Сатурн", "Уран", "Нептун","Плутон"];
var totheSun = ["52","108","149","228","778,5", "1433","2871","4495", "4400-7900"];
var diametr = ["4880","12100","12750","6800","139822","116464","50724","49244","2376"]
//функция, которая извлекает введенные значения
function getInfo(){
var planetname = document.getElementById("inputA").value ;
//сравниваем введенное с тем, что есть в массиве planets путем перебора каждого элемента
for (var i=0; i< planets.length; i++)
{
//если найдено совпадение, то создаем 3 места для вывода информации
if (planetname==planets[i])
{ document.getElementById("output").value= ("Планета: "+planetname);
document.getElementById("output2").value= ("Расстояние до Солнца: "+totheSun[i]+ " млн. км");
document.getElementById("output3").value= ("Диаметр: " + diametr[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="getInfo()">
<p align= "center">_______________</p>

<p align= "center"><output type="text" name="output" value="0" id="output" size="6"/></p>
<p align= "center"><output type="text" name="output2" value="0" id="output2" size="6"/></p>
<p align= "center"><output type="text" name="output2" value="0" id="output3" size="6"/></p>
</form>
</body>
</html>

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