Автор: Пользователь скрыл имя, 18 Декабря 2012 в 21:17, курсовая работа
World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.
СОДЕРЖАНИЕ 2
ВВЕДЕНИЕ 3
JavaScript………..……………………………………………………….…4
Об особенностях JavaScript…………………...…………………………..7
Объект Image……...…………………..8
- Свойства src и lowSrc……………………………………………...9
- Изменение картинки……………………………………………..10
- Мультипликация…………………………………………………12
-Обработчик события onLoad………………………..12
- Запуск и остановка мультипликации……………………14
- Оптимизация отображения………………17
- Оптимизация при загрузке изображений………….17
-Предварительная загрузка изображений………………...18
-Нарезка изображений…………………………….19
- Графика и таблицы…………………………………………20
Описание программного продукта……………………………………. 21
Заключение………………………………………………………………28
Список источников………………………………………………………29
Приложения…………………………………………………………….30
Обработчик события onLoad
Событие Load наступает в момент окончания загрузки документа браузером. Обработчик данного события (onLoad) указывается в контейнере BODY:
<BODY onLoad="программа JavaScript">
Рассмотрим сначала пример, в котором при загрузке документа начинает выполняться бесконечный цикл изменения картинки:
<SCRIPT>
var i=0;
function movie()
{
document.i.src='images/crou00'
i++; if(i>4) i=0;
setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>
Можно реализовать и конечное число циклов мультипликации - 5:
<SCRIPT>
var i=0,
n=5; // число циклов
function movie()
{
document.i.src='images/crou00'
i++; if(i>4) { i=0; n--; }
if(n>0) setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>
В обоих примерах следует обратить внимание на использование метода setTimeout(). Так как JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:
- скрипт movie() получает управление от обработчика события onLoad;
- заменяет картинку;
- порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
- текущий скрипт movie() уничтожается JavaScript-интерпретатором.
После окончания срока задержки исполнения все повторяется. В первом примере (бесконечное повторение) функция порождает саму себя и, тем самым, поддерживает непрерывность своего выполнения. Во втором примере (конечное число итераций) после нескольких повторов функция не порождается. Это приводит к завершению процесса отображения новых картинок.
Запуск и остановка мультипликации
Постоянная мультипликация может быть достигнута и другими средствами, например многокадровыми графическими файлами. Реализуем запуск и остановим движение по требованию пользователя, модифицировав пример с бесконечной мультипликацией:
<SCRIPT>
var i=0, flag=true;
function movie()
{
if(flag)
{
document.i.src='images/crou00'
i++; if(i>4) i=0;
}
setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
onClick="flag = !flag;">
</FORM>
<IMG NAME=i>
</BODY>
Мы ввели булевский flag и меняем изображение на странице, только если он принимает значение true. Нажатие на кнопку меняет значение флага на его отрицание.
Обратите внимание: когда flag имеет значение false, мы просто обходим изменение картинки, но не прекращаем порождение потока. Если бы мы поместили setTimeout() внутрь конструкции if(), то после нажатия на кнопку поток перестал бы порождаться, и запустить мультипликацию заново стало бы нельзя. Однако постоянное генерирование потока — это растрата ресурсов (памяти, процессора). Метода clearTimeout():
<SCRIPT>
var i=0, flag=true, m=null;
function movie()
{
if(flag)
{
document.i.src='images/crou00'
i++; if(i>4) i=0;
}
m = setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
<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-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:
Описание программного продукта.
Мной был
создан проект справочной среды по
использованию графических
После запуска страницы Index.html в окне браузера появится страница с 5ю пунктами меню:
При нажатии на каждый пункт меню будет загружена новая страница с работающим скриптом и описанием кода программы.
Цикличный просмотр изображений.
На загрузившейся странице можно увидеть изображение цветка. При нажатии на ссылку «Следующее изображение» цветок начнёт блекнуть. Сработает функция slideit
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.
document.images.slide.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.
}
}
function forward(){ -->
обьявление функции работы
if (which<photos.length-1){
which++
document.images.photoslider.
}
else window.status='Конец'
}
Автоматический цикл смены
В результате исполнения кода на странице будет показана циклическая смена изображений. Т.к. изображения это цветок с осветлёнными лепестками, то создаётся впечатление анимации на странице. При нажатии на изображение откроется новое окно содержащее именно то изображение, на которое вы нажали.
Для корректной работы программы названия изображений должны быть 0.gif (любой формат) - +∞.gif.
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.
slideimages[i]=new Image()
slideimages[i].src=
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.
slidelinks[i]=slideshowlinks.
}
Увеличение/уменьшение размера изображений
На открывшейся странице можно увидеть 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>
<body background="рисунки/1.jpg" >
<table width="100%" height="618" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td height="105" colspan="5" valign="bottom"><img src="рисунки/top.jpg" width="100%" height="100%" /></td>
</tr>
<tr>
<td width="18%" height="430" align="left" valign="top"><img src="рисунки/left.jpg" width="100%" height="430" /></td>
<td
colspan="3" background="рисунки/main.jpg">
<tr>
<td width="16%" height="36"> </td>
<td width="66%" align="center" valign="middle"><a href="затухание/1.html" target="_blank"> Цикличный просмотр изображений</a></td>
<td width="18%"> </td>
</tr>
<tr>
<td height="35"> </td>
<td align="center" valign="middle"><a href="Показ слайдов/03.html" target="_blank">Показ слайдов</a></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td align="center" valign="middle"><a href="цикл смена/05.html" target="_blank">Автоматический цикл смены</a></td>
<td> </td>
</tr>
<tr>
<td height="30"> </td>
<td align="center"
valign="middle"><a href="Увеличение(уменьшение)/