it_vse (519823), страница 62
Текст из файла (страница 62)
Пример: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 Navigatordocument.all.имя_слоя.style.свойсво_ document.имя_слоя.свойствослоя = значение;_слоя = значение;* имя_слоя определяется впараметре ID, тэга DIVДля Netscape Navigator 6.0document. getElementById("имя_слоя").style.свойство_слоя =значение;Ниже, в качестве примера, приведена анимация, реализованная при помощи слоев.<!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 Navigatorif (ns6||ie) document.enot.src=me[ienot].src;// версия кода для Internet Explorer, Netscape 6, Operaienot++; if (ienot>2) ienot=1;T=setTimeout("goEnot()",300);}goEnot();</script></body></html> Ляхевич А.Г., 2000 - 2002 год.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
