Autor | Zpráva | ||
---|---|---|---|
Jcas Profil * |
#1 · Zasláno: 9. 6. 2010, 11:03:17
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 * |
#2 · Zasláno: 9. 6. 2010, 21:30:50
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 |
#3 · Zasláno: 9. 6. 2010, 22:33:52
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 * |
#4 · Zasláno: 10. 6. 2010, 06:19:11
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 * |
#5 · Zasláno: 10. 6. 2010, 06:46:27
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 |
#6 · Zasláno: 10. 6. 2010, 10:29:37
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 * |
#7 · Zasláno: 10. 6. 2010, 11:16:00
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 |
#8 · Zasláno: 10. 6. 2010, 11:41:15
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 * |
#9 · Zasláno: 10. 6. 2010, 12:57:16
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.
|
||
Časová prodleva: 14 let
|
0