2.4. Примеры программ JavaScript-сценариев

Ниже представлены примеры, которые имеют целью показать студентам методы динамизации HTML-документов, а также закрепить навыки программирования Web-приложений средствами языка JavaScript. Для реализации примеров рекомендуется создать на флеш-диске папку «Примеры_JS», в которую нужно помещать файлы JavaScript-программ, создаваемых на основе приведенных примеров, чтобы проверять их действенность и отрабатывать разные варианты личных программ.

Представленные в примерах программы – это HTML-документы, в виде самостоятельных Web-приложений (скрипти), или в виде скриптов Web-приложений в составе HTML-документов, или как интерактивные Web-приложения в составе HTML-документов, доступ к которым выполняется применением форм в HTML-Документах. Во всех случаях браузер воспринимает и отображает их содержание.

В первом способе имеется возможность отрабатывать Web-приложения автономно. Во вторым – подготовленные Web-приложения включаются непосредственно в HTML-документы. В третьим - обеспечивается интерактивная связь Web-документа с Web-приложением путем применения формы для ввода данных пользователем и вывода результатов.

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

Пример 2.1. Web-приложение «Массив.html» со скриптами типичных операций с массивами.

Обработка массивов данных является одной из наиболее распространенных операций в профессиональной работе экономистов. Ниже иллюстрируется листинг документа “Массив” со скриптами, обеспечивающими выполнение следующих действий: ввод массива, объявление переменных, вывод конкретного элемента массива (в первой части), определение минимального и максимального элементов (во второй части). В скриптах применены объекты, их методы и свойства.

<SCRIPT>

document.write(”Массив чисел arr()”+”<BR>”);

document.write(”Часть 1”+”<BR>”);

var k,m;

var arr;

arr=[3,4,7,20,3,7,5];

document.write(arr+”<BR>”);

k=arr[5];

document.write(”Элемент k=”+k+”<BR>”+”<BR>”);

</SCRIPT>

<SCRIPT>

document.write(”Часть 2”+”<BR>”);

m=Math.min(3,4,7,20,3,7,5);

max=Math.max(3,4,7,20,3,7,5);

document.write(”Минимальный элемент m=”+m+”<BR>”);

document.write(”Максимальный элемент max=”+max+”<BR>”);

</SCRIPT>.

Чтобы проверить результат выполнения данной программы, наберите (или скопируйте) текст листинга «Массив.html» в окно редактора Блокнот и сохраните файл в папке «Примеры_JS», после чего откройте файл, и он автоматически выполнится.

Примечание: Это следует делать и в следующих примерах!

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

Часть 1

Массив чисел arr() 3,4,7,20,3,7,5

Элемент k=7

Часть 2

Минимальный элемент m=3

Максимальный элемент max=20

Пример 2.2. Web-приложение «mas_photo.html» со скриптом (сценарием) показа изображений. Особенностью этого примера является то, что изображения представляются массивом, а для их просмотра применен оператор for.

Файлы изображений предварительно необходимо собрать в одной папке, например “frames”. Файлам с изображениями целесообразно присвоить имена: 1.gif, 2.gif, 3.gif, 4.gif, 5.gif, 6.gif, 7.gif. Эту папку нужно разместить в папку «Примеры_JS».

Скрипт HTML-документа (файл с именем mas_photo.html) следующий:

<SCRIPT>

document.write(”Массив фотографий arr”+”<BR>”);

var arr;

arr=[];

arr[0]='<IMG id=”animate” src=”frames/1.gif” height=100 width=75>';

arr[1]='<IMG id=”animate” src=”frames/2.gif” height=100 width=75>';

arr[2]='<IMG id=”animate” src=”frames/3.gif” height=100 width=75>';

arr[3]='<IMG id=”animate” src=”frames/4.gif” height=100 width=75>';

arr[4]='<IMG id=”animate” src=”frames/5.gif” height=100 width=75>';

arr[5]='<IMG id=”animate” src=”frames/6.gif” height=100 width=75>';

arr[6]='<IMG id=”animate” src=”frames/7.gif” height=100 width=75>';

for (i=0;i<7;i++)

{

document.write(arr[i]);

}

</SCRIPT>

Результатом выполнения этого скрипта будет коллекция изображений (рис. 2.1), размещенных в один ряд.

Рис. 2.1. Коллекция изображений

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

Пример 2.3. Файл динамического HTML-документа «animate.html» со сценарием изменения демонстрации изображений во времени.

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

*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset //EN"

"http://www.w3.org/html4/frameset.dtd">

<html>

<head>

<title> Страница с анимациями </title>

</head>

<body>

<p><font color="red"><h1> <b><center> Я захватываюсь изображениями с анимациями </center></b></h1></font></P>

<SCRIPT type="text/javascript">

//Назначаем функцию, которая действует по таймеру, и изменяет изображение

window.setInterval(new_frame,2000);

var inc=1;

var curFrame=1;

var maxFrame=7;

// Функция изменения кадров

function new_frame(){

//Показ текущего кадра

animate.src="frames/"+curFrame+".gif";

curFrame+=inc;

if (curFrame>maxFrame){

// Начинаем просмотр в обратном порядке

curFrame=maxFrame;

inc=-1;

}

else

if (curFrame==0)

{

// Начинаем просмотр в прямом порядке

curFrame=1;

inc=1;

}

}

</SCRIPT>

<img id="animate" src="frames/1.gif">

</body>

</html>.

Количество кадров изображений задается переменной maxFrame. Предполагается, что все кадры помещены в папку frames. Фрагмент одного из рисунков, воспроизводимых в окне браузер, показан на рис. 2.2.

Рис.2.2. Выбранное изображение

Используя соответствующие теги, можно динамично изменять фон страницы.

В приведенном примере используется объект window для установления интервала показа изображений (в милисекундах).

Пример 2.4. Листинг файла «Скрипт_ Do_While» с оператором цикла do_while в скрипті. В этом примере вычисляет значение функции y=x*x при изменении х с заданным значением шага.

<script>

document.write("Таблица значений функции"+"<br>");

var x,y;

x=0;

document.write(”x”+"______"+”y”+"<br>");

do

{

y=x*x;

document.write(x+"______"+y+"<br>");

x++;

}

while(x<7)

</script>

Результат выполнения скрипта:

Таблица значений функции

x______y

0______0

1______1

2______4

3______9

4______16

5______25

6______36

Пример 2.5. HTML-документ «Покупка(форма).html» с элементами интерактивности: функцией и формой (рис. 2.3) для запроса на выполнение сценария. Иллюстрируется технология расчета стоимости приобретенного товара.

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

HTML-Код

<html>

<head>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<title>Задача</title>

<script language="JavaScript">

<!--// Скрипт использует функцию mult(obj)

function mult(obj) // Функция работает с объектами

{ // Объявление переменных, как объектов

var kolich=obj.strkolich.value;

var cena=obj.strcena.value;

var uplach=obj.struplach.value;

stoim=kolich*cena;

obj.result.value=stoim;

if(uplach<stoim)

{

r= stoim-uplach;

document.write("Вам нужно доплатить"+r+"грн."+"<br>");

}

else{

sdacha= uplach-stoim;

document.write("Получите сдачу"+sdacha+"грн."+"<br>");

}

document.write("Нажмите кнопку 'назад', чтобы возвратить к форме, и просмотреть данные и результаты");

}

//-->

</script>

</head>

<body bgcolor="yellow" text="black">

<form name="form1"> // Данные к сценарию вводятся через форму

Покупка,<br></br>

Введите(kolich): <input size="7" name="strkolich" type="text"><br></br>

Введите(cena): <input size="7" name="strcena" type="text"><br></br>

Введите(uplach): <input size="7" name="struplach" type="text"><br></br>

<input value="Вычислить" onclick="mult(form1)" type="button"><br></br>

<input size="16" name="result" type="text"><br></br>

<INPUT TYPE="reset" NAME="Очистить форму" VALUE="Очистить"><br></br>

</form>

Нажмите кнопку 'вперед', чтобы пересмотреть другие результаты;

</body>

</html>

Рис. 2.3. Форма для запроса на выполнение скрипта

Результат

Покупка

Получите сдачу 5.5грн.

Нажмите кнопку 'назад', чтобы возвратить к форме,

и просмотреть данные и результаты.

Пример 2.6. HTML-документ «Календарь.html», обеспечивающий формирование календаря (рис. 2.4). Пример знакомит со средствами применения свойств и методов объекта Date(), а также с конструкцией оператора if.

Рис. 2.4. Календарь

<html>

<head>

<meta name=robots content="noindex">

</head><body bgcolor=white>

<title>http://programinet.narod.ru/ - База JavaScript (bjs)</title>

<SCRIPT language=Javascript>

calendar = new Date();

day = calendar.getDay();

document.write("<font face=arial><center><table width=100 border=1><td><center><font size=2>")

if (day == 0) {document.write("Воскресенье")}

if (day == 1) {document.write("Понедельник")}

…

if (day == 6) {document.write("Суббота")}

document.write("</font></center></td><tr><td><center><font size=2>")

month = calendar.getMonth();

if (month == 0) {document.write("Январь")}

if (month == 1) {document.write("Февраль")}

…

if (month == 11) {document.write("Декабрь")}

document.write("</font></center></td><tr><td><center><font size=7>")

date = calendar.getDate();

document.write(date)

document.write("</font></center></td><tr><td><center><font size=2>")

year = calendar.getYear();

if (year < 100) {

document.write("19" + year + "")

}

else if (year > 1999) {

document.write(year)

}

document.write("</font></center></td></table>")

</SCRIPT>

</HTML>

Пример 2.7. Листинг файла «Дата_час.html» с набором операций, связанных с объектом Date().

<SCRIPT>

today=new Date();

nextDecember=new Date("December 31,2011");

nextDecember.setYear(nextDecember.getYear());

msPerDay=24*60*60*1000; //Количество млсек в пор

daysLeft=(nextDecember.getTime()-today.getTime())/msPerDay;

daysLeft=Math.round(daysLeft);

interval_1= daysLeft-30; // Интервал уменьшен на 30 дней

interval_2=daysLeft+30; // Интервал увеличен на 30 дней

document.write("Текущая дата:"+today+"<BR>");

document.write("До конца декабря 2011 года осталось:_"+daysLeft+"_дней"+"<BR>");

document.write("Интервал_1 составляет:_"+interval_1+"_дней"+"<BR>");

document.write("Интервал_2 составляет:_"+interval_2+"_дней"+"<BR>"+"<BR>");

</SCRIPT>

Результат выполнения приведенного Web-приложения должны быть таким:

Текущая дата:Thu Aug 12 08:17:49 UTC+0300 2010

До конца декабря 2011 года осталось:_506_дней

Интервал_1 составляет:_476_дней

Интервал_2 составляет:_536_дней

Пример 2.8. Web-приложение «js 200.html», которое иллюстрирует расчет урожайности при известном количестве собранного урожая и площади поля. Приложение использует интерактивный скрипт, в котором применяется для расчетов функцию calculator(form), получающую аргументы с HTML-формы путем ввода их значений пользователем. Кроме того, в скрипте применена функция eval() и оригинальные атрибуты для назначения отделочников событий:

оnchange – когда элемент теряет фокус и значение элемента изменяется пользователем;

onKeyUp – событие,связаннон с отпусканием клавиши после события KeyPress;

/([ 0-9])/g - десятичная запись числа (в виде регулярного выражения) нажимом клавиш.

this.value - задает действие.

Рис. 2.5. Форма для выполнения сценария

HTML-Код

<script lang="JavaScript">

function calculator(form) {

a = eval(form.a.value);

b = eval(form.b.value);

c = b/a;

form.total.value = c;

}

</script>

<form>

Введите площадь поля в гектарах <input type="text" name="a" onchange="this.value=this.value.replace(/([ 0-9])/g,'');" onkeyup="var n=this.value.replace(/([ 0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>

Введите количество собранного урожая в тонах <input type="text" name="b" onkeyup="this.value=this.value.replace(/([ 0-9])/g,'');"><br><br><br>

<input type="button" value="Рассчитать" onclick="calculator(this.form)">

<input type="reset" value="Сброс"><br><br>

Средняя урожайность <input type="text" name="total">

</form>

Результат отображается непосредственно в форме (см. рис. 2.5).

Контрольные вопросы

1. Какая сущность динамизации Web-документа?

2. Какая разница между понятиями «анимация» и «динамизация» ?

3. Раскройте понятие «интерактивность» документа.

4. Как создается JavaScript-Сценарий?

5. Как создается Web-Страница со сценарием?

6. Перечислите типы операторов языка JavaScript?

7. Перечислите типы данных языка JavaScript.

8. Что такое «инкремент» и «декремент»?

9. Объясните синтаксис операторов ?, if, switch.

10. Объясните синтаксис операторов while, do-while, for.

11. Что означает аббревиатура DOM?

12. Какие классы объектов используются в JavaScript?

13. Раскройте понятие «свойство» и «метод» объекта.

14. Приведите примеры свойств и методов объектов Math, Array.

15. Объясните роль функций в JavaScript.

16. Объясните сущность оператора: document.write(x+”______”+y “<br>”).

17. Объясните роль функций: alert(), prompt().

18. Какими средствами можно включить в HTML-документ музыку?

19. Какими средствами можно включить в HTML-Документ видео^-клип?