Autor Zpráva
Jcas
Profil *
Po krátké době učení, jsem tu zpět s trochu upraveným scriptem. Pokusil jsem se dle rady přistupovat ke scriptu objektivně (tohle se mi asi moc dobře nepovedlo) a zapojit pole.
viz. původní verze

Nicméně začínám mít pocit, že jsem ho z větší části konečně pochopil (jak opravdu funguje). Pokud něco chápu blbě, tak mě prosím opravte. (jednotlivé <div> s obrázky jsou na sobě. Zprůhledním vrchní div a je vidět obrázek pod ním)

var Show = 
{
	set_pole : function(jmeno, pocet) {......},
	getShow : function() {....},
	znova : function () {.....},
	set_alpha : function (obj,opacity) {......},
}


- deklaruji proměnnou Show
- K objektu jsou přiřazeny 4 vlastnosti a každá ukazuje na funkci
--------------------------------------------------------------------------------

set_pole : function(jmeno, pocet) {
		var pole = new Array(jmeno);
			for (var i=1; pole.length<pocet; i++) {
			pole[i] = jmeno + i;
			}
		this.pole = pole;
		this.y = this.pole.length; 
		this.y--; 
		Show.getShow();
	},


- tato funkce je zavolána událostí z html
- Deklaruji pole, id jednotlivých <divů> je např. obr, obr1, obr2.....
- pomocí "this" přiřadím pole k objektu a tím tuto proměnou zveřejním pro všechny ostatní funkce.
- this.y, vytvořím, protože obrázek, který je úplně naspod se nikdy nebude zprůhledňovat.
Dále ve scriptu procházím pole a jednotlivé obr zprůhledňuji. Toto je jediný způsob, který jsem vymyslel,
abych při procházení pole "for () {}" vynechal poslední prvek.
---------------------------------------------------------------------------------------------------

getShow : function() {
		var alphac; 
		var direction = -1;
		var delay = 5000;
		
			this.krok = function (hodnota) {			//postupně snížím průhlednost ze
																//100% na 0%, nebo naopak
			   if (hodnota == 0) {direction = 1;}
			   alphac = hodnota;

				for (x = 100; x >= 0; x--) {
				alphac += direction;

   				(function(id, alphac) {
        			window.setTimeout(function(){
          			Show.set_alpha(id, alphac);
        			}, delay);
      				})(this.pole[i], alphac);
				delay += 30;
    			
				}

			}

			this.zpet = function () {				//první obr. je už opět zviditelněn,
				(function(id, alphac) {				//takže všem pod ním nastavím natvrdo
				window.setTimeout(function(){		//100% neprůhledný
				Show.set_alpha(id, alphac);
				Show.znova();
				}, delay);
				})(this.pole[i], 100);	
			}
			
			
		for (var i=0; this.y>i; i++) {		//použil jsem y, protože se mi nepodařilo vytvořit podmínku tak, 
		this.krok(100);	delay += 5000;		//aby vynechal poslední prvek pole
		}
		i = 0;
		this.krok(0);
		for (i=1; this.y>i; i++) {	
		this.zpet();
		}
	
	},


- "funkci, která je přiřazena k objektu se říká metoda"
- Takže zde mám dvě metody. "krok" a "zpět". Správně?
- proměnné deklarované na začátku pomocí var, jsou lokální pro celou funkci, která je přiřazena vlastnosti getShow a proto jsou přístupné i pro jednotlivé metody.
-metody musím deklarovat dříve, než je zavolám

-----------------------------------------------------------------------------------------
ČASOVÁNÍ

-konečně jsem asi pochopil jak funguje časování a proč musím mít proměnnou delay. Script nečeká, až načasovaná událost proběhne, ale tuto událost jakoby "odloží bokem - a další do fronty" a pokračuje dál.
To znamená, že když někde v následujím kroku provedeme nějakou událost (NENAČASOVANOU), tato událost (povel, příkaz) proběhne okamžitě a ne až na ni přijde řada.

Např. metoda "zpět". Kdyby nebyla načasovaná, tak proběhne dřív, než se všechny obrázky zprůhlední. Tím že ji načasuji, tak se odhodí do fronty a provede se až na ni přijde řada. Proto se také musí zvětšovat "delay". Tu frontu chápu asi takto:

Script probíha a načasované události odkládá, takže vníka asi takováto fronta.

window.setTimeout.........100* pro pole[0]
window.setTimeout.........100* pro pole[1]
window.setTimeout.........100* pro pole[2]
   .
   .
   .
window.setTimeout.........100* pro pole[0], zpětná animace, zviditelnění
window.setTimeout.........metody zpět


-kdyby jsme místo "delay", které se postupně zvětšuje, použili číslo (přesné množství milisekund), tak protože se tyto událostí do té fronty naskládají velice rychle, tak by potom proběhli všechny téměř současně. Když zvětšujeme "delay", tak každá další proběhne právě o tuto hodnotu později.

PROBLéM - jestli jsem to teda pochopil správně, tak tu mám jeden problém (pokud to teda je problém) a to, že celá funkce probíhá pořád dokola. To tedy znamená, že tato fronta načasovaných událostí, se stále zvětšuje. To asi není dobré, protože když někdo bude na stránkách třeba hodinu, tak tato fronta bude tak dlouhá, že už si to ani nepůjde představit. Nevím co to způsobí a jestli to něčemu vadí.

-------------------------------------------------------------------------------------------------
FUNKCE, která zajistí kolečko

znova : function () {
	Show.getShow ();
	}


- "když funkce skončí zaniká a tím zanikají i proměnné"
- Dle toho, tedy nevadí, že když funkci zavolám znovu, znovu se všechno deklaruje. Správně?

-------------------------------------------------------------------------------------------------
Poslední vlastnost je převzaná a ta nastaví hodnotu "opacity" pro jednotlivé obr. a pro jednotlivé prohlížeče.

set_alpha : function (obj,opacity)										
    {																				
    var object = document.getElementById(obj).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    },


--------------------------------------------------------------------------------------------------
LEXIKáLNí UZáVěR

this.krok = function (hodnota) {				//tuto anonymní funkci volám z funkce Show.getShow
														//to znamená, že pro tuto funkci jsou všechny proměnné,
	if (hodnota == 0) {direction = 1;}		//které jsou deklarovány v Show.getShow, viditelné a tato 
	alphac = hodnota;								//funkce s nimi může pracovat (alphac, ...)

		for (x = 100; x >= 0; x--) {			//to stejné platí pro cyklus for.
		alphac += direction;

   			(function(id, alphac) {				//vnořená anonymní funkce, která vidí pouze proměnné, 
   														//které jsou definovány v metodě "krok", a to proto
   														//že tuto funkci voláme z funkce přiřazené metodě
   														//"krok". Ostatní proměnné ji musíme předat jako
   														// parametr
        		window.setTimeout(function(){
          	Show.set_alpha(id, alphac);
        		}, delay);
        		
      		})(this.pole[i], alphac);			//z tohoto místa voláme vnořenou anonymní funkci
				delay += 30;
    			
				}

			}


- Show.getShow.krok - zná this.pole, a proto, když voláme vnořenou anonymní funkci, můžeme jí pole předat jako parametr. Když to neuděláme, vnořená funkce nebude this.pole znát, protože ji voláme z Show.getShow.krok, a proto this ukazuje na jiný objekt (kontext). "alphac" a "delay" vnořená funkce vidí, protože jim přiřazujeme hodnotu přímo ve funkci, ze které vnořenou anonymní funkci voláme. Ovšem "alphac" musíme předat jako parametr, protože tuto proměnnou použijeme ve druhé vnořené funkci.

JAK TO TEDA FUNGUJE
-pro vysvětlení si očísluji funkce

this.krok = function (hodnota) {		// 1.funkce
														
	if (hodnota == 0) {direction = 1;}		//podmínka, která zajistí, jestli budeme zeslabovat, nebo 
	alphac = hodnota;								//zesilovat

		for (x = 100; x >= 0; x--) {			//cyklus vidí prom. "alphac, direction, delay, this.pole, 
		alphac += direction;						//i," vše bylo deklarováno ve funkci, odkud jsme this.krok
														//zavolali, nebo si přímo cyklus sám přiřadí hodnotu prom.
														
														
   			(function(id, alphac) {				//2. funkce, vnořená do první 
   														//pouze se deklaruje, ještě se neprovádí její obsah
   														//funkce vidí postupně se měnící alphac
   														
        		window.setTimeout(function(){		//3. funkce vnořena do 2. Tato funkce vidí měnící se 
          	Show.set_alpha(id, alphac);		//"delay", protože to probíhá ve 2.funkci
        		}, delay);
        		
      		})(this.pole[i], alphac);			//lexikálním uzávěrem zavoláme 2.funkci a předáme jí   
				delay += 30;			// parametry, aby byly dostupné pro 3.funkci.
				}											// Teprve teď se provede obsah 2. funkce
															// a tedy i window.setTimeout a 3.funkce
															// tím skončí for pro x=100 a celé znovu pro x=99
			}


--------------------------------------------------------------------------------------------

Pochopil jsem vše správně?
Je to stále špatná konstrukce, nebo je to už lepší?
Neprovedl jsem někde něco, co se zásadně nedělá?
Vadí, že se hromadí načasované události? Pokud ano, tak mě moc nenapadá, jak script zastavit.
všem moc děkuji
Jcas
Profil *
a něco je špatně, protože, zatímco předchozí verze dokázala obsloužit více volání, tak tato to nedokáže. Myslím, že problém bude v this. pole, ale zatím nevím proč.
_es
Profil
Jcas:
a něco je špatně, protože, zatímco předchozí verze dokázala obsloužit více volání, tak tato to nedokáže. Myslím, že problém bude v this. pole, ale zatím nevím proč.

Predtým si asi vytváral viacej objektov poľa a tuto je pole len jedno: Show.pole.
Nejako mi nie je jasné, načo tam je vlastnosť y.
Celé mi to pripadá, že namiesto toho, aby si sa sústredil na to, čo chceš dosiahnuť, tak sa snažíš len vyrábať nejaké chaotické objektové nadstavby, v ktorých sa nevyznáš.
Pochybujem, že sa tu niekomu bude chcieť skúmať nejako podrobne ten tvoj kód a vysvetľovať ti tu celé kapitoly nejakej literatúry.
A ak áno, tak je možné, že ťa ešte viac dopletie.
Jcas
Profil *
y je tam proto, protože jsem nedokázal vytvořit podmínku tak, aby se s posledním prvkem pole nic nedělalo.
Jcas
Profil *
nečekám vysvětlovaní kapitol. Jen chci skontrolovat, jestli to chápu dobře a pokud ne, tak mě na to upozornit. Ovšem hlavně prosím o potvrzení, že srcipt je takový, že ho můžu bez obav použít na stránkách. V předchozí verzi bylo jasně řečeno, že stavba je prostě špatná.

var Show = 
{
	set_pole : function(jmeno, pocet) {
		var pole = new Array(jmeno);
			for (var i=1; pole.length<pocet; i++) {
			pole[i] = jmeno + i;
			}
		//this.pole = pole;
		var y = pole.length; 
		y--; 
		Show.getShow(pole, y);
	},

	getShow : function(pole, y) {
		var alphac; 
		var direction = -1;
		var delay = 5000;
		
			this.krok = function (hodnota) {

			   if (hodnota == 0) {direction = 1;}
			   alphac = hodnota;

				for (x = 100; x >= 0; x--) {
				alphac += direction;

   				(function(id, alphac) {
        			window.setTimeout(function(){
          			Show.set_alpha(id, alphac);
        			}, delay);
      				})(pole[i], alphac);
				delay += 30;
    			
				}

			}

			this.zpet = function () {
				(function(id, alphac) {
				window.setTimeout(function(){
				Show.set_alpha(id, alphac);
				Show.znova(pole, y);
				}, delay);
				})(pole[i], 100);	
			}
			
			
		for (var i=0; y>i; i++) {		//použil jsem y, protože se mi nepodařilo vytvořit podmínku tak, 
		this.krok(100);	delay += 5000;		//aby vynechal poslední prvek pole
		}
		i = 0;
		this.krok(0);
		for (i=1; y>=i; i++) {	
		this.zpet();
		}
	
	},

	znova : function (pole, y) {
	Show.getShow(pole, y); 
	},


	set_alpha : function (obj,opacity) {
    var object = document.getElementById(obj).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    },


}

Jo takhle to funguje pro více volání.
_es
Profil
Jcas:
Neviem, prečo sa to silou mocou to snažíš obaliť do nejakých zložitých objektov,
keď to vyzerá, že máš medzery v základnejších veciach a ešte si komplikuješ chaosom navyše.
A keď už, tak je viac možností takého návrhu a ty si si asi vybral na ten účel nevhodný.
V hentakom niečom sa nikto nemôže vyznať.

Vieš o tom, že do poľa môžeš dať aj priamo objekty HTML elementov a nemusíš ich stále vyhľadávať podľa id?

this.y, vytvořím, protože obrázek, který je úplně naspod se nikdy nebude zprůhledňovat.
Tak na čo teda ten obrázok do toho chaotického objektu montuješ?
Jcas
Profil *
Tak já fakt nevím. Bylo mi poraděno, ať to řeším objektově. To že můžu přidat do pole přímo objekty HTML vím, ale nikdy nevím, jaký objekt ten script zavolá (protože do stránky budou postupen času objekty přibývat). Je to prostě stránka se členy organizace a každý člen má u své osoby několik fotek, které chci aby se postupně měnily.
_es
Profil
Jcas:
To že můžu přidat do pole přímo objekty HTML vím, ale nikdy nevím, jaký objekt ten script zavolá (protože do stránky budou postupen času objekty přibývat)
Akože nevieš? veď to, čo do toho poľa dáš, tak v tom poli bude.
A či to je pole s hodnotami id alebo pole elementov so svojimi id je z hľadiska návrhu snáď skoro jedno.
Jcas
Profil *
Asi nevím jak to myslíš, ale když budu odkazovat například pátý <img> a pak přibude nový člen, kterého dle abecedy zařadím do prostřed stánky, tak najednou pátý img bude třeba osmý img.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0