Поделиться
23. Практическая работа по теме Создание строковых объектов и работа с ними.doc
Практическая работа №16
Тема: Создание строковых объектов и работа с ними
Цель: закрепление знаний по написанию скриптов для проверки заполнения простых форм строками на корректность.
Время выполнения: 2 часа
Теоретический материал:
Для организации взаимодействия с пользователем обычно применяются такие специальные элементы, как кнопки, переключатели, поля ввода данных, меню и формы.
Создать удобную для пользователя форму не так сложно. Наиболее распространённая ошибка – это использование неровно расположенных полей. В первую очередь форма должна располагаться на странице скорее сверху вниз, нежели слева направо, тем самым как бы заполняя диалоговое окно фиксированного размера. Тем не менее, правильная компоновка формы во многом зависит от тех данных, которые она содержит.
Один из способов повысить удобство формы – это принять во внимание тот факт, что при заполнении текстовых полей используется клавиатура. Минимизируйте возможные перемещения пользователя от клавиатуры к мыши и обратно при помощи следующих способов. Во-первых, сделайте свою форму «дружественной к клавиатуре», т.е. учтите возможность перемещения между полями при помощи табуляции, разрешите использование ускоряющих работу сочетаний клавиш, и, наконец, заполняйте форму значениями по умолчанию. Во-вторых, объединяйте связанные группы данных вместе. Указывайте поля, обязательные для заполнения, каким-либо символом, например, звёздочкой.
Пример проверки корректности заполнения поля формы:
<html><head>
<script language="JavaScript">
function test1(form) {
if (form.text1.value == "")
alert("Пожалуйста, введите строку!")
else {
alert("Hi "+form.text1.value+"! Форма заполнена корректно!");
}}
</script></head>
<body>
<form name="first">
Введите Ваше имя:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Проверка" onClick="test1(this.form)">
</body></html>
Задания:
Задание 1. Напишите web-страницу, на которой будет располагаться четыре текстовых поля и кнопка. При нажатии на кнопку должно выдаваться сообщение о том, сколько полей заполнено. После этого фокус должен переводиться в первое незаполненное поле.
Задание 2. Модифицируйте предыдущую задачу так, чтобы после правильного заполнения всех полей, в пятом поле появился текст, содержащий конкатенацию данных из четырёх первых полей.
Задание 3. В html-документе напишите пользовательскую функцию для определения есть ли в некотором текстовом поле символы: \, %, ? и !. Выдавайте соответствующее сообщение.
Заданипе 4. Создайте html-документ, отвечающий следующим требованиям:
Содержит форму из трёх текстовых полей и кнопки. Первое поле – имя, второе – номер телефона, третье – адрес электронной почты.
При нажатии на кнопку запускается скрипт, который проверяет корректность введённых данных: во всех полях должна содержаться какая-либо информация, во втором – только определённые знаки и цифры, в третьем – обязательно должны присутствовать символы @ и «точка».
Задание 5. Если данные верны, то выводиться сообщение «Всё в порядке». При ошибке в каком-либо поле выдаётся соответствующее сообщение, фокус переводиться в поле с ошибкой и текст поля выделяется.
Ход работы:
1. Дизайн форм должен соответствовать требованиям, изложенным в теоретическом материале. В качестве основы используйте скрипты, описанные в лекциях.
2. Законспектируйте наиболее важные моменты практического занятия, в частности, стандартные функции JavaScript: наличие символа в строке, перевод фокуса, выделение текста.
Контрольные вопросы:
1. Охарактеризуйте требования, предъявляемые к оформлению форм.
2. Прокомментируйте пример, приведённый в теоретическом материале.
3. Каким образом в JavaScript производится доступ к содержимому текстового поля?
4. Можно ли для выравнивания элементов формы использовать обычные таблицы, CSS? Каким образом?
5. Запишите тэги, чаще всего использующиеся при составлении форм. Охарактеризуйте их свойства.
6. Опишите стандартные функции JavaScript, использованные при решении заданий.
7. Как описать текстовое поле, поле для ввода пароля, кнопку?
8. Как описываются переменные с одновременной инициализацией?
9. С помощью каких тэгов создаётся форма?
10. Опишите синтаксис пользовательских функций в JavaScript.
11. Для чего предназначено обращение this.form?
12. Охарактеризуйте алгоритм проверки текстового поля на пустоту.
13. Какие преимущества даёт автотипизация переменных? Недостатки?
14. Приведите практические примеры использования, описанных в работе задач.
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
