Создание
простых сценариев
Как вы уже знаете JavaScript - это язык подготовки
сценариев для вэб-документов. Команды JavaScript
вставляются напрямую в документ HTML, и сценарий
выполняется непосредственно при загрузке его в
браузере.
Инструменты создания
сценариев
Вам нет необходимости приобретать специальное
программное обеспечение для создания сценариев
JavaScript. Все что для этого необходимо - это
текстовый редактор. Подойдет любой, если вы еще
не определились, пользуйтесь БЛОКНОТОМ, который
входит в состав Windows.
Отсчет времени
Одно из привычных использований JavaScript - это
отображение даты и времени. Поскольку сценарий
JavaScript выполняется в браузере, необходимо время
отображать в соответствии с временным поясом
места жительства пользователя. Для начала
создадим сценарий вычисления всеобщего
скоординированного времени. (Всеобщее
скоординированное время соответствует времени
нулевого меридиана или времени по Гринвичу. Это
время абсолютного уровня отсчета дат.)
Начало сценария
Наш сценарий, как и большинство других программ
JavaScript, начнем с дескриптора <SCRIPT>.
Откройте текстовый редактор (БЛОКНОТ) и введите
пару дескрипторов <SCRIPT>:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Добавление операторов
JavaScript
Чтобы успешно создать сценарий, необходимо
сначала правильно определить местное и
абсолютное время, а затем отобразить их на
вэб-странице. Преобразование времени из одного
формата в другой осуществляется исключительно
встроенными средствами JavaScript.
Сохранение данных в переменных
В самом начале сценария необходимо определить
переменную, в которой будет сохраняться текущая
дата и дата начала нового тысячелетия. Детально о
переменных речь пойдет дальше, пока
воспринимайте их как контейнеры, содержащие
определенную информацию.
После дескриптора <SCRIPT> введите приведенные
ниже строки. Обратите внимание на использование
строчных и прописных букв - JavaScript не только их
различает, но и использует по-разному:
now = new Date();
Этот оператор создает переменную now,
которая принимает значение текущей даты. Этот
оператор и другие, используемые в сценарии,
построены на основе объекта Data,
необходимого для задания дат.
В конце каждой строки программы JavaScript ставится
разделитель - точка с запятой. Именно он
указывает браузеру на конец строки программы.
Вычисление значения
JavaScript определяет дату, как количество
миллисекунд, отсчитанных от 1 января 1970 года. Но
это не значит, что вам нужно в ручную высчитывать
и переводить время, для этого есть встроенные
функции.
Чтобы завершить сценарий, перед закрывающим
дескриптором </SCRIPT> введите следующие две
строки:
localtime=now.toString();
utctime=now.toGMTString();
Эти операторы создают две новые переменные: localtime и utctime.
Первая содержит текущее время и дату, а вторая -
их абсолютные значения.
В конечном счете обе переменные содержат
текстовые значения. Например, January 25, 2004 12:00 PM.
Выражаясь языком программистов, сохраненный в
переменной текст называется строкой. Детально о
строках поговорим позже.
Вывод результата на экран
Теперь, когда есть две переменные, принимающие
требуемое значение в секундах, самое время
побеспокоиться о выводе результата на экран. В
JavaScript существует несколько способов отображения
данных на экране. Один из самых простых
заключается в применении оператора document.write.
Этот оператор позволяет отображать текст,
числа и другие типы данных. Поскольку
создаваемый сценарий планируется вставить в
вэб-страницу, нужно озаглавить рассчитанное
значение:
document.write("<b>Текущее время: </b>" + localtime + "<BR>");
document.write("<b>Абсолютное время: </b>" + utctime + "</p>");
Эти операторы указывают браузеру вывести
введенный в кавычках текст, а после него значение
соответствующей переменной. Обратите внимание
на символ "+", введенный между отображаемым
текстом и переменными. В данном случае он
указывает на отображение текста и значения
переменной в одной строке. Если использовать
этот символ между двумя переменными, то их
значения будут просто суммироваться и на экране
отобразится их сумма.
Вставка сценария на
вэб-страницу
Теперь есть готовый сценарий, готовый для
вставки на вэб-страницу. Сначала проверьте код
сценария, он должен быть таким:
<SCRIPT LANGUAGE="JavaScript">
now = new Date();
localtime=now.toString();
utctime=now.toGMTString();
document.write("<b>Текущее время: </b>" + localtime + "<BR>");
document.write("<b>Абсолютное время: </b>" + utctime + "</p>");
</SCRIPT>
Для того чтобы выполнить сценарий, необходимо
вставить его в код HTML-документа. Самый простой
документ HTML содержит элементы HTML, HEAD и BODY.
Добавьте необходимые теги и заголовок
вэб-страницы к имеющемуся сценарию и получится
вполне загружаемый в браузер документ HTML:
<HTML>
<HEAD><TITLE>Отображение даты</TITLE>
<BODY>
<H1>Текущее время</H1>
<p>
<SCRIPT LANGUAGE="JavaScript">
now = new Date();
localtime=now.toString();
utctime=now.toGMTString();
document.write("<b>Текущее время: </b>" + localtime + "<BR>");
document.write("<b>Абсолютное время: </b>" + utctime + "</p>");
</SCRIPT>
</BODY>
</HTML>
Вот вы и получили документ HTML со сценарием
JavaScript. Сохраните его с расширением .html или .htm.
Тестирование сценария
Для того, чтобы протестировать сценарий,
необходимо просто загрузить полученную
вэб-страницу в браузер. Откройте страницу в вашем
браузере. Если вы все сделали правильно, то
должны получить примерно следующее:
Текущее время
Текущее время: Tue Jul 26 13:41:19 UTC+0400 2005
Абсолютное время: Tue, 26 Jul 2005 09:41:19 UTC
Только время и дата будут ваши.
Наверняка вы заметили, что отображаемое время
имеет не очень привлекательный вид. Чтобы
отобразить значение красиво необходимо немного
преобразовать программу сценария. Но об этом в
следующем выпуске.
мы создали сценарий для вычисления всеобщего
скоординированного времени.
<SCRIPT LANGUAGE="JavaScript">
now = new Date();
localtime=now.toString();
utctime=now.toGMTString();
document.write("<b>Текущее время: </b>" + localtime + "<BR>");
document.write("<b>Абсолютное время: </b>" + utctime + "</p>");
</SCRIPT>
Если помните, время отображалось не в очень
привлекательном виде, вот так:
Текущее время
Текущее время: Tue Jul 26 13:41:19 UTC+0400 2005
Абсолютное время: Tue, 26 Jul 2005 09:41:19 UTC
Для того чтобы отобразить время красиво,
придется немного преобразовать программу
сценария. Отобразим время так, как это делает
большой электронный будильник. Для этого
необходимо воспользоваться некоторыми
дополнительными средствами JavaScript и HTML.
Введем три новые переменные: для часов, минут и
секунд. И в этом случае все сложные вычисления
выполнят встроенные функции JavaScript. Код сценария
будет таким:
1: <HTML>
2: <HEAD><TITLE>Отображение даты</TITLE>
3: <BODY>
4: <H1>Текущее время</H1>
5: <p>
6: <SCRIPT LANGUAGE="JavaScript">
7: now = new Date();
8: localtime=now.toString();
9: utctime=now.toGMTString();
10: hours=now.getHours();
11: mins=now.getMinutes();
12: secs=now.getSeconds();
13: document.write("<b>Текущее время: </b>" + localtime + "<BR>");
14: document.write("<b>Абсолютное время: </b>" + utctime + "</p>");
15: document.write("<font size='+5'>");
16: document.write(hours + ":" + mins + ":" + secs);
17: document.write("</font>");
18: </SCRIPT>
19: </BODY>
20: </HTML>
Обращаю внимание, что номера строк введены для
удобства, и при написании сценария их писать не
нужно.
Три новые переменные заданы в строках 10-12. В них
сохраняются часы, минуты и секунды текущего
времени.
В строке 15 добавляется дескриптор <font>. Он
используется для отображения значений шрифтом
большого размера. В следующей строке (16) на экран
выводится значение всех трех новых переменных,
разделенных символом двоеточия (:). В строке 17 с
помощью JavaScript вводится закрывающий тег </font>.
После изменения сценария сохраните код
вэб-документа в формате HTML. Откройте его в
браузере. Если оставить браузер открытым и
периодически нажимать кнопку ОБНОВИТЬ, то можно
обновлять время в его окне. Протестируйте
сценарий, если вы все ввели правильно, то должно
получиться примерно следующее:
Текущее время
Текущее время: Tue Aug 2 17:11:21 UTC+0400 2005
Абсолютное время: Tue, 2 Aug 2005 13:11:21 UTC
17:11:21
Только время будет ваше.
Выявление и устранение
ошибок
Вот мы и создали полезный сценарий JavaScript и даже
успели его изменить. Теперь изменим сценарий
таким образом, чтобы он содержал ошибку.
Вы можете удивиться: зачем добавлять ошибку в
работающий сценарий? Ответ: рано или поздно вы
все равно столкнетесь с ошибками в сценариях.
Поскольку на простом примере их выявлять гораздо
проще, познакомимся как ведет себя браузер при
обнаружении ошибки в программах JavaScript.
Для создания ошибки, например измените
оператор в строке 17, удалите закрывающую скобку.
Тогда оператор будет выглядеть вот так:
document.write("</font>";
Сохраните документ и обновите его в браузере. В
зависимости от версии браузера вы получите либо
сообщение об ошибке, либо сценарий просто не
будет выполняться.
При отображении сообщения об ошибке вам легче
утранить ее. Если сообщение не отображается,
необходимо настроить браузер таким образом,
чтобы он автоматически тестировал сценарии.
Опять-таки, выполняемые операции зависят от
используемого браузера.
В Netscape Navigator 4.5 и выше включено средство JavaScript
Console, которое отображает сообщения об ошибках.
Чтобы отобразить консоль JavaScript, в поле адреса
браузера введите javascript:.
В Internet Explorer версии 4.0 и выше выберите Tools => Internet
Options (Сервис => Свойства обозревателя). На
вкладке Advanced (Дополнительно) снимите флажок
опции Disable Script Debugging (Запретить отладку сценариев)
и поставьте флажок Display a notification every script error
(Выводить сообщение о каждой ошибке сценария).
В нашем случае сообщение missing ) after argument list,
правильно определяет источник ошибки. Но, будьте
готовы к тому, что сообщение об ошибке не всегда
правильно определяет ее причину. В любом случае,
в окне консоли JavaScript указывается строка, в
которой встречается ошибка.
Скрытие сценариев от
старых браузеров
Поскольку старые версии браузеров не выполняют
сценарии JavaScript и не понимают дескриптор <SCRIPT>,
приходится всячески изгаляться, чтобы правильно
отобразить вэб-страницу. В большинстве случаев
программный код сценария просто отображается в
средней части страницы...
Чтобы избежать подобного поведения браузеров,
используются символы комментариев. Они дают
команду старым браузерам игнорировать код
сценария. Новые браузеры достаточно "умны",
чтобы понять, что программа сценария,
определенная как комментарий, на самом деле
должна выполняться.
Комментарии в HTML начинаются с <!-- и
заканчиваются -->. В следующем примере приведен
код простого сценария, скрытого комментариями:
1: <SCRIPT LANGUAGE="JavaScript">
2: <--
3: document.write("Ваш браузер поддерживает JavaScript");
4: // -->
5: </SCRIPT>
Этот сценарий включает открывающий и
закрывающий дескрипторы комментариев. Оператор
// последний в комментарии. Он защищает
комментарий HTML от определения его как ошибки в
коде JavaScript.
Процедура скрытия сценария JavaScript не идеальна.
Отдельные символы (подобные символу >) могут
обозначить конец комментария раньше, чем это
необходимо.
Если вы ваша почтовая программа не
обрабатывает формы, то откройте эту страницу в
браузере, или подпишитесь ЗДЕСЬ
Перед тем как перейти к детальному изучению
возможностей JavaScript, я хотел бы напомнить вам о
предназначении этого языка. В основном JavaScript
используется для:
- Улучшения пользовательского интерфейса узла.
- Создания бегущих строк.
- Добавления изображений и анимации.
- Для изменения форм и автоматизации их
заполнения.
- Определения типа и версии браузера.
- Для совместной работы с внедряемыми модулями.
- Создания с помощью JavaScript сложных приложений.
|
