Интернет технологии -> JavaScript -> JavaScript и Navigator 3.0t

JavaScript и Navigator 3.0 Павел Храмцов Массивы Графика Стеки гипертекстовых ссылок Фреймы и окна Наследование кода скриптов различными страницами Java, JavaScript и включаемые модули Что дальше? Появление Netscape Navigator 3.0 и новой версии JavaScript 1.1 заставляет продолжить обзор возможностей управления сценариями просмотра Website, который был опубликован в предыдущем выпуске "Открытых Систем сегодня"(Computerworld Россия 46, 1996). В новой версии языка были введены: возможность взаимодействия JavaScript и Java, определение установленных модулей расширений (plug-in), новые типы объектов(Area, Function, Image) и ряд других особенностей, которые, по мнению разработчиков, должны повысить мощь программирования на JavaScript. По своей природе JavaScript- это объектно-ориентированный язык программирования. В отличие от других языков данного типа, JavaScript не оперирует абстрактными объектами. Все его конструкции определены для объектов Navigator. Именно с этих позиций и следует рассматривать развитие языка. Объект навигатора - это либо конструкция HTML, чаще всего контейнер, либо рабочая область программы Netscape Navigator. Если брать конструкции HTML, то каждый контейнер имеет атрибуты, которые в JavaScript рассматриваются в качестве свойств объекта. Над объектами могут быть выполнены некоторые функции, которые в терминах JavaScript называются методами. Помимо методов существуют и просто функции, которые могут быть определены программистом. Свойства объектов могут быть переопределены в процессе выполнения программ, что позволяет построить гибкие сценарии просмотра гипертекстовых страниц Website или "оживить" страницы. Однако не все свойства переопределяются. Некоторые свойства могут быть только прочитаны скриптом, но не изменены в процессе его выполнения. Развитие языка идет в направлении расширения типов объектов Navigator, с которыми может манипулировать программист, а также изменения свойств объектов, точнее, расширения возможностей их переопределения. Массивы Первым типом новых объектов, которые мы рассмотрим, являются массивы. Тип Array введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами, которые может отображать Navigator. Это - список всех гипертекстовых ссылок данной страницы Website, список всех картинок на данной странице, список всех апплетов данной страницы, список всех элементов формы и т.п. Пользователь может создать и свой собственный массив, используя конструктор Array(). Делается это следующим образом: new_array = new Array() new_array5 = new Array(5) colors = new Array("red", "white", "blue") Размерность массива может изменяться. Можно сначала определить массив, а потом присвоить одному из его элементов значение. Как только это произойдет, изменится и размерность массива: colors = new Array() colors[5] = "red". В данном случае массив будет состоять из 6 элементов, так как первым элементом массива считается элемент с индексом 0. Для массивов определены три метода: join, reverse, sort. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель: colors = new Array("red", "white", "blue") string = acolors.join(" + ") В результате выполнения присваивания значения строке символов string мы получим следующую строку: string = "red + white + blue". Другой метод, reverse, изменяет порядок элементов массива на обратный, а метод sort отсортировывает их в лексикографическом порядке. У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа: color = new Array("red", "white", "blue") n = 0 while(n != colors.length) {... операторы тела цикла ...} Свойство prototype позволяет добавить свойства к объектам массива. Однако чаще всего в программах на JavaScript используются встроенные массивы, в основном графические образы (Images) и гипертекстовые ссылки (Links). Графика До Navigator 3.0 в JavaScript были только встроенные объекты типа Image. В новой версии языка появился конструктор для этого типа объектов: new_image = new Image() new_image = new Image(width, height) Часто для создания мультипликации формируют массив графических объектов, которые потом прокручивают один за другим: img_array = new Array() img_array[0] = new Image(50,100) img_array[1] =new Image(50,100) ... img_array[99] = new Image(50,100) У объекта Image существует 10 свойств, из которых, на мой взгляд, самым важным является src. Так, для присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей последовательностью команд: img_array[0]. src=index.html"image1.gif" img_array[1].src ="image2.gif" ... img_array[99].src ="image100.gif" В данном случае можно было воспользоваться и циклом для присвоения имен, так как они могут быть составлены из констант и значения индексной переменной. В новой версии языка объект типа Image может быть поименован в HTML-теге IMG. После этого можно обращаться к нему по имени. Здесь следует учитывать, что если Image применяется внутри формы, то он является свойством этой формы. В одном случае для следующего графического объекта должны быть использованы разные составные имена: <img name=car src=car.gif><form name=kuku><img name=car src=car.gif></form> document.kuku.car.src ="car1.gif" В первом случае задан поименованный объект типа IMG, а во втором объект этого же типа, но внутри формы. Однако наиболее часто в примерах использования скриптов можно встретить обращение к Image по индексу в массиве всех графических объектов данной страницы. Если наш объект, например, второй Image на странице, то будь он внутри формы или за ее пределами, к нему всегда можно обратиться по индексу: document.images[1]. src=index.html"car1.gif". Расширяя пример с массивом Image, построим теперь документ, в котором будет встроена мультипликация, определенная нашим массивом: <HTML> <HEAD> <SCRIPT> function multi_pulti() { img_array = new Array() img_array[0] = new Image(50,100) ... img_array[99] = new Image(50,100) img_array[0]. src=index.html"image1.gif" ... img_array[99].src ="image100.gif" n=0 while(n==0){ document.images[0].src = img_array[0].src ... }</SCRIPT> </HEAD>< BODY onLoad="multi_pulti()">< img src=image1.gif></BODY></HTML> Довольно часто используют не мультипликацию, а выбор картинки через OPTION, другой новый объект JavaScript. При этом можно через поле формы SELECT менять не только саму картинку, но и гипертекстовую ссылку, которая может быть связана с ней. На гипертекстовую ссылку также можно выходить по индексу: document.links[index]. href=kuku.html Данный прием оправдан и с точки зрения интерфейса навигатора. При применении такого рода массивов ссылок не требуется перечислять их, а также листать страницы в рабочей области навигатора - можно просто выбрать ссылку из " выпадающего" меню. Другой способ для сокращения числа нажатий на клавиши - использование событий. В том же объекте OPTION можно применять событие onChange, что делает необязательным нажатие кнопок типа submit. В этом случае достаточно будет просто выбрать альтернативу и перейти к новой странице сразу после выбора. Стеки гипертекстовых ссылок Не обошли своим вниманием авторы JavaScript и стеки гипертекстовых ссылок. В язык теперь введен новый тип объектов типа Area. Area - это элемент контейнера MAP, который определяет client-site imagemap. Собственно, главное достоинство такого объекта состоит в том, что гипертекстовые ссылки, которые определены в Area, стали доступны для переопределения. Они появляются в массиве обычных ссылок страницы, и можно как получить значение URL, так и переопределить его. К объекту Area нельзя обратиться по имени. Можно использовать только индекс массива гипертекстовых ссылок документа. В контексте стека гипертекстовых ссылок интересно рассмотреть еще одну возможность JavaScript, связанную с переходом по гипертекстовой ссылке вообще. В обычном случае параметр HREF контейнера A должен иметь какое-нибудь значение. Если, например, по событию onClick необходимо открыть новое окно и в старом сохранить отображенный документ, то его URL следует указывать в качестве значения HREF. В противном случае, в старое окно будет загружена пустая страница, если HREF=index.html"". В новой версии JavaScript введена функция void. Точнее, тип void, который означает отсутствие какого-либо значения. Если нам необходимо выполнить некоторые действия при выборе гипертекстовой ссылки, не перегружая при этом текущие страницы, то в параметре HREF можно указать конструкцию: <A HREF=index.html""javascript:void(0)"">kuku</A> Таким приемом часто пользуются при программировании событий, связанных с проходом манипулятора (мыши) через поле гипертекстовой ссылки. Фреймы и окна При работе с фреймами и окнами в предыдущих версиях JavaScript постоянно приходилось отслеживать последовательность открытия окон и фреймов для того, чтобы аккуратно их потом закрывать. На некоторых неточностях работы с окнами были основаны так называемые mail-bombs. Суть этих "подарков" заключалась в том, что если пользователь по почте принимает документ, который состоит только из одной команды - window.close(), то система, не спрашивая пользователя, закрывала текущее окно, а в этот момент таким окном является окно электронной почты. Теперь перед тем, как что-либо закрыть, система будет спрашивать разрешения. Правда, опять-таки не всегда. Если в момент получения команды на закрытие окна на экране только одно окно Navigator, то система его закроет без каких-либо комментариев. Однако изменения в работе с окнами и фреймами этим не исчерпываются. Во-первых, в систему введено новое свойство opener, которое определено для текущего окна или фрейма, а также методы blur и focus распространены на работу с окнами. Свойство opener определяет окно документа, который вызвал открытие окна текущего документа. Свойство определено для любого окна и фрейма. Если необходимо выполнить некоторые функции по отношению к окну, открывшему данное окно, то можно использовать выражение типа: window.opener.[method].Например, если требуется закрыть окно-предшественник, то можно просто выполнить метод close - window.opener.close(). Точно таким же способом можно изменить содержание этого окна при помощи методов write или writeln. Можно менять и другие свойства объектов в окне-предшественнике. Следующий пример взят из дополнений к спецификации JavaScript компании Netscape Communications: window.opener.document.bgColor="cyan" В данном случае для окна-предшественника определен светло-голубой цвет фона. Но самое замечательное, что предшественника можно менять. Таким образом, автор получает возможность открывать и закрывать окна не в строго иерархической последовательности, а произвольно. Управление многооконным интерфейсом в этом случае становится более гибким: window.opener= new_window window.opener = null Первый пример переназначает для текущего окна окно-предшественник, в то время как второй вообще защищает предшественника от каких-либо действий. Все, что было сказано об окнах, распространяется и на фреймы, которые являются просто частным случаем окна. Часто при работе с фреймами один фрейм может быть порожден путем разбиения другого на части. Если при этом потребуется обратиться к окну-предшественнику фрейма-предшественника, то свойство opener здесь незаменимо. В предыдущей статье было рассмотрено закрытие окна с фреймами путем загрузки в окно parent страницы терминатора. С появлением свойства opener необходимость в такого рода фокусах отпала. Как видно из этого примера, разработчики языка следуют за пожеланиями авторов Web-узлов и практикой применения JavaScript. Кроме обращения к различным свойствам окон и фреймов разработчики расширили действие методов blur и focus с фреймов до окон. Теперь не только фрейм, но и окно может быть сделано текущим при помощи метода focus или, наоборот, переведено в фон при помощи метода blur. В ряде случаев, например при порождении нескольких страниц, обращение к этим функциям бывает довольно полезным. Наследование кода скриптов различными страницами Отсутствие какого-либо наследования между различными страницами Web-узла заставляло разработчиков перетаскивать из одной страницы в другую довольно большое количество часто используемых функций и переменных. Разговоры о том, что было бы неплохо получить доступ к глобальным ресурсам или возможность определять такие глобальные ресурсы, ведутся с самого момента появления JavaScript. К сожалению, стройного логичного механизма передачи параметров, функций и переменных от одного окна или фрейма к другому нет и в JavaScript1.1. Однако некоторые шаги в этом направлении сделаны. У контейнера SCRIPT появился атрибут SRC. Это дает возможность авторам строить своеобразную библиотеку функций, к которым можно обращаться из любой страницы, где будет ссылка на такую библиотеку. При этом вовсе необязательно размещать саму библиотеку на том же сервере, где находятся и гипертекстовые страницы узла. Можно использовать и чужие функции, написанные кем-либо из ветеранов программирования на JavaScript в любой точке земного шара. В атрибуте SRC применяется обычный URL. Внутри файла скриптов не используются теги SCRIPT. Это обычный файл с использованием определений функций и переменных. Естественно, что применение чужих скриптов может обернуться не только полезными приобретениями, но и непредсказуемыми проблемами. Для обычных пользователей страниц узла подкачка большого количества скриптов может стать просто дополнительным источником затрат. Скорее всего, понадобится пара функций из библиотеки на одной странице, а качать придется всю библиотеку. Другой новой возможностью работы с функциями стало введение объекта Function. Объект Function порождается конструктором Function: new_Function = new Function(arg1,arg2,...,argn, function_body) Главное отличие от обычного декларирования функции заключается в том, что в данном случае порождена переменная new_Function, с которой можно работать, как с любым другим объектом. При обычном переопределении функции такой переменной не порождается. Как любой объект, Function имеет свои свойства, но не имеет методов. В качестве свойств функции выступают аргументы и возможность назначения новых свойств через prototype. В заключение разговора о функциях и наследовании хочется еще раз обратить внимание на свойство opener окон и фреймов. Его можно использовать при обращении к объектам страницы-родителя, что позволяет компенсировать отсутствие наследования и глобальных переменных в JavaScript. Java, JavaScript и включаемые модули В новой версии языка есть возможность организовать взаимодействие между Java-апплетами и скриптами JavaScript. Достигается это за счет применения атрибута MAYSCRIPT в контейнере APPLET. Собственно, в JavaScript определен объект типа APPLET, к которому можно обращаться либо по имени, либо по индексу в массиве апплетов. У этого объекта есть только одно свойство - имя. Никакие другие свойства или методы для данного типа объектов не определены. Сами детали взаимодействия апплетов и скриптов лучше всего обсуждать в рамках программирования Java-апплетов, поэтому в данной статье мы эти особенности опустим. Кроме апплетов JavaScript позволяет работать и с включаемыми модулями. Последние представляют собой массив соответствующего типа, для которого определен ряд свойств. Используя эти свойства, можно определить установленные включаемые модули и их соответствия MIME-типам. Назначать включаемые модули или манипулировать ими нельзя. Что дальше? Следуя логике авторов JavaScript и направлениям развития World Wide Web, следует ожидать появления новых типов объектов и изменения свойств существующих. Кроме того, видимо, появятся глобальные переменные и функции. Порождение абстрактных типов тоже не за горами, хотя не совсем понятно, кто выиграет от такой новации. Постепенно совершенствуется и поддержка встроенных функций на разных платформах, так, например, функция random() реализована в настоящее время везде, что не исключает использования и своих собственных датчиков случайных чисел. И еще, скорее всего, следует ожидать компилятора JavaScript для клиента. Будет ли данная возможность встроена в Navigator или это будет отдельный модуль, пока не ясно, но появление библиотек функций - движение в этом направлении, которое хорошо согласуется с принципами кэширования гипертекстовых страниц. Павел Храмцов - рук. группы РНЦ "Курчатовский Институт". С ним можно связаться по тел.: 196-91-24 или электронной почте: paul@kiae.su ComputerWorld #48/96