JavaScript - Основы, как это работает и как тестировать (Часть 2).
HTML, CSS и JavaScript - Примеры, уроки, описанияВ предыдущей части мы уже рассмотрели как добавить и отладить 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>
Если мы на этом этапе запустим нашу страницу, то уже увидим поля для ввода и кнопку.
Но по нажатию на заветную кнопочку ничего не произойдет, а всё по тому, что нам надо научить нашу функцию брать данные из полей с коэффициентами и выводить в поля с ответами.
Для того чтобы научить подключаем 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>
Теперь функция берет значения из необходимых полей, и в конце вычислений возвращает результат помимо консоли в указанные элементы на странице.
Результат:
Вот и всё.
На всякий случай, полный рабочий исходник:
<!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
RomanРабота с Postgresql в C#
Не так давно занялся разработкой приложения на C# работающего на базе PostreSQL, появилась информаци (читать далее...)
691Работа со строками в Oracle (PL/SQL)
Основные способы обработки строковых значений в Oracle. В этой публикации я приведу основные функции (читать далее...)
615Пример простого калькулятора на Java Script (исключительно в учебных целях).
В этой публикации продемонстрировано, как при помощи bootstrap и довольно простого кода на JavaScrip (читать далее...)
70Bootstrap DateTimePicker - пример выбора только месяца из выпадающего меню.
В данном примере будет продемонстрировано, как сделать выпадающее меню выбора только месяца, без чис (читать далее...)
64JavaScript - Основы, как это работает и как тестировать.
Удивительная штука этот JavaScript! Раньше не доводилось им заниматься, но вот случилось. Добрый чел (читать далее...)
23
Babakov.Net
Оставить первый комментарий: