JavaScript - Основы, как это работает и как тестировать (Часть 2).

В предыдущей части мы уже рассмотрели как добавить и отладить JavaScript код на страницу с использованием встроенной консоли в браузере на примере решения квадратного уравнения. Однако, использовать консоль удобно для тестирования написанных функций, но пользователю для работы надо бы что-то поудобнее. А именно: привычные поля ввода и кнопочки.

В этой публикации мы рассмотрим пример добавления в нашу страничку «няшных» кнопочек и полей ввода, с использованием Bootstrap и библиотеки JQuery.

Итак, приступим.
Берем уже готовый пример из прошлой публикации, его и будем дорабатывать:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тест Java Script Console</title>
 
  </head>
  <body>
    Тестируем JavaScript!
   
    <script>
            function solve(a,b,c)
            {
                   
                var D = b*b-4*a*c;
               
                if (D<0)
                {
                    console.log(":(");
                }
                else
                {
                    console.log("x1 = " + (-b-Math.sqrt(D))/(2*a));
                    console.log("x2 = " + (b-Math.sqrt(D))/(2*a));
                }
            }
    </script>
   
  </body>
</html>


Первое что сделаем, это подключим необходимые нам библиотеки, скачиваем последнюю версию BootStrap здесь:mybootstrap.ru.

После того как скачали распаковываем содержимое в папку где лежит наш html-файл.

Далее подключаем css файл, добавив в заголовок header такую запись:

    <link href="css/bootstrap.min.css" rel="stylesheet">


Теперь добавим в наш файл поля ввода коэффициентов «a»,«b»,«c» и кнопку «Решить», для этого после тега body добавим следующий код:
<div class="container">
        <!--Поля ввода коэфициентов-->
	<div class="row">
            
            
            A=<input type='text' id='a'/>
            B=<input type='text' id='b'/>
            C=<input type='text' id='c'/>
            
            
        </div>
        <!--Кнопка по нажатию на которую должно произойти вычисление корней-->
        <div class="row">
            <button class="btn btn-success" onclick="solve();">Решить</button>
            
            
        </div>
 
	<!--Элементы в которые будут записаны вычисленные квадратные корни-->       
        <div class="row">
            <div id='x1'></div>
            <div id='x2'></div>
            
        </div>
 
    </div>


Если мы на этом этапе запустим нашу страницу, то уже увидим поля для ввода и кнопку.
Bootstrapped buttons

Но по нажатию на заветную кнопочку ничего не произойдет, а всё по тому, что нам надо научить нашу функцию брать данные из полей с коэффициентами и выводить в поля с ответами.

Для того чтобы научить подключаем JavaScript библиотеки JQuery (без нее не отработает метод OnClick) и библиотеку функций BootStrap-а:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


Теперь меняем наш скрипт следующим образом:
<script>
    function solve(a,b,c)
    {
        var a=$('#a').val(),
            b=$('#b').val(),
            c=$('#c').val();
           
        var D = b*b-4*a*c;
       
        if (D<0)
        {
            console.log(":(");
            $('#x1').html("");
            $('#x2').html("Корней нет!");
        }
        else
        {
            console.log("x1 = " + (-b-Math.sqrt(D))/(2*a));
            console.log("x2 = " + (b-Math.sqrt(D))/(2*a));
            $('#x1').html("x1 = " + (-b-Math.sqrt(D))/(2*a));
            $('#x2').html("x2 = " + (b-Math.sqrt(D))/(2*a));
        }
    }
    </script>


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

Результат:
JavaScript - Квадратное уравнение

Вот и всё.

На всякий случай, полный рабочий исходник:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тест Java Script Console</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
 
  </head>
  <body>
    Тестируем JavaScript!
    <div class="container">
        <!--Поля ввода коэфициентов-->
	<div class="row">
            
            
            A=<input type='text' id='a'/>
            B=<input type='text' id='b'/>
            C=<input type='text' id='c'/>
            
            
        </div>
        <!--Кнопка по нажатию на которую должно произойти вычисление корней-->
        <div class="row">
            <button class="btn btn-success" onclick="solve();">Решить</button>
            
            
        </div>
 
	<!--Элементы в которые будут записаны вычесленные квадратные корни-->       
        <div class="row">
            <div id='x1'></div>
            <div id='x2'></div>
            
        </div>
 
    </div>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
    function solve(a,b,c)
    {
        var a=$('#a').val(),
            b=$('#b').val(),
            c=$('#c').val();
           
        var D = b*b-4*a*c;
       
        if (D<0)
        {
            console.log(":(");
            $('#x1').html("");
            $('#x2').html("Корней нет!");
        }
        else
        {
            console.log("x1 = " + (-b-Math.sqrt(D))/(2*a));
            console.log("x2 = " + (b-Math.sqrt(D))/(2*a));
            $('#x1').html("x1 = " + (-b-Math.sqrt(D))/(2*a));
            $('#x2').html("x2 = " + (b-Math.sqrt(D))/(2*a));
        }
    }
    </script>

   
  </body>
</html>


Вопросы и комментарии приветствуются.

Первая часть публикации: JavaScript — Основы, как это работает и как тестировать.

Своего рода продолжение: Пример простого калькулятора на Java Script

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.