Ирина Эланс

Автор который поможет с любыми образовательными и учебными заданиями

Графика JavaScript

Специальность 230101.65”Вычислительные машины, комплексы, системы и сети”

Дисциплина: «WEB-технологии»

Курсовая работа

На тему «Графика JavaScript»

Выполнила:

Студент группы

Проверила:

Оценка___________

Дата_____________

Челябинск, 2010

Содержание

Введение

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

JavaScript

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

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

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

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

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1.

К возможностям JavaScript можно, например, отнести следующее:

• отображать изменяющиеся данные, такие как текущее время или дата;

• программировать переменное содержание в зависимости от даты, браузера пользователя или других условий;

• изменять внешний вид элементов страницы, если пользователь щелкнул мышью или провел курсор мыши над элементом.

Для языка высокого уровня JavaScript обладает довольно сильными возможностями. Он не позволяет работать на уровне машинных кодов, однако вы получаете доступ ко многим возможностям броузеров, Web-страниц, а иногда и системы, в которой работает броузер. В отличие от Java™ или С, программы на JavaScript обходятся без компиляции, а вашему броузеру не придется загружать виртуальную машину для выполнения программного кода. Программируй и загружай!

JavaScript также работает в объектно-ориентированной архитектуре, напоминающей Java или C++. Такие возможности языка, как конструкторы или наследование на базе прототипов, добавляют в схему разработки новый уровень абстракции, что способствует многократному использованию программного кода.

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

Если данные не содержали ошибок, сценарий CGI продолжал работу. Однако при обнаружении ошибок сценарий возвращал пользователю сообщение с описанием проблемы. Хотя это решение работает, представьте, сколько лишней работы при этом происходит. Для передачи формы необходим специальный запрос HTTP от сервера. После пересылки данных в Сети приходится заново выполнять сценарий CGI. Этот процесс повторяется каждый раз, когда пользователь допускает ошибку при заполнении формы. Пользователь узнает об ошибке лишь после того, как сообщение об ошибке вернется к нему.

Но вот на сцене появляется JavaScript. Теперь элементы формы можно проверить до того, как пользователь передаст информацию Web-серверу. Это приводит к уменьшению количества транзакций HTTP, а также заметному снижению вероятности ошибки при повторном заполнении формы. Кроме того, JavaScript позволяет читать и записывать cookie — когда-то эта операция выполнялась исключительно средствами Web-сервера для работы с заголовками.

Об особенностях JavaScript

Тэг <SCRIPT> сообщает броузеру, что внутри HTML размещен код JavaScript. Тэг </SCRIPT> отменяет действие. <!— и —> тэги сообщают броузерам, которые не могут интерпретировать <SCRIPT> и </SCRIPT>, что строки кода следует рассматривать как комментарии. Двойная косая черта (//) перед тэгом --> - знак комментария в языке JavaScript; без него JavaScript интерпретирует --> как ошибочный оператор.

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

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

Document.write - метод, который прописывает HTML в Web-страницу как при программировании вручную.

Каждый JavaScript-оператор должен заканчиваться точкой с запятой. Отсутствие точки с запятой JavaScript считает ошибкой. Логические выражения должны быть заключены в круглые скобки, а блоки операторов — в фигурные скобки.

JavaScript использует знак == как логический оператор эквивалентности и знак = в качестве оператора присваивания. Попытка сравнения с использованием знака равенства (=) - вторая причина ошибок в JavaScript.

Объект Image

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

Программирование графики в JavaScript опирается на объект Image, который характеризуется следующими свойствами, методами и событиями:

Характеристики объекта Image:

Свойства

Методы

События

name

src

lowSrc

border

height

width

hspace

vspace

complete

нет

Abort

Error

Load

Несмотря на такое обилие свойств, их абсолютное большинство можно только читать, но не изменять. Об этом свидетельствует отсутствие методов. Но два свойства все же можно изменять: src и lowSrc. Этого достаточно для множества эффектов с картинками.

Все объекты класса Image можно разделить на встроенные и порожденные программистом. Встроенные объекты — это картинки контейнеров IMG. Если эти картинки поименовать, к ним можно обращаться по имени. Например, если у нас имеется картинка:

то значение свойства document.images[0].name будет равно "picname", а к самой картинке можно будет обращаться тремя способами:

document.images[0]

document.picname

document.images['picname']

Свойства src и lowSrc

Свойства src и lowSrc определяют URL изображения, которое монтируется внутрь документа. При этом lowSrc определяет временное изображение, обычно маленькое, которое отображается, пока загружается основное изображение, чей URL указывается в атрибуте SRC контейнера IMG. Свойство src принимает значение атрибута SRC контейнера IMG. Программист может изменять значения и src, и lowSrc. В предыдущем примере мы можем изменить значение src следующим образом:

document.picname.src='river.gif';

Как видно из этого примера, существует возможность модифицировать картинку за счет изменения значения свойства src встроенного объекта Image. Если вы в первый раз просматриваете страницу (т.е. картинки не закешированы браузером), то постепенное изменение картинки будет заметно (конечно, при низкой скорости подключения к Internet; а также это зависит от браузера, который может загрузить картинку, а только потом вывести ее целиком на страницу).

Изменение картинки

Изменить картинку можно, только присвоив свойству src встроенного объекта Image новое значение. Выше было показано, как это делается в простейшем случае. Очевидно, что медленная перезагрузка картинки с сервера не позволяет реализовать быстрое листание.

Решение заключается в разведении по времени подкачки картинки и ее отображения. Для начала мы создаем изображения, к которым привязываем обработчики событий onMouseOver и onMouseOut. При наведении указателя мыши на каждую из картинок она заменяется другой (цветной), а при уводе мышки картинка заменяется обратно на черно-белую:

<IMG NAME=m0 src="images/mapb000.gif" border=0

onMouseOver="document.m0.src=color[0].src;"

onMouseOut="document.m0.src= mono[0].src;">

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

mono = new Array(32);

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

{

mono[i] = new Image();

s = (i<10)? "0" : "";

mono[i].src = "images/mapb0" +s+i+ ".gif";

}

Именно в тот момент, когда свойству, например, mono[25].src присвавается значение "images/mapb025.gif", и происходит скачивание этой картинки с сайта на компьютер пользователя. Если бы вместо объектов класса Image мы составили массив из строк вида "images/mapb000.gif" и т.д., то никакой подгрузки графики не произошло бы, и каждый раз, когда пользователь наводил бы на очередное изображение, браузеру приходилось бы скачивать новую картинку. Мы поместили этот скрипт в контейнер <HEAD>, тем самым гарантировав, что к моменту, когда пользователь начнет работать со страницей, все требуемые для работы картинки уже будут скачаны, и в процессе вождения мышки по картинкам никакой задержки показа очередного изображения наблюдаться не будет.

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

document.m0.src = mono[0].src;

document.m1.src = mono[1].src;

...

document.m31.src = mono[31].src;

Мы хотим избежать написания такого громоздкого кода. С правой частью операторов присваивания справиться легко: достаточно задать цикл по i от 0 до 31 и писать mono[i].src. А вот с левой частью не все так просто. На помощь приходит функция eval("выражение"), которая воспринимает переданное ей выражение как программу JavaScript и выполняет все содержащиеся в ней операторы. С ее помощью решить эту проблему легко — мы составляем нужную строчку, а затем отдаем ее на выполнение:

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

eval("document.m" +i+ ".src = mono[" +i+ "].src;");

Мультипликация

Продолжением идеи замещения значения атрибута SRC в контейнере IMG является мультипликация, т.е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации используют метод setTimeout() объекта window .

Существует два способа запуска мультипликации: по окончании загрузки страницы (onLoad) и при действиях пользователя (onClick, onChange и т.д.). Наиболее популярный — первый, а именно использование onLoad() и setTimeout().

Обработчик события onLoad

Событие Load наступает в момент окончания загрузки документа браузером. Обработчик данного события (onLoad) указывается в контейнере BODY:

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

var i=0;

function movie()

{

document.i.src='images/crou00'+i+'.gif';

i++; if(i>4) i=0;

setTimeout('movie();',500);

}

</SCRIPT>

</BODY>

Можно реализовать и конечное число циклов мультипликации - 5:

var i=0,

n=5; // число циклов

function movie()

{

document.i.src='images/crou00'+i+'.gif';

i++; if(i>4) { i=0; n--; }

if(n>0) setTimeout('movie();',500);

}

</SCRIPT>

</BODY>

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

- скрипт movie() получает управление от обработчика события onLoad;

- заменяет картинку;

- порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;

- текущий скрипт movie() уничтожается JavaScript-интерпретатором.

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

Запуск и остановка мультипликации

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

var i=0, flag=true;

function movie()

{

if(flag)

{

document.i.src='images/crou00'+i+'.gif';

i++; if(i>4) i=0;

}

setTimeout('movie();',500);

}

</SCRIPT>

<FORM>

<INPUT TYPE=button VALUE="Start/Stop"

onClick="flag = !flag;">

</FORM>

</BODY>

Мы ввели булевский flag и меняем изображение на странице, только если он принимает значение true. Нажатие на кнопку меняет значение флага на его отрицание.

Обратите внимание: когда flag имеет значение false, мы просто обходим изменение картинки, но не прекращаем порождение потока. Если бы мы поместили setTimeout() внутрь конструкции if(), то после нажатия на кнопку поток перестал бы порождаться, и запустить мультипликацию заново стало бы нельзя. Однако постоянное генерирование потока — это растрата ресурсов (памяти, процессора). Метода clearTimeout():

var i=0, flag=true, m=null;

function movie()

{

if(flag)

{

document.i.src='images/crou00'+i+'.gif';

i++; if(i>4) i=0;

}

m = setTimeout('movie();',500);

}

</SCRIPT>

<FORM>

<INPUT TYPE=button VALUE="Start/Stop"

onClick="flag = !flag;

if(flag) movie();

else clearTimeout(m);">

</FORM>

</BODY>

Как видите, достаточно ввести идентификатор потока m и сохранять в нем ссылку на поток при вызове setTimeout(). Тогда в случае необходимости (при нажатии пользователем кнопки) мы можем отменить запланированное выполнение movie() (которое произошло бы через 500 миллисекунд), вызвав метод clearTimeout(m).

Оптимизация отображения

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

Из всех способов оптимизации отображения картинок мы остановимся только на нескольких:

оптимизация отображения при загрузке;
оптимизация отображения за счет предварительной загрузки;
оптимизация отображения за счет нарезки изображения.

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

Оптимизация при загрузке изображений

Практически в любом руководстве по разработке HTML-страниц отмечается, что при использовании контейнера IMG в теле HTML-страницы следует указывать атрибуты WIDTH и HEIGHT. Это продиктовано порядком загрузки компонентов страницы с сервера и алгоритмом работы HTML-парсера. Первым загружается текст разметки. После этого парсер разбирает текст и начинает загрузку дополнительных компонентов, в том числе графики. При этом загрузка картинок, в зависимости от типа HTTP-протокола, может идти последовательно или параллельно.

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

Таким образом указание высоты и ширины картинки позволит отобразить документ раньше, чем картинки будут получены с сервера. Это дает пользователю возможность читать документ или задействовать его гипертекстовые ссылки до момента полной загрузки документа.

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

Предварительная загрузка изображений

Замена одного образа другим часто бывает оправдана только в том случае, когда это происходит достаточно быстро. Если перезагрузка длится долго, то эффект теряется. Для быстрой подмены используют возможность предварительной загрузки документа в специально созданный объект класса Image.

Реальный эффект можно заметить только при отключении кэширования страниц на стороне клиента (браузера). Кэширование часто используют для ускорения работы со страницами Web-узла. Как правило, загрузка первой страницы — это достаточно длительный процесс. Самое главное, чтобы пользователь в этот момент был готов немного подождать. Поэтому, кроме графики, необходимой только на первой странице, ему можно передать и графику, которая на ней не отображается. Но зато при переходе к другим страницам узла она будет отображаться без задержки на передачу с сервера.

Нарезка изображений

Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой картинки. Чаще всего он применяется при создании меню. Кроме подобного эффекта нарезка позволяет реализовать мультипликацию на больших картинках. При этом изменяется не весь образ, а только отдельные его части.

Графика и таблицы

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

горизонтальные и вертикальные меню;
вложенные меню;
навигационные графические блоки.

Описание программного продукта.

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

После запуска страницы Index.html в окне браузера появится страница с 5ю пунктами меню:

Цикличный просмотр изображений
Показ слайдов
Автоматический цикл смены
Увеличение/уменьшение размеров изображения
Случайное изображение

При нажатии на каждый пункт меню будет загружена новая страница с работающим скриптом и описанием кода программы.

Цикличный просмотр изображений.

На загрузившейся странице можно увидеть изображение цветка. При нажатии на ссылку «Следующее изображение» цветок начнёт блекнуть. Сработает функция slideit

function slideit(){

if (!document.images)

return

if (document.all)

slide.filters.blendTrans.apply()

document.images.slide.src=eval("image"+step+".src")

if (document.all)

slide.filters.blendTrans.play()

whichimage=step

if (step<number_of_images)

step++

else

step=1

}

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

Показ слайдов

При загрузке страницы пользователь видит чёрный цветок, и две кнопки «Назад», «Далее» и ссылку «Сначала».

После нажатия на кнопку «Далее» вместо чёрного появится жёлтый цветок, затем красный. При нажатии на кнопку «Назад» изображения будут появляться в обратном порядке.

var photos=new Array()

var which=0

photos[0]="0.gif"

photos[1]="1.gif"

photos[2]="2.gif"

function backward(){ --> обьявление функции работы кнопоки "Назад"

if (which>0){

window.status='показ слайдов'

which--

document.images.photoslider.src=photos[which]

}

function forward(){ --> обьявление функции работы кнопоки "Вперёд"

if (which<photos.length-1){

which++

document.images.photoslider.src=photos[which]

}

else window.status='Конец'

}

Автоматический цикл смены

В результате исполнения кода на странице будет показана циклическая смена изображений. Т.к. изображения это цветок с осветлёнными лепестками, то создаётся впечатление анимации на странице. При нажатии на изображение откроется новое окно содержащее именно то изображение, на которое вы нажали.

Для корректной работы программы названия изображений должны быть 0.gif (любой формат) - +∞.gif.

var slideimages=new Array()

var slidelinks=new Array()

function slideshowimages(){

for (i=0;i<slideshowimages.arguments.length;i++){

slideimages[i]=new Image()

slideimages[i].src=slideshowimages.arguments[i]

}

function slideshowlinks(){

for (i=0;i<slideshowlinks.arguments.length;i++)

slidelinks[i]=slideshowlinks.arguments[i]

}

Увеличение/уменьшение размера изображений

На открывшейся странице можно увидеть 2 изображения и комментарии к ним.

function enlargeImage1(){

image1.height="300"

}

function dropImage1(){

image1.height="150"

}

function enlargeImage2(){

image2.height="150"

}

function dropImage2(){

image2.height="300"

}

Картинки на странице показаны размером в 150 пикселей. При клике мышкой они увеличиваются до своего реального размера в 300 пикселей. И обратно к миниатюрам.

Случайное изображение

Каждый раз при загрузке страницы будет изменятся её фон. Для этого необходимо указать изображения которые будут использоваться в качестве фона.

var backgr1="0.gif"

var backgr2="1.gif"

var backgr3="2.gif"

И сам цикл случайного выбора фона.

var cur=Math.round(6*Math.random())

if (cur<=1)

backgr=backgr1

else if (cur<=2)

backgr=backgr2

else

backgr=backgr3

document.write('<body background="'+backgr+'" bgcolor="#FFFFFF">')

Заключение

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

Список источников

1. Джейсон Мейнджер. Java: основы программирования :Пер. с англ. - К.:Издательская группа BHV,1997.-320с.

2. Симкин Стив, Бартлет Нейл, Лесли Алекс. Программирование на Java.Путеводитель :Пер. с англ. – К. НИПФ «ДиаСофт Лтд», 1996. 736 с.

3. Кристиансен Т., Торкингтон Н. Perl: Библиотека программиста :Пер. с англ.- СПб.: Издательство «Питер», 2000. – 736с.: ил.

4. Холзнер Стивен. Perl: специальный справочник :Пер. с анг. – СПб.: Питер,2000. – 496с.: ил.

5. Хейл, Бернард Ван. JDBC: Java и базы данных :Пер. с англ. М.,1999.-320с.

6. Эферган М. Java: справочник. – СПб.: Питер, 1998. -448с.: ил.

7. http://www.citforum.ru

8. http://www.xpoint.ru

9. http://www.by.iatp.org.ua

10. http://phpclub.unet.ru

11. http://www.webmasteram.ru

12. http://kek.ksu.ru

13. http://inftech.webservis.ru

14. http://dit.vov.ru

15. http://chip.ua

Приложения

Приложение 1

<html>

<head>

<title>Index</title>

</head>

</tr>

<tr>

<tr>

<td width="66%" align="center" valign="middle"><a href="затухание/1.html" target="_blank"> Цикличный просмотр изображений</a></td>

</tr>

<tr>

<td align="center" valign="middle"><a href="Показ слайдов/03.html" target="_blank">Показ слайдов</a></td>

</tr>

<tr>

<td align="center" valign="middle"><a href="цикл смена/05.html" target="_blank">Автоматический цикл смены</a></td>

</tr>

<tr>

<td align="center" valign="middle"><a href="Увеличение(уменьшение)/01.html" target="_blank"> Увеличение/уменьшение размера изображений</a></td>