Графика 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. Если эти картинки поименовать, к  ним можно обращаться по имени. Например, если у нас имеется картинка:

<IMG NAME=picname SRC=forest.gif>

то значение свойства 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().