Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

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

Учебный пример HTML клиентского приложения по работе с сервером.

05.05.2017 Leave a Comment 4 810 просмотров

Напишем приложение сложение двух чисел на 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 документа:

1
2
3
4
5
6
7
8
9
10
11
<!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>

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

Наполнение HTML

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>

Если мы сохраним документ и его откроем, то получим следующее:

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


Статьи по теме:

  1. Сложение двух чисел в HTML с передачей параметров через POST (клиентское приложение)
  2. Сложение двух чисел в Android Studio с передачей параметров через POST (клиент-серверное приложение)
  3. Сложение двух чисел в Android Studio с использованием Retrofit (клиент-серверное приложение)
  4. Клиент-серверные приложения

Web программирование Html, Клиент-сервер, Программа сложения двух чисел, Сервер

© 2014 Harrix