Краткие теоретические сведения JavaScript

В документы HTML можно вставлять программы (скрипты), написанные на языках JavaScript и VBScript. В этом практическом пособии мы будем использовать программы на языке JavaScript. Для вставки скрипта в тело HTML-документа понадобится придерживаться следующего синтаксиса:

<html>

<script>

<! —

function hello()

{ alert("Hello from script");}

—>

</script>

<body bgcolor=#AABBCC>

<form name="frml">

<input type="Button" value="Press to activate hello" onClick="hello()">

</form>

</body>

</html>

Тело скрипта представлено одной-единственной функцией heiio(). Данная функция просто выводит сообщение "Hello from script". Вызов функции, как правило, привязывается к событию onciick (щелчок мышью на кнопке или другом элементе). Этот вызов помещен в теге следующим образом:

<input type="Button" value="Press to activate hello" onClick="hello()">

Имеются и другие события:

□               onLoad — загрузка документа;

□               onFocus — получение элементом фокуса (при щелчке мышью);

□               onBiur — потеря элементом фокуса;

□               onSeiect — выделение текста в поле ввода;

□               onOver — перемещение курсора мыши над элементом;

□               onChange — выбор нового элемента выпадающего списка;

□               onExit — выход курсора за границы элемента и др.

Синтаксис JavaScript аналогичен синтаксису языка С. Скрипт ограничивается тегами <script> … </script>. Тело скрипта записывается как комментарий — начало комментария открывает тег <! — , завершение комментария — тег —> . Если теги комментария убрать, то скрипт будет выполняться немедленно при загрузке документа. Скрипт, помещенный в комментарий, выполняется по событию. В нашем примере таким событием является onciick (щелчок мышью на кнопке). Получение значений элементов формы выполняется по ссылкам вида:

document.имя_формы.имя_элемента.value

Наоборот, присваивание значения элементу выполняется по следующему шаблону:

document.имя формы.имя элемента.value=3Ha4eHne

В теле скрипта записывают, вообще говоря, несколько функций, каждая из которых может вызвать любую другую. Функциям, как правило, передают аргументы. В JavaScript нет необходимости указывать типы переменных. Они определяются из контекста. Переменные, объявленные до объявления функций, являются глобальными. Такие переменные попадают в область видимости каждой функции. Переменные, объявленные внутри какой-либо функции, являются локальными. Значения таких переменных доступны только в пределах той функции, в которой данные переменные объявлены. Рассмотрим пример, в котором на форме будут располагаться два списка типа select. В одном из них перечисляются цены товаров, во втором — их количества. Пользователь осуществляет выбор цены товара щелчком мыши, выбранная цена умножается на соответствующее количество, а результат помещается в текстовое поле. Вот пример этого скрипта (листинг 2.1).

Листинг 2.1. Вычисления общей стоимости товара. Скрипт в теле HTML-документа

<HTML>

<body bgcolor=#aabbcc> <!—задание цвета фона шестнадцатеричным числом—>

<script>

<! —

function calc(x,y) // функция calc() находит произведение // своих аргументов

{

document.formal.tf.value=""+x*y;// результат помещается

// в текстовом поле tf

}

—>

</script>

<form name="formal">

<select name=sl onChange="calc(document.formal.sl.options

[document.formal.sl.selectedIndex].value,document.formal.s2.op tions [document.formal.sl.selectedIndex].value)">

// вызов функции calc() выполняется при выборе элемента // выпадающего списка— событие onChange

<option name=opl value=1000> 1000</option>

<option name=op2 value=2000> 2000</option>

<option name=op3 value=3000> 3000</option>

</select>

<select name=s2>

<option name=opl2 value=10> 10</option>

<option name=op22 value=20> 20</option>

<option name=op32 value=30> 30</option>

</select>

<input type="TextField" name=tf value="">

</form>

</body>

</html>

В этом примере мы описываем выпадающий список таким образом:

<select name=sl onChange="ca1с(document.formal.sl.options

[document.formal.sl.selectedIndex].value,document.formal.s2.op tions

[document.formal.sl.selectedIndex].value)">

// вызов функции calc выполняется при выборе элемента // выпадающего списка — событие onChange

<option name=opl value=1000> 1000</option>

<option name=op2 value=2000> 2000</option>

<option name=op3 value=3000> 3000</option>

</select>

Опции выпадающего списка описываются индивидуально: указывается имя опции (name=), значение опции (vaiue=) и значение, отображаемое в выпадающем списке для этой опции (оно, вообще говоря, не обязано совпадать с vaiue).

Записана реакция на выбор нового элемента выпадающего списка:

onChange="calc(document.formal.sl.options

[document.formal.sl.selectedIndex].value, document.formal.s2.options

[document.formal.sl.selectedIndex].value)">

Видим, что для получения значения опции (параметра vaiue) следует указать ссылку вида:

document.formal.sl.options[document. formal.sl.selectedIndex].value

Здесь в квадратных скобках указывается индекс выделенного элемента списка — адресация выполняется через ключевое слово seiectedindex. За словом document следует разделяемая знаком точки последовательность имен элементов — сначала формы (formai), затем имени списка (sl), затем ссылки на опцию списка посредством указания не имени, aoptions[nHfleKc] — такой вариант также допустим.

Еще одним элементом формы в этом скрипте является текстовое поле:

<input type="TextField" name=tf value="">

Значение этого текстового поля задано в виде пустой строки.

Приведем пример еще одного скрипта (листинг 2.2), который демонстрирует игру "крестики-нолики" фазмер доски 3×3). В этой игре нам нужно помнить очередность ходов игроков. При нажатии на кнопку на ней отображается "крестик" или "нолик" в зависимости от этой очередности. Соответствующую переменную xod мы объявляем глобальной. Наш вариант скрипта во многом несовершенен, поскольку допускает писать "крестики" или "нолики" на уже использованных клетках таблицы. Результат выполнения скрипта помещен на рис. 2.3.

Листинг2.2. Скриптдля игры в "крестики-нолики", размещенный в теле HTML-документа

<HTML>

<body bgcolor=#aabbcc> <script>

<! —

var xod=l;

function clearl()

{

j=0; while(j<=9){ if(document.formal.elements[j].name==10)

{

j++;

continue;}

document.formal.elements[j].value=" "; j++;

}

xod=l; return;

}

funct ion show(x)

{

j=0; while(j<10)

{

if (document.formal.elements[j].name==x)

{

if(xod==l)

{document.formal.elements[j].value=" x " ;

xod=2;

break;

}

else

{document.formal.elements[j].value="

0 " ;

xod=l;

break;

}

}

j++;

}

}

—>

</script>

<form name="formal">

<table border=2 bgcolor=#aaccff>

<tr>

<td><input type="Button" name=l value=" " onClick="show(‘1’)"></td>

<td><input type="Button" name=2 value=" " onClick="show(‘2’)"></td>

<td><input type="Button" name=3 value=" " onClick="show(‘3’)"></td>

</tr>

<tr>

<td><input type="Button" name=4 value="  "

onClick="show(‘4’)"></td>

<td><input type="Button" name=5 value="  "

onClick="show(‘5’)"></td>

<td><input type="Button" name=6 value="  "

onClick="show(‘6’)"></td>

</tr>

<tr>

<td><input type="Button" name=7 value=" " onClick="show(‘7’)"></td>

<td><input type="Button" name=8 value=" " onClick="show(‘8’)"></td>

<td><input type="Button" name=9 value=" " onClick="show(‘9’)"></td>

</tr>

</table>

<br><br>

<Input type="Button" name=10 value="Clear" onClick="clearl()">

</form>

</body>

</html>

Рис. 2.3. Игра в "крестики-нолики"

Игровая доска реализуется как таблица HTML:

<table border=2 bgcolor=#aaccff>

<tr>

<td><input type="Button" name=l value=" " onClick="show(‘1’)"></td>

<td><input type="Button" name=2 value=" " onClick="show(‘2’)"></td>

<td><input type="Button" name=3 value=" " onClick="show(‘3’)"></td>

</tr>

<tr>

<td><input type="Button" name=4 value="  "

onClick="show(‘4’)"></td>

<td><input type="Button" name=5 value="  "

onClick="show(‘5’)"></td>

<td><input type="Button" name=6 value="  "

onClick="show(‘6’)"></td>

</tr>

<tr>

<td><input type="Button" name=7 value=" " onClick="show(‘7’)"></td>

<td><input type="Button" name=8 value=" " onClick="show(‘8’)"></td>

<td><input type="Button" name=9 value=" " onClick="show(‘9’)"></td>

</tr>

</table>

В каждой ячейке таблицы размещается кнопка:

<td><input type="Button" name=l value=" " onClick=

"show(‘1’)"></td>

Для каждой кнопки предусмотрен вызов функции show (), в которую передается имя кнопки:

onClick="show(‘7’)"

Теперь рассмотрим функцию show (): funct ion show(x)

{

j=0; while(j<10)

{

if (document.formal.elements[j].name==x)

{

if(xod==l)

{document.formal.elements[j].value=" x ";

xod=2; break;

}

else

{document.formal.elements[j].value=" 0 ";

xod=l; break;

}

}

В цикле while выполняем просмотр всех элементов формы (элементы имеют индексы от 0 до 9). Поскольку x — номер кнопки, то сравниваем его со значением параметра name, которому присвоено значение номера кнопки:

if (document.formal.elements[j].name==x)

При совпадении проверяем, какой символ, "крестик" или "нолик", нарисовать на элементе (в зависимости от переменной xod):

if (xod==l)

{

document.formal.elements[j].value=" x ";

xod=2; break;

}

else

{

document.formal.elements[j].value=" 0 ";

xod=l;

break;

}

Команда break реализует выход из цикла.

Функция ciear() осуществляет стирание надписей на кнопках, сделанных в процессе игры.

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

timerID= setTimeout("functionname()", 1000);

Эта команда запускает функцию functionname о через интервал в 1000 мс (т. e. 1 с). Следовательно, если рекурсивно вызывать этот оператор, данная функция будет активизироваться с периодом в 1 с.

Кроме этого, нам потребуется сбрасывать таймер, поскольку если он не сброшен, то использование рекурсивных вызовов таймера приведет к переполнению памяти. Делается это таким образом:

clearTimer(timerID);

Здесь timeriD — идентификатор ранее созданного таймера. Теперь можно привести полный код сайта (листинг 2.3).

Листинг 2.3. Скрипт для динамического отображения времени

<html>

<form name="forl">

<Input type="TextField" name="txtl" size=60 value="00:00"/> <SCRIPT>

<! —

var timerID=null; var timerRunning=false; function stopclock()

{

if (timerRunning)

{ clearTimeout(timerID) ; } t ime rRunning= f а1se ; return ;

}

function startclock()

{

stopclock(); showtime();

return ; //оператор выхода из функции }

function showtime()

{

var now= new Date();

forl.txtl.value= now.toLocaleString();

timerID= setTimeout ("startclock()", 1000); t ime rRunning=t rue;

}

—>

</Script>

</Form>

<Body bgcolor=#aabbff onLoad="startclock()">

</body>

</html>

Данный скрипт просто отображает текущее время в текстовом поле. Это делается по команде:

forl.txtl.value= now.toLocaleString();

Ссылка на текстовое поле осуществляется в следующей последовательности: имя формы — имя текстового поля — value. Объектная переменная now держит текущее время. Эта переменная получает значение в строке:

var now= new Date();

Запуск скрипта происходит по событию onLoad (загрузки окна документа). Вызывается функция startciock(). Проследите сами, как развиваются действия дальше.

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

<img src="address" width=400 height=200 visibility= "hidden" name="imgl">

Для смены картинки следует выполнить команду:

document.images[0].src="newaddress";

Вам нужно продумать, как реализовать эту команду в скрипте.

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

клиента к серверу и в обратном направлении. Информция в cookie записывается В виде parameter=value;parameter=value. Это позволяет легко получить нужное значение. Строку cookie можно получить в программе с помощью оператора:

s= document.cookie;

Значение же cookie можно сформировать, например, операторами:

document.cookie="name=Petrov; "; document.cookie="age=45; ";

Для того чтобы распаковать значение параметра, нужно использовать операторы indexOf И substring. Оператор indexOf ВОЗ- вращает номер позиции в строке, с которого данная подстрока впервые входит в строку; оператор substring формирует из строки подстроку, расположенную в исходной строке, начиная с указанного места и включая указанное количество символов. Так, с помощью команд

s=document.cookie; i=s.indexOf("name");

получаем в переменной i номер позиции в s, с которой начинается слово name. Далее используем команды:

sl=s.substring(i+4, s.length); i=sl.indexOf("="); s2=sl.substring(i+l, sl.length); i=s2.indexOf(";"); s3=s2.substring(1, i-1);

Этот последний фрагмент позволяет получить в s3 строковое значение ”Petrov".

Источник: Герман О. B., Герман Ю. О., Программирование на Java и C# для студента. — СПб.: БХВ-Петербург, 2005. — 512 c.: ил.

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100