Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Некоторые методы для работы с шаблонами

⇐ ПредыдущаяСтр 6 из 7Следующая ⇒

replace — данный метод мы уже использовали в самом начале статьи, он предназначен для поиска образца и замены найденной подстроки на новую подстроку.

test — данный метод проверяет, есть ли совпадения в строке относительно шаблона и возвращает false, если сопоставление с образцом закончилось неудачей, в противном случае true.

Например:

<script language="JavaScript">

var str="JavaScript"

var reg=/PHP/

var result=reg.test(str)

document.write(result)

</script>

выведет в качестве результата false, т.к. строка "JavaScript" не равна строке "PHP".

Также метод test может возвращать вместо true или false любую другую строку заданную программистом.

Например:

<script language="JavaScript">

var str="JavaScript"

var reg=/PHP/

var result=reg.test(str)? "Строка совпала": "Строка не совпала"

document.write(result)

</script>

в этом случае в качестве результата будет строка: Строка не совпала.

exec — данный метод выполняет сопоставление строки с образцом, заданным шаблоном. Если сопоставление с образцом закончилось неудачей, то возвращается значение null. В противном случае результатом является массив подстрок, соответствующих заданному образцу. /*Первый элемент массива будет равен исходной строке удовлетворяющее заданному шаблону*/

Например:

<script language="JavaScript">

var reg=/(\d+).(\d+).(\d+)/

var arr=reg.exec("Я родился 15.09.1980")

document.write("Дата рождения: ", arr[0], "< br>")

document.write("День рождения: ", arr[1], "< br>")

document.write("Месяц рождения: ", arr[2], "< br>")

document.write("Год рождения: ", arr[3], "< br>")

</script>

в результате получим четыре строки:

Дата рождения: 15.09.1980

День рождения: 15

Месяц рождения: 09

Год рождения: 1980

Задание:

Дополнить ранее выполненную лабораторную работу следующим функционалом:

· при заполнении данных должны учитываться их тип (определённый в физической модели IDEF1x) и формат (например, наличие первой заглавной буквы, только символом кириллицы, количества нулей после запятой, запрет на пустую строку и т.д.);

· возможность удалять и редактировать существующие в таблице записи1;

· учёт связи по ключевым полям обязателен;

· выделение неверно заполненного поля (например, изменением цвета подписи) и предоставление примера правильного заполнения.

Задачи:

1. Изучить подходы к реализации регулярных выражений (PECL, POSIX)

2. Изучить возможности JavaScript в реализации регулярных выражений

3. Изучить функции и свойства класса RegExp в JavaScript

4. Самостоятельно определять способ реализации функционала, связанного с добавлением, удалением или редактированием строк. Допускается выбор из подхода DOM, стандартного или смешанного

Ст руктура отчёта:

1. Титульный

2. Содержание

3. Описание целей и задач

4. Описание системы

5. Файлы HTML и JavaScript

Пример лабораторной работы №5:

XML файл: остается без изменений

XSLT файл: описываем формы для удаления и замены значений в таблицах client и employee, добавляем скрипт с ограничениями для ввода данных.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<head>

<script>

function show(obj){

if(document.getElementById("sel").value==1){

document.form1.style.display='block';

document.form2.style.display='none'; }

if(document.getElementById("sel").value==2){

document.form2.style.display='block';

document.form1.style.display='none'; }}

function prname(){

var name_client = document.getElementById("name").value;

var text = /^[ а - яА - Я a-zA-Z\s]+$/;

if (text.test(name_client) == true){

document.getElementById("name").style.color='green';

}

else{

document.getElementById("name").style.color='red' }}

function prbirth(){

var birth_client = document.getElementById("birth").value;

var text = /^[01-31.01-12.1970-1995]+$/;

if (text.test(birth_client) == true){

document.getElementById("birth").style.color='green';

}

else{

document.getElementById("birth").style.color='red' }}

function prIDcard(){

var IDcard_client = document.getElementById("IDcard").value;

var text = /^[0-9]{5}$/;

if (text.test(IDcard_client) == true){

document.getElementById("IDcard").style.color='green';

}

else{

document.getElementById("IDcard").style.color='red' }}

function prtelephone(){

var telephone_client = document.getElementById("telephone").value;

var text = /^[8][0-9]{9}$/;

if (text.test(telephone_client) == true){

document.getElementById("telephone").style.color='green';

}

else{

document.getElementById("telephone").style.color='red' }}

function provename(){

var ename_employee = document.getElementById("ename").value;

var text = /^[ а - яА - Я a-zA-Z\s]+$/;

if (text.test(ename_employee) == true){

document.getElementById("ename").style.color='green';

}

else{

document.getElementById("ename").style.color='red' }}

function provposition(){

var position_employee = document.getElementById("position").value;

var text = /^[ а - яА - Я a-zA-Z\s]+$/;

if (text.test(position_employee) == true){

document.getElementById("position").style.color='green';

}

else{

document.getElementById("position").style.color='red' }}

function provetelephone(){

var etelephone_employee = document.getElementById("etelephone").value;

var text = /^[8][0-9]{9}$/;

if (text.test(etelephone_employee) == true){

document.getElementById("etelephone").style.color='green';

}

else{

document.getElementById("etelephone").style.color='red' }}

function provemail(){

var email_employee = document.getElementById("email").value;

var text = /^[a-z а - я 0-9\W]+$/;

if (text.test(email_employee) == true){

document.getElementById("email").style.color='green';

}

else{

document.getElementById("email").style.color='red' }}

</script>

<title>Fitness</title>

</head>

<body>

<select name="select" id="sel" onchange="show(this);">

<option value="1">client</option>

<option value="2">employee</option>

</select>

<form name="form1" method="post" action="client.php"

id="form1" style="display:block">

<input type="text" name="name" value=" ФИО " id="name" onKeyDown="prname()"/>

<br/>

<input type="text" name="birth" value=" Дата рождения " id="birth" onKeyDown="prbirth()"/><br/>

<input type="text" name="IDcard" value="№ карты " id="IDcard" onKeyDown="prIDcard()"/><br/>

<input type="text" name="telephone" value=" Телефон " id="telephone" onKeyDown="prtelephone()"/><br/>

<input type="submit" name="submit"

value=" Добавить запись "/>

</form>

<form name="form2" method="post" action="employee.php"

id="form2" style="display:none">

<input type="text" name="ename" value=" ФИО " id="ename" onKeyDown="provename()"/> <br/>

<input type="text" name="position" value=" Должность " id="position" onKeyDown="provposition()"/><br/>

<input type="text" name="etelephone" value=" Телефон " id="etelephone" onKeyDown="provetelephone()"/><br/>

<input type="text" name="email" value=" Электронная почта " id="email" onKeyDown="provemail()"/><br/>

<input type="submit" name="submit"

value=" Добавить запись "/>

</form>

<h2>Client</h2>

<table border="1" id='client'>

<thead>

<tr bgcolor="purple" >

<th>№</th>

<th>name</th>

<th>birth</th>

<th>IDcard</th>

<th>telephone</th>

</tr>

</thead>

<tbody>

<xsl:for-each select="fitness/list1/client">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td>

<xsl:value-of select="position()"/>

</td>

<td><xsl:value-of select="name"/></td>

<td><xsl:value-of select="birth"/></td>

<td><xsl:value-of select="IDcard"/></td>

<td><xsl:value-of select="telephone"/></td>

</tr>

</xsl:for-each>

</tbody>

</table>

<p> Всего элементов: <xsl:value-of select="count(fitness/list1/client)"/></p>

Удаление строки:

<form name="form3" method="POST" action="delete.php">

<input type="text" name="del" id="del"/>

<br/>

<input type="submit" name="submit3" value=" Удалить "/>

</form>

<h2>Employee</h2>

<table border="1">

<tr bgcolor="purple">

<th>№</th>

<th>name</th>

<th>position</th>

<th>telephone</th>

<th>email</th>

</tr>

<xsl:for-each select="fitness/list2/employee">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td>

<xsl:value-of select="position()"/>

</td>

<td><xsl:value-of select="name"/></td>

<td><xsl:value-of select="position"/></td>

<td><xsl:value-of select="telephone"/></td>

<td><xsl:value-of select="email"/></td>

</tr>

</xsl:for-each>

</table>

<p> Всего элементов:<xsl:value-of select="count(fitness/list2/employee)"/></p>

<form name="form4" method="POST" action="edit.php">

Введите номер изменяемой строки:<br/>

<input type="text" name="edit" id="edit"/>

<br/>

Введите ФИО:<br/>

<input type="text" name="nameedit" id="nameedit"/>

<br/>

Введите должность:<br/>

<input type="text" name="posedit" id="posedit"/>

<br/>

Введите номер телефона:<br/>

<input type="text" name="teledit" id="teledit"/>

<br/>

Введите адрес электронной почты:<br/>

<input type="text" name="emailedit" id="emailedit"/>

<br/>

<input type="submit" name="submit4" value=" Изменить "/>

</form>

<h2>Contract</h2>

<table border ="1">

<tr bgcolor="purple">

<th>IDcard</th>

<th>contract_date</th>

<th>term</th>

</tr>

<xsl:for-each select="fitness/list3/contract">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="style">background-color: pink;</xsl:attribute>

</xsl:if>

<td><xsl:value-of select="IDcard"/></td>

<td><xsl:value-of select="contract_date"/></td>

<td><xsl:value-of select="term"/></td>

</tr>

</xsl:for-each>

</table>

<p> Всего элементов: <xsl:value-of select="count(fitness/list3/contract)"/></p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

PHP добавление client: остается без изменений

PHP добавление employee: остается без изменений

Рис. 6. Ограничение ввода данных

PHP удаление:

Описание: создается для того, чтобы обрабатывать и удалять данные, добавленные в форму client.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

</head>

<body>

<?php

$dom = new DOMDocument();

$dom->load('fit.xml');

$s = simplexml_import_dom($dom);

$ii=$_POST['del'];

$i=$ii-2;

unset($s->list1[$i]->client);

$dom->save('fit.xml');

<meta http-equiv="refresh" content="0; url=fit.xml">

</body>

</html>

Рис. 7. Форма для удаления записи

PHP замена:

Описание: создается для того, чтобы обрабатывать и заменять данные, добавленные в форму employee.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

</head>

<body>

<?php

$dom = new DOMDocument();

$dom->load('fit.xml');

$s = simplexml_import_dom($dom);

$dd=$_POST['edit'];

$d=$dd-2;

$s->list2[$d]->employee->name= $_POST['nameedit'];

$s->list2[$d]->employee->position = $_POST['posedit'];

$s->list2[$d]->employee->telephone = $_POST['teledit'];

$s->list2[$d]->employee->email = $_POST['emailedit'];

$dom->save('fit.xml');

<meta http-equiv="refresh" content="0; url=fit.xml">

</body>

</html>

Рис. 8. Форма для замены записи

Л абораторная № 6

Т ема: «Изучение технологии AJAX»

Ц ель: Изучить подход к созданию динамических web-страниц на основе технологии AJAX

Теоретические основы:

Технология AJAX (Асинхронный JavaScript + XML), являющаяся одной из основных технологий, лежащей в основе, так называемого, WEB 2.0, была известно еще, чуть ли не, со времен каменного века. Однако, благодаря появлению термина AJAX, который ввел Джис Джеймс Гаррет (Jesse James Garrett), она стала необычайно модной. И если раньше, о ней могли говорить только наиболее продвинутые программисты, то теперь, благодаря появлению специального термина, сказать о ней может каждый, кому не лень. Достаточно просто произнести «AJAX», и ты уже о ней говоришь.

Суть технологии AJAX заключается в изменении содержимого загруженной веб-страницы без ее полной перезагрузки, благодаря чему достигается высокая динамичность сайтов. Технология основывается на разделении данных и подзагрузки тех или иных компонентов по мере необходимости.

Рис. 9. Общая схема работы web-сервера на AJAX

Поскольку AJAX – это по сути, только разнообразное применение компонента XMLHttpRequest, то чтобы понять работу AJAX, требуется разобраться с синтаксисом XMLHttpRequest. Сделаем это на примере:

<script type="text/javascript" language="JavaScript">

function doLoad() {

req=false;

try { // определить метод поддержки

req=new ActiveXObject('Msxml2.XMLHTTP');

} catch (e) {

try {

req=new ActiveXObject('Microsoft.XMLHTTP'); // сработает в Internet Explorer

} catch (e) {

if(window.XMLHttpRequest){ // сработает в Mozilla и Safari

req=new XMLHttpRequest(); } } }

if (req){// если какой-то из вариантов поддерживается

req.onreadystatechange = readystate; // назначим обработчик событию объекта

req.open("GET", document.getElementById('edit1').value, true); // задать параметры методу open

req.send(null); // отправить запрос

} }

function readystate() {

if (req.readyState == 4){// если запрос завершен

if (req.status == 200) { // если он завершен без ошибок

document.getElementById('content').innerHTML ='<pre>'+req.responseText+'</pre>';

} else {

alert(" Произошла ошибка "+ req.status+":\n" + req.statusText);

} } }

</script>

<input type="TEXT" size="50" id="edit1">

<input type="button" value=" Через ActiveX" onclick="doLoad()">

<div id=content style="white-space:pre"></div>

И так:

Условие window.XMLHttpRequest определяет, каким образом работает объект в данном браузере (можно добавить проверку, работает ли он вообще и если window.ActiveXObject так же дает ложный результат, данный метод вообще не поддерживается браузером). Затем создается объект одного из поддерживаемых типов, после чего событию onreadystatechange (изменение состояния) назначается обработчик. Так же, назначаются параметры методу open. Первый из них определяет тип запроса: POST или GET, второй определяет адрес (в данном случае адрес берется из значения текстового поля), третий, если истинен, определяет что, запрос должен выполнятся асинхронно, то есть, отправив запрос не ждать ответа сервера, а продолжать работу, ожидая ответа в фоновом режиме.

После всего этого методом send происходит фактическая отправка запроса и, как только от сервера приходит ответ, срабатывает обработчик события onreadystatechange.

При обработке события onreadystatechange нужно проверить код состояния объекта (свойство readyState). Определено 4 состояния:

0 – объект не инициализирован

1 – идет загрузка

2 – объект уже загружен

3 – Загружен частично

4 – завершение загрузки

Как только код становится равен 4, данные сервера можно использовать и выводить в браузер. Однако, не мешало бы проверить, что именно вытащили наши сети, используя код ответа сервера, сохраняющийся в req.status. Если код равен 200, данные действительно можно выводить, иначе, можно вывести сообщение об ошибке, сохраняющийся в свойстве req.statusText. Вместо стандартного текста ошибки, можно вывести свой, что удобно сделать, создав массив определений, ключи которого будут соответствовать номерам ошибок:

err[400]=”Запрос содержит синтаксическую ошибку”;

err[401]=”Для доступа требуется авторизация”;

err[403]=”Доступ запрещен”;

и т. д.

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

<?php

if (! @readfile ($_GET['file'])){

echo '<font color=red> Файл не доступен </font>';

}

И тут задумаешься: А может послать этот AJAX к чертям и использовать более простой и всеядный IFRAME? Но IFRAME нельзя использовать непосредственно внутри форм. В этом случае, применение AJAX окажется вполне разумным, и будет выглядеть примерно так:

<script type="text/javascript" language="JavaScript">

function doLoad2 () {

req=false;

try { // определить метод поддержки

req=new ActiveXObject('Msxml2.XMLHTTP');

} catch (e) {

try {

req=new ActiveXObject('Microsoft.XMLHTTP'); // сработает в Internet Explorer

} catch (e) {

if(window.XMLHttpRequest){ // сработает в Mozilla и Safari

req=new XMLHttpRequest(); } } }

if (req){// если какой-то из вариантов поддерживается

req.onreadystatechange = readystate; // назначим обработчик событию объекта

req.open("GET", 'myscript.php?file='+document.getElementById('edit2').value, true); // myscript.php – это приведенный выше серверный скрипт

req.send(null);

} }

function readystate() {

if (req.readyState == 4){// если запрос завершен

if (req.status == 200) { // если он завершен без ошибок

document.getElementById('content').innerHTML ='<pre>'+req.responseText+'</pre>';

} else {

alert(" Произошла ошибка "+ req.status+":\n" + req.statusText);

} } }

</script>

<input type="TEXT" size="50" id="edit2">

<input type="button" value=" Через ActiveX и серверный скрипт " onclick="doLoad2()">

<div id=content style="white-space:pre"></div>

⇐ Предыдущая 1 2 3 4 567 Следующая ⇒

Читайте также:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2021-01-14; просмотров: 60; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 13.59.43.17 (0.154 с.)