- •Web программирование
- •231000.62 – “Программная инженерия”
- •Содержание
- •Введение
- •Дисциплина web программирование имеет целью обучить студентов разработке web - приложений, дать студентам теоретические знания и практические навыки в проектировании и реализации web-сайтов.
- •1. Протоколы и модели Internet-взаимодействия
- •1.1. Протоколы
- •1.2. Модель клиент-сервер
- •1.3. Формат описания адреса
- •2. Статическое web – программирование
- •2.1. Структура html-документа
- •2.2. Работа с текстом
- •2.3. Работа с таблицами
- •2.4. Работа с формами
- •2.5. Работа с фреймами
- •3. Каскадные таблицы стилей (css)
- •3.1. Синтаксис css
- •3.2. Использование css
- •3.3. Свойства css
- •4. Язык xml
- •4.1. Структура xml-документа
- •4.2. Правила создания xml-документа
- •4.3. Конструкции языка xml
- •4.3.1. Элементы данных
- •4.3.2. Комментарии
- •4.3.3. Атрибуты
- •4.3.4. Cпециальные символы
- •4.3.5. Директивы анализатора
- •4.3.6. Cdata
- •5. JavaScript сценарии
- •5.1. Клиентские и серверные сценарии
- •5.2. Операторы и функции JavaScript
- •5.3. Встроенные объекты JavaScript
- •5.4. Динамический html
- •5.5. Ajax технология
- •6. Работа с субд MySql
- •6.1. Особенности
- •6.2. Основные команды
- •7. Php. Динамическое web-программирование
- •7.1. Особенности
- •7.2. Php и объектно-ориентированное программирование
- •8. Проектирование полнофункциональных web-сайтов
- •8.1. Виды сайтов
- •8.2. Этапы проектирования web-сайтов
- •9. Задания для выполнения лабораторных работ
- •Последовательность выполнения задания
- •9.2. Задания для выполнения лабораторной работы №2 «Разработка сайта, содержащего карту-изображение с заданными активными зонами»
- •Варианты
- •Последовательность выполнения задания
- •9.3. Задания для выполнения лабораторной работы №3 «Разработка сайта, содержащего таблицы»
- •Варианты
- •9.4. Задания для выполнения лабораторной работы №4 «Разработка сайта “Электронный тест проверки знаний студентов изучаемых дисциплин”»
- •Варианты
- •Последовательность выполнения задания
- •9.5. Задания для выполнения лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •Варианты
- •Последовательность выполнения задания
- •9.6. Задания для выполнения лабораторной работы №6 «JavaScript. Горизонтальное и вертикальное меню»
- •Варианты
- •Последовательность выполнения задания
- •2.1 Горизонтальное меню
- •2.2 Вертикальное выпадающее меню
- •2.3 Вертикальное раскрывающееся меню
- •9.7. Задания для выполнения лабораторной работы №7
- •2. Ход работы
- •9.8. Задания для выполнения лабораторной работы №8 «Динамическая поддержка выбора значений из предлагаемого списка»
- •Варианты
- •Последовательность выполнения задания
- •9.9. Задания для выполнения лабораторной работы№9 «MySql. Проектирование базы данных и обеспечение прав доступа»
- •Варианты
- •Последовательность выполнения задания
- •9.10. Задания для выполнения лабораторной работы№10 «Разработка интернет-магазина»
- •Варианты
- •Последовательность выполнения задания
- •10. Контрольная работа
- •10.1. Назначение, цели и задачи контрольной работы
- •10.2. Требования к контрольной работе
- •10.3. Варианты заданий курсовой работы
- •11. Пример программы «Создание динамического эффекта» к выполнению лабораторной работы №5 «Разработка сайта с динамическими эффектами»
- •11.1. Плавное появление и исчезновение текста
- •11.2. Текст, движущийся на наблюдателя
- •11.3. Создание бегущих строк
- •11.4. Волнообразнодвижущийся текст
- •10.5. Текст, прилетающий по частям
- •10.6. Имитация движения текста по кругу в 3 d пространстве
- •10.7. Движение фонового рисунка страницы («летящие звезды», «эффект фейерверка», «падающий снег», «часы со стрелками»)
- •Заключение
- •Список литературных первоисточников
- •231000.62 – «Программная инженерия»
2. Ход работы
Реализация сетевого взаимодействия с использованием технологии AJAXпредусматривает наличие клиентской и серверной частей веб-приложений.
Клиентская часть.
Предполагается, что пользователь может вводить в текстовое поле формы вариант подбираемого логина, получая при этом динамически ответ о существовании или отсутствии такого логина в списке зарегистрированных пользователей без перезагрузки страницы.
Создайте следующую веб-страницу:
<html>
<head>
<script src="bearbeiter.js"></script>
</head>
<body>
<form>
Login:
<input type="text" id="txt1" onkeyup="zeigenAntwort(this.value)">
</form>
<p>Такой логин: <span id="txtAntwort"></span></p>
</body>
</html>
В коде задано, что при наступлении события onkeyup(отжатие клавиши) вызывается обработчикzeigenAntwort().
В файле bearbeiter.js сохраните следующий код обработчика
Код обработчика загружается из файла bearbeiter.js:
var xmlHttp;
//----------------------------------------------------------
function zeigenAntwort(str)
{
/* Если поле ввода пустое, происходит очистка содержимого раздела txtAntwort на веб-странице.*/
if (str.length==0)
{
document.getElementById("txtAntwort ").innerHTML="";
return;
}
/* Если содержимое текстового поля формы непустое */
/*Вызов функции для создания объукта класса XMLHttpRequest*/
xmlHttp=GetXmlHttpObject();
/*Проверка возможности использования AJAX для текущего браузера*/
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url = "server_bearbeiter.php"; /* Формирование url для отправки веб-серверу*/
url = url + "?log = " + str; /* Добавление значения параметра log, равное содержимому текстового поля, к url*/
url = url + "&r_id=" + Math.random(); /* Добавление к url случайного числа для предотвращения кеширования*/
xmlHttp.onreadystatechange = anderung; /* Свойство класса XMLHttpRequest. Задает обработчик события, которое происходит при каждой смене состояния объекта. Свойству указывается функция (anderung) подлежащая исполнению при наступлении события ввода символа*/
xmlHttp.open("GET", url, true); /* Открывается объект XMLHTTP с указанным значением url*/
xmlHttp.send(null); //Отправляется HTTP запрос веб-серверу
}
//-----------------------------------------------------------
function anderung()
{
if (xmlHttp.readyState==4) /* Свойство класса XMLHttpRequest. Содержит текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены) */
{
document.getElementById("txtAntwort").innerHTML = xmlHttp.responseText;
/* responseText - свойство класса XMLHttpRequest. Содержит текст ответа на запрос. Если состояние не 3 или 4, возвращает пустую строку.
С помощью свойства innerHTML можно добавить новые вложенные элементы на страницу. Или прочитать уже существующие на странице элементы со всеми входящими в этот элемент атрибутами. */
}
}
//-----------------------------------------------------------
//---------создание объекта XMLHttpRequest для разных браузеров-----------
function GetXmlHttpObject()
{
var xmlHttp=null;
/*делается попытка создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari:*/
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
/* В случае неудачи попытки создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari, делается попытка создания объекта для Internet Explorer 6.0+ : */
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
/* Если предыдущие попытки неудачны, делается попытка создания объекта для Internet Explorer 5.5+ :*/
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
/*В случае, если все попытки не принесли успеха, возврат нуля приводит к выдаче сообщения об отсутствии поддержки AJAX браузером.*/
return xmlHttp;
}
Серверная часть.
Разместите на веб-сервере в файле с именем server_bearbeiter.phpследующий PHP сценарий::
<?php
header("Cache-Control: no-cache, must-revalidate");
// Прошедшая дата
header("Expires: Mon, 1 Sep 2008 07:30:00 GMT");
// Инициализация массива названий
$login[]="aazc";
$login[]="bblk";
$login[]="cclk";
//получение параметра log из URL
$q = $_GET["log"];
//поиск соответствий из массива если длина log > 0
$antvort = "";
if (strlen($log) > 0)
{
for($i = 0; $i<count($login); $i++)
{
if (strtolower($log) == strtolower(substr($login[$i],0,strlen($log))))
$antvort = "УЖЕ СУЩЕСТВУЕТ";
else
$antvort = "ВОЗМОЖЕН";
}
}
//вывод результата
echo $antvort;
?>