В книге JavaScript. Библия пользователя. 5 издание. Дэнни Гудмана и Майкла Моррисона на странице 117 приведено следующее задание №5:
"Ниже приведена таблица с данными о некоторых планетах Солнечной системы. Нужно создать Web-страницу, на которой пользователь введет название планеты и по щелчку на кнопке получит окно сообщения с указанием расстояния этой планеты до Солнца и её диаметр. Если получится, сделайте так, чтобы эта информация выводилась на странице в отдельных полях."
Я написал код, который решает поставленную задачу (с комментариями <!-- -->):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<!-- Строка указывает на поддержку русского языка. Без неё могут быть проблемы с отображением кириллических символов. -->
<title>Sun Market</title>
<!-- Заголовок страницы. Может быть любым. -->
</head>
<body>
<b>Вам доступны четыре планеты: Меркурий, Венера, Земля, Марс.</b>
<!-- Эту строку я добавил, чтобы пользователю было понятно, какие названия планет вводить. Можно просто выделить нужное название и скопировать его в поле ввода. -->
<script type="text/javascript">
<!-- Объявляем джава-скрипт и создаём три массива, которые нам потом понадобятся.-->
var Planet=new Array(4);
Planet[0]="Меркурий";
Planet[1]="Венера";
Planet[2]="Земля";
Planet[3]="Марс";
var RassSol=new Array(4);
RassSol[0]="52";
RassSol[1]="108";
RassSol[2]="149";
RassSol[3]="228";
var Diametr=new Array(4);
Diametr[0]=4880;
Diametr[1]=12100;
Diametr[2]=12750;
Diametr[3]=6800;
function getRassDiam(){ <!-- Функция, с помощью которой мы находим нужные значения расстояния и диаметра -->
var selectedPlanet=document.getElementById("input").value; <!-- В этом операторе мы берём название планеты из поля ввода -->
for (var i=0; i<Planet.length; i++){ <!-- Цикл по которому находим номер (i) планеты, а значит ещё и расстояния и диаметр -->
if (Planet[i]==selectedPlanet) {
break;
}
}
document.getElementById("Rass").value=RassSol[i]; <!-- После того, как нашли номер i планеты присваиваем полю с расстоянием соответствующее расстояние из массива RassSol -->
document.getElementById("Diam").value=Diametr[i]; <!-- То же самое с диаметром -->
}
</script>
<!-- Далее следует код html с формами и полями ввода: --> <br>
Название планеты:
<INPUT TYPE="text" id="input"><br> <!-- Вводим название планеты. Также я добавил оператор id="input", чтобы потом можно было обращаться к введённым данным -->
<!-- Кнопка "Отправить": -->
<INPUT TYPE="submit" VALUE="Отправить" onclick="getRassDiam()"><br> <!-- По нажатию на кнопку запускается функция из джава-скрипта. -->
<!-- Далее идут два поля. Когда функция выполняется, то в них выводятся данные о расстоянии до Солнца и диаметре планеты. Опять же использовал обращение по id. -->
Расстояние до солнца:
<INPUT TYPE="text" id="Rass"> млн. км.<br>
Диаметр планеты:
<INPUT TYPE="text" id="Diam"> км.
</body>
</html>
"Ниже приведена таблица с данными о некоторых планетах Солнечной системы. Нужно создать Web-страницу, на которой пользователь введет название планеты и по щелчку на кнопке получит окно сообщения с указанием расстояния этой планеты до Солнца и её диаметр. Если получится, сделайте так, чтобы эта информация выводилась на странице в отдельных полях."
| Планета | Расстояние до Солнца | Диаметр |
| Меркурий | 52 млн. км | 4 880 км |
| Венера | 108 млн. км | 12 100 км |
| Земля | 149 млн. км | 12 750 км |
| Марс | 228 млн. км | 6 800 км |
Я написал код, который решает поставленную задачу (с комментариями <!-- -->):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<!-- Строка указывает на поддержку русского языка. Без неё могут быть проблемы с отображением кириллических символов. -->
<title>Sun Market</title>
<!-- Заголовок страницы. Может быть любым. -->
</head>
<body>
<b>Вам доступны четыре планеты: Меркурий, Венера, Земля, Марс.</b>
<!-- Эту строку я добавил, чтобы пользователю было понятно, какие названия планет вводить. Можно просто выделить нужное название и скопировать его в поле ввода. -->
<script type="text/javascript">
<!-- Объявляем джава-скрипт и создаём три массива, которые нам потом понадобятся.-->
var Planet=new Array(4);
Planet[0]="Меркурий";
Planet[1]="Венера";
Planet[2]="Земля";
Planet[3]="Марс";
var RassSol=new Array(4);
RassSol[0]="52";
RassSol[1]="108";
RassSol[2]="149";
RassSol[3]="228";
var Diametr=new Array(4);
Diametr[0]=4880;
Diametr[1]=12100;
Diametr[2]=12750;
Diametr[3]=6800;
function getRassDiam(){ <!-- Функция, с помощью которой мы находим нужные значения расстояния и диаметра -->
var selectedPlanet=document.getElementById("input").value; <!-- В этом операторе мы берём название планеты из поля ввода -->
for (var i=0; i<Planet.length; i++){ <!-- Цикл по которому находим номер (i) планеты, а значит ещё и расстояния и диаметр -->
if (Planet[i]==selectedPlanet) {
break;
}
}
document.getElementById("Rass").value=RassSol[i]; <!-- После того, как нашли номер i планеты присваиваем полю с расстоянием соответствующее расстояние из массива RassSol -->
document.getElementById("Diam").value=Diametr[i]; <!-- То же самое с диаметром -->
}
</script>
<!-- Далее следует код html с формами и полями ввода: --> <br>
Название планеты:
<INPUT TYPE="text" id="input"><br> <!-- Вводим название планеты. Также я добавил оператор id="input", чтобы потом можно было обращаться к введённым данным -->
<!-- Кнопка "Отправить": -->
<INPUT TYPE="submit" VALUE="Отправить" onclick="getRassDiam()"><br> <!-- По нажатию на кнопку запускается функция из джава-скрипта. -->
<!-- Далее идут два поля. Когда функция выполняется, то в них выводятся данные о расстоянии до Солнца и диаметре планеты. Опять же использовал обращение по id. -->
Расстояние до солнца:
<INPUT TYPE="text" id="Rass"> млн. км.<br>
Диаметр планеты:
<INPUT TYPE="text" id="Diam"> км.
</body>
</html>
