Примеры и рекомендации по использованию сценариев

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

Пример 10. Определение Web-броузера клиента.

В основу броузеров MSIE и NN положены разные объектные модели документа - DOM (Document Object Model) и принципы обработки событий (MSIE-метод всплытия, NN-метод перехвата). Без учета данных особенностей невозможна разработка универсальных сценариев для Web-страниц:

<HTML>

<HEAD>

<TITLE>Сведени о броузере</TITLE>

</HEAD>

<h1>Для навигации в Web вы используете:</h1>

<hr>

<ul>

document.write("<li>Имя программы: <b>"+navigator.appName+"</b>");

document.write("<li>Версия: <b>"+navigator.appVersion+"</b>");

document.write("<li>Пользовательский агент: <b>"+navigator.userAgent+"</b>");

document.write("<li>Платформа: <b>"+navigator.platform+"</b>");

</SCRIPT>

</ul>

<hr>

</BODY>

</HTML>

Пример 11. Элементы DHTML в документах.

Документы DHTML содержат сценарии, позволяющие изменять свойства CSS (видимость, оформление и даже содержание) элементов документа, в зависимости от действий пользователя. При использовании в сценариях свойств CSS элементов документа необходимо знать правила преобразования имени свойства CSS к имени свойства JavaScript: из имени свойства удаляются все тире, а каждый символ имени свойства после тире заменяется на прописной символ. Например: border-color преобразуется в borderColor, а font-size в fontSize;

<HTML>

<HEAD>

<TITLE>Элементы DHTML в документах</TITLE>

// определение броузера

function isMSIE() {

if (navigator.appName == "Microsoft Internet Explorer") return true;

else return false;

}

</SCRIPT>

</HEAD>

<H1 ALIGN=CENTER>Демонстрация элементов DHTML в документе</H1>

<HR>

<H2>Динамические слои</H2>

<p>Управляя свойствами слоев из сценариев можно реализовать массу динамических элементов (<i>раскрывающиеся меню и списки, изменющиеся рисунки, дополнительные поля форм и т.д.</i>):

<p>Например вот так:

<p><b>На кого глядеть будем ?</b>

<p><INPUT TYPE="radio" NAME="HorW" VALUE="H" CHECKED

onClick = "if ( isMSIE() ) document.all.husb.style.visibility = '';

else document.layer[1].visibility = '';"> Я

<p><INPUT TYPE="radio" NAME="HorW" VALUE="W"

onClick = "if ( isMSIE() ) document.all.husb.style.visibility = 'hidden';

else document.layer[1].visibility='hidden';"> Жена

</FORM>

<HR>

<H2>Динамические ссылки</H2>

<p>Обрабатывая различные события можно динамически изменять стиль ссылок (<i>проще это реализовать через псевдоклассы в таблице стилей</i>):

<p><b>В MSIE можно слелать так: </b> Заходи сюда - не пожалеешь

<A href="#"

onMouseOver = "if ( isMSIE() ) this.style.textTransform='uppercase';"

onMouseOut = "if ( isMSIE() ) this.style.textTransform='none';"

onClick = "alert('Извиняйте, это лишь пример !');">Горячо !!!</A>

<p><b>Или даже вот так : </b> Заходи сюда - не пожалеешь

<A href="#"

onMouseOver = "if ( isMSIE() ) this.innerText='НУ ОЧЕНЬ УЖ ГОРЯЧО !';"

onMouseOut = "if ( isMSIE() ) this.innerText='Горячо !!!';"

onClick = "alert('Извиняйте, это лишь пример !');">Горячо !!!</A>

<p><b>Графические ссылки можно оформить так: </b> Заходи сюда - не пожалеешь

<A href="#"><IMG src="hot.gif" align="middle" border=0

onMouseOver = "this.src='ahot.gif';"

onMouseOut = "this.src='hot.gif';"

onClick = "alert('Извиняйте, это лишь пример !');"></A>

<HR>

<H2>Динамические подсказки</H2>

<p>В статусной строке броузера можно выводить подсказки об выделенных в текущий момент элементах документа:

<p><b>Например описание ссылки: </b>

<a href="#"

onMouseOver = "window.status='Переход на узел WWW.SITE.RU где ...'; return true;"

onMouseOut = "window.status=''; return true;">Ссылка с подсказкой</a>

<p><b>Или описание рисунка: </b>

<IMG SRC="boy2.gif" BORDER=0 ALIGN="MIDDLE"

onMouseOver = "window.status='Раньше я выглдел гораздо лучше !'; return true;"

onMouseOut = "window.status=''; return true;">

<HR>

</BODY>

</HTML>

Пример 12. Элементы анимации в документах.

Анимация основана на изменении средствами сценария, таких свойств CSS элементов, как видимость, размер и положение элемента (как правило слоев документа).

<HTML>

<HEAD>

<TITLE>Анимация в документах !</TITLE>

<SCRIPT TYPE="text/javascript">

var pos1 = 0;

var pos2 = 0;

var speed1 = Math.floor(Math.random() * 10)+25;

var speed2 = Math.floor(Math.random() * 10)+25;

function ctrlRun() {

pos1 = (pos1 > 600) ? 0 : pos1 + speed1;

pos2 = (pos2 > 600) ? 0 : pos2 + speed2;

switch(navigator.appName) {

case "Netscape": // броузер NN

document.layers[0].left = pos1;

document.layers[1].left = pos2;

window.setTimeout("ctrlRun()", 250);

break;

case "Microsoft Internet Explorer": // броузер MSIE

document.all.men.style.left = pos1;

document.all.wom.style.left = pos2;

window.setTimeout("ctrlRun()", 250);

break;

default:

window.alert("На чем вы работаете ?");

}

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="BLACK", TEXT="WHITE", LINK="WHITE", ALINK="RED", VLINK="SILVER">

<h2>Кто быстрее: бегун или бегунья ?</h2>

<IMG ID="men" SRC="people1.gif" BORDER=0 STYLE="position:absolute; top:150; left:0">

<IMG ID="wom" SRC="people2.gif" BORDER=0 STYLE="position:absolute; top:300; left:0">

<FORM NAME="form1">

<INPUT TYPE="BUTTON" NAME="btnStep" VALUE="Старт-Бегунов" onClick="ctrlRun();">

</FORM>

</BODY>
</HTML>
Пример 13. Обработка данных из форм.

Предварительная обработка данных из форм, позволяет сократить кол-во обменов данными с сервером, за счет выявления типовых ошибок пользователей, на этапе заполнения формы (неверные даты, пустые поля и др.).

<HTML>

<HEAD>

<TITLE>Проверка данных в формах</TITLE>

<SCRIPT TYPE="text/javascript">

function valid() {
if (document.form1.fio.value.length < 5) {
window.alert("Введите имя !");

return false;

}

if (document.form1.tel.value.length < 3) {

window.alert("Введите телефон !");

return false;

}

if (document.form1.edu.value.length < 10) {

window.alert("Заполните сведения об образовании !");

return false;

}

return true;

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<H1 ALIGN=CENTER>Заполните пожалуйста данные</H1>

<HR>

<FORM NAME="form1" ACTION="mailto:lst@user.ru" onSubmit = "return valid();">

<table width=100% align=center>

<col width=35% align=left valign=top>

<col align=left valign=top>

<tr>

<th>Введите ваше ФИО:

<td>

<INPUT TYPE="text" NAME="fio" SIZE=30 MAXLENGTH=40>

<tr>

<th>Введите телефон:

<td>

<INPUT TYPE="text" NAME="tel" SIZE=9 MAXLENGTH=9>

<tr>

<th>Сведения об образовании:

<td>

<TEXTAREA NAME="edu" TITLE="Образование" ROWS=5 COLS=30>

</TEXTAREA>

</table>

<p align=center><INPUT TYPE="reset" NAME="but2" VALUE="Очистить форму">

<INPUT TYPE="submit" NAME="but3" VALUE="Отправка данных">

</FORM>

<HR>
</BODY>
</HTML>

Пример 14. Управление окнами броузера.

Для управления окнами броузера средствами сценария используются методы JavaScript: window.open() и window.close().

<HEAD>
<TITLE>Работа с окнами в JavaScript</TITLE>

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

</HEAD> <BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<H1 ALIGN=CENTER>Управление окнами броузера из сценария</H1>

<HR>

<FORM NAME="form1">

<p><INPUT TYPE="button" NAME="open" VALUE="Открыть окно"

onClick="newWin=window.open('','newWin','toolbar=no, status=no, width=250, height=250');">

<p><INPUT TYPE="button" NAME="close" VALUE="Закрыть окно"

onClick="newWin.close();">

</FORM>

<HR>

<p>Для загрузки данных в созданное окно необходимо передать URL загружаемого ресурса, как первый параметр метода - <b>open</b> (<i>в нашем примере он пустой</i>).

</BODY><HTML>

</HTML>

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

<21 22 23 24 25 2627>

Дата добавления: 2015-04-19; просмотров: 814;