Translate this site
  • ► 2012 (3)
  • ► 2011 (51)
  • ► 2010 (38)
  • ▼ 2009 (36)
    • < września 2009 >
    Pn Wt Ś Cz Pt So N
      1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30        

    Weź udział!

    Logo konkursu Wolny Wybór

    wypróbuj

    Logo wielojęzycznego chatu

    : Home / blog / wpisy wg daty
    Wtorek, 22 września 2009
    Efekt rollover (CSS) PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 19:10
    HTML/CSS / Artykuły HTML / CSS

    Na nowoczesnych stronach znaleźć można wiele elementów dynamicznych. Jednak na dobrych stronach efekty te nie wykluczają elastyczności.

    Znany powszechnie efekt rollover, o ile doskonale spełnia pierwszą rolę - wprowadza elementy "interakcji" z internautą - o tyle, nie nie spełnia drugiego kryterium... Nie pozwala na elastyczność kodu, gdyż kod JS jest zagnieżdżony na stałe w kodzie XHTML. A więc pozbycie się tego efektu wymaga ingerencji w kod. A to nie dobrze. Read more

    Zmieniony ( niedziela, 14 marca 2010 14:59 )

    Wyśrodkowanie za pomocą CSS PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 19:07
    HTML/CSS / Artykuły HTML / CSS

    Jeszcze klka lat temu każdy, kto chciał wyśrodkować jakiś fragment strony używał znaczników:

    Read more
    Zmieniony ( niedziela, 05 grudnia 2010 01:37 )

    Stos PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 19:03
    Java Script / Artykuły JS

    Stos jest strukturą danych („Ostatni wchodzi, pierwszy wychodzi: Last In First Out” - LIFO), która polega na tym, że nowe dane odkładane są na wierzchołek, i tylko stamtąd można je zebrać. Można to porównać ze stosem talerzy – gdy chcesz odłożyć tam nowy talerz kładziesz go na „górę” (tu nazywa się wierzchołkiem), gdy chcesz zjąć talerz to zdejmujesz go z góry (zakładamy, że kombinujesz).

    W JS stos można tworzyć abstrakcyjnie – robimy zwykłą tablicę i zmienną która wskazuje na wierzchołek. Ale... po co, skoro JS dostarcza nam gotowca :).

    {codecitation}<html>
    <head>
        <script type="text/javascript">

        function dzialanie_stosu()
        {
            var stos = new Array(); // stos jest zwykłą tablicą
            stos.push('Ania');
            stos.push('Justyna');
            stos.push('Kasia');
            stos.push('Elsa');
            /*
                aktualnie na stosie jest tak:
                Elsa - to jest wierzchołek
                Kasia
                Justyna
                Ania - to jest sam spód stosu
            */
            alert(stos.toString()); // wyswietlmy sobie stos
            stos.pop() // zrzucenie wierzchołka "Elsa" ze stosu
            alert(stos.toString()); // Elsy nie ma :(
            stos.push('Marta');
            alert(stos.toString()); // na wierzchołku jest Marta
        }
        </script>
    </head>
    <body onload='dzialanie_stosu()'>  </body>
    </html>{/codecitation}

    I wszystko ładnie działa :). Bardzo przydatne przy wielu algorytmach.

    Read more

    Kolejka PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 19:02
    Java Script / Artykuły JS

    Kolejka jest przydatną strukturą danych (First In First Out). Polega ona na tym, że dane dodawane są na koniec, a pobierane z początku – jak kolejka w sklepie. Każdy staje na końcu, a pierwszy jest zawsze obsługiwany.

    {codecitation} <html>
    <head>
        <script type="text/javascript">

        function dzialanie_kolejki()
        {
            var kolejka = new Array(); // kolejka jest zwykłą tablicą
            kolejka.push('Ania');
            kolejka.push('Justyna');
            kolejka.push('Kasia');
            kolejka.push('Elsa');
            /*
                aktualnie w kolejce jest tak:
                Elsa - to jest ostatnia pozycja w kolejce
                Kasia
                Justyna
                Ania - to jest pierwsza pozycja w kolejce
            */
            var osoba = kolejka.shift();
            alert(osoba); // wyswietlmy sobę, która była pierwsza w kolejce
            alert(kolejka .toString()); // Elsy nie ma :(
            kolejka.push('Marta');
            alert(kolejka .toString()); // Marta jest na końcu
        }
        </script>
    </head>
    <body onload='dzialanie_kolejki()'> </body>
    </html>{/codecitation}

    I wszystko ładnie działa :). Bardzo przydatne przy wielu algorytmach.

    Read more

    Tablice PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 18:37
    Java Script / Artykuły JS

    Tablice w Javascript można stworzyć na kilka sposobów:

    {codecitation}var tab1 = new Array(); // wielkość liter ma znaczenie - musi być dokładnie `Array`{/codecitation}

    W ten sposób stworzyliśmy nowy obiekt Array. Można podać atrybut będący rozmiarem tablicy, jednak w razie potrzeby i tak zostanie to zignorowane i będzie można dodać więcej pozycji do tablicy, niż to wstępnie zadeklarowaliśmy. Umieśćmy jakieś dane w tym naszej tablicy:

    {codecitation}tab1[0] = "To jest mój napis";
    tab1[1] = 2;{/codecitation}

    Jeśli wcześniej programowałeś w językach takich jak C, czy Java to zdziwi cię, że w jednej tablicy można przetrzymywać zarówno ciąg znaków jak i liczby. W JS jest to jednak całkowicie normalne.

    Można także umieścić te dane zaraz przy tworzeniu tablicy:

    {codecitation}var ta1 = new Array("To jest mój napis", 2);{/codecitation}

    Wynik będzie identyczny.

     

    Drugi sposób na stworzenie tablicy zaczerpnięty jest z JSON-a:

    {codecitation}var tab2 = [];{/codecitation}

     

    Aby umieścić w nim nowe dane postępujemy identycznie jak w 1 kodzie.

    Możemy też od razu umieścić jakieś dane podczas tworzenia tablicy:

    {codecitation}var tab2 = ["To jest mój napis", 2];{/codecitation}

     

    Oba zapisy są równoważne. Zapis drugi wg mnie jest lepszy, gdyż z moich testów wynika, że jest nieznacznie szybszy. 

    Read more
    Zmieniony ( wtorek, 22 września 2009 19:01 )

    Dwa sposoby na stworzenie funkcji PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 18:22
    Java Script / Artykuły JS

    javascript jest niezwykle ekspresyjnym językiem. Istnieje w niej wiele ciekawych rozwiązań pozwalających tworszyć krótszy lub bardzeij czytelny kod. W tej poradzie pokażę dwa różne podejścia do tworzenia funkcji / metod.

    Sposób 1 - tradycyjny:

    {codecitation}function nazwa_funkcji_1() {
       alert("nazwa_funkcji_1: Ja istnieje!");
    }{/codecitation}

    Jeśli kiedykolwiek tworzyłeś swoje funkcje, to z pewnością zapis ten jest ci dobrze znany. Zapis ten jest używany także w PHP. Po słowie kluczoowym function należy podać ciąg znaków spełniający odpowiednie warunki (nie może zaczynać się od liczby, nie może mieć spacji itp, i td.) po czym należy podać parę nawiasów. W nawiasach można podać argumenty, ale nie trzeba.

    Drugio sposób (funkcja anonimowa) - przypisanie referencji do zmiennej:

    {codecitation}var nazwa_funkcji_2 = function() {
        alert("nazwa_funkcji_2: Ja istnieje!");
    }{/codecitation}

    Tworzymy zmienną do której przypisujemy funkcję. Ważne: funkcję, a nie wynik funkcji! Czyli za każdym razem, kiedy napiszemy nazwę zmiennej i dodamy nawiasy, zostanie wywołana funkcja, którą przypisaliśmy do zmiennej.

    Obie funkcje wywołuje się tak samo:

    {codecitation}nazwa_funkcji_1();
    nazwa_funkcji_2(){/codecitation}

    Oczywiście funkcja anonimowa może także przyjmować argumenty:

    {codecitation}var nazwa_funkcji_2 = function(a, b, c) {
        alert("a: " + a + "\nb: " + b + "\nc: " + c);
    }{/codecitation}

    Obie notacje są równoważne. Co więcej można zrobić tak:

    {codecitation}function suma(a, b) {
        return a+b;
    }

    var przyklad_referencja = suma;
    var przyklad_wynik = suma(2, 2);
    alert(przyklad_referencja);
    alert(przyklad_wynik);{/codecitation}

    Pierwszy alert wyświetli nam ciało funkcji, drugi wynik działania funkcji.

    Istnieje co prawda jeszcze jeden sposób na tworzsenie funkcji - new Function(), jednak jest to sposób rzadko używany i odradzany.
     

    Read more
    Zmieniony ( piątek, 25 września 2009 23:40 )

    Dopisywanie własnych metod do obiektów PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 18:04
    Java Script / Artykuły JS

    W poradzie dotyczącej dodawania nowych metod do istniejących obiektów wspomniałęm, że da się dodawać metody do wszystkich obiektów - nie tylko do tego jednego wybranego.

    Przykładowy kod:

    {codecitation} String.prototype.letterSpacing = function() {

        var n = this.length;
        var str_result = '';

        for(var i=0; i<n; i++) {
            str_result += this.charAt(i) + ' ';
        }

    return str_result;
    } {/codecitation}

    W powyższym kodzie dodaliśmy nową metodą do wszystkich obiektów tworzonych według prototypu obiektu String. Dzięki temu, każdy obiekt String będzie posiadał tę metodę:

    {codecitation}var oNapis1 = new String("Mój pierwszy napis");
    var oNapis2 = new String("Kolejny tekst");

    alert(oNapis1.letterSpacing());
    alert(oNapis2.letterSpacing());{/codecitation}

    Gdyby teraz do jednemu z tyhc obiektów nadpisać metodę letterSpacing:

    {codecitation}oNapis1.letterSpacing = function() {
    return this.toLowerCase(); // zwraca wszystko małymi literami
    }

    alert(oNapis1.letterSpacing());
    alert(oNapis2.letterSpacing());{/codecitation}

    Pierwszy alert da w wyniku to, co zakodowaliśmy w definicji letterSpacing przypisanej do prototypu obiektu String. Drugi alert wyświetli wynik działania metody nadpisanej (czyli toLowerCase()).

    Zrozumienie tego początkowo nie jest łatwe, ale można się w końcu przyzwyczaić.

    Read more
    Zmieniony ( wtorek, 22 września 2009 18:15 )

    Dopisywanie własnych metod do istniejących obiektów PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 17:44
    Java Script / Artykuły JS

    Stwórzmy sobie obiekt [String]:

    {codecitation}var txt = new String('To jest mój napis');{/codecitation}

    Obiekt ten posiada kilka metod (funkcji), choćby:

    {codecitation}alert(txt.toLowerCase()); // małymi literami{/codecitation}

    Dodajmy do niego dodatkową metodę:

    {codecitation}txt.letterSpacing = function() {
        var n = this.length;
        var str_result = '';
        for(var i=0; i<n; i++) {
            str_result += this.charAt(i) + ' ';
        }
    return str_result;

    }{/codecitation}

    Oraz jej wywolanie:

    {codecitation} alert(txt.letterSpacing()); {/codecitation}

    Zauważ, że jeśli zaraz za tym wyświetlisz ponownie

    {codecitation} alert(txt); {/codecitation}

    Nadal litery są razem. Dzieje się tak dlatego, że nie zmienialiśmy this, a jedynie przysywaliśmy wszystko do str_result a potem to zwróciliśmy.

    Wartym zauważenia jest też to, że jeśli dodasz teraz nowy obiekt String, to nie posiada on tej metody:

    {codecitation}var nowy_txt = new String('Poszła baba na targ');

    alert(nowy_txt.letterSpacing());{/codecitation}

    Taki kod wywoła błąd:

    {codecitation}Błąd: nowy_txt.letterSpacing is not a function{/codecitation}

    Dlaczego? Dodaliśmy tę metodę dokładnie do tego jednego obiektu, nie do wszystkich obiektów String. To tak jakbyśmy nauczyli czegoś jednego człowieka. Nie możemy później wymagać, aby każdy to potrafił.

    Jest jednak i na to sposób, choć o tym w innej poradzie.

    Read more
    Zmieniony ( wtorek, 22 września 2009 18:04 )

    Łączenie stringów PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 17:39
    Java Script / Artykuły JS

    W JS operatorem łączącym dwa stringi [ciągi znaków] jest '+'. W prostych wygląda to tak:

    {codecitation} <script type="text/javascript">
    var string_1 = "To jest";
    var string_2 = "tekst";

    alert(string_1 + ' ' + string_2);
    // można oczywiście połączyć to też tak:
    // alert(string_1 + string_2);
</script> {/codecitation}

    W wyniku tego kodu otrzymamy alert wyświetlający: „To jest tekst”. Ktoś mógłby zapytać, po co więc ta porada? Otóż, czasem zdarza się, że nie jest tak fajnie, że łączymy tylko dwa stringi, ale chcemy także wpleść w to jaką liczbę. Niestety, jako, że w JS typ danych nie jest na sztywno przypisany do zmiennej [tak, jak np. w C czy Pascalu], to się okazuje, że często dwie liczby zamiast dodać, zostaną połączone, np:

    {codecitation} <script type="text/javascript">
    var liczba_1 = 5;
    var liczba_2 = 2;

    alert('Jacek ma ' + liczba_1 + ' jablek,\n' +
        'a Agatka ma ' + liczba_2 + ' gruszki.\n' +
        'Razem mają więc ' + liczba_1+liczba_2 + ' owoców!');
</script> {/codecitation}

    Wynikiem działania tego skryptu będzie: „Jacek ma 5 jabłek, a Agatka ma 2 gruszki. Razem mają 52 owoce!”. Jak widać, niestety zamiast dodać skrypt je złączył – tak jakby operował na tekście. Jest kilka rozwiązań, np objęcie działań nawiasami. {codecitation} alert('Razem mają więc ' + (liczba_1+liczba_2) + ' owoców!'); {/codecitation} Innymi spotykanymi rozwiązaniami jest wprowadzenie dodatkowego działania, które nie zmienia jednak wartości. Np '*1'. Jakakolwiek liczba pomnożona razy 1, da samą siebie.

    Jednak moim zdaniem najlepszym rozwiązaniem jest:

    {codecitation}var suma = liczba_1+liczba_2;
var ciag_znakow = 'Jacek ma ' + liczba_1 + ' jablek,\n' +
        'a Agatka ma ' + liczba_2 + ' gruszki.\n' +
        'Razem mają więc ' + suma + ' owoców!';

alert(ciag_znakow);{/codecitation}

    Problem wydaje się banalny, ale w wielu przypadkach może naprawdę sporo zepsuć. Nie zawsze warto skracać kod za wszelką cenę. Czasem dłuższy kod jest czytelniejszy = lepszy.

    Read more
    Zmieniony ( środa, 12 stycznia 2011 14:21 )

    Dynamiczna zmiana stylów (pojedynczy atrybut) PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    wtorek, 22 września 2009 17:36
    Java Script / Artykuły JS

    Coraz większa popularnością na stronach www cieszą się rozwiązania pozwalające zmieniać jeden atrybut CSS, np. powiększanie samego tekstu na stronach informacyjnych. Zobaczmy, jak można to zrobić.

    {codecitation} <a href="javascript:void(powieksz_tekst())">Większy tekst</a> {/codecitation}

    A teraz kod funkcji:
    {codecitation} function powieksz_tekst() {
        var e = document.getElementsByTagName("p");
        for (i=0; i<e.length; i++) {
            e[i].style.fontSize = "1.2em";
        }
    } {/codecitation}
    Aha, oczywiście kod, owego napisu musi wyglądać podobnie do tego:
    {codecitation} <p id="napis" class="stara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit(...)</p> {/codecitation}
    I załóżmy, że oto kod CSS:
    {codecitation} p {
        font-size: 0.8em;
    } {/codecitation}

    Oczywiście równie dobrze, można przekazywać jako parametr nowy rozmiar tekstu, lub zrobić powiększanie/pomniejszanie wielokrotne poprzez odpowiednie z sparametryzowanie funkcji oraz zamianę '=' na '+=' [czyli operator dopisania]. Ale niech już to będzie zadanie domowe dla chętnych.

    Read more

    Strona 1 z 2
    << Początek < Poprzednia 1 2 Następna > Ostatnie >>