Przygoda z JavaScript

Dział poświęcony JavaScriptowi - tworzeniu dynamicznym stron WWW.
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

Masakraaaaaa! Ten CSS mnie chyba zawirusował, taki bład, aż wstyd. :shock:
Zawsze walcz do końca i nigdy się nie poddawaj!
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Przygoda z JavaScript

Post przez Morfidon »

Myślę, że ta funkcja powstała zanim przyszła koncepcja JSON (choć nie jestem tego pewien), teraz najczęściej stosuje się podobną konstrukcję, którą zastosowałeś Ty ;)
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

JSON, to biblioteka JavaScripta? Jeszcze tego nie używałem...
Poza tym właściwości metody open działają na firefoxie bez zarzutu, na inny przegladarkach raz nie wyswietla czy to menubara, toolbara itd., ale height i width działa OK. Dziwnie jakoś to działa, bo pewnie przeglądarki albo zwracają domyslne ustawienia albo nie chcą ich wogóle zwracać, albo nie wiem już sam co. :d Ale używanie tych okienek ma może kilka praktycznych zastosowań: np. komuś coś wyświetlić(choćby regulamin w nowym okienku), ablo wydruk jakiś czy to w pdfie czy na stronie.
Zawsze walcz do końca i nigdy się nie poddawaj!
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Przygoda z JavaScript

Post przez Morfidon »

Właściwie na ten moment trochę straciło to zastosowań, bo regulamin możesz dynamicznie wyświetlić tworząc przy pomocy javascript element div, wbijając w niego tekst z pliku, a gdy ktoś kliknie na jakiś przycisk to ten div znika... JSON to JavaScript Object Notation, możesz łatwo tworzyć w postaci klucz wartość elementy do przekazywania pomiędzy funkcjami / plikami.
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

Stworzyłem sobie okienko, które lata po ekranie po kliknięciu, 5x. Wszystko fajnie, ładnie śmiga:

Code: Zaznacz cały

function biegajPoEkranie()
{ 
     setTimeout("a.moveTo(200,100);a.focus();", 1000);
     setTimeout("a.moveTo(300,100);a.focus();", 2000);
     setTimeout("a.moveTo(100,200);a.focus();", 3000);
     setTimeout("a.moveTo(200,300);a.focus();", 4000);
     setTimeout("a.moveTo(200,400);a.focus();", 5000);
}
Chciałem to wrzucić w pętlę, ale do jasnej ciasnej, wyświetli tylko pierwszą pozycję wylosowaną. Przytłacza mnie ten język troszkę. Zasięg zmiennych źle? Może jakimś cudem random przyjmuje cały czas wartość tę samą, czy może clearTimeout trzeba ustawić, lub coś innego? Jaki efekt chce osiągnąć? Chcę, żeby po przyciśnięciu <h1> co 0,1s okienko samo się zmieniało tyle razy ile ejst to wypisane w pętli. Tak jak było wyżej.

Code: Zaznacz cały

function biegajPoEkranie()
{ 
          
     for(var i=1; i<10; i++)
     {
          losujPozycjeX = Math.floor(Math.random()*1000)+100;
          losujPozycjeY = Math.floor(Math.random()*1000)+100;
                
          setTimeout("a.moveTo(losujPozycjeX,losujPozycjeY);a.focus();", (i*1000));
     }
}
Jeśli zrobię coś takiego, to mignie mi 9 okienek i 1 zostanie aktywne:

Code: Zaznacz cały

function biegajPoEkranie()
{ 
          
     for(var i=1; i<10; i++)
     {
         var losujPozycjeX = Math.floor(Math.random()*1000)+100;
         var losujPozycjeY = Math.floor(Math.random()*1000)+100;
                
         move = a.moveTo(losujPozycjeX,losujPozycjeY);a.focus();
         setTimeout("move", (i*1000));
     }
}
Move jest bez VAR i w cudzysłowach wypisane. Natomiast jesli dodałbym VARa to wypisując wtedy bez cudzosłowia, wyświetli mi tylko 1 okienko w randomowych miejscu, tak jak pierwszy przykład z pętlą.
Zawsze walcz do końca i nigdy się nie poddawaj!
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

Jestem aktualnie na zastosowaniu rollover.
Jest możliwość uzyskania przejścia pomiędzy obrazkami np. jeden powoli znika a drugi na niego już się wczytuje? Rollover jest już bardzo dynamiczny, ale taki 'sztywny'. Zwykły gif. Teraz rozumiem dlaczego Flash nie zrobiłbyś jako videokursu. ;)
Zawsze walcz do końca i nigdy się nie poddawaj!
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Przygoda z JavaScript

Post przez Morfidon »

Da się, ale jest to dosyć trudne do napisania - w jQuery to jedna linia kodu.
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

Tak myślałem, że w JQUERY to bd 1-2 linie kodu. :d
Efekt rollover nie jest opóźniany za pomocą setTimeouta, bo Intervala na starcie strony lub jej odświeżenia zamula od 1 do 2 sekundy, aby wyświetlić pierwszy w kolejności obrazek. Nie wiem czemu się tak dzieje. Dlatego wolę używać setTimeouta rekursywnie, w taki sposób:

Code: Zaznacz cały

HTML
<body onload="wypisujObrazki();">
<img src="baner1.PNG" name="rollover" />

Code: Zaznacz cały

JavaScript
i=0;
tablica = new Array("baner1.PNG", "baner2.PNG", "baner3.PNG"); //nazwy obrazkow

function wypisujObrazki()
{     
    document.images.rollover.src = tablica[i];
    setTimeout("wypisujObrazki()", 1000);
    i++;
    
    if(i==tablica.length) //jesli bedzie 3  to skocz wtedy do poczatku
        i=0;
}
A propo funkcji onload. Zauwazyłem, że wolno jej tylko używać przy body. Są miejsca gdzie można jeszcze ją użyć w HTMLU? Nie mówię oczywiscie o window.onload = funkcja.
Zawsze walcz do końca i nigdy się nie poddawaj!
Morfidon
Administrator
Administrator
Posty: 1332
Dołączył(a): wtorek, 5 sierpnia 2008, 21:48
Contact:

Re: Przygoda z JavaScript

Post przez Morfidon »

http://www.w3schools.com/jsref/event_onload.asp

sekcja:
"onload is Supported by the Following HTML Tags:"
tajger
Zaawansowany
Zaawansowany
Posty: 223
Dołączył(a): niedziela, 11 marca 2012, 03:08
Lokalizacja: Poland
Contact:

Re: Przygoda z JavaScript

Post przez tajger »

Zastanawiam się jak działa this w tym przypadku:

Code: Zaznacz cały

HTML
<p id='paragraf'>Tekst1</p>

JS
var p = document.getElementById("paragraf");
p.onmouseover = function()
{
    this.innerHTML = "Tekst2";
}
Przecież pod this wystarczy wrzucić p i będzie działać tak samo. Miałem też ostatnio taki przykład, że nawet jak podmieniłem this w tym momencie to nie działało. Jak ten this działa ? ;D
Czy to nie jest też tak, że jak chcemy raz coś wyświetlić to bez thisa zadziała, a jak wrzucimy jakieś wartości ktore są pobierane skądś w pętli to trzeba się odwołowywayć THISEM ?
Zawsze walcz do końca i nigdy się nie poddawaj!
Post Reply