Текст книги "Введение в JavaScript для Мага"
Автор книги: Стефан Кох
Жанр:
Программирование
сообщить о нарушении
Текущая страница: 3 (всего у книги 6 страниц)
Часть 5: Строка состояния и таймеры
Строка состояния
Составленные Вами программы на JavaScript могут выполнять запись в строку состояния – прямоугольник в нижней части окна Вашего браузера. Все, что Вам необходимо для этого сделать – всего лишь записать нужную строку в window.status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать.
Данный скрипт выглядит следующим образом:
Итак, мы создаем форму с двумя кнопками. Обе эти кнопки вызывают функцию statbar(). Вызов от клавиши Писать! выглядит следующим образом:
statbar('Привет! Это окно состояния!);
В скобках мы написали строку: 'Привет! Это окно состояния! . Это как раз и будет текст, передаваемый функции statbar(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:
function statbar(txt) {
window.status = txt;
}
В заголовке функции в скобках мы поместили слово txt. Это означает, что строка, которую мы передали этой функции, помещается в переменную txt.
Передача функциям переменных – прием, часто применяемый для придания функциям большей гибкости. Вы можете передать функции несколько таких аргументов – необходимо лишь отделить их друг от друга запятыми.
Строка txt заносится в строку состояния посредством команды window.status = txt.
Соответственно, удаление текста из строки состояния выполняется как запись в window.status пустой строки.
Механизм вывода текста в строку состояния удобно использовать при работе со ссылками. Вместо того, чтобы выводить на экран URL данной ссылки, Вы можете просто на словах объяснять, о чем будет говориться на следующей странице. Так link демонстрирует это – достаточно лишь поместить указатель вашей мыши над этой ссылкой: Исходный код этого примера выглядит следующим образом:
Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой.
Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что браузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад – то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.
В JavaScript 1.0 процедура onMouseOut еще не была представлена. И если Вы пользуетесь Netscape Navigator 2.x, то возможно на различных платформах Вы можете получить различные результаты. Например, на платформах Unix текст исчезает даже несмостря на то, что браузер не знает о существовании процедуры onMouseOut. В Windows текст не исчезает. И если Вы хотите, чтобы ваш скрипт был совместим с Netscape 2.x для Windows, то можете, к примеру, написать функцию, которая записывает текст в окно состояния, а потом стирает его через некоторый промежуток времени. Программируется это с помощью таймера timeout. Подробнее работу с таймерами мы рассмотрим в одном из следующих параграфов.
В этом скрипте Вы можете видеть еще одну вещь – в некоторых случаях Вам понадобится печатать символы кавычек. Например, мы хотим напечатать текст Don't click me – однако поскольку мы передаем эту строку в процедуру обработки события onMouseOver, то мы используем для этого одинарные кавычки. Между тем, как слово Don't тоже содержит символ одинарной кавычки! И в результате если Вы просто впишете 'Don't… , браузер запутается в этих символах. Чтобы разрешить эту проблему, Вам достаточно лишь поставить обратный слэш перед символом кавычки – это означает, что данный символ предназначен именно для печати. (То же самое Вы можете делать и с двойными кавычками – ").
Таймеры
С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд.
Скрипт выглядит следующим образом:
…
Здесь setTimeout() – это метод объекта window. Он устанавливает интервал времени – я полагаю, Вы догадываетесь, как это происходит. Первый аргумент при вызове – это код JavaScript, который следует выполнить по истечении указанного времени. В нашем случае это вызов – «alert('Время истекло!)». Обратите пожалуйста внимание, что код на JavaScript должен быть заключен в кавычки.
Во втором аргументе компьютеру сообщается, когда этот код следует выполнять. При этом время Вы должны указывать в миллисекундах (3000 миллисекунд = 3 секунда).
Прокрутка
Теперь, когда Вы знаете, как делать записи в строке состояния и как работать с таймерами, мы можем перейти к управлению прокруткой. Вы уже могли видеть, как текст перемещается строке состояния. В Интернет этим приемом пользуются повсеместно. Теперь же мы рассмотрим, как можно запрограммировать прокрутку в основной линейке. Рассмотрим также и всевозможные усовершенствования этой линейки.
Создать бегущую строку довольно просто. Для начала давайте задумаемся, как вообще можно создать в строке состояния перемещающийся текст – бегущую строку. Очевидно, сперва мы должны записать в строку состояния некий текст. Затем по истечении короткого интервала времени мы должны записать туда тот же самый текст, но при этом немного переместив его влево. Если мы это сделаем несколько раз, то у пользователя создастся впечатление, что он имеет дело с бегущей строкой.
Однако при этом мы должны помнить еще и о том, что обязаны каждый раз вычеслять, какую часть текста следует показывать в строке состояния (как правило, объем текстового материала превышает размер строки состояния).
Итак, исходный код скрипта – я добавил к нему еще некоторые комментарии:
Это пример прокрутки в строке состояния средствами JavaScript.
Большая часть функции scroll() нужна для вычленения той части текста, которая будет показана пользователю. Я не буду объяснять этот код подробно – Вам необходимо лишь понять, как вообще осуществляется эта прокрутка.
Чтобы запустить этот процесс, мы используемся процедурой обработки события onLoad, описанной в тэге
. То есть функция scroll() будет вызвана сразу же после загрузки HTML-страницы.Через посредство процедуры onLoad мы вызываем функцию scroll(). Первым делом в функции scroll() мы устанавливаем таймер. Этим гарантируется, что функция scroll() будет повторно вызвана через 100 миллисекунд. При этом текст будет перемещен еще на один шаг и запущен другой таймер. Так будет продолжаться без конца.
(В Netscape Navigator 2. x с таким типом скроллинга были некоторые проблемы – его выполнение иногда приводило к появлению ошибки 'Out of memory'. Я получил много писем, где объяснялось, что это возникает вследствие рекурсивного вызова функции scroll(), что в конце концов приводит к выходу за пределы памяти. Но это не так. Данный вызов функции не является рекурсивным! Рекурсию мы получим, если будем вызывать функцию scroll() непосредственно внутри самой же функции scroll(). А этого здесь мы как раз и не делаем. Прежняя функция, установившая таймер, закончивается еще до того, как начинается выполнение новой функции. Проблема же состояла в том, что в действительности мы не могли в JavaScript выполнять коррекцию строк. И если Вы пробуете сделать это, то JavaScript просто-напросто создавал новый объект – но при этом не удалял старый. Именно таким образом происходило переполнение памяти.)
Скроллинг используется в Интернет довольно широко. И есть риск, что быстро он станет непопулярным. Я должен признаться, что и сам не очень его люблю. В большинстве страниц, где он применяется, особенно раздражает то, что из-за непрерывного скроллинга становится невозможным прочесть в строке состояния адрес URL. Эту проблему можно было бы решить, позаботившись о приостановке скроллига, если происходит событие MouseOver – и, соответственно, продолжении, когда финсируется onMouseOut. Если Вы хотите попытаться создать скроллинг, то пожалуйста не используйте стандартный его вариант – пробуйте привнести в него некоторые приятные особенности. Возможен вариант, когда одна часть текста приходит слева, а другая – справа. И когда они встречаются посередине, то в течение некоторых секунд текст остается неизменным. Воспользовавшись небольшой долей фантазии, Вы конечно же сможете найти еще несколько хороших альтернатив (некоторые примеры я привожу в своей книге).
Часть 6: Предопределенные объекты
Объект Date
В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Есть еще несколько таких же объектов – полное описание см. в документации, предоставляемой фирмой Netscape.
Для начала давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени.
Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new:
today= new Date()
Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date Вы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.
Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы – getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее. Полное описание объекта Date и его методов Вы сможете найти в документации по JavaScript, предоставляемой фирмой Netscapes.
Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду.
Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date(), который при создании нового объекта Date вызывается через оператор new):
today= new Date(1997, 0, 1, 17, 35, 23)
При этом будет создан объект Date, в котором будет зафиксировано первое января 1997 года 17:35 и 23 секунд. Таким образом, Вы выбираете дату и время по следующему шаблону:
Date(year, month, day, hours, minutes, seconds)
Заметьте, что для обозначения января Вы должны использовать число 0, а не 1, как Вы вероятно думали. Число 1 будет обозначать февраль, ну и так далее.
Теперь мы напишем скрипт, печатающий текущие дату и время. Результат будет выглядеть следующим образом:
Сам же код выглядит следующим образом:
Здесь мы пользуемся такими методами, как getHours(), чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Можно видеть, что мы добавляем к записи года еще число 1900. Дело в том, что метод getYear() указывает количество лет, прошедших после 1900 года. А стало быть, если сейчас 1997 год, то будет выдано значение 97, а если 2010 год – то 110, а не 10! Если мы так и будем всякий раз добавлять 1900, то у нас не будет проблемы 2000 года. Помните также, что мы обязаны увеличивать на единицу значение, получаемое от метода getMonth().
В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03. Решение этой проблемы мы рассмотрим в следующем примере.
Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:
Исходный код скрипта:
Здесь для ежесекундной коррекции времени и даты мы пользуемся методом setTimeout(). Фактически это сводится к кому, что мы каждую секунду создаем новый объект Date, занося туда текущее время.
Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг
. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr. Как мы уже упомянули ранее, существует проблема с индикацией, когда количество минут меньше 10 – в данном скрипте эта проблема решается с помощью следующей строки:timeStr+= ((minutes < 10)?":0": ":") + minutes;
Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Для Вас эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:
if (minutes < 10) timeStr+= «:0» + minutes
else timeStr+= ":" + minutes;
Объект Array
Массивы играют в программировании очень важную роль. Подумайте только, что бы Вы делали, если бы Вам понадобилось хранить 100 различных имен. Как бы Вы могли это сделать с помощью JavaScript? Хорошо, Вы могли бы явным образом задать 100 переменных и присвоить им различные имена. Но согласитесь, это будет весьма утомительно.
Массив может быть полезен там, где имеется много взаимосвязанных переменных. При этом к каждой из них Вы можете получить доступ, воспользовавшись общим названием и неким номером. Допустим, есть массив в именем names. В этом случае мы можем получить доступ к первой переменной с именем name, написав names[0]. Вторая переменная носит name[1] и так далее.
Начиная с версии 1.1 языка JavaScript (Netscape Навигатор 3.0), Вы можете использовать объект Array. Вы можете создать новый массив, записав myArray= new Array(). После этого можно начать заносить в массив значения:
myArray[0]= 17;
myArray[1]= "Stefan";
myArray[2]= "Koch";
Массивы JavaScript обладают большой гибкостью. Например, Вам нет нужды беспокоиться о размере массива – он устанавливается динамически. Если Вы напишете myArray[99]= «xyz», размер массива будет установлен 100 элементов. (В языке JavaScript размер массива может только увеличиваться – массив не может «сжиматься». Поэтому старайтесь делать Ваши массивы как можно копактнее.)
Не имеет значения, заносите ли Вы в массив числа, строки, либо другие объекты. Я не останавливаюсь на каждой такой подробности структуры массивов, но надеюсь, Вы поймете, что массивы – очень важный элемент языка.
Конечно же многое станет понятнее, если рассматривать примеры. Следующий скрипт печатает следующий текст:
first element
second element
third element
Исходный код:
Первым делом мы создаем здесь новый массив с именем myArray. Затем мы заносим в него три различных значения. После этого мы запускаем цикл, который трижды выполняет команду document.write(myArray[i] + «
»);. В переменной i ведется отсчет циклов от 0 до 2. Заметим, что в цикле мы пользуемся конструкцией myArray[i]. И поскольку i меняет значения от 0 до 2, то в итоге мы получаем три различных вызова
document.write(). Иными словами, мы могли бы расписать этот цикл как:
document.write(myArray[0] + "
");document.write(myArray[1] + "
");document.write(myArray[2] + "
");
Массивы в JavaScript 1.0
Поскольку в JavaScript 1.0 (Netscape Navigator 2.x, и Microsoft Internet Explorer 3.x) объекта Array еще не существовало, то мы должны думать и об его альтернативе. Следующий фрагмент кода можно найти в документации фирмы Netscape:
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
После этого Вы можете создавать массив одной строкой:
myArray= new initArray(17, 3, 5);
Числа в скобках – значения, которыми инициализируется массив (это можно также делать и с объектом Array из JavaScript 1.1). Обратите внимание, что данный тип массива не может включать все элементы, которые являются частью в объекта Array от JavaScript 1.1 (например, там имеется метод sort(), который позволяет сортировать все элементы в определенном порядке).
Объект Math
Если Вам необходимо в скрипте выполнять математические рассчеты, то некоторые полезные методы для этого Вы найдете в объекте Math. Например, имеется метод синуса sin(). Полную информацию об этом объекте Вы найдете в документации фирмы Netscape.
Я бы хотел продемонстрировать работу метода random(). Если Вы в свое время читали первый выпуск этого материала, то знаете, что у нас были некоторые проблемы с методом random(). Тогда мы написали функцию, позволяющую генерировать случайные числа. Теперь, чтобы работать на всех без исключения платформах, нам не нужно ничего, кроме метода random().
Если Вы вызовете функцию Math.random(), то получите случайное число, лежащее в диапазоне между 0 и 1. Один из возможных результатов вызова document.write(Math.random()) (при каждой новое загрузке данной страницы здесь будет появляться другое число):
Часть 7: Формы (Forms)
Проверка информации, введенной в форму
Формы широко используются на Интернет. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно выполнить проверку формы. А затем мы рассмотрим, какие есть возможности для пересылки информации по Интернет.
Сперва нам необходимо создать простой скрипт. Допустим, HTML-страница содержит два элемента для ввода текста. В первый из них пользователь должен вписать свое имя, во второй элемент – адрес для электронной почты. Вы можете ввести туда какую-нибудь информацию и нажать клавишу. Попробуйте также нажать клавишу, не введя в форму никакой информации.
Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы ввведете 17, то получите приглашение 'Hi 17!. Так что эта проверка не может быть идеальна.
Второй элемент формы несколько более сложнее. Попробуйте ввести простую строку – например Ваше имя. Сделать это не удастся до тех пор, пока Вы не укажите @ в Вашем имени… Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @. Этому условию будет отвечать и одиночный символ @, даже несмотря на то, что это бессмысленно. В Интернет каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна.
Как скрипт работает с этими двумя элементами формы и как выглядит проверка? Это происходит следующим образом:
Рассмотрим сначала HTML-код в разделе body. Здесь мы создаем лишь два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(…) или test2(…), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны.
Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")…. Здесь 'form' – это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение – ok.
Следующая проблема заключается в том, что пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Если есть желание, то Вы конечно можете добавить проверку такой возможности и исключить ее. Я полагаю, что это будет сделать легко, опираясь лишь на представленную здесь информацию.
Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой – "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ). С ним Вы уже знакомились в шестой части Введения.
Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)
Проверка на присутствие определенных символов
В некоторых случаях Вам понадобится ограничивать информацию, вводимую в форму, лишь некоторым набором символов или чисел. Достаточно вспомнить о телефонных номерах – представленная информация должна содержать лишь цифры (предполагается, что номер телефона, как таковой, не содержит никаких символов). Нам необходимо проверять, являются ли введенные данные числом. Сложность ситуации состоит в том, что большинство людей вставляют в номер телефона еще и разные символы – например: 01234-56789, 01234/56789 or 01234 56789 (с символом пробела внутри). Не следует принуждать пользователя отказываться от таких символов в телефонном номере. А потому мы должны дополнить наш скрипт процедурой проверки цифр и некоторых символов. Решение задачи продемонстрировано в следующем примере, взятом из моей книги о JavaScript:
Исходный код этого скрипта:
Функция test() определяет, какие из введенных символов признаются корректными.
Предоставление информации, введенной в форму
Какие существуют возможности для передачи информации, внесенной в форму? Самый простой способ состоит в передаче данных формы по электронной почте (этот метод мы рассмотрим поподробнее).
Если Вы хотите, чтобы за вносимыми в форму данными следил сервер, то Вы должны использовать интерфейс CGI (Common Gateway Interface). Последнее позволяет Вам автоматически обрабатывать данные. Например, сервер мог бы создавать базу данных со сведениями, доступную для некоторых из клиентов. Другой пример – поисковые страницы, такие как Yahoo. Обычно в них представлена форма, позволяющая создавать запрос для поиска в собственной базе данных. В результате пользователь получает ответ вскоре после того, как нажимает на соответствующую кнопку. Ему не приходится ждать, пока люди, отвечающие за поддержание данного сервера, прочтут указанные им данные и отыщут требуемую информацию. Все это автоматически выполняет сам сервер. JavaScript не позволяет делать таких вещей.
С помощью JavaScript Вы не сможете создать книгу читательских отзывов, поскольку JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Делать это Вы можете только через интерфейс CGI. Конечно, Вы можете создать книгу отзывов, для которой пользователи присылали сведения по электронной почте. Однако в этом случае Вы должны заносить отзывы вручную. Так можно делать, если Вы не предполагаете получать ежедневно по 1000 отзывов.
Соответствующий скрипт будет простым текстом HTML. И никакого программирования на JavaScript здесь вовсе не нужно! Конечно за исключением того случая, если Вам понадобится перед пересылкой проверить данные, занесенные в форму – и здесь уже Вам действительно понадобится JavaScript. Я должен лишь добавить, что команда mailto работает не повсюду – например, поддержка для ее отсутствует в Microsoft Internet Explorer 3.0.
Параметр enctype="text/plain" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей. Это значительно упрощает чтение такой почты.
Если Вы хотите проверить форму прежде, чем она будет передана в сеть, то для этого можете воспользоваться программой обработки событий onSubmit. Вы должны поместить вызов этой программы в тэг
