Презентациялар жасау (жиымдар мен суреттерге ауысамыз)

<!-- pic = new Array(); for(i=0;i1) back = 1; last = n; } else { back = 0; n = 0; myimg.src = pic[last].src; myimg.style.filter="revealTrans(duration=1.5,transition=8)"; myimg.filters[0].Apply(); myimg.src = pic[0].src; myimg.filters[0].Play(); } } // -->

Құжаттың мүмкіндіктерін оқып-үйренуді одан әрі жалғастырайық. Сіздің ықласыңызды аудару үшін бірден презентация жасаудың барынша тиімді тәсілін ұсынамын. Сіз өз жұмысыңызды немесе өз файлыңыздағы суреттерді пайдаланып барынша көрнекі тұсаукесер жасай аласыз.

Көп адамдар мұндайды тек Flash көмегімен ғана жасауға болады есептейді. Алайда Java Script дизайнерлік мүмкіндіктер мен құралдар жөніндегі ұғымымызды өзгертіп отыр. Презентация дегеннің не екендігін түсіну үшін төмендегі суретті тышқанмен шертіңіз.

Презентация (тышқанмен шерту) 

Төменде келтірілген кодтағы 6_1.jpg, 6_2.jpg, 6_3.jpg сурет файлдарының орнына өз файлдарыңыздың суретін және тэгтегі width пен height параметрлерін өзгерту жеткілікті.

Сонымен, код:

Презентация   <!--  pic = new Array();  for(i=0;i<3;i++)  {   pic[i] = new Image();   if(i==0) pic[i].src = "6_1.jpg";   if(i==1) pic[i].src = "6_2.jpg";   if(i==2) pic[i].src = "6_3.jpg";  }   n=0;   back = 0;   last = 0; function presentation() {   if(back == 0)  {   myimg.src = pic[n].src;   myimg.style.filter="revealTrans(duration=1.5,transition=8)";   myimg.filters[0].Apply();   myimg.src = pic[n+1].src;   myimg.filters[0].Play();   n ++;   if(n>1)     back = 1;   last = n;  }  else  {   back = 0;   n = 0;   myimg.src = pic[last].src;   myimg.style.filter="revealTrans(duration=1.5,transition=8)";   myimg.filters[0].Apply();   myimg.src = pic[0].src;   myimg.filters[0].Play();  } } // -->

Осы код жұмыс істеп тұрғанмен (жұмыс істеуі тиіс), ондағылардың көбісі әлі түсініксіз екеніне келісемін. Бұл әзірше Сізге танысу үшін ұсынылды. Бұдан әрі біз ол кодтың не істегенін толық қарастыратын боламыз.

Презентациялар (кодтың сипаттамасы)

Өткен мақалада біз презентация әдісін қарастырғанбыз. Келтірілген код не істеді екен? Алдымен жаңа обьектілерді анықтап алайық. Олар Array және Image обьектілері.

Осы обьектілерді қарастырудан бұрын біз клиенттік скриптермен жұмыс істеп отырғанымызды еске түсірейік. Сондықтан бұл скрипт ендірілген скрипті бар HTML-құжат жүктелген пайдаланушы компьютерінде (клиент машинасында) ғана орындалады.

Array  және Image обьектілері клиенттік машинаның жедел жадтан одан кейінгі амалдарға арналған жад бөлігін бөледі.

Image  обьектісі парақта бірден немесе оқиғаға жауап ретінде жүктелетін суреттерді сақтауға арналған жад бөледі. Сурет клиент машинасында, бірақ ол Сіз программалағандай етіп бейнеленеді.

Суретке арнап жадыдан орын бөлу үшін Image обьектісінің экземплярын құру керек. Бұдан әрі оның src қасиетінің көмегімен оған нақты суреттің адресі меншіктеледі. Мысал қарастырайық:

myimage = new Image();

myimage.src = "image_1.jpg";

Сонымен біз Image обьектісінің экземплярын құрып, оған нақты суретті қалай меншіктеуді түсіндік. Ал енді осыны бірнеше суретке арнап орындау үшін Array обьектісінің көмегіне жүгінеміз. Оның біраз әдістері бар:

Array әдісі	Сипаттамасы
concat	Екі жиымды бір жиымға біріктіреді. Мысалы: a = new Array(0,1,2,3,4); //дайын мәндері бар b = new Array(5,6,7,8,9); //жиым құрады c = a.concat(b);
join	Жиымның барлық элементтерін бір жолға біріктіреді. Мысалы: a = new Array(0,1,2,3,4); b = a.join("-"); "0-1-2-3-4" жолдарын қайтарады.
pop	Соңғы элементті жиымнан жояды және осы элементті қайтарады.
push	Жиым соңына бір не одан көп элементті қосады және соңғы қосылған элементті қайтарады.
reverse	Жиымды нөлдік элемент соңғы болатындай және т.б етіп төңкереді.
shift	Жиымның нөлдік элементін жояды және оны қайтарады.
slice	Жиымның бір бөлігін ерекшелейді.  Синтаксисі: slice(start, [end]).  Мысалы: newArray = myArray.slice(0, -1);
splice	Жиымға элементтер қосады және ондағыны жояды.
sort	Жиым элементтерін сұрыптайды.
toString	Жиымның жолдық берілу түрін қайтарады.
unshift	Жиымның бас жағына бір не бірнеше элементтерді қосады.

 

Array обьектісінің экземлярын құру Image -ден көп айырмашылығы жоқ. Бірақ алдыңғы мысалды толықтыра отырып, біз басқа обьектілермен жұмыс кезіндегі мүмкіндігіміздің кеңейгенін көреміз.

Атап айтқанда, суреттермен жұмыс істегенде:

myimage = new Array();

myimage[0] = new Image();

myimage[1] = new Image();

myimage[2] = new Image();

myimage[0].src = "image_1.jpg";

myimage[1].src = "image_2.jpg";

myimage[2].src = "image_3.jpg";

Мұны алдыңғы мақаладағы код сияқты, циклдің көмегіне сүйеніп те ұйымдастыруға болар еді.

myimage = new Array();

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

{

myimage[i] = new Image();

if(i==0) myimage[i].src = "image1.jpg";

if(i==1) myimage[i].src = "image2.jpg";

if(i==2) myimage[i].src = "image3.jpg";

}

Суреттерге байланыстыру үшін біз myimg секторымен пайдаланамыз:

<IMG id=myimg onclick=javascript:presentation()src="images/image1.jpg">

presentation  функциясында біз визуалды сүзгіштердің RevealTrans деген бірін қолдандық.

Синтаксисі:  revealtrans ( duration = duration, transition = transitionshape ). Duration  бір күйден екінші бір күйге өту уақыты.

Жазба форматы  секундтар.миллисекундтар  Мысалы:  1.3 = 1 секунд, 300 миллисекунд.

Transition ( өту ) мыналардың бірі болуы мүмкін:

Мәні	Сипаттамасы
0	Box in
1	Box out
2	Circle in
3	Circle out
4	Wipe up
5	Wipe down
6	Wipe right
7	Wipe left
8	Verical blins
9	Horizontal blinds
10	Checkerboard across
11	Checkerboard down
12	Random dissolve
13	Split vertical in
14	Split vertical out
15	Spli horizontal in
16	Split horizontal out
17	Strips left down
18	Strips left up
19	Strips right down
20	Strips right up
21	Random bars horizontal
22	Random bars vertical
23	Кездейсоқ әсері/эффект (23-тің кезкелгені)

Apply  әдісі сүзгі нақты қолданылған кезде пайдаланылады.

Play  әдісі сүзгіні нақты іске қосар кезде пайдаланылады.

Stop  әдісі сүзгінің қолданылуын тоқтатуда пайдаланылады және сүзгі іске қосылған уақыттың кезкелген сәтінде шақырылуы мүмкін.

Біз көрсеткен myimg  селекторына RevealTrans мына түрде қолданылды:

myimg.style.filter="revealTrans(duration=1.5,transition=8)";

яғни, Verical blins өту 1,5 секундқа кешікті. Сіз өту түрін өзгертіп, әсерді көруіңізге болады. Өкінішке орай, RevealTrans Internet Explorer 4.0 және одан жоғарыларда ғана жұмыс істейді.