В этом посте мы увидим главное отличие серверной обработки данных от клиентской и познакомимся с основами языка JavaScript.
Для этого нам понадобятся бумага, ножницы два файла - один, файл формы для ввода данных и передачи этих данных на сервер, второй - для расчета и отображения результата. В первом разместим три поля ввода, кнопку и картинку для красоты.
Постановка задачи - нам известны три числа A, B и C. Необходимо найти число X, которое относится к С, как A относится к B:
Ниже код первой страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<title>Калькулятор пропорций</title>
</head>
<body>
<img src="formula.png" alt="Формула">
<form name="calc" action="primer6.php" method="GET">
<label for="a">A:</label><input id="a" name="a" type="text">
<label for="b">B:</label><input id="b" name="b" type="text">
<label for="c">C:</label><input id="c" name="c" type="text">
<input type="submit" value="Рассчитать"/>
</form>
</body>
</html>
Подробное рассмотрение кода я предоставляю вам для самостоятельной работы. Отмечу только теги "title", "label" и "img". Результат работы первого - строчка "Калькулятор пропорций" в заголовке вкладки браузера. Второй создает метку, привязанную к полю ввода с именем указанном в атрибуте "for". Тег "img" описывает изображение на странице, атрибут которого "scr" - указывает, где находится и какой файл с картинкой нужно вставить. Картинку возьмите из этого поста, щелкнув на ней правой клавишей мыши и сохранив в рабочую папку сервера с именем "formula.png".
Серверный обработчик
В файл "primer6.php" нужно поместить извлечение данных a, b и с и расчет результата:
Все работает, но есть несколько но...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<title>Калькулятор пропорций</title>
</head>
<body>
<?php
$a = $_REQUEST['a'];
$b = $_REQUEST["b"];
$c = $_REQUEST["c"];
$x = ($a*$c)/$b;
echo "Результат: x = $x";
?>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<title>Калькулятор пропорций</title>
</head>
<body>
<?php
$a = $_REQUEST['a'];
$b = $_REQUEST["b"];
$c = $_REQUEST["c"];
$x = ($a*$c)/$b;
echo "Результат: x = $x";
?>
</body>
</html>
Все работает, но есть несколько но...
- Мы не проверяем полученные переменные. Если пропустить вставку значения в одно из полей - результат будет 0 или вообще получим ошибку (деление на 0). Если ввести не число, то результат будет неверным;
- Неудобство. Для вычисления новых значений приходится переходить на другую страницу.
Избавится от первого недостатка позволит проверка полученных данных с помощью условного оператора. В качестве условия может выступить такая конструкция:
A > 0 AND B > 0 AND C > 0
Но это не спасает от ввода символов. Пока оставим так, а более полную проверку получаемых данных рассмотрим в следующих сообщениях блога, когда поговорим о безопасности приложений.
Исправить второй недостаток позволит включение кода формы непосредственно в файл "primer6.php" и исправление атрибута "action" у формы. Атрибут можно оставить пустым, или указать имя этого же файла - "primer6.php".
Эту работу предлагаю проделать вам самостоятельно.
Обработка на стороне клиента
Посмотрим, как эту же задачу можно решить не прибегая к PHP. Работать будем с файлом "primer6.html", в котором описана форма. Изменим кнопку отправки данных на сервер - "<input type="submit" value="Рассчитать"/>", а именно атрибут "type" с "submit" на "button". При отображении страницы внешне ничего не поменялось, но при нажатии на кнопку ничего не происходит.
Настало время выступить мистеру JavaScript! Это язык, который поддерживается любым современным браузером, то есть обработка данных будет происходить не на сервере, а на вашем компьютере (клиенте).
Привяжем к кнопке действия. При нажатии на кнопку нам нужно запустить JavaScript программу. Для этого в тег "<input type="button" value="Рассчитать"/>" добавим атрибут "onclick", который указывает браузеру, что делать при нажатии на эту кнопку:
<input type="button" onclick="doCalc()" value="Рассчитать"/>
В нашем случае "doCalc" - это название функции, которую мы опишем ниже. Функцией - в языках программирования называется кусок кода, к которому можно обращаться из разных мест программы по имени.
Чтобы описать функцию включим в наш файл в раздел "head" тег "<script> ... </script>" и опишем в нем логику нашей программы:
<script>
function doCalc(){
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var x = a*c/b;
alert("Результат x="+x);
}
</script>
function doCalc(){
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var x = a*c/b;
alert("Результат x="+x);
}
</script>
Теперь, нажав на кнопку, результат мы получаем практически мгновенно! Более подробно описание работу нашей программы и синтаксиса JavaScript мы рассмотри в следующем посте.
А можно как-то выводить не ALERTом? А то выскакивающее окно мне кажется не очень то удобным...
ОтветитьУдалитьНе можно, а нужно! Естественно, в нормальном приложении так делать не стоит, и пример показан для учебных целей. Об этом я собираюсь рассказать в следующем посте, когда будем разбирать пример на JavaScript.
ОтветитьУдалитьКратко:
Нужно вставить в документ какой-нибудь подходящий элемент HTML, например div или span и задать ему id. После этого в скрипте JavaScript обратиться к свойству элемента innerHTML:
< div id="message_output">< /div>
document.getElementById('message_output').innerHTML = 'Результат: '+x;
Или же вывести сообщения в консоль:
Удалитьconsole.log('Наше сообщение');
И нажав в активном окне браузера Ctrl+Shift+I увидим консоль и наше сообщение в ней.