Лекции по ВМСС
.pdf
Создание пользовательских объектов
В JavaScript можно использовать встроенные объекты Web-браузера, аналогично тому, как это описывалось в лекции поVBScript, а можно создавать и собственные объекты и даже добавлять новые свойства и методы во встроенные объекты Web-браузера.
Создание собственного объекта происходит следующим образом:
1) Задается функция-конструктор объекта, инициализирующий его свойства и методы. Пример: function Cartochka ( name, address, telefon ) {
this.name = name; this.address = address; this.telefon = telefon; this . printMetod = printMetod; }
2)Описываются методы объекта, заданные в конструкторе. Пример: function printMetod ( ) { i=this.name+"<BR>"+this.adres+"<BR>"+this.telefon+"<BR>" ; document.writeln ( i ) ; }
3)Создание экземпляра объекта. Пример:
Ivan = new Cartochka ("Иван", "Мелитополь","555-00-00"); 4) Использование свойств и методов объекта. Пример: Ivan.telefon = "03"; Ivan.printMetod();
Полный текст соответствующего HTML-документа приведен ниже: <HTML> <BODY> <SCRIPT LANGUAGE="JavaScript">
function printMetod ( ) { i=this.name+"<BR>"+this.adres+"<BR>"+this.telefon+"<BR>" document.writeln(i) }
function Cartochka ( name, adres, telefon ) {
this.name = name; this.adres = adres; this.telefon = telefon; this.printMetod = printMetod; }
Ivan = new Cartochka ("Иван", "Мелитополь","555-00-00"); Ivan.telefon = "03"; Ivan.printMetod();
</SCRIPT> </BODY> </HTML>
Создание иерархии подчиненных объектов реализуется аналогично Java: в конструкторе объекта верхнего уровня записывается свойство, которое создает и указывает на объект нижнего уровня. Таким образом, создавая объект верхнего уровня, автоматически создается вся иерархия подчиненных объектов. В приведенном ниже примере, объект верхнего уровня kniga1, содержит массив подчиненных объектов Cartochka: function Kniga ( ) {
this . stranica = new Array(2);
this . stranica[0] = new Cartochka ("Иван", "Мелитополь","555-00-00"); this . stranica[1] = new Cartochka ("Петр", "Мелитополь","555-00-01"); this . stranica[2] = new Cartochka ("Игорь", "Мелитополь","555-00-02");
}
kniga1 = new Kniga ( );
kniga1. stranica[1].name = "Иванов"; kniga1. stranica[1].printMetod();
Настройка встроенных объектов Web-браузера
Добавление свойств и методов в уже существующий встроенный объект проводится с помощью ключевого слова prototype (другими словами, создается прототип уже существующего объекта. Prototype — это, в данном случае, название конструктора объекта.). Последовательность действий следующая:
1)Описать функцию (переменную), которая станет новым методом (свойством) встроенного объекта. Пример:
function Metod ( ) { document.writeln (" Этот метод добавлен ко встроенному объекту ! "); } Svoistvo = " Это новое свойство встроенного объекта ";
2)Добавить метод (свойство) во встроенный объект, используя ключевое слово prototype. Пример: String.prototype.newMetod = Metod;
String.prototype.newSvoistvo = Svoistvo;
3)Использование методов и свойств. Пример:
stroka = new String ("Строка");
stroka . newMetod ( ); document.writeln ( stroka . newSvoistvo );
Ляхевич А.Г., 2000 - 2002 год
Отображение бегущих строк
Используя функции работы со строками и объект Math, описанные в лекциях по Java, а также метод SetTimeout объекта Window (см. лекции по VBScript) можно создать бегущие строки. Пример приведен ниже:
<HTML> <HEAD>
<SCRIPT LANGUAGE="JavaScript">
var msg = "Это пример бегущей строки. Впечетляет?"; spacer = "... ...";
pos = 0;
function ScrollMessage(){
window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0,pos); pos++;
if (pos > msg.length) pos = 0; window.setTimeout("ScrollMessage()",100); } ScrollMessage();
</SCRIPT> </HEAD>
<BODY> <H1> Пример бегущей строки</H1> </BODY> </HTML>
Создание гиперссылки в виде рисунка, меняющегося при наведении на него указателя мыши
Для создания такого рисунка достаточно поместить его внутрь тэга гиперссылки, и написать в тэге <IMG>, задающем рисунок, обработчики событий onmouseover и onmouseout, подменяющие и восстанавливающие рисунок. Пример:
<HTML> <BODY>
<A HREF="http://microsoft.com">
<IMG src="file1.gif" name="ris1" width="100px" height="100px" alt="ссылка " border="0" onmouseover="ris1 . src = 'file2.gif ';" onmouseout="ris1 . src = 'file1.gif ';"> </A>
</BODY> </HTML>
Создание анимации с помощью массивов
Простейшая анимация реализуется путем создания анимированного gif рисунка в графических редакторах. Однако анимацию можно выполнить и при помощи JavaScript. Рисунок, внедренный в HTML - страницу, представляют собой объект image, дочерний по отношению к объекту document. Каждый объект image имеет следующие свойства:
•border. Соответствует атрибуту BORDER дескриптора <IMG>. Определяет границы рисунка.
•complete.Определяет степень загруженности рисунка. Принимает булевы значения (true или false).
•heigth и width. Задают размеры рисунка. Свойства только для чтения. Изменить их при создании динамических рисунков нельзя.
•hspace и vspace. Определяют место расположения рисунка на странице. Только для чтения.
•name. Имя рисунка. Оно определяется атрибутом NAME при определении рисунка.
•lowscr. Принимает значение атрибута LOWSCR. Это специальный атрибут, используемый броузером, который определяет загрузку рисунка в низком разрешении перед загрузкой основного изображения.
•srс. Источник рисунка, определяемый адресом URL. Это свойство может изменяться.
При создания анимации, исходный рисунок на странице подменяется рисунками из массива. Пример:
<HTML> <HEAD> Пример анимации </HEAD> |
|
||
<BODY> |
|
|
|
<IMG border="0" src="1.jpg" alt="анимация"> |
|
||
<SCRIPT LANGUAGE="JavaScript"> |
|
||
var ind=1; |
massiv=new Array(3); |
|
|
image1=new Image(); |
image1.src="1.jpg"; |
|
|
image2=new Image(); |
image2.src="2.jpg"; |
|
|
image3=new Image(); |
image3.src="3.jpg"; |
|
|
massiv[1]=image1; |
massiv[2]=image2; |
massiv[3]=image3; |
|
function ScrollPicture(){ document.images[0].src=massiv[ind].src; ind=ind+1; if (ind>3) {ind=1} window.setTimeout("ScrollPicture()",500); }
Ляхевич А.Г., 2000 - 2002 год
ScrollPicture();
</SCRIPT>
</BODY>
</HTML>
Создание динамических страниц с помощью слоев (DHTML)
Содержание документа HTML может находится на различных слоях (подробнее см. лекцию по HTML, раздел слои DHTML и стили CSS). Слои могут быть наложены друг на друга в определенном порядке и перекрываться. С помощью JavaScript их также можно перемещать, скрывать и отображать. Каждый слой имеет свои уникальные свойства, например цвет или рисунок фона.
Определить слой можно несколькими способами, но самый популярный из них заключается в использовании дескриптора <DIV>, который впервые стали использовать в HTML 3.0. Чтобы создать слой с помощью дескриптора <DIV>, заключите содержимое слоя в пару дескрипторов <DIV> и определите свойства после атрибута STYLE. Пример:
<DIV ID="nazvanie1" STYLE="position:absolute; left:100; top=100">
Это содержимое слоя
</DIV>
Этот код определяет слой nazvanie1. Это перемещаемый слой, смешенный относительно левого верхнего угла окна браузера на 100 по вертикали и 100 пикселей по горизонтали.
В атрибуте STYLE дескриптора <DIV> можно указывать самые различные свойства слоев. Доступ к этим свойствам возможен и из программ на JavaScript. Некоторые свойства слоя приведены ниже:
•position. Определяет расположение слоя в окне. Принимает три значения: static (неперемещаемый слой), absolute (координаты слоя – абсолютные, в пикселях относительно окна браузера), relative (координаты слоя – относительные, относительно его нормального расположения).
•left и top. Определяют координаты слоя: сдвиг слева и сверху. Для значения absolute отсчет ведется относительно окна браузера, а для relative — относительно нормального расположения слоя.
•width и height. Ширина и высота слоя.
•clip. Определяет границу на слое. Отображается только та часть слоя, которая расположена внутри границы.
•overflow. Режим усечение границей слоя. Принимает значения none (нет усечения), clip (есть усечение) и scroll (если слой не помещается в границу, то используются полосы прокрутки).
•zIndex. Определяет порядок наслоения слоев. Самый нижний слой имеет значение этого индекса 1. Слой, расположенный над ним, имеет индекс 2 и т.д.
•visibility. Определяет видимость слоя. Принимает значения visible (слой отображается), hidden (слой невидим) и inherit (если два слоя вложены друг в друга, то если отображается основной слой, то отображается и вложенный).
•backgroundColor. Цвет фона слоя.
•color. Цвет шрифта. Например "red".
•fontSize. Размер шрифта в пикселях.
•fontFamily. Название шрифта, например "Times".
•fontStyle. Тип шрифта (жирный, наклонный). Например "Italic".
•textAlign. Выравнивание текста. Возможны варианты "Left", "Right", "Center".
•letterSpacing. Расстояние между символами. Например 3.
•lineHeight. Высота строки.
JavaScript позволяет обращаться к слоям следующим образом:
Для Internet Explorer |
Для Netscape Navigator |
Для Netscape Navigator 6.0 |
document.all.имя_слоя.style.свойсво_ |
document.имя_слоя.свойство |
document. getElementById(" |
слоя = значение; |
_слоя = значение; |
имя_слоя").style.свойство_слоя = |
* имя_слоя определяется в |
|
значение; |
параметре ID, тэга DIV |
|
|
Ниже, в качестве примера, приведена анимация, реализованная при помощи слоев. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Создание анимации с помощью DHTML</TITLE> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <SCRIPT LANGUAGE="JavaScript">
/* определение типа браузера. Переменные: ns (Netscape), ns6 (Netscape 6.0), ie (MS Internet Explorer).*/ ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
Ляхевич А.Г., 2000 - 2002 год
ie=(document.all)?1:0;
var pos1x=0; var pos1y=0; var pos2x=550; var pos2y=0;
var speed1=Math.floor(Math.random()*10)+5; var speed2=Math.floor(Math.random()*10)+5; function next(){
pos1x=pos1x+speed1; |
pos1y=pos1y+speed1; |
if (pos1x>550) pos1x=0; |
if (pos1y>300) pos1y=0; |
pos2x=pos2x-speed2; |
pos2y=pos2y+speed2; |
if (pos2x<0) pos2x=550; |
if (pos2y>300) pos2y=0; |
if (ns) {
document.ris1.left=poslx; document.ris1.top=pos1y; document.ris2.left=pos2x; document.ris2.top=pos2y; }
if (ie) {
document.all.ris1.style.left=pos1x; document.all.ris1.style.top=pos1y; document.all.ris2.style.left=pos2x; document.all.ris2.style.top=pos2y; }
if (ns6) {
document.getElementById("ris1").style.left=pos1x; document.getElementById("ris1").style.top=pos1y; document.getElementById("ris2").style.left=pos2x; document.getElementById("ris2").style.top=pos2y; }
window.setTimeout("next();", 10);
}
</SCRIPT>
</HEAD>
<BODY onLoad="next();">
<H1>Создание анимации с помощью DHTML</H1> <HR>
<DIV ID="ris1" STYLE="position:absolute; left:0; top:0; width:200; height:100; visibility:show"> <A HREF="http:\\www.microsoft.com">Просто ссылка</A>
</DIV>
<DIV ID="ris2" STYLE="position:absolute; left:550; top:0; width:200; height:100; visibility:show"> <IMG src="kartinka2.gif" width="100px" height="100px" alt="картинка" border="0">
</DIV>
</BODY>
</HTML>
Зависимость программ на JavaScript от типа браузера
Как видно из кода примера предыдущего раздела, программы JavaScript, выполняющиеся в различных браузерах, отличаются, т.к. отличаются объектные модели самих браузеров. Поэтому первым шагом программы должно быть определение типа браузера. После чего, в необходимых точках программы предусматривается выполнение различных блоков команд для различных типов браузеров.
Для определения типа браузера могут использоваться различные приемы. В частности, можно пользоваться свойствами navigator.appName (название браузера) и navigator.appVersion (версия браузера). Однако мне более удобным и элегантным кажется метод, основанный на различной реализации браузерами объектов для работы со слоями.
Пример, приведенный ниже, иллюстрирует этот прием. В нем определяется тип браузера и, в зависимости от этого, используется разный программный код для организации анимации рисунка, находя-
щегося внутри слоя. В примере вводятся три переменные: ns (Netscape Navigator), ie (Internet Explorer) и ns6 (Netscape Navigator 6.0). Если, в результате проверки существования того или иного объекта, какая-либо переменная получает значение "истина", то значит мы имеем дело с соответствующим браузером. Такой подход выгоден и потому, что может существовать множество браузеров, название которых трудно перечислить, но которые копируют объектную модель соответствующих популярных браузеров. Так, например, работа со слоями в браузере Opera реализована аналогично Internet Explorer (document.all.название_слоя. style.свойства_слоя), а значит программы для Internet Explorer сработают и в браузере Opera.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title> Определение типа браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Ляхевич А.Г., 2000 - 2002 год
</head><body>
<div id="elogo" style="position:absolute; top:10; left:10; width:100; height:82"> <img src="enot1.gif" alt="gilermo" width="100" height="82" name="enot"> </div>
/* определение типа браузера. */ <script language="JavaScript"> ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
ie=(document.all)?1:0;
/* предварительная загрузка рисунков для анимации */ me=new Array (4);
e1=new Image(); e2=new Image(); e3=new Image(); e4=new Image(); e1.src="enot1.gif"; e2.src="enot1m.gif"; e3.src="enot2.gif"; e4.src="enot2m.gif"; me[1]=e1; me[2]=e2; me[3]=e3; me[4]=e4; ienot=1;
/* анимация */ |
|
function goEnot() { |
|
if (ns) document.elogo.document.enot.src=me[ienot].src; |
// версия кода для Netscape Navigator |
if (ns6||ie) document.enot.src=me[ienot].src; |
// версия кода для Internet Explorer, Netscape 6, Opera |
ienot++; if (ienot>2) ienot=1; |
|
T=setTimeout("goEnot()",300); |
|
} |
|
goEnot(); |
|
</script> |
|
</body> |
|
</html> |
|
Ляхевич А.Г., 2000 - 2002 год