Лекции (989962), страница 62
Текст из файла (страница 62)
Это координаты указателя мыши вдоль оси X и Y. Начало координат находится влевом верхнем углу экрана.Пример использованиz объекта Event для определения нажатой клавиши:<HTML> <BODY onkeypress="window.alert('Вы нажали клавишу: '+String.fromCharCode(event.keyCode));"></BODY> </HTML> Ляхевич А.Г., 2000 - 2002 годСоздание пользовательских объектовВ 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 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">/* определение типа браузера.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
