Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
БИЛЕТ 1(не весь)
Введение в сценарии
5.2. Сценарии выполняемые клиентом
В предыдущей главе мы рассмотрели принципы разработки и назначение сценариев выполняемых на Web-сервере, но есть еще один тип сценариев - это сценарии выполняемые клиентом т.е. Web-броузером.
Итак, сценарии выполняемые клиентом это - фрагмент кода интерпретируемого языка программирования (поддерживаемого броузером), который внедряется в HTML-документ и выполняется Web-броузером в процессе работы пользователя с документом.
Для чего они предназначены, как и на чем разрабатываются и используются в HTML-документах ?
Назначение сценариев выполняемых клиентом
Разработка интерактивных HTML-документов стандарта DHTML (Dinamic HTML), элементы оформления и даже содержание которых, меняются в зависимости от действий пользователя (без обмена данными с сервером !);
Разработка документов содержащих анимационные элементы (и даже Web-страниц с играми);
Настройка внешнего вида документа под параметры конкретного рабочего места клиента (определение типа и версии броузера и экранных параметров);
Предварительная обработка данных из форм перед их отправкой на сервер (обидно - заполнить большую форму, потом ожидать завершения транзакции с БД, а в результате получить ответ сценария сервера типа - НЕВЕРНАЯ ДАТА);
Средства разработки сценариев
При разработке сценариев интерактивного управления используются как правило два интерпретируемых языка программирования:
JavaScript - язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Netscape на основе языка Java (Java - разработка фирмы Sun Microsystems). Поддерживается всеми современными броузерами.
VBScript - язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Microsoft на основе языка VisualBasic. Поддерживается броузером Internet Explorer.
Вывод очевиден - для лучшей совместимости с броузерами используем JavaScript.
Для разработки сценариев используются методы объектно-ориентированного программирования, управляемого событиями. Данный метод заключается в сопоставлении различным объектами HTML-документа и Web-броузера, сценариев (функций) - обработчиков различных событий.
Внедрение сценария в документ
Внедрение сценария в документ это "штатная" возможность HTML. Рассмотрим способы и правила внедрения:
Для начала необходимо задать язык разработки сценариев для нашего HTML-документа. Это делается при помощи мета-записи Content-Script-Type (См. раздел 2.3.) в заголовке нашего документа. Например вот так:
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
или так:
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/vbscript">
Мы можем и не определять тип сценариев документа данным способом, но гораздо проще задать его один раз в заголовке, чем при каждом использовании сценариев.
Как я уже обмолвился ранее, внедрение сценария в документ осуществляется "штатными" средствами HTML, рассмотрим как это сделать.
Первый способ это - использование тега HTML <SCRIPT>. Возможно использование данного тега в формате контейнера для внедрения фрагмента кода в документ и в форме одиночного тега для связывания файла содержащего сценарии с документом.
Для внедрения используется контейнерный формат записи тега, с атрибутом TYPE, задающим тип сценария:
<SCRIPT TYPE="text/javascript">
/* код сценария на Javascript */
document.write("Hi !!!");
</SCRIPT>
Для связывания документа с внешним файлом сценария, используется одиночный формат записи тега, с атрибутом SRC, задающим URL файла сценария:
<SCRIPT SRC="script.js" TYPE="text/javascript">
<SCRIPT SRC="script.vbs" TYPE="text/vbscript">
Вторым способом использования сценариев в документе является назначение сценариев-обработчиков событий различным элементам HTML-документа. Это осущетвляется при помощи специальных атрибутов-событий, которые могут быть использованы для большинства тегов HTML. Одному элементу документа можно назначить несколько обработчиков, по одному для каждого типа порождаемых им событий. Рассмотрим эти атрибуты подробнее:OnLoad Броузер заканчивает открытие документа HTML
OnUnload Броузер выгружает документ HTML
OnClick Пользователь щелкнул мышью по элементу
OnDblClick Пользователь дважды щелкнул мышью по элементу
OnMouseDown Пользователь нажимает кнопку мыши
OnMouseOver Пользователь перемещает мышь поверх элемента
OnMouseMove Пользователь перемещает мышь поверх элемента
OnMouseOut Пользователь перемещает мышь, выходя из элемента
OnFocus Элемент получает фокус ввода
OnBlur Элемент теряет фокус ввода
OnKeyPress Пользователь нажимает и отпускает клавишу
OnKeyDown Пользователь нажимает клавишу над элементом
OnKeyUp Пользователь отпускает клавишу над элементом
OnSubmit Данные из формы переданы Web-серверу
OnReset Форма очищена
OnSelect Пользователь выбирает текст в текстовом поле
OnChange Потеря фокуса ввода элементом после изменения его значения
При использовании данных атрибутов в тегах HTML, следует понимать, что не каждый элемент документа может породить определенное событие. Например в следующем примере демонстрируется правильное и неправильное назначение cценария обработчика:
<INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Нажми меня" onClick="btnClick();"> - в данном случае при нажатии кнопки, происходит выполнение функции btnClick;
<A HREF="help.htm" onReset="lnkClick();">Помощь</A> - в данном случае вы не дождетесь выполнения функции lnkClick, поскольку элемент документа - ссылка, никогда не породит событие onReset;
Как внедрять сценарии в документы мы разобрали, но не менее важный вопрос (по жизни) КУДА, вернее в какое место документа ?
От того где мы разместим сценарий зависит схема выполнение его броузером. Со сценариями обработчиками событий все должно быть ясно: элемент документа порождает событие и броузер выполняет сопоставленный событию сценарий-обработчик, но как быть со сценариями расположенными в других структурных разделах HTML-документа ?
Правила таковы:
Код сценария <SCRIPT>...</SCRIPT> в теле HTML-документа. В данном случае сценарий выполняется броузером при загрузке документа, и результаты его работы (если они есть) отображаются в окне броузера при открытии документа (надеюсь вы понимаете что, функции помещенные в тело HTML-документа не выполняются, если не указан их вызов);
Код сценария <SCRIPT>...</SCRIPT> в заголовке HTML-документа. В данном случае сценарии не выполняются броузером при загрузке документа. В заголовке обычно размещают различные служебные функции которые вызываются при обработки событий и из других сценариев размещенных в теле документа;
Приведу пример:
<HTML>
<HEAD>
<TITLE>Куда внедрить сценарий имеет значение !</TITLE>
<SCRIPT TYPE="text/javascript">
/* код функции Javascript */
function HelloUser(txtName) {
alert("Привет пользователю " + txtName);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR ="SILVER", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<SCRIPT TYPE="text/javascript">
/* код исполняемого при загрузке сценария */
document.write("<H2>Вежливая страница</H2>");
</SCRIPT>
<FORM NAME="form1">
<p>Введите имя: <INPUT TYPE="TEXT" LENGTH="25" NAME="usnam">
<!-- а этой кнопке назначен обработчик события -->
<p><INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Привет документу"
onClick="HelloUser(document.form1.usnam.value);">
</FORM>
</BODY>
</HTML>
В вышеприведенном примере (рекомендую скопировать, сохранить как файл-htm и проверить), продемонстрированы все три варианта размещения сценариев в HTML-документе: в заголовке размещаются служебные функции, в теле документа размещается исполняемый при загрузке код, а элементу формы - кнопка, назначен обработчик события - onClick. Обратите внимание на комментарии в документе, в коде сценария используется синтаксис языка разработки сценария, а в документе синтаксис HTML.
Старые броузеры и сценарии
Попытка просмотра документа содержащего сценарии в броузере не поддерживающем данную возможность вызывает ошибку. Для исключения данной ситуации разработчики применяют один хитрый трюк, который заключается в использовании одной особенности Web-броузеров - пропускать неизвестные теги HTML.
Для скрытия сценария данным способом применяется комбинация комментариев HTML и комментариев языка разработки сценария. Старый броузер обнаружит неизвестный тег <SCRIPT>, пропустит его и обнаружит тег HTML - начало комментария, а далее исключит из обработки фрагмент документа до тега HTML, закрывающего комментарий. Современные броузеры "обучены" данному трюку и не обратят на него внимания, но перед закрывающим тегом комментария HTML надо поставить комментарий языка разработки сценария, для исключения данного фрагмента из интерпретации броузером.
Примеры:
<SCRIPT TYPE="text/javascript">
<!--
alert("Трам Пам Пам");
// -->
</SCRIPT>
<SCRIPT TYPE="text/vbscript">
<!--
Alert "Трам Пам Пам"
' -->
</SCRIPT>
Примеры и рекомендации по использованию сценариев
В начале данного раздела мы рассмотрели основную область применения сценариев в документах, теперь посмотрим как это реализуется на практике.
Пример 10. Определение Web-броузера клиента. [просмотр примера в окне]
В основу броузеров MSIE и NN положены разные объектные модели документа - DOM (Document Object Model) и принципы обработки событий (MSIE-метод всплытия, NN-метод перехвата). Без учета данных особенностей невозможна разработка универсальных сценариев для Web-страниц:
<HTML>
<HEAD>
<TITLE>Сведени о броузере</TITLE>
</HEAD>
<BODY BGCOLOR ="SILVER", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<h1>Для навигации в Web вы используете:</h1>
<hr>
<ul>
<SCRIPT TYPE="text/javascript">
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 элементов документа (См. раздел 3.6.), необходимо знать правила преобразования имени свойства CSS к имени свойства JavaScript: из имени свойства удаляются все тире, а каждый символ имени свойства после тире заменяется на прописной символ. Например: border-color преобразуется в borderColor, а font-size в fontSize;
<HTML>
<HEAD>
<TITLE>Элементы DHTML в документах</TITLE>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<SCRIPT TYPE="text/javascript">
// определение броузера
function isMSIE() {
if (navigator.appName == "Microsoft Internet Explorer") return true;
else return false;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>Демонстрация элементов DHTML в документе</H1>
<HR>
<H2>Динамические слои</H2>
<p>Управляя свойствами слоев из сценариев можно реализовать массу динамических элементов (<i>раскрывающиеся меню и списки, изменющиеся рисунки, дополнительные поля форм и т.д.</i>):
<p>Например вот так:
<FORM NAME="family">
<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>
<IMG ID="wife" SRC="girl1.gif" BORDER=0 ALT="Лицо" STYLE="position:absolute; top:260; left:150">
<IMG ID="husb" SRC="boy2.gif" BORDER=0 ALT="Морда" STYLE="position:absolute; top:260; left:150">
<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="../files/205/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().
<HTML>
<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>
В JavaScript существует несколько основных типов данных.
Типы данных
Число number: var n = 123;
n = 12.345;
Единый тип число используется как для целых, так и для дробных чисел.
Существуют специальные числовые значения Infinity (бесконечность) и NaN (ошибка вычислений). Они также принадлежат типу «число».
Например, бесконечность Infinity получается при делении на ноль:
1 alert( 1 / 0 ); // Infinity
Ошибка вычислений NaN будет результатом некорректной математической операции, например:
1 alert( "нечисло" * 2 ); // NaN, ошибка
Строка string: var str = "Мама мыла раму";
str = 'Одинарные кавычки тоже подойдут';
В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие.
Тип символ не существует, есть только строка
В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это char. В JavaScript есть только тип «строка» string. Что, надо сказать, вполне удобно..
Булевый (логический) тип boolean. У него всего два значения - true (истина) и false (ложь).
Как правило, такой тип используется для хранения значения типа да/нет, например: var checked = true; // поле формы помечено галочкой
checked = false; // поле формы не содержит галочки
О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы.
null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null: var age = null;
В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».
В частности, код выше говорит о том, что возраст age неизвестен.
undefined — специальное значение, которое, как и null, образует свой собственный тип. Оно имеет смысл «значение не присвоено».
Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:
1 var u;
2 alert(u); // выведет "undefined"
Можно присвоить undefined и в явном виде, хотя это делается редко: var x = 123;
x = undefined;
В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.
Объекты object.
Первые 5 типов называют «примитивными».
Особняком стоит шестой тип: «объекты». К нему относятся, например, даты, он используется для коллекций данных и для многого другого. Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов.
Итого
Есть 5 «примитивных» типов: number, string, boolean, null, undefined и 6-й тип — объекты object
Задание 4
(Изменение цвета фона при нажатии на кнопку)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html-страничка с выбором названия цвета</title>
<meta name="keywords" content="HTML страница, уроки, теги" />
<meta name="description" content="Уроки по созданию JavaScript" />
<style type="text/css">
body {
background: white; /* Цвет фона */
color: black; /* Цвет текста */
}
</style>
<script type="text/javascript">
function change_color(){
var select = document.getElementById('paint');
document.body.style.background = select.options[select.selectedIndex].value;
}
</script>
</head>
<body>
<form>
<p><font color="blue">Выбирите цвет фона страницы</font></p>
<select name="paint" id="paint">
<option value="yellow"> Желтый</option>
<option value="red"> Красный</option>
<option value="green"> Зеленый</option>
</select>
<p><input type="button" onclick="change_color()" value="Изменить цвет фона"/></p>
</form>
</body>
</html>