Июл 21

Апплет Java, как и программа на
JavaScript, должен выполняться из гипертекстового документа HTML. Именно с этим
свойством апплетов связано происхождение термина «выполняемое содержимое». Чтобы
включать апплеты в файл HTML, используется HTML-тег <applet>. Тег
<applet> является контейнерным тегом. Это значит, что в тексте
гипертекстового документа за этим тегом обязательно должен быть указан
закрывающий тег </applet>. Ниже привожу синтаксис тега
<applet> (необязательные атрибуты выделены зелёным цветом).

<applet
code=»File.class»
codebase=»ClassDirectory»
width=w
height=h
vspase=vs
hspace=hs
alt=text
name=appletName
align=left | right
| top | middle | baseline | bottom |
<param name=ParamName
value=ParamValue>
HTMLТекст…

</applet>

где атрибут code задает имя загружаемого файла с расширением
.class, codebase – имя каталога, в котором содержится данный файл
(файлы) с расширением .class, width – ширина области вывода
апплета в пикселях, а height – ее высота. Использовать кавычки («)
в именах аргументов необязательно. Тег <param> предназначен для
задания имен (ParamName) и значений (ParamValue) параметров,
которые передаются апплету из файла HTML. Допускается задание нескольких тегов
<param>. HTMLText – текст, предназначенный для
пользователей, которые применяют броузеры, не поддерживающие язык Java. Этот
текст выводится на экран в том виде, в каком указан в донном теге. Он должен
задаваться в формате HTML, и его длина не ограничивается. Атрибут alt предназначен для вывода теста
в окнах броузеров, которые распознают тег <applet>, но не могут
выполнить апплет. Атрибут align, по своему действию аналогичен тегу
<img align=… scr>. Атрибут align предназначен для задания
способа размещения области вывода апплета на странице. Атрибутами vspace
и hspace задаются размеры поля пустого пространства над и под областью
вывода апплета (значения обоих атрибутов указываются в пикселях).

Например можно задать следующий тег <applet>:

<applet code=»MyApplet.class»
codebase=»CLASSES»
width=150
height=150
<hr>To viev
this applet you will need a Java-aware browser!<p>
<img
scr=»scrndump.gif»><hr>
</applet>

Этот тег осуществляет вызов апплета MyApplet.class. Для пользователя,
просматривающего данную страницу с помощью броузера, который не поддерживает
Java, на экране будет отображаться текст «To viev this applet you will need a
Java-aware browser!»
(Для просмотра этого апплета вам понадобится броузер,
поддерживающий Java), а также графическое изображение (заданное в теге
<img scr…>). Авторы некоторых приложений предпочитают в таких
случаях выводить вместо текста «картинку» – такую, какую увидел бы на экране
пользователь, распологающий поддерживающим Java броузером. При запуске область
вывода апплета будет занимать квадратный участок экрана размерами 150х150
пикселей. Разработчик апплета должен позаботиться о том, чтобы выводимые
апплетом данные не попадали за пределы выделенной для них области. (В апплетах
можно задавать размеры области отображения, в которую будет выводится
информация. Если с помощью необязательных атрибутов width/heigh не задана
область вывода апплета, то данные будут выводиться и отображаться в области
экрана, заданной в самом апплете.) Включение апплета в страницу без
соответсвующего текста, предназначенного для тех пользователей, у которых
броузеры, не поддердивают Java, принято считать невежливым. Атрибутом
codebase в этом примере задается, что файл MyApplet.class
находится в подкаталоге CLASSES каталога, в котором содержится
HTML-файл.

Пример использования тегов
<applet>.

Рассмотрим следующий пример:

<applet code=»MyApplet.class» codebase=»myclasses»>
Апплет
распологался бы здесь !
</applet>

В этом фрагменте текста HTML атрибутом codebase
задается каталог myclasses. Этот каталог является подкаталогом каталога,
из которого был загружен данный файл HTML. Например если приведенные выше теги
входят в состав HTML-файла C:\Applets\Demo_Applet.html, то броузер будет
искать файл MyApplet.class в каталоге C:\Applets\myclasses.

Приведённый выше тег <applet> можно использовать для вызова
локальных апплетов (например, чтобы проверить апплет сначала на своём
компьютере, а потом уже поместить его на Web-сервер). Примечание: Не все апплеты
могут выполняться локально.

Конечно же, апплет может размещаться не только в том каталоге, где находится
вызывающий его файл HTML, а и в любом другом месте Internet. В таких случаях в
атрибуте codebase необходимо указать URL файла апплета с расширением
.class
, например:

<applet
code=»RemoteApplet.class»
codebase=»http://www.somehost.com/appletdir/classes/»>
Пример
апплета.
</applet>

В этом примере вызывается апплет RemoteApplet.class, расположенный на
хосте Internet www.somehost.com в каталоге /appletdir/classes/.
Для того чтобы загрузить апплет в вашу систему, броузер использует протокол
передачи гипертекстовых документов (HyperText Transfer Protocol – HTTP), а
выполнение апплета осуществляется под управлением встроенного в броузер ядра
Java.

Если вы решили передать ваши апплеты на Web-сервер (через FTP), убедитесь,
что в HTML-файле, в котором они используются, правильно задан атрибут
codebase
. Если файл апплета с расширением .class находится в том же
каталоге, что и соответствующий HTML-файл, вызывающий данный апплет, т.е.
содержащий тег <applet>, атрибут codebase можно вообще опустить.
Лучше, однако, если это возможно, хранить файлы с расширением .class и
исходные тексты программ на языке Java в разных каталогах.

Июл 21

Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript – подмножество Visual Basic-а и JavaScript. Вот последним мы и займемся, как наиболее универсальным.

Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью броузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.
Что такое объектная модель?

Давным-давно, когда броузеры еще имели номер версии равный единице, ничего подобного не было и в помине. Информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто, и даже глюков совместимости еще не было :)

Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:
Страничка скачивается с сайта и размещается в памяти компьютера
Производится анализ странички, в результате которого она препарируется на составляющие.
Блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных соответственно структуре объектной модели.
База данных становится доступной другим программам и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.
Структура объектной модели

Чтобы было понятно, о чем мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше.
window – объект, дающий доступ к окну броузера
frames – объект, дающий доступ к фреймам
window…
window…

document – объект, содержащий в себе всю страничку
all – полная коллекция всех тегов документа
forms – коллекция форм
anchors – коллекция якорей
appleеs – коллекция апплетов
embeds – коллекция внедренных объектов
filters – коллекция фильтров
images – коллекция изображений
links – коллекция ссылок
plugins – коллекция подключаемых модулей
scripts – коллекция блоков <script></script>
selection – коллекция выделений
stylesheets – коллекция объектов с индивидуально заданными стилями
history – объект, дающий доступ к истории посещенных ссылок
navigator – объект, дающий доступ к характеристикам броузера
location – объект, содержащий текущий URL
event – объект, дающий доступ к событиям
screen – объект, дающий доступ к характеристикам экрана

Объектная модель Netscape Navigator-а немного отличается от вышеприведенной, но ее смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей.

Вместо того, чтобы подробно объяснять каждый объект, входящий в модель броузера, я буду разъяснять смысл соответствующих объектов, их свойств и методов на конкретных примерах по мере возникновения в том необходимости.

Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

И, как Вы понимаете, вот здесь-то на сцену и выходит скриптовый язык, который и позволяет нам манипулировать объектами.

Как любой язык программирования, JavaScript имеет определенный набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишите сами.
Как и где размещать код скрипта?

Но сначала мы немного отвлечемся от эффектов и поговорим о том, как и где размещать JavaScript. Так как язык скриптовый и рассчитан на работу на web-страничках, то его код размещается непосредственно в HTML-коде странички. Причем, код на JavaScript обычно состоит из двух частей:
Функции, которые вызываются из кода странички в ответ на какое-то событие
Код событий, которые вызывают функции :) )

Описание функций должно располагаться в теге <head></head> – это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:
<script language=»JavaScript»>
<!–
function somefunction()
{
// здесь располагается код функции
}
//–>
</script>

Обратите внимание, что непосредственно сам код заключен в тег комментария. Это сделано для того, чтобы более старые броузеры игнорировали непонятные им команды. Новые же программы знают о существовании закомментированных скриптов и им это не мешает.

Заметьте также, что закрывающий тег комментария несколько необычен и предваряется двумя косыми чертами. Две косые черты – это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.

Ну вот, с основами применения скриптов разобрались, а примеры популярных и полезных эффектов, реализованных при помощи JavaScript, мы рассмотрим в следующей статье.

Автор: Mike Melnikov (cherry-design@mail.ru),Web-studio «Cherry-Design»

Июл 21

Продолжаем разговор о применении скриптов на web-страничках. И начнем мы, пожалуй, с написания некоторых функций, которые нам впоследствии очень пригодятся.

Способ внедрения Java-скрипта в страничку я описал в предыдущей статье и в последующих примерах скриптов буду опускать всю эту стандартную обвязку, но Вы должны помнить, что в реальном проекте код должен быть описан полностью.
Определение типа и версии броузера

Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат иногда требуется писать разный код – для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объеме или нужно ограничиться урезанной версией, была бы как нельзя кстати.

Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:
var browser_name = navigator.appName;
var browser_version = parseFloat(navigator.appVersion);

В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).

Логичный вопрос – зачем все нужно так усложнять? И ответ – для упрощения написания сложных функции и избежания повторных проверок.

Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой:
var browser_ok = false;
if (browser_name == «Netscape» && browser_version >= 4.0)
browser_ok = ‘true’;
else if (browser_name == «Microsoft Internet Explorer» &&
browser_version >= 4.0)
browser_ok = ‘true’;

Разумеется, условие может быть и более сложным, в зависимости от того, какие цели Вы преследуете. Кроме проверки типа и версии броузера мы можем также узнать количество используемых цветов, ширину и высоту экрана, возможность поддержки определенных плагинов и другие не менее полезные вещи, а значит, и скорректировать поведение скрипта. Можно завести более одного флажка, если мы собираемся писать разный код для разных броузеров. В данном конкретном случае мы просто выполнили проверку броузера на соответствие 4-ой версии. Это было сделано с целью безболезненного отсечения старых версий броузеров (чтобы они не показывали ошибку при обращении к страничке) и для проверки возможности использования DHTML.

Итак, код проверки броузера и выставления флажка, сигнализирующего о том, что броузер нам подходит, мы написали. А теперь научимся этим пользоваться. Основное правило заключается в том, что весь зависимый от этого флажка код нужно предварять проверкой его значения:
function somefunction() {
if (browser_ok == ‘true’) {
// здесь и располагается зависимый код
}
}

Таким образом, старые версии броузеров, которые не умеют работать с новыми технологиями, просто не получат непонятный для себя код и, соответственно, не сгенерируют ошибку.
Генерация случайного числа

Не столь уж и редкая ситуация, когда нам может понадобиться сгенерировать случайное число. Это может пригодиться, например, для написания странички, которая случайным образом показывает каждый раз новую картинку или афоризм при заходе на сайт. Но это может быть и часть более сложной системы – например, механизм локальной баннерной системы.

Для генерации случайного числа мы воспользуемся JavaScript объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:
function getrandom() {

var min_random = 0;
var max_random = 10;

max_random++;

var range = max_random – min_random;
var n=Math.floor(Math.random()*range) + min_random;

return n;
}

Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random)

Несколько небольших и полезных Java-скриптов позволяющих добавить к функциональности сайта некоторые приятные мелочи.
Дата модификации документа

Некоторые web-дизайнеры находят полезным отображать внизу странички дату последней модификации документа. Это делается для того, чтобы посетитель мог определить, насколько часто обновляется сайт. Правда это же накладывает и определенные обязательства по поддержке сайта. Согласитесь, что наблюдать прошлогоднюю дату доставляет мало удовольствия. Но если Вы все же решились использовать этот прием, то следующий скрипт Вам пригодится.

Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:
<script language=»JavaScript»>
<!–

document.write («Дата последней модификации: »
+ document.lastModified);

//–>
</script>
Как сделать страничку стартовой?

В последнее время стало достаточно модным применять этот скрипт. Его смысл заключается в том, что где-нибудь на видном месте странички мы делаем ссылку, нажав на которую пользователь сможет сделать Вашу страничку стартовой, т.е. такой, которая загружается при запуске броузера и нажатии на кнопку «Домой».

Этот прием может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.

К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:
<p><a href=»#» onClick=»this.style.behavior=’url(#default#homepage)’;
this.setHomePage(‘http://www.yoursite.com/’); return false;»>
Сделать стартовой страницей</a></p>
Добавление странички в «Избранное»

Подобно предыдущему скрипту, этот прием также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.

Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку «Избранное». А сам скрипт выглядит следующим образом:
<p><a href=»#» onClick=»window.external.addFavorite
(‘http://www.yoursite.com/’, ‘Description’); return false;»>
Добавить сайт в Избранное</a></p>
Распечатка страницы из кода

Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в Netscape Navigator для этого есть, даже, встроенный механизм. Достаточно просто вызвать метод window.print()

А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.

Таким образом, наша задача разделилась на две части. Первая – определить тип броузера, а вторая корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:
<script language=»JavaScript»>
<!–

var browser_name = navigator.appName;

function printit(){

if (browser_name == «Netscape») {
window.print() ;
} else {
var WebBrowser = ‘<object id=»WebBrowser1″ width=0 height=0
classid=»clsid:8856F961-340A-11D0-A96B-00C04FD705A2″></object>’;
document.body.insertAdjacentHTML(‘beforeEnd’, WebBrowser);
WebBrowser1.ExecWB(6, 2);
}

//–>
</script>

Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:
<a href=»#» onClick=»printit();»>Распечатать статью</a>

Только не путайте этот скрипт с версиями страничек «для распечатки». Страничка для распечатки это обычный html-файл, из которого убрали дизайнерское оформление и оставили очень простую верстку, чтобы при печати не было лишних элементов. Приведенный же выше код непосредственно посылает страничку на принтер.

Автор: Mike Melnikov (cherry-design@mail.ru),Web-studio «Cherry-Design»

BMW 323i touring (E36) . .