JavaScript - Основы, как это работает и как тестировать (Часть 2).
В предыдущей части мы уже рассмотрели как добавить и отладить jаvascript код на страницу с использованием встроенной консоли в браузере на примере решения квадратного уравнения. Однако, использовать консоль удобно для тестирования написанных функций, но пользователю для работы надо бы что-то поудобнее. А именно: привычные поля ввода и кнопочки.
В этой публикации мы рассмотрим пример добавления в нашу страничку «няшных» кнопочек и полей ввода, с использованием 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>
Тестируем jаvascript!
<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>
Если мы на этом этапе запустим нашу страницу, то уже увидим поля для ввода и кнопку.
Но по нажатию на заветную кнопочку ничего не произойдет, а всё по тому, что нам надо научить нашу функцию брать данные из полей с коэффициентами и выводить в поля с ответами.
Для того чтобы научить подключаем jаvascript библиотеки 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>
Теперь функция берет значения из необходимых полей, и в конце вычислений возвращает результат помимо консоли в указанные элементы на странице.
Результат:
Вот и всё.
На всякий случай, полный рабочий исходник:
<!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>
Тестируем jаvascript!
<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>
Вопросы и комментарии приветствуются.
Первая часть публикации: jаvascript — Основы, как это работает и как тестировать.