 
|
|
Новости
Статьи
Магазин
Драйвера
Контакты
RSS канал новостей
Программаторы 25 SPI FLASH
Адаптеры Optibay HDD Caddy
Драйвера nVidia GeForce
Драйвера AMD Radeon HD
Игры на DVD
Сравнение видеокарт
Сравнение процессоров
 В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...  Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...  Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...  Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...  Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ... |
АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2002 ГОДJavaScript сценарист по призванию
(Окончание, начало см. в МК № 14—15 (185—186)) Работа с таймером и создание бегущей строки Прежде чем рассказывать об использовании таймера, замолвим слово о функциях даты-времени в JavaScript. Для работы с датой и временем в объектной модели JavaScript предусмотрен специальный объект Date, который вызывается с помощью следующего кода (<SCRIPT>-тэги, как всегда, для краткости опускаем): Приведенный оператор создает новый экземпляр объекта Date, который присваивается переменной D. Объект Date содержит около трех десятков свойств, позволяющих получать или устанавливать параметры даты/времени от года до миллисекунды. Этот объект обычно используют, чтобы организовать различные эффекты с выводом информации в нужный момент. Теперь перейдем к таймеру. Основным его оператором является установка, т. е. задание действия, которое выполнится через некоторое время. Например, код помещенный в <BODY>-секцию документа, через 5 секунд после начала загрузки выведет окно сообщения с соответствующей надписью. Синтаксис работы с таймером, как видим, несложен: в первом аргументе функции записываем нужный код, а во втором передаем время задержки в миллисекундах. Кодом, подставляемым в первый аргумент, может быть любой допустимый оператор языка, например, вызов пользовательской функции. Модифицировав и расширив наш пример, вы можете создать свою web-страницу, содержащую немало неожиданных сюрпризов для ее посетителей. Как и было обещано, покажем, как с помощью JavaScript создавать бегущие строки в панели состояния. Вывод сообщения в панель состояния с помощью JavaScript мы обсуждали в предыдущем материале. Для этого достаточно изменить свойство Status объекта window. Работа со свойством Status и функцией установки таймера setTimeout — вот, в сущности, и все, что необходимо для создания бегущей строки. Простейший вариант выглядит примерно так. В <HEAD>-секцию документа поместим следующий код: После чего инициализируем этот код, дополнив тэг <BODY>: На экране это выглядит следующим образом: в строке статуса слева по одной букве появляется введенная надпись; как только она появится полностью, строка очищается, и все Посмотрим, как этот сценарий работает. Вначале инициализируются исходные переменные — строка состояния и переменная счетчика. Затем при загрузке <BODY>-секции вызывается пользовательская функция Rline(), в которой и сосредоточен основной код вывода бегущей строки. Тело функции содержит условный оператор, который, в зависимости от значения счетчика x, выполняет следующие действия. Если х меньше длины строки, в строку статуса выводится подстрока длины х, и счетчик увеличивается на единицу. Если же значение счетчика сравнялось с длиной строки, в строку статуса передается пустое значение, а счетчик обнуляется. Для того чтобы поддерживать этот цикл непрерывным, в последнем операторе функции Rline() используется таймер, который вызывает эту же функцию с заданным временным промежутком. Если создать страницу, воспользовавшись этим сценарием, то строка будет появляться слева. Такой вид нас не совсем устраивает, т. к. бегущие строки обычно идут справа налево. Для достижения этого эффекта модифицируем наш пример, изменив только тело основной функции Rline(): Смысл внесенного изменения очевиден. Каждый раз при вызове функции Rline() в строку статуса окна передается текущее значение строковой переменной line, после чего она изменяется путем перестановки первого символа на последнее место. В последней строке кода опять вызывается функция Rline() с установленной временной задержкой. Запустив сценарий, убеждаемся, что это почти то, что нам нужно: справа налево в панели статуса движется строка, причем исчезающие первые символы сразу же возникают в конце строки. Наконец, изменим сценарий, чтобы движение строки было не непрерывным, а возобновлялось только после исчезновения строки с экрана. Кроме того, предусмотрим, чтобы строка начинала движение от правого края панели, а не от ее середины, как в предыдущем примере. Это и будет нужный эффект — такие строки мы наблюдаем на многих грамотно построенных сайтах. Изменения требует главным образом тело функции Rline(), но необходимо также модифицировать выводимую строку (переменную line), вставив перед текстом достаточное количество пробелов. Итак, что же делает этот код? Главный оператор, организующий появление бегущей строки, записан в первой строке. Значение счетчика х увеличивается на единицу, и в строку статуса передается часть исходной строки, начиная с позиции, соответствующей счетчику. При увеличении значений счетчика будет выводиться все более короткий «хвост» строки, и на экране мы увидим то, что хотим: строка появляется справа и плывет влево, вплоть до полного исчезновения. Как только счетчик достигает длины строки line, он обнуляется, и строка вновь начинает движение справа налево. Стоит попробовать этот код, чтобы убедиться, насколько впечатляющий эффект им достигается. Думаю, наш изобретательный читатель наверняка сумеет получить еще более интересные эффекты с бегущими строками. Создание поисковой машины Займемся теперь созданием поисковой машины на web-узле с помощью JavaScript. Конечно, она будет не столь богата возможностями, как поисковые машины популярных служб вроде Yahoo или Rambler, но это не самое главное отличие. Действительно важным отличием нашей машины будет то, что поиск выполняется на машине клиента, а не на сервере, как это обычно принято. Вначале создадим страницу, содержащую форму с полем для ввода строки поиска. Для этого поместим в <BODY>-секцию такой фрагмент (рис. 2): Как мы помним из предыдущих материалов, созданная кнопка вызывает пользовательскую функцию Search() при нажатии. Но прежде, чем давать запрос, введем информацию о наших страницах. Предположим, мы желаем осуществлять поиск по двум критериям: ключевым словам и краткому содержанию страниц. Для этого создаем три массива с длиной, равной количеству страниц, участвующих в поиске. Сейчас мы разместили информацию, относящуюся к первой станице: в массив URL записали ее адрес, в массив Keys — ключевые слова, в массив Contents — краткое описание (не забывайте, что индексация массивов в JavaScript начинается с нуля). Информация о других страницах заносится аналогично, в следующие элементы массивов. Алгоритм поиска состоит из двух этапов. Сначала просматриваем массивы Keys и Contents и проверяем, содержат ли они искомое слово. Если искомое слово находится в каком-либо элементе хотя бы одного из массивов, номер этого элемента заносим в массив результатов. На втором этапе с помощью кода JavaScript создаем динамическое окно, в котором размещаем полученные результаты. Следующие операторы должны быть помещены в тело функцию Search(). Первый этап может быть реализован с помощью такого сценария: Проследим, как это работает. Первые четыре строки объявляют переменные, которые будут фигурировать в сценарии; в частности, массив Res используется для записи результатов поиска, а строковая переменная SStr — для хранения строки запроса. Следом идет цикл с количеством шагов, равных длине массива URL, т. е. числу страниц нашего узла. На каждом шаге цикла в строку Fstr записываются ключевые слова и краткое описание очередной страницы. Затем с помощью функции indexOf проверяется, содержится ли строка запроса SStr в строке Fstr. Если да, очередному элементу массива Res присваивается номер страницы, удовлетворяющей критерию поиска. Таким образом, по завершении работы этого фрагмента все номера искомых страниц будут занесены в массив Res, и машине останется только выдать эту информацию пользователю. Сделаем это в отдельном окне: С методами создания динамического окна мы ознакомились в прошлый раз, поэтому сейчас остановимся только на помещаемой в него информации. Вначале мы выводим количество найденных страниц, которое хранится в свойстве length массива Res. Затем организуем цикл по всем элементам этого массива, выводя краткое описание найденной страницы (которое служит одновременно гиперссылкой на страницу — для этого используем свойство link массива Contents) и ключевые слова страницы, размещенные в массиве Keys. Для большей выразительности выводим найденные ссылки в виде маркированного списка с отступом (рис. 3). Как видим, создание поисковика с помощью JavaScript вполне по силам любому дизайнеру, имеющему хотя бы элементарное представление об языке. Совершенно очевидно, что пример носит чисто иллюстративный характер и что для организации реальной системы поиска наш сценарий необходимо изменить. Такое усовершенствование может быть проведено, например, в таких направлениях: Учет регистра вводимых слов. В нашем примере запрос со словом «товары» (в нижнем регистре) выдаст нулевое количество страниц (рис. 4).
Желательно преобразовать код таким образом, чтобы можно было по желанию пользователя искать слово с учетом регистра или без него. На своем сайте, как и в настоящих поисковых системах, можно строить поиск не по одному слову, а на основании сложных логических выражений. Можно существенно расширить критерии поиска, причем сами критерии могут интерактивно настраиваться пользователем на странице ввода запроса. Окно поисковой машины при такой модификации может выглядеть, например, как на рис. 5. В принципе, JavaScript позволяет создать поисковую машину, не уступающую популярным сетевым системам (и даже значительно превосходящую их). Однако и здесь не все так просто. Главным препятствием для создания обширных поисковых систем на JavaScript является большой размер HTML-документа, загружаемого в браузер посетителя. Если к тому же эта страница будет содержать большой по объему сценарий, осуществляющий глубокий и сложный поиск, то ожидание выдачи запроса может неоправданно затянуться, и посетитель, скорее всего, покинет ваш узел. Именно по этой Итак, подведем итоги нашего учебного курса. Как мы показали, JavaScript является развитой сетевой технологией, прекрасно справляющейся с основными задачами интерактивного взаимодействия с пользователем: приемом и обработкой запросов, созданием динамических страниц, работой с датой и временем, математическими вычислениями и манипуляцией со строками. Однако не стоит думать, что JavaScript является универсальным инструментом, пригодным на всех случаи жизни. Так, в языке практически отсутствуют методы работы с файлами и базами данных. Несмотря на это, JavaScript занимает достойное место в ряду других web-технологий, о которых мы планируем рассказать в дальнейшем. Рекомендуем ещё прочитать:
|
|
|
Идёт загрузка...| Хостинг на серверах в Украине, США и Германии. | © sector.biz.ua 2006-2015 design by Vadim Popov |