Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

  Все выпуски  

Азы и секреты программирования на JavaScript.


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

Азы и секреты программирования на JavaScript.

Выпуск 11


Использование JavaScript для оживления содержимого HTML страниц.

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

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

Используя JavaScript можно именять вид и содержание HTML элементов, независимо от того, как они определены. Можно манипулировать элементами HTML, даже если их свойства определены c использованием стилей.

HTML элемент как Объект.

Независимо от того, как Вы определите элемент HTML, он может быть обработан как модифицируемый объект в JavaScript.

Для каждого элемента на HTML странице (определен ли он как тэг или как стиль) имеется возможность передачи в его JavaScript как объекта. Вы можете создавать сценарии JavaScript, которые изменяют элементы или прямо обращаясь к их свойствам, и изменяя их значения, или вызывая собственные методы объекта.

Однако необходимо учитывать, каким броузером Ваши страницы будут просматриваться. В прошлом Выпуске рассылки я заметил, что будут рассматриваться только сценарии JavaScript для MS Internet Explorer. ОДнако, уступая Вашим многочисленным просьбам ( желание подписчиков - закон :-) ), я буду стараться показывать использование сценариев и для второго по популярности броузера - Netscape Communicator.

Так вот, учитывая вышесказанное, необходимо обратить внимание, что MS Internet Explorer (IE) позволяет обращаться к свойствам практически всех HTML тэгов непосредственно. Netscape Communicator (NC) такой возможности лишен, но это компенсируется в NC обобщенным тэгом , который игнорируется IE. И наша задача в первую очередь будет состоять в том, чтобы определить, какой именно тип броузера используется клиентом, и иметь в своем сценарии соответствующие модули для каждого типа броузера.

Определение типа броузера клиента.

Важно создавать такие WEB-страницы, которые - бы корректно отображались любой программой просмотра. Конечно, легче всего для этого делать простые HTML страницы, используя при этом поддерживаемый всеми стандарт HTML-3.2, или даже 2.0. Но при этом ни о каком динамическом содержании не может быть и речи. А ведь так хочется удивить клиента, или хотя-бы произвести приятное впечатление, чтобы Ваш сайт запомнился. Здесь нам на помощь придет JavaScript.

В определении типа броузера клиента нам поможет простая функция:

function BrowserType() { var vAgent; vAgent = navigator.userAgent.toLowerCase(); if( (vAgent.indexOf('mozilla') != -1) && (vAgent.indexOf('spoofer') == -1) && (vAgent.indexOf('compatible') == -1) && (vAgent.indexOf('opera') == -1) && (vAgent.indexOf('webtv') == -1) ) { return "NC"; } if (vAgent.indexOf("msie") != -1) { return "IE"; } return "other"; }

Так как данная функция нужна будет для многих Ваших страниц, рекомендуется оформить ее в отдельный подключаемый файл. Приведенный код надо сохранить в текстовом файле, присвоить этому файлу расширение JS, и сохранить в каталоге на Web-сервере с Вашим сайтом. Присвоим файлу имя "common.js". В последствии мы будем дополнять этот файл другими полезными и часто используемыми функциями. Как использовать этот код в своих Веб-страницах иллюстрирует следующий код:

<xHTML> <xHEAD> <xTITLE>Пример 11<x/TITLE> <xMETA HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251"> <x/HEAD> <xBODY> <LAYER ID="forNC"><div ID="forIE">Тип броузера</div></LAYER> <BR><BR> <A HREF="JavaScript:changeHead()">Проверка типа</A> <x/BODY> <x/HTML>

По желанию Вы можете модифицировать предложенный код, расширив его функциональность и на другие программы промотра Веб-страниц.

Материалы для Web-мастера.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу
Рейтингуется SpyLog

В избранное