Сложение двух чисел в HTML (клиентское приложение)

Напишем приложение сложение двух чисел на HTML, где сложение двух чисел происходит на стороне сервера.

Эта статья из цикла статей Клиент-серверные приложения.

Статья из цикла «Сложение двух чисел». Для меня минимальное освоение любой системы программирования начинается с возможности создания такой программы. Если можно написать приложение, в которой пользователь может ввести два числа, считать их, провести с ними какие-то действия, а потом вывести результат, то, значит, базовое владение имеется. И много задач именно из области программирования, алгоритмики можно будет решать, зная, как в конкретной системе программирования запрограммировать такую программу.

Постановка задачи

В статье показан пример приложения на HTML + javaScript по сложению двух чисел. И там сложение двух чисел происходило в самом приложении, что логично. Серверной части там нет.

В статье показа пример приложения, где клиентская и серверная часть объединены в одном php скрипте.

А в этом приложении мы из полей ввода считаем два числа и отправим их на сервер, который сложит два числа, отправит нам ответ, и мы этот ответ отобразим в текстовом поле. То есть у нас клиентская и серверная часть разделены между собой.

На сервер поступает HTTP запрос с двумя переменными a и b. Переменные a и b передаются через GET параметры, то есть через адресную строку. Пример такого запроса:

http://[путь с скрипту]?a=2&b=3

Серверная часть

У вас должен быть сервер, доступный из интернета, к которому можно обращаться.

В статье приведен пример серверной части на Java.

В статье приведен пример серверной части на PHP.

В статье буду использовать PHP скрипт, который я расположил по адресу http://demo.harrix.org/demo0011 (если перейти по ссылке без параметров, то должно выдаваться error).

Пример запроса к серверу http://demo.harrix.org/demo0011?a=2&b=3 (а вот тут должно появиться число 5)

Создание болванки

Создаем текстовой документ под именем index.html.

Закинем в него простую болванку HTML5 документа:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Программа сложения двух чисел</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Программа сложения двух чисел</title>

</head>

<body>

</body>

</html>

Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет – это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.

Наполнение HTML

Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа <body></body> разместим такую форму.

<form>
    <input name="a" type="text" value="2"><br>
    <input name="b" type="text" value="3"><br>
</form>

<form>

</form>

Каждое поле имеет своё имя name (не id) с названием переменной a и b. Также они имеют начальное наполнение.

Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit.

<input type="submit" value="Сложить 2 два числа">

1	<input type="submit" value="Сложить 2 два числа">

У нас сложение двух чисел будет происходить не на стороне клиента, а на стороне сервера. Поэтому форме нужно указать адрес сервера, куда мы отправим запрос.

<form action="http://demo.harrix.org/demo0011/" method="get">

1	<form action="http://demo.harrix.org/demo0011/" method="get">

Общий документ будет иметь вид:

<!DOCTYPE html>
<html lang="ru">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Программа сложения двух чисел</title>
</head>

<body>
	<form action="http://demo.harrix.org/demo0011/" method="get">
		<input name="a" type="text" value="2"><br>
		<input name="b" type="text" value="3"><br>
		<input type="submit" value="Сложить 2 два числа">
	</form>
</body>

</html>