Обработка множественного выбора
Форма.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <form action="reg.php" method="GET"> <div> Имя: <input type="txt" name="user" /> <br/> Город: <select name="city_id[]" multiple> <!--имя массива--> <option value="1">Казань</option> <option value="2">Москва</option> <option value="3">Уфа</option> <option value="4">Перьм</option> <option value="5">Самара</option> </select> </div> <input type="submit" name="Submit" value="Submit" /> </form> </body>
|
Обработка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $city = $_GET['city_id']; $limit = count($city); // получить размер массива
for ($i=0; $i<$limit; $i++) { // перебираем массив
if(mysql_query("INSERT INTO table city_id VALUES ('$city[$i]')")) { echo "$i добавлен - $city[$i]<br/>"; } else { echo "$i error - $city[$i]<br/>"; } }
?>
|
Практические задания
Задание 1
Зайдите на сервер в программу phpMyAdmin по адресу http://ipm.kstu.ru/mysql/. Создайте базу данных (название БД должно начинаться с вашего login'а, например - vasy-catalog).
Создайте таблицу в этой БД со следующими полями (количество символов выставьте на свое усмотрение): - Имя (индексируемое) - Фамилия (уникальное) - Отчество (индексируемое) - e-mail (индексируемое) - телефон (индексируемое) - город (индексируемое) - страна (индексируемое) - фотография
Попробуйте загрузить, удалить и отредактировать данные.
Задание 2
Создайте форму для добавления записей в эту базу данных (должны присутствовать все поля). Создайте скрипт обработки этого запроса.
Создайте форму поиска к этой базе данных (должно присутствовать только поле "Фамилия"). Создайте скрипт обработки этого запроса.
Создайте форму запроса поиска к этой базе данных, для поиска записей которые необходимо редактировать (должны присутствовать все поля). Создайте скрипт обработки этого запроса.
Создайте форму запроса поиска к этой базе данных, для поиска записей которые необходимо удалить (должно присутствовать только поле "Фамилия"). Создайте скрипт обработки этого запроса.
Проверьте работоспособность на сервере.
Сделайте ссылки на первой странице.
К сдаче лабораторной предоставляются: работающие страницы на сервере.
Цель работы: формирование умений использования JavaScript для проверки правильности заполнения форм и создания окон диалога.
Литература
Клиентский JavaScript 1.3. Справочник (RUS)
Клиентский JavaScript 1.3. Руководство (RUS)
Поясняющая информация
Объектная модель браузера
Объектная модель браузера содержит 12 объектов:
Document - предоставляющий возможность доступа к компонентам документа HTML.
Event - предоставляющий возможность доступа к свойствам событий, когда последние происходят.
History - предоставляет информацию об адресах, которые клиент посетил.
Location - предоставляет информацию об адресе текущего документа.
MimeType - предоставляет информацию о типе MIME.
Navigator - позволяет обращаться к свойствам браузера.
Selection - отображает текущее выделение документа.
Style - представляет конкретный элемент стиля в таблице стилей.
TextRange - отображает разделы текста, формирующего документ HTML.
Screen - предоставляет информацию о мониторе и системе вывода, информации клиента.
Window - предоставляет свойства, методы и события, связанные с окном браузера.
StyleSheet - представляет все элементы стиля внутри таблицы стилей.
которые позволяют обращаться к части браузера или части страницы с помощью языка JavaScript.
Кроме объектов в объектной модели вводятся следующие понятия:
Методы - способы работы с объектами. Например: закрыть окно. По сути это функция, ассоциированная с объектом.
object.methodname
События - объект сообщает нам, что нечто произошло. Например: элемент становиться активным.
Свойства - свойства объекта. Например: имя и размеры окна.
Окна диалога. Объект Window
Открытие окна
Синтаксис:
window.open ("URL или URI","имя окна","свойства окна")
Следующий оператор создаёт окно, которое отображает содержимое страницы http://www.kstu.ru:
window.open("http://www.kstu.ru")
При создании окна вы можете также предоставить имя, в данном случае - kstuWindow, для обращения к окну как к цели/target при отправке формы или при переходе по гиперссылке.
window.open("http://www.kstu.ru", "kstuWindow" )
Имя окна не требуется при создании окна. Но окно обязано иметь имя, если вы хотите обратиться к нему из другого окна.
При открытии окна вы можете специфицировать атрибуты, такие как высота/height и ширина/width, панель утилит/toolbar, адресная строка/location field или полосы прокрутки/scrollbars. Следующий оператор создаёт окно без панели утилит, но с полосами прокрутки:
window.open ("http://www.kstu.ru","wwwWindow","toolbar=no,scrollbars=yes")
Некоторые свойства окна:
directories - Если yes, создаются стандартные кнопки директорий браузера, такие как What's New и What's Cool.
height - Специфицирует высоту окна в пикселах.
innerHeight - Специфицирует высоту области содержимого окна в пикселах. Это свойство заменило height, которое оставлено для обеспечения обратной совместимости.
innerWidth - Специфицирует ширину области содержимого окна в пикселах. Это свойство заменило width, которое оставлено для обеспечения обратной совместимости.
location - Если yes, создаёт поле ввода Location.
menubar - Если yes, создаёт строку меню в верхней части окна.
outerHeight - Специфицирует размер по вертикали в пикселах внешней границы окна.
resizable - Если yes, даёт пользователю возможность изменять размеры окна.
screenX - Специфицирует расстояние, на котором новое окно помещается от левого края экрана.
screenY - Специфицирует расстояние, на котором новое окно помещается от верха экрана.
scrollbars - Если yes, создаются вертикальная и горизонтальная полосы прокрутки, если документ становится больше размеров окна.
status - Если yes, создаётся статусная строка внизу окна.
titlebar - Если yes, создаётся окно со строкой заголовка.
toolbar - Если yes, создаётся стандартная панель браузера с кнопками, такими как Back и Forward.
width - Специфицирует ширину окна в пикселах.
Для того чтобы функция отрабатывалась при нажатии мышкой на элементе документа, будем использовать событие onClick объекта Document.
Пример:
Откроем ссылку в новом окне
<a href=""
onClick="window.open('http://www.kstu.ru','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">
Открыть новое окно
</a>
Исполнение: Открыть новое окно
Тоже самое можно сделать с помощью кнопки:
<input type="button" value="Открыть новое окно"
onClick="window.open('http://www.kstu.ru','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">
Исполнение:
Закрытие окна
Следующий оператор закрывает текущее окно: window.close()
Пример:
Начало формы
Конец формы
Проверка правильности заполнения форм с помощью JavaScript.
С помощью JavaScript можно контролировать правильность заполнения форм.
Попробуйте нажать на "Отправить" в форме расположенной ниже, не заполняя ее.
Начало формы
Имя |
|
|
|
Комментарий |
|
|
|
Конец формы
Функции для этого примера:
<script language="JavaScript"> <!-- function CheckForm(UserForm) { var is_ok = true; if (UserForm.name.value == '') { is_ok = false; alert("Введите ваше имя!!"); UserForm.name.focus(); } if (UserForm.Comment.value == '') { is_ok = false; alert("Введите ваши коммениарии!"); UserForm.Comment.focus(); } if (UserForm.email.value == '') { is_ok = false; alert("Введите ваш e-mail!"); UserForm.email.focus(); } return is_ok; } // --> </script>
Вызов функции в теге <FORM> при нажатии на кнопку "Отправить"
<form onSubmit = "return CheckForm(this)">
Имена полей
<input type="text" name="name" size="20"> <input type="text" name="email" size="20"> <textarea rows="3" name="Comment" cols="20">
Практические задания
Задание 1
Сделайте, чтобы формы предыдущей лабораторной работы открывались в новом диалоговом окне. Нужно обязательно задать: - отступ слева - отступ с верху - ширину - высоту - не отображение панели инструментов - не отображение панели меню - отображение строки состояния - не отображение адресной строки - не отображение кнопок браузера - отображение полос прокрутки
Проверьте работоспособность на сервере.
Задание 2
Сделайте проверку заполнения для каждой из этих форм.
Проверьте работоспособность на сервере.
К сдаче лабораторной предоставляются: работающие страницы на сервере с комментариями указанных тегов и их свойств в исходнике.
строкой заголовка.
Цель работы: формирование умений использования JavaScript для управления сценариями просмотра Web-страниц
Литература
Клиентский JavaScript 1.3. Справочник (RUS)
Клиентский JavaScript 1.3. Руководство (RUS)
Поясняющая информация
Информация о дате последнего изменения документа.
Для этого в HTML-теге <A> используется свойство lastModified объекта Document. Информацию можно выводить в диалоговое окно. Для этого используется метод alert() объекта Window и обработчик событий onMouseOver, включенные в HTML-тег <A>. В окне есть кнопка "OK", которая закрывает диалоговое окно.
<A href="http://www.kstu.ru" onmouseover="alert('Дата последней модификации этого документа - ' + document.lastModified)">Наведите мышку на ссылку</A>
Наведите мышку на ссылку
Вывод текущей даты
Используется объект Date и метод write объекта document.
Дата клиентского компьютера!
Текущая дата вашего компьютера: Tue Nov 28 2006 14:22:55 GMT+0300 (MSK).
Исходник: <SCRIPT LANGUAGE="JavaScript"> current_date = new Date(); document.write("<p><b>Текущая дата вашего компьютера:</b> " + current_date + ".<p>"); </SCRIPT>
Также можно вывести сокращенный вариант для этого используются методы getDate, getMonth, getYear. Обратите внимание, что нумерация месяцев начинается с нуля. Число: 28.10.106. Исходник: <SCRIPT LANGUAGE="JavaScript"> current_date = new Date(); document.write("<b>Число:</b> " + current_date.getDate() + "." + current_date.getMonth() + "." + current_date.getYear() + "."); </SCRIPT>
Или для времени getHours, getMinutes, getSeconds такой вариант: Время: 14.22.55. Исходник: <SCRIPT LANGUAGE="JavaScript"> current_date = new Date(); document.write("<b>Время:</b> " + current_date.getHours() + "." + current_date.getMinutes() + "." + current_date.getSeconds() + "."); </SCRIPT>