2015-10-22
281
На странице выводятся два поля ввода с просьбой ввести свое имя и номер телефона. В случае недопустимого ввода выдается сообщение об ошибке.
Разбор сценария
Сценарий достаточно простой. Имеется две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Займемся первой:
function validfn(fnm){ fnlen=fnm.length if (fnlen == 0) {alert("Вы должны ввести свое имя") document.dataentry.fn.focus()} } <body> <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)">Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn. Этот обработчик рассматривался в пятом уроке.
Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.
Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.
Переменной с именем fnlen присвоено значение длины имени пользователя. Таким образом, если пользователь введет имя "Коля", значение fnlen будет равно 4.
|
|
|
Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа выводит окно с сообщением об ошибке и ставит курсор или фокус в поле для ввода имени. Форма не столько проверяет, правильно ли вписано имя, сколько было ли что-нибудь вписано вообще.
Теперь посмотрим, как программа проверяет телефонный номер:
function validphone(phone){len=phone.lengthdigits="0123456789"if(len!= 7 && len!= 9){alert("Неверное количество знаков в номере")document.dataentry.phone.focus()} for(i=0; i<3; i++){if (digits.indexOf(phone.charAt(i))<0){alert("Это должны быть цифры")document.dataentry.phone.focus()break}}Эта функция более длинная. Давайте разберем ее шаг за шагом. Во-первых, длина телефонного номера присваивается переменной len. Переменная digits содержит все десятичные цифры.
Потом оператор If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак && в Javascript означает "проверить оба свойства".
Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или фокус в поле для ввода номера.
for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.
Выражение if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt(). Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции — цифра 3. Это не опечатка! Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3!
indexOf — это метод, дающий порядковый номер для заданного значения. С помощью if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.
|
|
|
Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = "0123456789".
Если номер телефона 12д и i = 2, программа ищет "д" в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 (<0), тогда появляется окно с сообщением об ошибке и курсор или фокус устанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.
И последнее — код HTML для формы:
Введите свое имя:<br> <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)"> <SCRIPT LANGUAGE="JavaScript"> document.dataentry.fn.focus()</SCRIPT> Введите номер телефона (ххх-хх-хх):<br> <INPUT TYPE="text" NAME="phone" SIZE=10> <INPUT TYPE="button" VALUE="Отправить" onClick="validphone(phone.value)">При использовании JavaScript с формами давайте каждому элементу уникальное имя, которое будет связывать его с разделом JavaScript, который его обрабатывает. Такое связывание мы уже использовали ранее. Просмотрите элементы формы и затем код JavaScript и определите, где одно связано с другим.
Задание
Во-первых, изучите сегодняшнюю программу и заставьте ее работать. Потом внесите несколько изменений. Попросите ввести телефонный номер в формате ххх-хххх. Пусть функция validphone(phone) проверит, стоит ли дефис на позиции 3. Команда!= в JavaScript означает "не равно". Это может понадобиться.
Возможное решение
<html><head> <SCRIPT type="text/javascript">function validfn(fnm){fnlen=fnm.lengthif (fnlen == 0){alert("Необходимо ввести имя")document.dataentry.fn.focus()}}function validphone(phone){len=phone.lengthdigits="0123456789"if(len!= 8){alert("Неверное количество цифр в номере")document.dataentry.phone.focus()} if(len>3 && phone.charAt(3)!= "-"){alert("Четвертый знак должен быть '-'")document.dataentry.phone.focus()} for(i=0; i<3; i++){if (digits.indexOf(phone.charAt(i))<0){alert("Это должны быть цифры")document.dataentry.phone.focus()break}}}</script> </head><body> <form name="dataentry"><h3>Подтверждение ввода данных через JavaScript</h3><p>Введите имя:<br><input type="text" name="fn" onBlur="validfn(fn.value)" size="20"> <scriptlanguage="JavaScript">document.dataentry.fn.focus()</script></p><p>Введите номер телефона (ххх-хххх):<br><input type="text" name="phone" size="10"></p><p><input type="button" value="Отправить"onClick="validphone(phone.value)"></p></form> </body></html>30. Урок: Что дальше
Обзор изученного материала.
В JavaScript есть и другие команды, но те, что показаны здесь, являются настоящими рабочими лошадками JavaScript. Рекомендуем купить какой-нибудь справочник по всем командам JavaScript. Если вы внимательно читали эти уроки и выполнили все задания, то вам не потребуется другой учебник.
В Интернет можно найти множество свободно доступных сценариев, которые можно использовать на своих страницах. Найдите, что вам интересно. Изучите. Попробуйте улучшить. У каждого учащегося наступает момент, когда он должен начать действовать самостоятельно.
Что мы изучили
· Массив (Array) имеет дело с переменными. Как правило, переменные имеют только одно значение. Однако массив является переменной с множеством значений.
· Запятая (,) используется для разделения нескольких обработчиков событий Javascript, когда они должны действовать одновременно.
· Комментарий является строкой текста, выделенной двойной косой чертой (//). Эта строка текста находится в сценарии, но не будет оказывать никакого влияния на его выполнение.
Комментарий из нескольких строк можно создать с помощью команды /* в начале параграфа и команды */ в конце. Все, что находится между ними, будет считаться комментарием.
Используйте команды комментария <!-- и --> для комментирования текста Javascript, чтобы браузеры, которые не поддерживают JavaScript, просто игнорировали сценарий, не выводя текст. См. Урок 8.
· Ошибки
|
|
|
Окно с сообщением об ошибке выводится, когда что-то в сценарии не позволяет его выполнить. Ошибки бывают двух видов: ошибки времени выполнения (RunTime) и синтаксические ошибки (Syntax).
o Ошибкой времени выполнения является ошибка, которая возникает, когда в коде JavaScript появляются неправильные выражения. Неправильная команда или несвоевременный формат будут порождать ошибку такого типа.
o Синтаксическая ошибка создается, когда формат сценария или форма неправильны, найдена орфографическая ошибка, или текст не распознан. Синтаксические ошибки порождаются также в случае, когда команда начинается, но не заканчивается.
· Обработчик событий (Event Handler) является командой JavaScript, которая "встроена" в код HTML. Ее не нужно определять отдельно, как сам сценарий. Команда помещается в код HTML для создания взаимодействия между пользователем и страницей.
o onBlur является обработчиком событий, который действует, когда активный элемент формы, такой как поле выбора, текст или текстовая область, становится неактивным. Другими словами, пользователь смещает фокус с элемента.
o onChange является обработчиком событий, который действует, когда пользователь изменяет текст в элементе выбора, текста или текстовой области формы. Обычно эта команда используется для проверки ошибок при вводе пользователя.
o onClick является обработчиком событий, который действует, когда пользователь щелкает на объекте, таком, как ссылка.
o onFocus является обработчиком событий, который действует, когда пользователь выбирает элемент формы, такой, как поле выбора, текста или текстовую область.
o onLoad является обработчиком событий, который запускает функцию, когда загружается страница. Команда помещается в теге BODY документа HTML.
o onMouseOut является обработчиком событий, который применяется в гипертекстовой ссылке для создания текста, когда когда указатель мыши смещается с элемента. Наиболее часто используется совместно с onMouseOver.
o onMouseOver является обработчиком событий, используемым в гипертекстовой ссылке, который реагирует, когда пользователь наводит указатель мыши на текст ссылки.
|
|
|
o onSelect является обработчиком событий, который активируется, когда пользователь выделяет текст в элементе формы текст или текстовая область.
o onSubmit является обработчиком событий, который активируется, когда пользователь щелкает на кнопке формы submit (Отправить).
o onUnload является обработчиком событий, который помещается в команде BODY документа HTML, и либо вызывает функцию, либо содержит команду для остановки выполнения функции, когда пользователь покидает страницу.
· Характеристики определяют свойства команды JavaScript. Наиболее обычным примером являются такие характеристики, как toolbar, menubar, scrollbars, resizable, directories, и status, которые используются для определения формы и вида нового окна.
o config является командой, используемой в экземпляре объекта и метода window.open().Она определяет, что далее следуют характеристики нового окна.
o directories является характеристикой, используемой в экземпляре команды window.open() для определения, будет или нет присутствовать панель каталога. Панель каталога содержит раздел BOOKMARKS. Используйте "yes", чтобы разрешить, "no" — запретить.
o height является командой характеристики, которая обозначает высоту в пикселях нового окна или изображения.
o location является характеристикой, используемой в экземпляре команды window.open() для указания, должна ли выводиться панель адреса в открываемом окне. Используйте "yes", чтобы разрешить, "no" — запретить. Существует также команда location, которая действует как объект.
o menubar является характеристикой, используемой в экземпляре команды window.open() для определения, должна ли выводиться панель меню в открываемом окне. Панель меню является частью браузера, которая имеет кнопки FILE и EDIT. Используйте "yes", чтобы разрешить, "no" — запретить.
o resizable является характеристикой, используемой в экземпляре команды window.open() для определения, сможет ли пользователь изменять размер окна. Используйте "yes", чтобы разрешить, "no" — запретить.
o scrollbars является характеристикой, используемой в экземпляре команды window.open() для определения, будет ли присутствовать в новом окне строка прокрутки. Используйте "yes", чтобы разрешить, "no" — запретить.
o status является характеристикой, используемой в экземпляре команды window.open() для определения, будет ли присутствовать в новом окне строка состояния. Используйте "yes", чтобы разрешить, "no" — запретить. Существует также команда "status" которая действует как свойство.
o toolbar является характеристикой, используемой в экземпляре команды window.open() для указания, должна ли присутствовать панель инструментов в открываемом окне. Панель инструментов является частью браузера, которая имеет кнопки BACK (НАЗАД) и FORWARD (ВПЕРЕД). Используйте "yes", чтобы разрешить, "no" — запретить.
o width является командой характеристики, которая указывает ширину в пикселях нового окна или изображения.
· Функция аналогична присвоению имени переменной результату командной строки JavaScript. Фактически событию или последовательности событий присваивается имя, так что затем можно будет обратиться к этим событиям с помощью только одного этого имени функции, а не переписывать команды снова и снова.
o Операторы if...else являются условными операторами, которые действуют в зависимости от выбора пользователя из двух или большего количества исходов. if активируется, если ответом будет true (или "yes"), а else активируется, если ответом будет false (или "no").
o Функция eval() используется для преобразования текста в число. Например, если пользователя просят ввести число, то сценарий все равно получает его в виде текста. Необходимо использовать эту функцию eval(), чтобы указать что текст на самом деле является числом.
· Экземпляр команды содержится в скобках, следующих сразу за командой. Экземпляр содержит данные о том, что должен сделать объект или как должен выполниться метод.
· Цикл. Существует фактически два вида циклов: for и while. for обычно используется, когда известно, сколько раз JavaScript должен выполнить свою функцию. while применяется, когда неизвестно, сколько раз JavaScript должен выполнить цикл.
o for — это функция цикла, которая задает, сколько раз должен выполниться цикл.
o while —- это команда цикла, которая используется, когда неизвестно, сколько раз JavaScript должен выполнить цикл, чтобы добиться требуемого результата.
o Вложенный цикл является циклом for или while, заданным внутри другого цикла for или while. Фактически это цикл внутри цикла.
· Метод является командой, которая говорит, как надо поступить с объектом.
o alert является методом, используемым в гипертекстовой ссылке или объекте окна для создания диалогового окна. Окно содержит текст, указанный в скобках alert, и кнопку ОК, которую необходимо нажать, прежде чем пользователь сможет продолжить.
o close является методом, который действует на объект окна, чтобы закрыть текущее окно браузера.
o confirm является методом, который выводит диалоговое окно с кнопками OK и CANCEL. Команда используется наиболее часто с функциями if и else.
o getMonth() — метод объекта Date. Возвращает числовое представление месяца (1 - 12).
o getDate() — метод объекта Date. Возвращает числовое представление дня месяца (1 — 31).
o getYear() — метод объекта Date. Возвращает двузначное числовое представление года (00 — 99).
o getDay() — метод объекта Date. Возвращает числовое представление дня недели (1 — 7).
o getHours() — метод объекта Date. Возвращает числовое представление часа суток (0 — 23).
o getMinutes() — метод объекта Date. Возвращает числовое представление текущей минуты (00 — 59).
o getSeconds() — метод объекта Date. Возвращает числовое представление текущей секунды (00 — 59).
o open является методом, который открывает новый документ или новое окно.
o prompt является методом, который выводит пользователю диалоговое окно для ввода данных. Этот метод всегда сопровождается переменной, куда заносятся введенные пользователем данные.
o write является методом, который действует на объекте документа, для отправки текста на страницу.
· Объект (Object) является чем-то, что существует как документ HTML, окно браузера или дата и время. Объект также может быть чем-то, что создается с помощью функции.
o Date является объектом, который необходимо назвать, чтобы иметь возможность вызвать методы даты и времени. Формат именования объекта следующий:
o Имя_Объекта = new Date();Обратите внимание на слово new перед объектом Date.
o Document является объектом, который указывает на документ HTML, который содержит JavaScript.
o history является объектом, который указывает на память браузера страниц, посещенных пользователем. Список history может быть различного размера, в зависимости от того, сколько страниц посетил пользователь за время конкретного сеанса.
o Location является объектом, указывающим определенный URL. Он наиболее часто встречается в следующем формате:
o parent.location='index.html'Обратите внимание, что существует также свойство location, но оно действует совершенно другим образом.
o Navigator является объектом, определяющим браузер пользователя.
o window является объектом, указывающим экран браузера.
· Свойство (property) является характеристикой или частью большего объекта. Примером может быть строка состояния окна браузера, указывающая состояние окна (object.property)
o alinkColor — свойство объекта document. Определяет цвет гипертекстовой ссылки, когда она активна или на ней был совершен щелчок мышью.
o appCodeName — свойство объекта navigator. Определяет кодовое имя браузера, которое использует производитель.
o appName — свойство объекта navigator. Указывает имя браузера, такое, как Netscape или Explorer
o appVersion — свойство объекта navigator. Указывает номер версии и платформу браузера.
o bgColor — свойство объекта document. Указывает цвет фона документа HTML.
o defaultStatus — свойство объекта window. Оно работает таким же образом, как window.status, за исключением того, что формат по умолчанию (default) используется, когда событие вызывается вне формата обработчика событий (встроенного в команду HTML формата).
o fgColor — свойство объекта document. Оно указывает цвет текста.
o focus — свойство любого объекта, которому вы хотите его присвоить. Свойство focus заставляет JavaScript рассматривать только один этот объект. Оно наиболее часто используется при проверке полей формы.
o host — свойство объекта location. Оно указывает URL сервера как текст или IP-адрес, в зависимости от того, как себе обозначает сам сервер. Кроме того свойство port возвращает номер порта. Эта команда очень похожа на свойство hostname, которое действует таким же образом, за исключением того, что не возвращает порт. Если порт null или не важен для сервера, то две команды выполняют одну функцию и будут возвращать одинаковые результаты.
o hostname — свойство объекта location. Оно указывает URL сервера как текст или IP-адрес, в зависимости от того, как себе обозначает сам сервер. Эта команда очень похожа на свойство host, которое действует таким же образом, за исключением того, что не возвращает порт. Если порт null или не важен для сервера, то две команды выполняют одну функцию и будут возвращать одинаковые результаты.
o lastModified — свойство объекта document. Оно указывает дату и время, когда страница была последний раз обновлена на сервере или последний раз сохранена на диск.
o length — свойство объекта history. Указывает число страниц, перечисленных в файле истории браузера. Перечисленные страницы являются страницами, которые посетил пользователь перед посещением страницы.
o linkColor — свойство объекта document. Оно указывает цвет гипертекстовых ссылок.
o location — свойство объекта document. Оно указывает URL страницы. Обратите внимание, что также имеется объект location, который действует совершенно другим образом.
o parent — свойство, используемое обычно с фреймами, для указания определенной ячейки фрейма. Когда оно используется вне формата фрейма, оно указывает на все окно браузера.
o referrer — свойство объекта document. Оно указывает URL страницы, с которой только что пришел пользователь.
o self — свойство, которое указывает текущее окно.
o status — свойство объекта window. Оно обозначает строку состояния внизу экрана браузера.
o target является командой, которая располагается внутри гипертекстовой ссылки HREF. Ссылка указывает, куда должен направляться результат ссылки.
o title — свойство объекта document. Оно указывает текст между командами <TITLE> и </TITLE> в документе HTML.
o top — свойство объекта window. Оно указывает окно браузера самого верхнего уровня.
o userAgent — свойство объекта navigator. Оно указывает заголовок протокола передачи гипертекста, посланное для предупреждения сервера, какой браузер он обслуживает.
o value — считайте value значением того, что в определенное время что-то имеется или нет. Контрольный флажок может иметь значение on (включен) или off (выключен), в зависимости от того, был он отмечен или нет. Поле TEXT может иметь значение hidden (скрытое), если требуется, чтобы пользователь его не видел. И, как отмечалось выше, поле TEXT может содержать введенный текст. Он будет значением этого поля. К этому значению можно обратиться или передать в другую часть кода JavaScript для использования. Можно также вывести то, что пользователь ввел в текстовое поле.
o vlinkColor — свойство объекта document. Оно указывает цвет гипертекстовых ссылок после их посещения.
· Точка с запятой (;) является признаком конца оператора. Она сообщает браузеру, что эта конкретная строка сценария завершилась. Если она не используется, то браузер будет считать, что строка продолжается, и возможна ошибка.
· Переменная (Variable) является именем, присвоенным элементу данных. Она позволяет определить односложное представление для целой строки кода. То есть, имя переменной представляет результат команды JavaScript. Это односложное имя можно использовать позже в сценарии в качестве представления результата целой строки кода, а не переписывать заново всю функцию JavaScript. Глобальная переменная является переменной, которая указана вне функции, так что любая следующая далее функция может ее использовать. Если переменная определена внутри функции, то только эта функция может ее использовать.
