Выпишите и поясните некоторые события из рассмотренного выше материала.
Вставьте на страницу и запишите в отчет скрипт для определения характеристик браузера и экрана с помощью JavaScript, а также скрипт для определения корректности данных, вводимых в форму.
Примеры по определению браузера и экрана
Объекты navigator и screen, фактически являющиеся свойствами объекта Window, позволяют получить информацию о браузере и параметрах экрана, которые имеются в компьютере пользователя.
Пример № 1 - определение типа браузера
Свойство appName объекта navigator позволяет определить тип браузера в компьютере пользователя.
Исходный код:
<script language="JavaScript">
document.write("Вы пользуетесь браузером: "+ navigator.appName)
</script>
Пример № 2 - получение характеристик монитора
Объект screen имеет несколько свойств, значения которых показывают характеристики монитора в компьютере пользователя.
Исходный код:
<script language="JavaScript">
document.write("Разрешающая способность экрана: ") document.write(screen.width + "*") document.write(screen.height + "<br>") document.write("Доступная область просмотра: ") document.write(window.screen.availWidth + "*") document.write(window.screen.availHeight + "<br>") document.write("Глубина цвета: ") document.write(window.screen.colorDepth + "<br>")
</script>
Пример № 3 - проверка достоверности адреса электронной почты
Любой адрес электронной почты должен содержать символ @. Скрипт просто проверяет наличие этого символа. При его отсутствии выводится информационный бокс (alert box) и отображается страница invalid.htm с сообщением об ошибке, а при наличии - отображается страница valid.htm, уведомляющая о правильном адресе e-mail. Для возврата к странице с примерами следует щелкнуть на кнопке Назад в инструментальной панели браузера.
Для проверки контроля правильности ввода адреса e-mail введите в текстовое поле правильный адрес, а затем неверный адрес.
Введите адрес электронной почты:
Проверить
правильность адреса e-mail
Исходный код:
<head>
<script language="JavaScript"> function validate() {
at=document.forms[0]. email.value.indexOf(" @")
if (at<0) {
alert("Hедостоверный адрес e-mail") document.forms[0].action="invalid.htm"
}
}
</script>
</head>
<body>
<form onsubmit="validate()" action="valid.htm">
<input type="text" name="email" size="30"><br />
<input type="submit" value="Проверить правильность адреса e-mail">
</form>
</body>
Пример № 4 - вывод информационного бокса
Метод alert() позволяет вывести на экран информационный бокс (alert box), содержащий текстовую цепочку, которая передается ему как параметр. Действие метода alert() вы наблюдали при открытии этого документа.
Исходный код:
<script language="JavaScript">
alertC^TO пример информационного бокса")
</script>
Пример № 5 - вывод стимулирующего бокса
Метод prompt() позволяет вывести на экран стимулирующий бокс (prompt box), который требует от пользователя ввода некоторых данных. Метод имеет два параметра в виде текстовых цепочек - первая цепочка определят вводимые данные, а вторая задает значение по умолчанию. Метод возвращает в скрипт ввод пользователя или значение по умолчанию (после щелчка на кнопке OK) или значение null (после щелчка на кнопке Cancel). Исходный код:
<script language="JavaScript">
var name = рштр^"Пожалуйста, введите ваше имя","Елена") if (name != null && name != "") { document.write("Привет, " + name)
}
</script>
Контрольные вопросы:
Какие типы ошибок встречаются при использовании скриптов?
Что такое события и обработчики событий.
В каких частях HTML документа можно размещать скрипты и почему?
Использование метода alert().
Использование метода prompt().
Практическая работа № 10 «Создание форм в HTML»
Цель работы: знакомство с техникой создания форм средствами HTML и возможностями простейшей обработки информации на автономном компьютере.
Теоретические сведения:
Формы применяются для получения и обработки данных, введенных пользователем, накопления статистики, проведения опросов, хранения персональных настроек и т. д. Для задания формы в HTML используется парный тег <FORM>...</FORM>. Он имеет два атрибута:
action="..." - указывает сценарий на web-сервере, который должен принимать и обрабатывать введённые данные (сценарии пишутся на таких языках программирования, как ASP, Perl, PHP...);
method-'..." - указывает, как форма будет передавать информацию серверу. Может принимать два значения:
"get" - передает все данные формы в конце URL;
"post" - отправляет введенные данные отдельно от URL. Используется наиболее часто.
Для описания различных типов полей ввода в форме применяется элемент <input>. В общем виде его можно описать так:
<input type="тип_поля" nаmе="имя_переменной" size="N" maxlength="N" value=""> где