Главная | Обратная связь | Поможем написать вашу работу!

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

Динамизация Web-страниц средствами языка JavaScript

2.1. ДинамическийHTML

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

Динамические эффекты могут применяться к текстам, изображениям, видео, музыке. Наличие в документе бегущей строки или эффекта выскакивания букв в строке текста динамизирует документ и вызывает дополнительный интерес студента к документу. Интерес возрастает, если в документ включены гиперссылки на сайты с музыкой (файлы.mp3 или.wma) или с видео-клипами.

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

Сценарии пишутся на любом языке программирования - JavaScript, AJAX, VBScript, PHP и др. Для внедрения JavaScript-сценария в HTML-документе применяется элемент SCRIPT:

<SCRIPT Language=”JavaScript”> [Текст сценария] </SCRIPT>.

Скрипт по обыкновению встраивается в HTML-документ и взаимодействует с ним. Скрипты можно помещать в любом месте документа: как в заголовочной части, так и в теле. Большей частью их помещают в заголовочной части. Скрипты, как и HTML-документы пишут обычно в редакторе Блокнот. Они могут применяться в двух случаях: 1) при загрузке документа браузером; 2) при возникновении некоторого события. События могут обусловливаться действиями пользователя: нажатием кнопки мыши, наведением курсора мыши на элемент Web-страницы и т.п.

Краткий обзор средств программирования языка JavaScript

JavaScript - это клиентский скриптовый язык сценариев с элементами объектно-ориентированной модели. Сценарии JavaScript выполняются непосредственно на компьютере пользователя клиент-программой (браузером). Это – язык-интерпретатор. За синтаксическую основу в нем принята упрощенную версию языка Java, которая во многом совпадает с языками С и С++.

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

ОператорыJavaScript

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

операторы ввода данных;

операторы комментариев;

операторы присваивания;

операторы разветвления;

операторы циклов;

операторы вывода результатов.

Типы данных.

В языке программирования JavaScript используются следующие типы данных:

текстовый;

логический;

целые числа (в десятичной и шестнадцатеричной системах счисления);

действительные числа (с фиксированной и плавающей точками);

бинарные числа;

массивы.

Данные представляются в виде переменных и констант. Переменные имеют имена. При написании имен нужно учитывать регистр. Переменные создаются с помощью оператора var или путем непосредственного присвоения значений операцией (=). Синтаксис оператора var:

var varyablename[=value | expression].

Оператор var создает новую переменную с именем varyablename. Пример:

var Sum=0;

var sarray=new Object();

n=10; // эта переменная, введенная без ключевого слова var.

В JavaScript переменные могут быть локальными или глобальными. Локальные переменные обычно применяются при написании функций и их нужно объявлять с помощью ключевого слова var. Глобальные переменные не объявляются – их тип определяется по умолчанию, но при вычислениях нужно контролировать правильность результатов.

В JavaScript применяются выражения (expression) – объединение переменных, констант, функций знаками операций и скобками, операторами и методами. Например: f=10*Sin(x*t).

В операторах применяются следующие операции (табл. 2.1).

Таблица 2.1

Операции присвоения

Операция	Содержание операции	Выражение	Эквивалент
=	непосредственное присвоение значения левому операнду	i=j	i=j
+=	составляет печали левого и правого операндов и присваивает результат левому операнду	i+=j	i=i+j
+	составляет печали левого и правого операндов и присваивает результат левому операнду	i+j	i=i+j
++	увеличивает значение левого операнда	i++	i=i+1
-=	отнимает значение правого операнда от левого и присваивает результат левому операнду	i-=j	i= i-j
-	отнимает значение правого операнда от левого и присваивает результат левому операнду	i-j	i= i-j
--	уменьшает значение левого операнда	i--	i= i-1
*	умножает значение левого и правого операндов и присваивает результат левому операнду	i*j	i=i*j
*=	умножает значение левого и правого операндов и присваивает результат левому операнду	i*=j	i=i*j
/	делит значение левого операнда на правый и присваивает результат левому операнду	i/j	i=i/j
/=	делит значение левого операнда на правый и присваивает результат левому операнду	i/=j	i=i/j

Операции i++ и i-- известные как инкремент (приращение) и декремент (уменьшение).

Операции сравнения:

== равняется;

!= не равняется;

! логическое возражение;

>= больше или равно;

<= меньше или равно;

> больше;

< меньше.

Логические операции:

(&&) логическое И;

(||) логическое ИЛИ.

Операции выполняются с учетом приоритетов:

++, --,!, *, /, +,-,<, <=, >=, ==,!=, &, I.

Встроенныефункции

Для расчетов в JavaScript часто применяются следующие встроенные математические функции: abs (), acos (), asin (), atan (), cos (), exp (), log (), max (arg1, arg2,...), min (arg1, arg2,...), pow (основание, степень), random (1), round (), sin (), sqrt (), tan ().

Обращение к функциям такое:

var functionname=Math.функция

Например, функция random() задается в интервале (0,1). Чтобы изменить диапазон, нужно функцию представить в таком виде:

function rand(min,max){

return Math.random()*(max-min)+min.

Структурыоператоров

В JavaScript применяются простые и сложные операторы. К простым относятся: операторы присваивания и операторы вызова функций. Сложными считаются операторы, которые включают в себя простые операторы. Задаются они в виде блоков операторов, которые замыкаются в фигурные скобки { }. Например:

if (a==1)

{

a++;

// другие действия

}

Комментарии

В JavaScript применяются два вида комментариев:

1) однострочный комментарий в виде:

// -текст комментария;

2) многострочный комментарий со следующим синтаксисом:

/*

Текст комментария

*/.

Операторыприсваивания.

Это – наиболее распространенные операторы JavaScript. Их назначение – присваивать значение переменным. Синтаксис оператора:

Переменная = Выражение.

Примеры:

x=3; // Переменной x присваивается значение 3

y=x*x; // Переменной y присваивается значение значения выражения x*x.

Основные операции присвоения приведены в табл. 2.1.

Операторы ввода.

Ввод данных в JavaScript осуществляется с помощью операторов присваивания или специальных функций alert (), confirm () и prompt (). Эти функции удобны при организации интерактивного взаимодействия с пользователем. При их применении формируются диалоговые окна сообщений с кнопками ОК (функция alert); ОК и Отменить (функции confirm и prompt). В окнах функции alert() можно передавать числа, массивы, логические значения, объекты и функции. Данную функцию использует браузер для передачи текстов со сценария в HTML-документ. Синтаксис функции:

alert(текст сообщения).

Для ввода текста пользователем удобно применять функцию prompt. Синтаксис ее следующий:

prompt(текст сообщения, текст по умолчанию).

Пример:

<!- -

pass= prompt('Введите пароль');

If pass==='1111'{

alert('Вход разрешен')

}else{

alert(‘Пароль неверный’), top.location href=http://kkep-for.narod.ru}

//-->

}

</script>

Операторы выбора

В JavaScript применяются три вида операторов выбора:

1) оператор? – оператор вопросительный знак;

2) if – условный оператор;

3) switch – оператор выбора варианта.

Оператор?. Формат оператора следующий:

Условие? выражение 1: выражение 2.

Здесь Условие - логическое выражение, которое принимает значение True или False. Например:

(x>3)?y=x*x:y=x* x-1.

Согласно этому оператору вычисляется y: если x>3, то y=x*x, в противном случае y= x* x-1.

Оператор if –распространенный условный оператор. Формат его следующий:

If (условие) оператор 1

else оператор 2.

Оператор 1 и оператор 2 это – простые или сложные операторы. Сложные операторы замыкаются в фигурные скобки { }.

Например:

If (hour>=12)

type_time=”PM”;

else

type_time=”AM”;

Оператор switch – оператор, обеспечивающий выбор варианта (case) и соответствующие ему действия по значению «выражения». Синтаксис оператора следующий:

switch (выражение){ // определение варианта case

case 1:

операторы, которые выполняются по варианту 1

case 2:

операторы, которые выполняются по варианту 2

…

defoult

операторы, которые выполняются по умолчанию

}

Пример:

switch (var){

case 1: // операторы, которые выполняются при var==1, например:

y=x;

break;

case 2: // операторы, которые выполняются при var==2, например:

y=a*x;

break;

case 3: // операторы, которые выполняются при var==3, например:

y=a*x*x;

break;

defoult;

}

Операторыциклов

JavaScript поддерживает три вида циклов: 1) for, 2) while, 3) do - while.

Оператор for. Представляется как итерационный цикл. Формат его:

for(выражение1; условие; виражение2){операторы},

где for - ключевое слово,

выражение1 – устанавливает начальное значение итерации,

условие – задает конечное значение числа итераций,

выражение2 - задает операцию изменения итераций.

Большей частью оператор for связан со счетчиком итераций, например так:

var i // i объявляется как переменная (параметр цикла)

for (i=0;i<10;i++){ // работает счетчик

// Действия в цикле

}

Приведенный оператор удобно применять при обработке массивов данных.

Оператор while -цикл с предусловием. Имеет следующий формат:

while (условие) операторы.

Пример:

var i=0

while (i<10){

// операторы действий

I++; // переход к следующей итерации

}

Оператор do-while – цикл с постусловием. Формат оператора:

do операторы while условие.

Пример применения оператора:

var i=0;

do{ // действия, которые должны выполняться

i++; //переход к следующей итерации

}while (i<10);

Операторы break и continue. В операторах switch и операторах циклов могут применяться операторы break с целью прерывания в нужных местах программы выборки вариантов или итерации циклов.

Пример:

var I;

for (i=0;i<10;i++){

// Действия в цикле

If (i==8) break;

}

На итерации i==8 выполнение оператора for перерывается и следующие операции не выполняются.

Если в теле цикла встречается оператор continue, то следующие операторы игнорируются и осуществляется переход к проверке условия цикла. Например, так:

var i, sum=0;

for(i=0;i<10;i++){

// Действия в цикле

If (i==5 II i==8) continue;

Sum+=i;

}

В приведенном фрагменте игнорируются итерации 5 и 8, а будут выполняться итерации 0-4, 6, 7, 10.

Использованиефункцийв скриптах

Удобным способом написания программ сценариев в JavaScript является использование функций. Если функция должна выполняться при загрузке HTML-документа, то в нужном месте сценария должен быть указан оператор вызова функции.

Если функция должна выполняться, как реакция на событие, то в html-документе необходимо применить html-элемент с нужным атрибутом обработчика события, например onclick.

Операторывывода

В качестве оператора для вывода информации в JavaScript используется document.write(). В скобках записывается информация, которую необходимо вывести.

Пример:

document.write(“Полученный результат: ”+Y+”<br>”).

После выполнения оператора браузер выведет на экран сообщение «Полученный результат:» и значение переменной Y.

Особенностиввода/вывода массивов

Массив – это поименованный набор данных одного типа. Доступ к каждому элементу массива осуществляется по индексам (номерам) элементов. Индексация элементов массива в JavaScript начинается с нуля. Массивы создаются в два этапа:

1) объявляется переменная для хранения массива, т.е. имя массива;

2) выполняется активизация массива.

Существует несколько вариантов ввода данных в массивы.

Вариант 1. Ввод массива с помощью оператора присвоения в таком виде:

var arr; // объявление массива с именем arr (от слова array – массив);

arr=[7,13,5,3,21,18,11]; // присвоение значений элементам массива, (количество элементов - 7).

Примечание. Можно объявлять массив и так:

var arr=[7,13,5,3,21,18,11];

Вариант 2. Объявление пустого массива:

var arr;

arr=[ ].

Дальнейший ввод значений элементов в пустой массив осуществляется с помощью операторов присваивания. Например, так:

arr[0]=7;

arr[1]=13;

…

arr[6]=11;

Массив может автоматически расширяться, если индекс элемента превысит индекс последнего введенного элемента. Если объявить массив в виде

var arr;

arr==[ ];

arr[4]=15;

это он будет иметь 5 элементов, причем 4 первые элемента будут иметь значение undefined (не определено).

Обращение к отдельному элементу массива осуществляется по имени массива и индексу элемента. Например, если переменной val присваивается значение val=arr[2], то ей будет предоставлено значение элемента массива с индексом 2.

Многомерные массивы. В JavaScript можно использовать многомерные массивы. Объявить пустой двумерный массив (матрицу) можно так:

var arr;

arr==[[ ],[ ] ].

Обращение к элементам массива объясняет следующий пример:

Arr[[0],[1]]=25; // элемент с индексом строки 0 и столбца с индексом 1.

2.3. Использование в сценариях объектной модели документа

Скрипт сценария может быть введен в HTML-документ двумя способами:

1) как обработчик результата события;

2) как утверждение или функция, которые используют тег <SCRIPT>.

Web-приложения для обработчиков событий. С помощью Web-приложений в браузере в основном осуществляется управление событиями. Имеет место определенный набор событий (events), которые браузер распознает и подключает соответствующий обработчик результата. Обработчик результата события записывается в документ как атрибут тега HTML, к которому дописывается код JavaScript для выполнения. Например, если созданная функция JavaScript с названием compute, то можно принудить браузер выполнять эту функцию, когда пользователь нажмет на кнопку, которой методом onClick выполняется обработка события, например:

Обработчики событий это – методы (процедуры и функции) реакции на разные события. События делятся на три группы:

связанные с мышью;

связанные с клавиатурой;

системные (программные).

Имена событий принято начинать с префикса on: onKeyDown, onKeyPress, onKeyUp, onMauseDown, onMauseMove, onMauseUp, onClick, onClose, onCreate, onActivate и т.д.

Объектная модель документа. JavaScript является объектно-ориентированным языком, а потому программирование Web-приложений основывается на использовании объектной модели документа (DOM). Объекты с точки зрения программиста это – сложные типы данных, которые поддерживают совокупность значений переменных (свойств) и функций для их обработки (методов). Эта сложность качественно другая, чем у массивов, файлов или записей. Массив по обыкновению определяется как совокупность элементов одного и того же базового типа. Запись – совокупность разнотипных данных. Объект – это совокупность не только данных (чаще всего разных типов), а и действий. При объектном программировании разработчик оперирует при создании кода объектами.

Компоненты-данные объектов называют свойствами объектов, а функции – методами. Объединение в одной структуре данных и выполняемых над ними действий называют инкапсуляцией. Это – первая из особенностей объекта. Вторая особенность – наследование. Суть ее в том, что, объявляя новый объект, имеется возможность включить к его составу все данные и методы, которые относятся к данному объекту. Объект-наследник называют рожденным типом, а предшественник - родительским. За счет наследования можно создавать иерархию объектов.

Объектно-ориентированное программирование связано со средой визуального программирования. Класс в объектном программировании определяется как особый вид записи, которая может состоять из полей, методов и свойств.

Объекты одного типа (они имеют одинаковые наборы свойств и методов) представляют собой экземпляры одного класса. Свойства объектов используются в программе как переменные, т. е. могут получать некоторые значения. Методы объектов – это функции, которые должны выполняться над этими свойствами. Объекты, свойства и методы имеют имена. Чтобы узнать, к какому объекту относится свойство или метод, в программе имя отделяют от свойства или метода точкой.

Прежде чем применять объект, его сначала нужно создать. Это реализуется с помощью оператора new. Например, оператор var today new Date() создает объект today как новый объект в классе объектов Date. В данном случае это – текущие дата и время.

В JavaScript используются встроенные классы объектов. Наиболее употребляемыми среди них есть: Array, Date, Number, String, Math и др.

Класс объектов Array дает возможность применять набор методов обработки массивов данных. Объекты данного класса имеют такие конструкции:

array();

array(размер);

array(элемент1, элемент 2,...).

Следующий пример раскрывает их сущность

var arr1=new Array(); // Объявляется пустой массив

var arr2=new Array(7); // Объявляется пустой массив с 8 элементов.

var arr3=new Array(7,9,3,4,8); // Массив с элементами 7,9,3,4,8.

Объекту Array присущи свои свойства и методы. Они будут рассмотрены ниже в примерах.

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

Date() – в этом формате задаются текущие дата и время;

Date(миллисекунды) задается количество миллисекунд, прошедшее с начала текущих суток;

Date(год, месяц, число, часы, минуты, секунды, миллисекунды) – служит для задания даты и времени. При этом год, месяц, число нужно указывать обязательно, а другие параметры можно опускать.

По умолчанию задается системное время. Для просмотра универсального времени (по Гринвичу) нужно пользоваться специальным методом.

Создание и показ объекта Date иллюстрирует следующий скрипт:

var today=new Date();

document.write(”Сегодня:”+today+”.”);

</script>

Если запустить такой скрипт на выполнение в браузере, тот отобразит текущие дату и время.

Объекты класса Date не имеют свойств, но имеют ряд методов. Наиболее часто используемыми из них следующие:

set - метод для установки даты и времени;

get - метод для получения значений даты и времени из объектов Date.

Значения компонентов устанавливаются следующим образом:

секунды и минуты - от 0 до 59;

часа - от 0 до 23;

день недели - от 0 до 6;

день месяца - от 1 до 31;

месяцы - от 0 (январь) до 11 (декабрь);

год - начиная с 1900.

Применение метода get к объекту date1 может быть таким:

date1.getMonth() - возвращает значение месяца текущей даты;

date1.getYear() - возвращает значение года текущей даты.

Класс объектов String. Эти объекты предоставляют удобные средства управления строками. Конструкции объектов класса String имеют такие форматы:

String() - объект без параметров (пустая строка);

String(строка) - объект, который имеет значение. В этом случае с начала сохраняет указанное значение строки. Например:

var z=new String(“textfirst”)

Класс String поддерживает свойство lengh, что задает длину строки. Кроме того, он поддерживает ряд методов для обработки текстовых данных. Это такие свойства, как: anchor (имя якоря), big (), blink (), bold (), fontcolor (цвет), cartAr (номер), concat(строка1,строка2,...), fixed (), fontsize (размер), italics (), link (адрес), small (), strike () и др. Назначение этих методов очевидно из названий тегов HTML

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

E – число (константа Ейлера),

LN10 – значение ln10,

LN2 – значение ln2,

LOG10E – значение lg10,

LOG2E – значение log2e,

PI – значение pi,

SQRT1_2 – значение квадратного корня с 0.5,

SQRT2 – значение квадратного корня из числа 2.

С объектом Math связанны приведенные выше встроенные математические функции. Они являются методами объекта Math и разрешают выполнять расчеты в программах сценариев и создавать динамические эффекты. Обращение к функциям может быть таким: y=Math.Sin(x).

Объект document. В соответствии с объектной моделью HTML-документ представляется как объект document. Это – глобальный объект, с которым связано много свойств и методов, обеспечивающие практически любые манипуляции с HTML-документом благодаря сценариям JavaScript. Объектная модель документа включает как объекты, из которых составляется документ, так и объекты, которые разрешают получать разную информацию о браузере, работать с окнами и фреймами.

Свойства объекта document возвращают цвета гиперссылок или коллекции объектов: alinkColor, linkColor, bgColor, links, all, anchors, forms, frames, images, URL. В коллекциях находятся объекты, которые дают описание элементов HTML-документа. К таким объектам можно отнести массивы. Доступ к элементам массива обеспечивается с помощью метода item(). Доступ может быть как по номеру элемента (атрибут id), так и по имени (атрибут name). Нумерация элементов начинается с нуля. Для коллекций предусмотренно свойство length, определяющее количество элементов в коллекции. Действия, которые можно выполнять с элементами HTML-документа определяются их свойствами и методами. Это: id (имя, присвоенное элементу атрибутом id), height (высота), width (ширина), name (имя, присвоенное элементу атрибутом name) и другие.

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

С объектом window связанно свойство document, назначением которой является формирование ссылки на объект.

Методами объекта window являются следующие функции:

alert (текст сообщения) – показ окна с сообщением;

confirm () – вызов окна сообщения;

prompt () – вызов окна ввода текста;

setinterval (функция, интервал, arg1,...) – задает функцию и интервал в миллисекундах;

print () – вызывает окно вывода документа на печать.

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

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

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

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

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

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

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

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>

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

document.write("Частина 2"+"
"); m=Math.min(3,4,7,20,3,7,5); max=Math.max(3,4,7,20,3,7,5); document.write("Мінімальний елемент m="+m+"
"); document.write("Максимальний елемент max="+max+"
"); Часть 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) следующий:

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>

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

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>

</body>

</html>.

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

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

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

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

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

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

var x,y;

x=0;

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

{

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>

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

<!--// Скрипт использует функцию 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>

<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>

</form>

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

</body>

</html>

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

Результат

Покупка

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

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

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

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

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

<html>

<head>

</head><body bgcolor=white>

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

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().

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-формы путем ввода их значений пользователем. Кроме того, в скрипте приме

Воспользуйтесь поиском по сайту: