Изменение атрибутов html-объектов. Таймер



Изменение атрибутов html-объектов. Таймер.

Передача параметров в функцию

Параметры в функцию во многих языках можно передавать по ссылке и по значению. При передаче параметров по значению вычисляется результат выражения, заданного в фактическом параметре и это значение помещается в область памяти, отведенную функции в ту ее часть, которая описана формальным параметром. Очевидно, что изменение этого формального параметра внутри функции не может никак повлиять на переменные, составившие выражение в фактическом параметре! При передаче параметров по ссылке в функцию передается адрес переменной (указатель на нее) и, следовательно, всякое изменение соответствующего формального параметра внутри функции повлечет изменение внешней переменной.

Схематично это можно представить так: пусть функция Ф1 работает с переменнымиk иl, и в процессе работы обращается к функции Ф2, передавая ейk параметром по значению, аl -  параметром по ссылке. Фрагменты функций описаны ниже на псевдоязыке и результат указан еще ниже.

функция Ф1

функция Ф2

адрес = 1034

адрес = 1036

адрес = 1038

адрес = 1040

2

3

2

1036

K

L

pv

Pr

Фрагменты кода программ:

Функция Ф1:

…..

k = 2

l =k+1

Ф2(k,l)

печать "k=",k, "l=",l

…..

Функция Ф2(pv,pr):

…..

pv =pv*2

pr = pr*2

…..

Результат на экране: "k=2l=6 ".

Вернемся кJavaScript. Здесь параметры – объекты передаются по ссылке, а параметры не объектных типов – по значению. Точнее можно сказать, что все параметры передаются по значению, просто объект – это то же самое, что адрес на него.

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

Изменение размера картинки

Пусть поставлена задача: по щелчку на картинку, она должна увеличиться. Можно сначала записать соответствующий оператор непосредственно в тегеimg.

<imgsrc=”pic1.jpgwidth=100height=100

onclick=”this.width = parseInt(this.width) +50”>

Усложним задачу: пусть картинка растет только до определенного максимального размера, а потом начинает уменьшаться. При достижении минимального размера картинка снова должна расти. Таким образом, получается, что при достижении картинкой некоторых граничным размеров или даже выходе за эти размеры должно измениться направление изменения. Т.е. надо ввести переменную, обозначающую направление изменения, например,napr. Очевидно, эта переменная должна быть описана в тегеscript. Традиционно такая переменная имеет значение +1 или -1, а выражение изменения выглядит подобно следующему:x =x+napr*50. Последнее – переменнаяnapr должна изменять своё значение на противоположное при выходе размеров картинки за граничные.

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

function ch_img(){

 this.width = parseInt(this.width) +napr*50;

...

}

Выше показан не весь код функции, но приведенный оператор не работает. Попробуем разобраться, почему. Вставьте перед вызовом функции и в функции самым первым оператором команду «alert(this.outerHTML);». Результат работы этих операторов разный: первый выдаст описание всего тегаimg, на который щелкнули мышкой. А второй выдаст сообщениеundefined, т.е. неопределенное выражение. Причина в том, что в выражении некорректно использовано словоthis: так можно обращаться к тегу-объекту только из программы, расположенной внутри тега.

Необходимо использовать другой способ обращения к тегу-объекту. Можно попробовать работать с идентификаторами. Добавьте в тегиimg атрибутыid с разными значениями. В функцииch_img опишите параметр, например, с именемim, а при вызове функции укажите фактический параметр.

var napr=1; maxW=400; minW=100;

function ch_img (im) {

 im.width = parseInt(im.width) +napr*50;

 if ((parseInt(im.width)>=maxW) || (parseInt(im.width)<=minW)))

    napr=-napr;

}

...

<img id=im1 src=”pic1.jpg” width=100 height=100

   onclick=”ch_img(this)”>

<img id=im2 src=”pic1.jpg” width=100 height=100>

Кажется, программа работает. Применим один из стандартных методов тестирования: проверим работу при граничных условиях. Пощелкайте по первой картинке до тех пор, пока она не начнет уменьшаться. И после этого щелкните по второй картинке. Она уменьшилась, хотя её размер был минимально допустимый! Второй щелчок по ней приведет к увеличению, но третий – снова уменьшит! Несколько неожиданный результат.

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

Исправьте программный код, рекомендуется отдельными условиями проверять выход за минимальный размер и выход за максимальный размер. Кроме того, при выходе за границы не изменять направление на противоположное, а прямо указывать его (1 или -1).

Проверим, всё ли теперь. В связи с тем, что переменнаяnapr в нашей программе одна, наблюдается интересный эффект: картинки изменяются только в одинаковом направлении. Пусть одна картинка достигнет максимального размера и начнет уменьшаться. Щелкните по второй, она тоже сначала уменьшится, затем программа изменит направление на «возрастание». Щелкните снова по первой картинке – она «забудет», что уменьшалась и станет увеличиваться. Не правильно.

Выход кажется очевидным: заводим вторую переменную, назовем ихnapr1 иnapr2. Чтобы в функции стало ясно, с какой переменной надо работать, попробуем передать ее вторым параметром. Снова получим эффект колебания около граничного значения. Причина в том, что параметры вJavaScript передаются по значению. Измененные в функции переменныеnapr1 иnapr2 возвращаются к прежнему значению.

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

Массив вJscript – объектный тип. Поэтому чтобы описать (создать экземпляр) массив, требуется вызвать конструкторArray. При создании массива можно задавать количество его элементов, но можно и не задавать, нужное количество автоматически появится, как только Вы используете операцию индексирования. При создании экземпляра массива можно сразу задать начальные значения его элементов.

Элементы массива могут быть разных типов. Каждому элементу может быть присвоено имя. Обратиться к элементу можно при помощи операции индексации, причем можно задать имя элемента или его числовой индекс (индексация начинается с 0).

ar = new Array()

ar1 = new Array(4)

ar2 = new Array(5, “ля”,true)

ar3[0] = "678"

Таймеры в программе наJavaScript

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

Устанавливается таймер методом объектаwindowsetTimeout ("что делать", "на сколько миллисекунд"). Если таймер уже не нужен, его можно отключить методомclearTimeout (имя таймера).

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

function try_timer(){

 s1= 'Звенит первый';

 s2= 'Звенит второй';

 b1= setTimeout ('alert(s1); clearTimeout(b1);',1000);

 b2 = setTimeout('alert(s2)',5000); clearTimeout(b2);

}

...

<BODYonload="try_timer()">

В примере продемонстрирована правильная и неправильная работа с будильником. Будильникb1 заведен на 1 секунду, через которую должно быть выдано сообщениеs1 и очищен будильник. Со вторым,b2,  будильником дело обстоит так: сначала будильник заводится, но следующим же оператором он очищается. Понятно, что сообщениеs2 не будет выдано никогда.

Таймер отличается от будильника тем, что будильник звонит в назначенное время, а таймер – через назначенный период времени. Будильник и таймер могут звонить повторно, это зависит от реализации. Чтобы не столкнуться с различиями реализации таймеров разными разработчиками браузеров, следует выполнять одно правило: всякая функция – обработчик таймера должна иметь вид: очистка таймера; действия по таймеру; завод таймера.

var b1=0;

function try_timer() {

 clearTimeout(b1);

 // здесь должна быть обработка

b1= setTimeout (' try_timer();',1000);

}

Обратите внимание на то, что в примере мы имеем дело не с рекурсивной функцией. Функция пишет команду в специальном месте и завершает свою работу. А через указанное время браузер выполнит эту команду.

Изменим ранее рассмотренную задачу: пусть картинка начинает изменять размеры при наведении мышки на неё, и прекращает при уходе мышки с неё.

Для решения задачи достаточно вставить в тегimg атрибутonmouseover вместоonclick, вызывающий функциюch_img, и атрибутonmouseout, значение которого – командаclearTimeout. Путем добавления двух строк работы с таймером модифицируется функцияch_img.

Классы в JavaScript

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

ВJavaScript конструктор класса – почти обычная функция. В теле функции описываются свойства класса при помощи служебного словаthis, за которым следует имя свойства. Аналогично описываются и функции. В нашей задаче функции не нужны, но в качестве примера в классе описана функция-методans.

По одинарному щелчку формируется объект и запускается его изменение по таймеру. По двойному щелчку выдается ширина картинки.

var im_cl1=0, im_cl2=0;

function img_chd(im, nm){

 this.tm = 0;

 this.napr = 1; // Math.round(Math.random())*2-1;

 this.name = nm;

 this.image = im;

 this.ans = function(){alert(this.image.width);}

 return(this);

}

function ch_img (im_cl) {

 clearTimeout(im_cl.tm);

 wd =parseInt(im_cl.image.width);

 if ((wd > 300) || (wd <100)) im_cl.napr = -im_cl.napr;

 im_cl.image.width = wd +im_cl.napr*50;

 im_cl.tm = setTimeout ('ch_img('+im_cl.name+');',1000);

...

<img id=im1 src="files/0/img207.jpg" onclick= "im_cl1 = new img_chd(this,'im_cl1');  ch_img(im_cl1);" ondblclick = " im_cl1.ans();" width=150>

<img id=im2 src="files/0/img206.jpg" onclick= "im_cl2 =new img_chd(this,'im_cl2'); ch_img(im_cl2);" ondblclick = " im_cl2.ans();" width=200>

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

Изменение класса стилевых характеристик

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

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

Решение. Опишем два класса: пункт, на который наведена мышка, и все остальные. Сначала всем пунктам списка зададим второй класс (невыделенные), а по событиюonmouseover будем изменять класс на первый (текущий). По событиюonmouseout будем возвращать класс ко второму.

Класс дляhtml документов описывается атрибутомclass. Но в объектеstyle соответствующее свойство называетсяclassName. По-видимому, имя свойства пришлось изменить, так какclass – зарезервированное вJAVA слово для описания класса. Это далеко не единственный пример, когда стилевые атрибуты и свойства объектаstyle называются по-разному. Названия свойств объектаstyle очень похожи на наименования атрибутов в листах стилей. Но, к сожалению, разработчики листов стилей использовали знак "-" в названиях, а этот символ запрещен в именах переменных практически во всех языках. Поэтому такие названия пришлось изменить. Изменения, к счастью, однотипные: знак "-" опускается, а следующая за ним буква становится заглавной. Так стилевой атрибутlist-style-image (маркер в виде картинки) в программе будет выглядеть какlistStyleImage.

p {text-align:justify; text-indent:3em; line-height:1.2;

word-spacing:5pt; letter-spacing: 2px; color : rgb (167,32,99)}

li.k1 {list-style-image: url(CatB.gif);  list-style-position:

         inside; font-size:1.1em}

li.k2 {list-style-image: url(CatW.gif);  list-style-position: outside;

          font-size:0.8em}

li {list-style-image: url(CatW.gif)}

……..

<p> Абзацы теперь красиво выровнены. Первая строка с отступом, задано межстрочное расстояние, определен пропуск между буквами и словами. </p>

<ul>

<liclass=k1onclick="if(this.className=='k2'){this.className='k1';}else {this.className='k2'};"> Пункт, в котором картинка - маркер расположена внутри области с текстом.  Перенесенный на другую строку текст показывается под картинкой. </LI>

<liclass=k2onclick="if(this.className=='k2'){this.className='k1';}else {this.className='k2'};"> А здесь  сначала все по-другому. Перенесенный на вторую строку текст расположен под текстом, а под картинкой пусто. Возможно, Вам придется задать отступ слева, чтобы картинка не "уходила" влево за экран или левый объект.</LI>

</ul>

<ul>

<li style="list-style-image:url(copyr.gif)"

    onmouseover= "this.style.listStyleImage='url(circle.gif)'"

    onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

Здесь изменяется маркер при наведении мышкой.</li>

<li style="list-style-image:url(copyr.gif)"

    onmouseover="this.style.listStyleImage='url(circle.gif)'"

    onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

    И здесь.</li>

<li style="list-style-image:url(copyr.gif)"

    onmouseover="this.style.listStyleImage='url(circle.gif)'"

    onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

И здесь.</li>

</ul>

В примере продемонстрировано применение стиля у абзаца, динамическое (по щелчку) изменение класса для пунктов первого списка и изменение картинки-маркера пункта списка при наведении и при уходе мышки с пункта списка.

Содержимое тэга

СвойствоinnerHTML содержит все, что вложено в заданный объект, то есть весь текст и тэги. СвойствоouterHTML содержит все, что вложено в заданныйHTML объект, включая охватывающий тэг. СвойствоinnerHTML используется в технологииAjax. С его помощью обновляется часть содержимого страницы.

Если Вы собираетесь изменять стиль объекта или другие его атрибуты, то Вам потребуется изменить свойствоouterHTML. Можно совсем избавиться от объекта, задав оператор присваивания объект.outerHTML="". К сожалению, свойствоouterHTML не всегда корректно работает.

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

Пример с использованиемinnerText рассмотрен при изучении конструкцииswitch.

Видимость

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

Свойство стиляvisibility позволяет сделать объект видимым или невидимым. Невидимый объект может занимать или не занимать место на экране. К сожалению, в разных версиях браузеров результат может быть разным. ВInternetExplorer 6 при изменении видимости с помощью свойстваvisibility  место под объект остается занятым, т.е. остается пустое поле. Если же вы хотите добиться эффекта «раздвигания текста», то используйте свойствоdisplay. Это менее удобное свойство, так как для указания невидимости достаточно указатьdisplay:none, а для указания видимости (см.HTML-Reference), требуется указать тип объекта, а значит, его надо знать.

<div id=dd1 style="font-size:40; visibility:visible"

  onclick="this.style.visibility='hidden'" title="Щелкните – исчезну!">

Из сумерек видением ко сну вдруг выйдет девочка, на вид - четыре года.

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div id=dd2 style="font-size:40; display:block"

  onclick="this.style.display='none'" title="Щелкните – исчезну совсем!">

И как пловец испытывает воду, девчушка валенками пробует весну...

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div onclick="dd1.style.visibility='visible'">Появится первый</div>

<div onclick="dd2.style.display='block'">Появится второй блоком</div>

<divonclick="dd2.style.display='inline'">Появится второй по-другому – потоком </div>

Смещение расположения объекта на экране

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

</style>

В примере показано наложение двух теговdiv и двух теговp с целью достижения объемного эффекта при помощи отрицательного значения свойства стиляmargin-left иmargin-top.

Наложение объектов на экране

Свойство стилейz-index задает порядок позиционированных блоков, то есть тех блоков, к которым был применен атрибутposition, причем расположение может быть задано абсолютное (absolute), то есть относительно начала документа, либо относительное, то есть относительно предыдущего тэга (relative).

Если задано абсолютное положение, то атрибутыleft иtop  задают отступы от левого верхнего угла документа.

Объекты с абсолютным положением показываются поверх всех других объектов страницы. Если есть несколько объектов с абсолютным положением, то они накладываются друг на друга по мере появления их описания в тексте (похоже на образование нескольких слоев документа).

Если задано относительное положение, то атрибутыleft иtop  задают отступы от предыдущего тэга, считающегося родительским. Значения атрибутовleft иtop может быть отрицательным.

ВIE 5.x при относительном расположении объект может быть реально перемещен на другое место – с помощью атрибутовleft иtop. Но то место, где он был бы без задания атрибутовleft иtop остается не занятым (т.е. пустым)! Обратите внимание на то, что при отступах, задаваемыхmargin-top иmargin-left, место не пропадает!

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

div      {width:200; height:200; font-size:24; border:solid #ffaa77 4;padding:7}

div.d1 {background-color: #FC0 }

div.d2 {background-color: #CF0 }

div.d3 {background-color: #0FC }

div.d4 {background-color: #0CF }

</style>

<script language="JavaScript">

</script>

</head>

<body>

<div class="d1" style="z-index:0;" onclick="this.style.zIndex=0"> Листва всё суше, тоньше,зряшней. А небо лишь слегка поблёкло.</div>

<div class="d2"  style="z-index:-1;position:relative; margin-top:-180" onclick="this.style.zIndex=0">И свет за окнами прозрачный, как будто стали тоньше стекла.</div>

<div class="d3"  style="z-index:-2;position:relative; margin-top:-160" onclick="this.style.zIndex=0">И вдомегулко,зябко,пусто. Извуклюбойпродолженэхом.</div>

<div class="d4"  style="z-index:-3;position:relative; margin-top:-140" onclick="this.style.zIndex=0">Анадушетакоечувство, как-будто близкий кто уехал...</div>

Обратите внимание на следующие особенности: заданы общие характеристики стиля для всех блоков, а особенные заданы в классах или непосредственно в теге. В стиле дляdiv используется обобщенные имена атрибутов:border иpadding.

Некоторые приемы работы со строками

ВJscript тип строка – это объектный тип. У этого объекта есть свойства и методы. Посмотрите в справочнике поJscript свойства и методыStringObject.

Для нас сейчас представляют особый интерес некоторые из них. Свойствоlength – количество символов в строке. Методsubstr (начало, сколько), примененный к строковому объекту возвращает подстроку, вырезанную, начиная с позиции "начало" (счет идет от 0), длиной "сколько" символов. Методsubstring (начало, конец) тоже возвращает подстроку, но его параметры задают две позиции, причем не регламентируется направление вырезки, поэтомуs.substring(0,3) иs.substring(3,0) вернут одинаковый результат!

Статус строка

window.status - строка статуса, то есть строка внизу экрана. В эту строку можно помещать текст. Достаточно удобно её использовать в качестве окна отладочной печати. В отличие от alert запись в статус строку не перемещает курсор, не генерирует событий (щелчок мышкой).

Изменение показываемого в окне файла

Свойство location  у объекта window  возвращает объект location, в котором свойства и методы задают характеристики показываемого в окне файла. Найдите в справочнике свойство href, содержащее имя файла, и метод replace, применяемый для изменения показываемого файла.

Пример:

<Ponclick ="self.location.replace('http://www.pari/')">Хочу увидеть Париж!</P>




Похожие работы, которые могут быть Вам интерестны.

1. Язык разметки HTML: идея, кроссплатформенность

2. Разработка каталога продукции с применением технологий My SQL, HTML и PHP

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

4. Заключение, изменение и расторжение договоров

5. ИЗМЕНЕНИЕ СИНТЕЗА АТФ МИТОХОНДРИЯМИ ПРИ ИЗМЕНЕНИИ РH

6. Изменение демографической ситуации в России и г. Северодвинске

7. Изменение размера картинки по щелчку мышью

8. ИЗМЕНЕНИЕ И РАСТОРЖЕНИЕ ДОГОВОРОВ В ГРАЖДАНСКОМ ПРАВЕ

9. Изменение территории России в XVІІІ – начале XX вв.

10. ИЗМЕНЕНИЕ ОКИСЛИТЕЛЬНОГО ФОСФОРИЛИРОВАНИЯ МИТОХОНДРИЙ ПРИ СТРЕССЕ