2. Цели и задачи
Цель: Научиться, с помощью JavaScript, проверять, вводимые через web-формы, данные.
Задачи:
Ø Изучить реализацию регулярных выражений на языке JavaScript
Ø Дополнить, ранее разработанные web-страницы, проверкой на корректность вводимых значений.
Ø Научиться реализовывать проверку строк содержащих смешанное (набор из печатаемых символов) содержимое, как при вводе, так и при изменении.
3. Введение
На сегодняшний день сформировались две наиболее распространенных области использования Web-страниц – это сбор и распространение данных. По самой своей природе эти две области для определения того, что требуется пользователю, применяют обработку данных, а затем возвращают информацию, подобранную в соответствии с требованиями пользователя. Одним из ключевых инструментов обработки данных является сравнение по образцу.
4. Ход выполнения
4.1 Формализованное описание системы.
4.1.1 Файл laba#3.html.
Функции: в данном файле функций нет.
События:
Ø onclick – событие по щелчку мыши.
Переменные: в данном файле переменных нет.
4.1.2. Файл script.js.
Функции:
Ø addROW() – заносит данные в таблицу;
Ø changeROW() – позволяет изменять данные в таблице.
События: в данном файле событий нет.
Переменные:
Ø rowCount – количество строк;
Ø Table – ссылка на таблицу;
Ø cell – вспомогательная переменная;
Ø row – вспомогательная переменная;
Ø NewRow – вставка строки в таблицу;
Ø Elem – вспомогательная переменная.
Команды:
Ø prompt – запрос на ввод.
4.2 Алгоритмическая структура.
В основе технологии DOM лежит классическая объектная модель: содержимое документа представляется в виде набора связанных объектов, которые имеют свои идентификаторы и методы.
В соответствии с объектной моделью DOM, любые документы представляются в виде логической древовидной структуры - каждый документ содержит один корневой объект, который порождает множество дочерних объектов.
Доступ к этим дочерним объектам осуществляется с помощью document.getElementById и document.getElementsByTagName.
4.3 Программный код.
4.3.1 Файл laba#2.html.
<!doctype html public "-//W3C//DTD HTML 3.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
Laba #3
</TITLE>
<script language="JScript" src="script.js"></script>
</HEAD>
<BODY bgcolor="teal" STYLE="SCROLLBAR-TRACK-COLOR: #66CCFF;SCROLLBAR-FACE-COLOR: silver;">
<MARQUEE align="top" behavior="alternate">
<font size="7" color="RED">БД Taxi</font>
</MARQUEE>
<table width="972" border="1" >
<THEAD>
<TR>
<TH bgcolor="#66CCFF">
Номер автомобиля
</TH>
<TH bgcolor="#66CCFF">
Время работы (часы:минуты)
</TH>
<TH bgcolor="#66CCFF">
Количество израсходованного топлива (литров)
</TH>
</TR>
</THEAD>
<TBODY></TBODY>
</TABLE>
<TABLE width="972" border="1" bgcolor="#66CCFF">
<TR>
<TD align="middle">
<font size="5" color="RED">Ввод данных в БД Taxi</font><BR>
<font size="4" color="NAVY">Введите номер автомобиля:</font><BR>
<input type="text" maxlength="6" ID="nomer"><BR>
<font size="4" color="NAVY">Введите время работы (часы:минуты):</font><BR>
<input type="text" maxlength="5" ID="vremya"><BR>
<font size="4" color="NAVY">Введите кол-во израсход. топлива (литры):</font><BR>
<input type="text" maxlength="3" ID="toplivo"><BR>
<input type="button" value="Добавить в таблицу!" style="BACKGROUND-COLOR:#66CCFF;" onclick="javascript:addROW();">
</TD>
</TR>
</TABLE>
<MARQUEE align="top" behavior="scroll" scrollamount="9">
<font size="5" color="BLUE">Выполнили: Васильев А.С. Мирошниченко А.Ю. Гришин Д.Ю.</font>
</MARQUEE>
</BODY>
</HTML>
4.3.2. Файл script.js.
var rowCount = 0;
function addROW()
{
if (document.getElementById("nomer").value.match(/^[a-zа-я0-9]+$/i) &&
document.getElementById("vremya").value.match(/^[0-1][0-9]:[0][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-1][0-9]:[1][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-1][0-9]:[2][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-1][0-9]:[3][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-1][0-9]:[4][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-1][0-9]:[5][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-4]:[0][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-9]:[1][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-9]:[2][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-9]:[3][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-9]:[4][0-9]$/) ||
document.getElementById("vremya").value.match(/^[0-2][0-9]:[5][0-9]$/) &&
document.getElementById("toplivo").value.match(/^[0-9][0-9][0-9]$/))
{
var table = document.getElementsByTagName("TBODY")[0];
var newRow = document.createElement("TR");
var newColumn = document.createElement("TD");
newColumn.appendChild(document.createTextNode(document.getElementById("nomer").value));
newRow.appendChild(newColumn);
newColumn = document.createElement("TD");
newColumn.appendChild(document.createTextNode(document.getElementById("vremya").value));
newRow.appendChild(newColumn);
newColumn = document.createElement("TD");
newColumn.appendChild(document.createTextNode(document.getElementById("toplivo").value));
newRow.appendChild(newColumn);
table.appendChild(newRow);
var row=table.rows[rowCount];
for(var j=0; j<row.cells.length; j++)
{
var cell=row.cells[j];
cell.onclick=changeROW;
cell.style.cursor = "hand";
}
rowCount = rowCount + 1;
}
else
alert("Неверные данные!");
}
function changeROW()
{
var Elem=event.srcElement;
if(Elem.tagName=="TD")
{
Elem.innerHTML=prompt("измените данные","");
if(confirm("Не вводить?"))
return null;
}
}
5. Выводы
Выполняя данную лабораторную работу нами была реализована проверка данных при вводе в таблицу, с помощью образцов ввода, а также реализованы регулярные выражения.
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.
