среда, 16 октября 2013 г.

Серверная и клиентская обработка

В этом посте мы увидим главное отличие серверной обработки данных от клиентской и познакомимся с основами языка 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>

Все работает, но есть несколько но...

  1. Мы не проверяем полученные переменные. Если пропустить вставку значения в одно из полей - результат будет 0 или вообще получим ошибку (деление на 0). Если ввести не число, то результат будет неверным;
  2. Неудобство. Для вычисления новых значений приходится переходить на другую страницу.
Избавится от первого недостатка позволит проверка полученных данных с помощью условного оператора. В качестве условия может выступить такая конструкция:
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>

Теперь, нажав на кнопку, результат мы получаем практически мгновенно! Более подробно описание работу нашей программы и синтаксиса JavaScript мы рассмотри в следующем посте.

3 комментария:

  1. А можно как-то выводить не ALERTом? А то выскакивающее окно мне кажется не очень то удобным...

    ОтветитьУдалить
  2. Не можно, а нужно! Естественно, в нормальном приложении так делать не стоит, и пример показан для учебных целей. Об этом я собираюсь рассказать в следующем посте, когда будем разбирать пример на JavaScript.
    Кратко:
    Нужно вставить в документ какой-нибудь подходящий элемент HTML, например div или span и задать ему id. После этого в скрипте JavaScript обратиться к свойству элемента innerHTML:

    < div id="message_output">< /div>

    document.getElementById('message_output').innerHTML = 'Результат: '+x;

    ОтветитьУдалить
    Ответы
    1. Или же вывести сообщения в консоль:

      console.log('Наше сообщение');

      И нажав в активном окне браузера Ctrl+Shift+I увидим консоль и наше сообщение в ней.

      Удалить