Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Чертёж одиннадцатый Знакомство с Java Script, половина первая




До сих пор средствами HTML мы не могли обеспечить интерактивность, не могли и «оживить» страничку движущимися или изменяющимися элементами. Но, оказывается, это можно сделать, если использовать язык программирования Java Script.

Не претендуя на серьёзное изучение этого языка, мы познакомимся с некоторыми его возможностями, создав несколько шаблонов страничек.

В качестве испытательного полигона возьмём страничку Дуси, точнее, её копию.

1. Создай копию странички dusja.htm, назвав её, например, dusja-proba.htm.

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

c в стилевом файле my_style.css объявляем класс:

.panelka{ border-style:outset;

text-align:center;

}

c там же зададим стиль для заголовка третьего уровня <H3>:

H3{ color:#ff0088;

font-size:130%;

text-align:center;

}

c не забудь подключить стилевой файл к файлу dusja-proba.htm;

c кроме того, подготовь «Дусины фотографии» одинакового размера (в нашем примере 200х250), помести их в папку images и назови dusja1.jpg, dusja2.jpg, dusja3.jpg и dusja4.jpg. Там же создай файл dusja0.jpg, в котором нарисуй обложку фотоальбома.

3. Формируем страничку:

c запиши в файл dusja-proba.htm следующий текст:

<BODY bgcolor=#ffddff text=#880088>

<H2 class=panelka>Наша любимица Дуся</H2>

<P>Однажды осенним дождливым вечером в дверь кто-то

постучал, а точнее, &laquo; поцарапался &raquo; …</P>

<DIV class=panelka><H3>Дусин фотоальбом</H3></DIV>

<P>

<DIV class=panelka style="position:absolute; right:10;

width:300; height:350; padding:50;">

<IMG id=foto src=images/dusja0.jpg width=200

height=250>

</DIV>

<DIV class=panelka id=kn1 onmouseover=sm_foto(1) >

Дуся знакомится с Погромычем</DIV>

<DIV class=panelka id=kn2 onmouseover=sm_foto(2) >

Когда Дуся была маленькой</DIV>

<DIV class=panelka id=kn3 onmouseover=sm_foto(3) >

Как Дуся училась охотиться</DIV>

<DIV class=panelka id=kn4 onmouseover=sm_foto(4) >

Уроки танцев</DIV>

</BODY>

На этот раз полужирным выделено не то, что надо добавить (как это было обычно), а то, что тебе ещё незнакомо.

Прежде всего, это &laquo; и &raquo;. Подобные последовательности (их иногда называют escape-последовательностями) служат для отображения зарезервированных символов, таких, как <, >, &, кавычки, апострофы… Таких последовательностей очень много, поэтому отметим только некоторые:

&laquo; и &raquo; – левая и правая кавычки-ёлочки;

&quot; – прямые кавычки;

&lt; и &gt; – знаки < и >;

&nbsp; – неразрывный пробел.

Но это всё не относится непосредственно к Java Script. А вот что относится, так это новое назначение атрибута id. Теперь с его помощью мы именуем блок. Для чего? Мы собираемся изменять значения некоторых атрибутов фотографии и панелек с названиями фотографий и, чтобы иметь возможность к ним обращаться, объявляем для них идентификаторы.

Кроме того, атрибутом onmouseover мы сообщили, какую js-функцию надо запустить при возникновении указанного события onmouseover (то есть при наведении указателя мыши на объект).

Понятие события является ключевым в объектно-ориентированных языках, таких, как Delphi, Visual Basic, Action Script, Visual C++ и, конечно же, Java Script.

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

В приложении 4 приведён список основных событий, который тебе может понадобиться.

c загрузи страничку в браузер и убедись, что она выглядит примерно так:

c в разделе <HEAD> создадим функцию Java Script, которая будет изменять фотографию:

<HEAD>

<TITLE>Наша любимица Дуся</TITLE>

<LINK rel=stylesheet type=text/css href=my_style.css>

<SCRIPT type=text/javascript>

<!--

function sm_foto(num)

{

foto.src="images/dusja"+num+".jpg";

}

//-->

</SCRIPT>

</HEAD>

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

А теперь разберёмся, что же мы натворили. Тег <SCRIPT> содержит описание функций – скриптов. Его атрибут type сообщает, что функции написаны на языке Java Script. Иногда вместо атрибута type записывают практически равноценный атрибут language=JavaScript.

Внутри тега <SCRIPT> располагаются одна или несколько собственно функций по следующему правилу: после слова function записывается её имя (в нашем случае sm_foto) со списком параметров в круглых скобках (мы передаём нашей функции один параметр num – номер выбранной фотографии). Затем в фигурных скобках следуют операторы. Оператор foto.src="images/dusja"+num+".jpg"; указывает, что у объекта с именем foto атрибуту src надо задать значение, записанное справа от знака =, то есть для первой фотографии получится images/dusja1.jpg, для второй – images/dusja2.jpg, и так далее.

И ещё один момент требует пояснения. Весь код JS взят в скобки комментариев HTML <!-- и -->. Зачем? Дело в том, что некоторые браузеры не распознают JS или у них просто отключена функция обработки скриптов. Если не закомментарить описание функций, такой браузер просто отобразит их текст, что вряд ли доставит удовольствие посетителю странички.

4. Теперь обратим внимание на дизайн странички. Вряд ли тебе понравилось, что панельки с названиями фото растянулись на всю ширину экрана. Напрямую изменить их ширину нельзя, потребуется задать для каждой панельки стиль. Но мы поступим иначе – поместим все панельки внутрь контейнера <FIELDSET>, который просто охватывает своё содержимое в рамку:

<FIELDSET style="width:350;">

<LEGEND><H3>Выбери фотографию</H3></LEGEND>

<DIV class=panelka id=kn1 onmouseover=sm_foto(1)>

Дуся знакомится с Погромычем</DIV>

<DIV class=panelka id=kn2 onmouseover=sm_foto(2)>

Когда Дуся была маленькой</DIV>

<DIV class=panelka id=kn3 onmouseover=sm_foto(3)>

Как Дуся училась охотиться</DIV>

<DIV class=panelka id=kn4 onmouseover=sm_foto(4)>

Уроки танцев</DIV>

</FIELDSET>

Тегом <LEGEND> задаётся надпись в рамке. У него есть атрибут align, который тебе хорошо знаком.

5. Страничка выглядит довольно привлекательно, но, всё-таки, мы на этом не остановимся. Сделаем так, чтобы при выборе какой-либо фотографии её панелька вдавливалась, создавая впечатление нажатой кнопки. Для этого добавим в функцию sm_foto несколько строк:

function sm_foto(num)

{

foto.src="images/dusja"+num+".jpg";

if (num==1) {kn1.style.borderStyle="inset"}

else {kn1.style.borderStyle="outset"}

if (num==2) {kn2.style.borderStyle="inset"}

else {kn2.style.borderStyle="outset"}

if (num==3) {kn3.style.borderStyle="inset"}

else {kn3.style.borderStyle="outset"}

if (num==4) {kn4.style.borderStyle="inset"}

else {kn4.style.borderStyle="outset"}

}

Здесь мы использовали условный оператор JS:

if (условие) { команды «то» }

else{ команды «иначе» }

и работает он так: если условие истинно, то выполняются команды «то», в противном случае выполняются команды «иначе».

Отметим, что операция сравнения записывается двумя знаками =, то есть запись if (num==1) означает если num равна 1.

Разберёмся подробнее с точечной нотацией, которая сейчас получила большое распространение. Что означает запись kn1.style.borderStyle=”outset”?

kn1 – объект с идентификатором kn1, то есть первая панелька с названием фотографии;

kn1.style – атрибут style объекта kn1;

kn1.style.borderStyle – значение параметра border-style атрибута style объекта kn1;

kn1.style.borderStyle=”outset” – параметру border-style присваивается значение ”outset”.

Небольшое, но очень важное замечание: в отличие от HTML Java Script чувствителен к регистру. Это значит, что, например, имена kn1 и Kn1 – совершенно разные.

Обрати внимание, что свойства объекта записываются немного иначе, чем название соответствующего параметра: параметру border-style соответствует свойство borderStyle (но никак не BorderStyle, borderstyle или Borderstyle). Как пишутся свойства, можно узнать в справочниках. Но ты, скорее всего, не ошибёшься, если уберёшь дефис «-» и следующую букву запишешь в верхнем регистре. Например, z-index и zIndex, font-size и fontSize.

 

6. Ну и, раз уж наши панельки работают как кнопки, изменим вид указателя мыши, когда он находится над панелькой, на «лапку». Для этого к определению стиля panelka достаточно добавить строчку:

.panelka{ border-style:outset;

text-align:center;

cursor:hand;

}

7. Но создавать такие псевдокнопки совсем необязательно. В HTML существуют специальные объекты. Рассмотрим некоторые из них:

c допиши в файл dusja-proba.htm строки:

<FIELDSET style="width:350;">

<LEGEND><H3>Выбери фотографию</H3></LEGEND>

<DIV class=panelka id=kn1 onmouseover=sm_foto(1)>

Дуся знакомится с Погромычем</DIV>

<DIV class=panelka id=kn2 onmouseover=sm_foto(2)>

Когда Дуся была маленькой</DIV>

<DIV class=panelka id=kn3 onmouseover=sm_foto(3)>

Как Дуся училась охотиться</DIV>

<DIV class=panelka id=kn4 onmouseover=sm_foto(4)>

Уроки танцев</DIV>

<FORM id=knop>

<INPUT type=button value="Дуся знакомится с Погромычем"

onclick=sm_foto(1)>

<INPUT type=button value="Когда Дуся была маленькой"

onclick=sm_foto(2)>

<INPUT type=button value="Как Дуся училась охотиться"

onclick=sm_foto(3)>

<INPUT type=button value="Уроки танцев"

onclick=sm_foto(4)>

<FORM>

</FIELDSET>

Внутрь тега <FORM> помещаются теги <INPUT>, задающие управляющие элементы. Атрибут type указывает тип такого элемента. В нашем примере type=button создаёт кнопку. Атрибут value – надпись на кнопке.

Для каждой кнопки указано событие onclick, которое возникает при щелчке по кнопке. А обработчиком этого события будет всё та же функция sm_foto.

К тегу <FORM> можно подключить стиль, например, panelka:

<FORM class=panelka>

и все кнопки зрительно объединятся в группу. Попробуй.

c добавь ещё несколько строк:

<FIELDSET style="width:350;">

<LEGEND><H3>Выбери фотографию</H3></LEGEND>

<DIV class=panelka id=kn1 onmouseover=sm_foto(1)>

Дуся знакомится с Погромычем</DIV>

...

<INPUT type=button value="Уроки танцев"

onclick=sm_foto(4)>

<BR><INPUT type=radio name=rb onclick=sm_foto(1)>




Поделиться с друзьями:


Дата добавления: 2014-11-16; Просмотров: 428; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.033 сек.