Лекции / Глава 20. Введение в JS
.pdf
6 </script>
Чтобы вывести окно, необходимо осуществить вызов события.
Событиями в JS называются уведомления о происходящем, например, о
загрузке страницы (onload) или о щелчке на кнопке (onclick). Используем первое событие. Код для события onload будет задан в одноименном атрибуте тега <body>:
<body onload=hello()>
Теперь создадим собственный пользовательский метод,
запрашивающий логин у пользователя. В случае успеха (введенное значение будет равно “Zaid”), выводим приветственное сообщение, при несовпадении логина – вернемся на главную веб-страницу. Данный сценарий так же будем вызывать при открытии веб-страницы.
1 |
function val() |
|
|
2 |
{ |
|
|
3 |
let userName = prompt("Логин", "Введите свой логин"); |
|
|
4 |
if(userName == "Zaid") |
|
|
5 |
{alert("Добро пожаловать, " + userName);} |
|
|
6 |
else |
|
|
7 |
{document.location.href = "navigation.html";} |
|
|
8 |
} |
|
|
Метод prompt() вызывает всплывающее окно, в котором пользователю предлагается ввести некоторую информацию. Событие document.location.href совершает переадресацию текущей веб-
страницы. Обратите внимание на то, что условные операторы в JS имеют одинаковый синтаксис, что в С++ и С#.
31
Добавим кнопку «Связаться с автором», которая по нажатию будет переходить на страницу социальной сети создателя веб-страницы. Реализация метода представлена ниже:
1 |
function author() |
|
|
2 |
{ |
|
|
3 |
document.location.href |
= |
|
"https://vk.com/id212889462"; |
|
|
|
|
|
|
|
4 |
} |
|
|
|
Для вызова метода author() при щелчке |
на объекте используем |
|
атрибут onclick:
<button onclick="author()">Связаться с автором</button>
§20.23 Разработка простого приложения с формами
Разработаем простой веб-сайт по заказу пиццы через интернет.
Пользователь вводит в форму количество товара и на основе введенных пользователем данных JS вычисляет НДС и итоговую стоимость заказа.
Обработка заказа включает в себя как проверку введенных в форму данных, так и вычисление на их основе суммы заказа. Промежуточная и полная суммы должны отображаться сразу же после ввода информации пользователем. Добавим кнопку «Сделать заказ», которая сохраняет информацию о заказе и переходит на дополнительную веб-страницу, где она будет отображаться.
32
Разработанная форма для формирования заказа примет следующий вид
(рисунок 20.1):
Рисунок 20.1
Вид дополнительной веб-страницы, которая появляется при нажатии кнопки «Сделать заказ», представлена на рисунке 20.2.
Рисунок 20.2
Для начала вынесем JS-код в отдельный файл, например, index.html.
В теге script нашего файла допишем атрибут src, значением которого будет файл, в котором хранится код нашего сценария. Пример объявления:
<script src="index.js"></script>
33
Чтобы представлять, как будет происходить взаимодействие HTML и JS-
кода, изучим структуру разметку (разбирать таблицы стилей пока не будем):
Form.html
<!DOCTYPE html>
<html lang="en" title="Заказ пиццы"> <head>
<meta charset="UTF-8"/> <title>Заказ пиццы</title> <script src="index.js"></script>
<link href="styleForm.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"><h1>Пицеррия "Китовая бухта"</h1></div> <div id="frame">
<div class="field">
Имя закачика: <input type="text" id="nameOrder" name="nameOrder" value="nameOrder"/>
</div>
<div class="field">
Число пиццы сорта "Маргарита: <input type="text" id="PizzaMargarita" name="PizzaMargarita" value="" onchange="updateOrder();"/>
</div>
<div class="field">
Число пиццы сорта "Цезарь: <input type="text" id="PizzaCezar" name="PizzaCezar" value="" onchange="updateOrder();"/>
</div>
<div class="field">
Промежуточная цена: <input type="text" id="sybtotal" name="sybtotal" value="" onchange="updateOrder();"/> </div>
<div class="field">
НДС: <input type="text" id="tax" name="tax" value="" onchange="updateOrder();"/>
</div>
<div class="field">
Итоговая цена: <input type="text" id="total" name="total" value="" onchange="updateOrder();"/>
</div>
34
<div class="fieldbutton">
<button id="Button" class="Button" onclick="ButtonOnClick();">Сделать заказ</button> </div>
</div>
</body>
</html>
В теге body создается множество элементов интерфейса <input>,
текстовые поля для ввода данных type="text" и кнопка «Сделать заказ» с
помощью тега <button>.
Последовательность действий клиента следующая: ввод имени,
количество пицц первого типа, количество пицц второго типа. Далее, после ввода входных данных, по формулам ведется подсчет промежуточной цены заказа (без НДС), НДС и полной цены (с НДС).
Большую услугу в решении нашей и последующих задач окажет метод getElementById(). Этот метод дает JavaScript доступ к элементам страницы через атрибут id в теге элемента. Например,
<input type="text" id="PizzaMargarita" name="PizzaMargarita"/>
Здесь атрибут id используется для доступа к полям формы в коде
JavaScript.
JavaScript позволяет восстанавливать элементы веб-страницы по их номеру id при помощи метода getElementById(). Этот метод не забирает данные напрямую, а представляет поле HTML в виде объекта JavaScript. Для доступа к данным достаточно воспользоваться свойством value этого поля.
Например,
let numPizzaMargarita =
document.getElementById("PizzaMargarita").value;
Здесь создается переменная numPizzaMargarita, которой присваиваются данные, введенные в текстовом поле PizzaMargarita.
35
Важно совершить проверку на корректность введенных данных, а
именно:
1.Являются ли данные, введенные в полях «Число пицц сорта
"Маргарита":» и «Число пицц сорта "Цезарь":», числовыми. В том случае, если введены сторонние символы – вывести предупреждение об ошибке;
2.Заполнены ли все поля формы. Если не все поля заполнены – вывести предупреждение об ошибке.
Для проверки введенных данных к принадлежности числовому типу
потребуется метод isNaN(). Он возвращает true, если переданный ему
параметр не является числом, и false в противном случае. Пример использования приведен ниже:
if(isNaN(document.getElementById("PizzaMargarita").value) || isNaN(document.getElementById("PizzaCezar").value))
{ alert("Некорректный ввод!"); }
Проверка пустоты сводится к проверке равенства введенного значения
пустой строке:
|
if((document.getElementById("nameOrder").value == "") || |
|
|
(document.getElementById("PizzaMargarita").value == "") || |
|
|
(document.getElementById("PizzaCezar").value == "")) |
|
{ |
alert("Некорректный ввод!"); |
} |
Подсчитанная по формулам цена заказа будет сохраняться в отдельном поле. Для мгновенного вычисления промежуточной и полной суммы создадим отдельную функцию, которая будет вызываться при изменении значения
«Число пицц». Чтобы отследить любое изменение значения форм,
используется событие onchange. Пример вызова события представлен ниже:
<input type="text" id="PizzaMargarita" name="PizzaMargarita"
value="" onchange="updateOrder();"/>
36
В данном коде любое изменения введенного значения в текстовом поле приводит к вызову функции updateOrder(), где происходят вычисления.
Теперь опишем метод updateOrder(), аккумулируя приобретенные знания:
index.js
function updateOrder()
{
const TAXRATE = 0.18; //процент налога
const PIZZAPRICEMARGARITA = 120; //стоимость пиццы
«Маргарита»
const PIZZAPRICECEZAR = 210; //стоимость пиццы «Цезарь» let numPizzaMargarita =
document.getElementById("PizzaMargarita").value; let numPizzaCezar =
document.getElementById("PizzaCezar").value;
let subTotal = numPizzaMargarita*PIZZAPRICEMARGARITA + numPizzaCezar*PIZZAPRICECEZAR; //промежуточная сумма
let tax = subTotal * TAXRATE; //сумма НДС let total = subTotal + tax; //полная сумма document.getElementById("sybtotal").value =
subTotal.toFixed(2) + " рублей"; document.getElementById("tax").value = tax.toFixed(2) +
" рублей"; document.getElementById("total").value =
total.toFixed(2) + " рублей";
}
Метод toFixed() выводит количество цифр после десятичного знака (в
нашем случае – 2).
37
В JavaScript, как ранее отмечалось, многое значит контекст, особенно при манипуляции с данными в каждом конкретном куске кода. К примеру,
операция сложения дает разные результаты для разных типов данных. Если левый и правый операнд выражения принадлежат числовому типу данных, то выполняется обыкновенная арифметическая операция (1+2=3). Если оба операнда представлены в виде строк, то выполняется конкатенация
(склеивание) двух строк. При попытке сложить строку и число, как в примере выше, автоматически произойдет перевод числа в строковый тип и операция сложения приведет к объединению строк (10 + « рублей» = 10 рублей).
Когда требуется сложить числа, сохраненные в текстовом формате,
используются следующие методы, преобразующие строку в число:
1.parseInt() – переданная данному методу строка преобразуется в целое число.
2.parseFloat() - переданная данному методу строка преобразуется в
число с плавающей точкой.
Теперь реализуем обработчик события нажатия кнопки «Сделать заказ».
Создадим вторую html-страницу, в которой будет выводится информация о сформированном заказе. Разметка страницы будет выглядеть так:
Order.html
<!DOCTYPE html>
<html lang="en" title="Заказ пиццы"> <head><meta charset="UTF-8"/> <title>Заказ пиццы</title>
<script src="index.js"></script>
<link href="styleForm.css" rel="stylesheet" type="text/css"/></head>
<body onload="upd();"> <div id="header">
<h1>Заказ принят!</h1>
</div>
<div id="frame">
<p id="tagPName"></p> <p id="tagPTotal"></p>
38
<div class="fieldbutton"> <a href="Form.html"><button
class="Button">Назад</button></a> </div>
</div>
</body>
</html>
Обратите внимания на два пустых абзаца, выделенным жирным – tagPName и tagPTotal. Создадим отдельный сценарий, который при загрузке данной страницы будет заполнять эти абзацы информацией об имени заказчика и о полной стоимости заказа.
Функция-обработчик события нажатия кнопки «Сделать заказ» представлена ниже:
index.js
function ButtonOnClick()
{
if(isNaN(document.getElementById("PizzaMargarita").value) || isNaN(document.getElementById("PizzaCezar").value))
{
alert("Некорректный ввод!");
}
else if((document.getElementById("nameOrder").value == "") || (document.getElementById("PizzaMargarita").value == "") || (document.getElementById("PizzaCezar").value == ""))
{
alert("Некорректный ввод!");
}
else
{
let PName=document.getElementById("nameOrder"); let PNamevalue=PName.value; document.cookie="name="+PNamevalue;
let PTotal=document.getElementById("total") let PTotalvalue=PTotal.value; document.cookie="total="+PTotalvalue; document.location.href="Order.html";
}
}
39
Первым шагом выполняется проверка корректности введенных данных.
В случае успеха, мы сохраняем значения полей «Имя заказчика» и «Итоговая цена» в cookie-файлы.
Куки - это небольшой кусочек информации, который может храниться
вбраузере пользователя. К кукам, хранящимся в браузере, можно получить доступ с помощью document.cookie. С помощью этого свойства куки можно записывать и можно прочитывать. В document.cookie куки хранятся просто
ввиде строки. Эта строка состоит из пар имя_куки=значение_куки, которые перечисляются через точку с запятой с пробелом '; '.
Пример работы с куками:
document.cookie="name="+PNamevalue;
Здесь мы сохраняем в куки пару значений name (имя кука, по которому в дальнейшем будет производится чтение данных с памяти) и переменную
PNamevalue, где хранится значение, введенное в поле «Имя заказчика». При записывании новой куки старые куки, которые там уже были, не затрутся.
При нажатии на кнопку данные будут сохранятся в куки. Чтобы получить куки для дальнейшего использования на второй странице,
необходимо реализовать функцию, которая параметром будет принимать имя произвольной куки и возвращать ее значение.
index.js
function getCookie(name) {
let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
Чтобы найти значение куки с именем, например, name, его нужно
достать из этой строки каким-нибудь способом: к примеру регулярными
40