Примеры применения JavaScript:

Язык JavaScript предоставляет средства для решения многих задач в документе HTML без необходимости взаимодействия с сервером.

Новый броузер

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

Основная команда для создания нового окна броузера:
windowVar = window.open("URL", "windowName" [, "windowFeatures"])
Для открытия простого окна с возможностями навигации, ограниченными только использованием гиперссылок:
window.open("URL", "windowName", "toolbar=no")
// Замечание: установка значения для одной из опций приводит к автоматическому присваиванию всем неуказанным опциям значения false.
Для открытия окна без строки меню и панели управления:
window.open("URL", "windowName", toolbar=yes,location=yes,directories=no,status=yes, menubar=no,scrollbars=yes, resizable=yes")


Создание Web-узла с пользовательской навигациeй

Одной из мощнейших возможностей языка JavaScript является его способность управлять функциональностью броузера. Это полезно при создании демонстрационных программ. Создание такого сайта требует точки входа, которая сгенерирует оставшуюся часть приложения.
<FORM>
<INPUT TYPE="button" NANE=-"tour" VALUE=-"Start Tour "onClick="window.open('tourframes.html', 'tourWindow', 'toolbar=no')">
</FORM>

Файл tourframes.html создает кадры, содержащие начальную страницу и панель навигации.
<FRAMESET COLS=-" %10, %90 ">
<FRAME SRC-"navbar.html'>
<FRAME SRC="tourstart.html" NAME="contentWin">
</FRAMESET>

Файл navBar содержит простой набор кнопок для навигации, управляемых с помощью обработчиков событий onClick
<FORM NANE = "navBar" >
<INPUT TYPE="button" NAME="back" VALUE="Back "onClick="contentWin.document.history.back()">
<INPUT TYPE-"button" NAME="forw" VALUE="Forward" onClick="contentWin.document.history.forward()">
<INPUT TYPE="button" NAME="home" VALUE-"Home" onClick="contentWin.document.history.go(0)">
<INPUT TYPE="button" NAME="quit" VALUE="Quit the Tour" onClick="parent.close()">
</FORM>

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


Самовосстанавливающиеся сообщения в строке состояния

Иногда раздражающим побочным эффектом применения свойства window. status является его навязчивость. Будучи однажды установлено, это свойство не меняется до нового присвоения значения свойству window.status.

Вы можете перекрыть этот атрибут с помощью метода setTimeout:

timeDelay = 1500 //1.5 seconds
function eraseStatus () {
window.status = "" //Это можно также установить как сообщение 'по умолчанию'.

function setStatus (statusText) {
window.status = statusText;
setTimeout("eraseStatus()",timeDelay)
}

Использование этих двух функций достигается простым включением функции setStatus в обработчик события onMouseOver.
<А HREF="URL" onMouseOver="setStatus('Ваше сообщение.'); return truе"> linkText</A>


Платформозависимый символ перехода на новую cтроку

Какой вариант символа перехода на новую строку применять, зависит от используемой на клиентском компьютере платформы. Windows требует наличия символа \r в дополнению к символу \n, требуемому для всех остальных платформ. Так как невозможно предвидеть, с какой платформы произойдет обращение к вашей странице, простая функция может гарантировать, что будет использован нужный вариант.

function brk() {
if (navigator.appVersion.lastIndex0f('Win') != - 1 )
return "\r\n"
else
return "\n"
}


Проверка правильности ввода данных в форму

Проверка пользовательского ввода с помощью сценариев CGI занимает много времени. Дело не только в увеличении сетевогo трафика, но и в длиnельности и сложности написания самих сценариев CGI.
Включение проверки вводимых данных с помощью JavaScript прямо в страницу HTML увеличивает скорость и локализует процесс у конечного пользователя. Это создает дополнительную защиту от посылки неверных данных, способных нарушить функционирование сервера.
Eсть несколько способов организовать проверку ввода, но главным принципом является добавление функции JavaScript к кнопке Submit. Определение кнопки Submi в HTML выглядит так:

<INPUT TYPE="BUTTON NAME="SUBMIT VALUE="SUBMIT" оnClick="checkInformation(this.form)">

Функция checkInformation служит для проверки того, что введенная информация соответствует требованиям сценария CGI. Ecли это не так, должно по крайней мере произойти возвращение к форме без отправки данных на сервер либо передача фокуса элементу формы с ошибочными данными. Ecли же информация выдержала проверку, то функция должна осуществить передачу данных.

function, checkInformation (form) {
...код проверки...;
if (validationPassed) {
form.submit(); }
return;
}


Создание массивов

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

Вот функция для создания нового массива и инициализации элементов. Этот способ хорош для маленьких массивов, но неуклюж для больших:

function arrayCreator() {
this.length = initArray.arguments.length;
//подсчет количества переданных функции аргументов
foг (var I=0; I this[I+1] = userArray.arguments[I]
//заполняет массив новыми значениями
}


Для создания массива используйте следующий синтаксис:
var arrayName = new userArray(argument1 [,argument2] [,argument3] и т. д.])


Генeрация случайного числа (на платформах, отличных от UNIX)

В настоящее время метод random работает только на UNIX версии Netscape. Есть другой способ генерации псевдослучайного числа без использования встроенного метода. Он называется вычисляемое случайное число и обнаруживает свою псевдослучайность в случае неоднократного вычисления за короткий промежуток времени. Для того чтобы обеспечить совместимость для программы на разных платформах, стоит воздержаться от применения встроенного метода random для генерации случайных чисел и вместо него использовать пользовательскую функцию типа нижеприведенной:

function UnixMachine() {
if (navigator.appVersion.lastIndexOf('Unix') != -1 )
return true
else
return false
}
function randomNumber() {
if (UnixMachine()) {
num = Math.random() }
else
num = Math.abs(Math.sin(Date.getTime()));
}
return num;
}


Эта функция генерирует число между 0 и 1, и хорошо работает в приложениях, использующих случайные числа каждые несколько секунд. Если же генерация случайного числа требуется чаще, стоит усложнить алгоритм, например добавив дополнительные вычисления (cos, tan, log) в каждый третий вызов функции.


<<Назад     Содержание>>

Hosted by uCoz