Krótki wstęp dla rozpoczynających naukę JavaScript – Kontynuacja

W pierwszej części artykułu przeanalizowaliśmy kilka bardzo niezwykle ciekawych zastosowań JavaScript. Jeszcze lepszą wiadomością jest fakt, że to dopiero zaledwie zaczątek wspaniałych możliwości tego języka.

Do tej pory poznaliśmy wbudowaną funkcję document.getElementById. Dzięki niej możemy pobrać element o podanym ID i dowolnie modyfikować między innymi jego style i zawartość (innerHTML). Ale cóż zrobić, gdy chcemy zmienić więcej niż jeden element? Wiadomo przecież, że nadawanie tego samego ID wielu elementom nie należy do dobrych praktyk.

Na nasze szczęście istnieje funkcja document.getElementsByClassName pobierająca do tablicy wszystkie elementy o podanej nazwie klasy. Dosyć już tych wątpliwości i obietnic. Czas na konkretny kod 🙂
Rozważmy następujący dokument HTML (z życia wzięty :-p)

<p>Zmiana stylów - klasy</p>
    
    <p class="niebieski">Jestem niebieski?</p>
    <p class="niebieski">Jestem niebieski?</p>
    <p class="niebieski">Jestem niebieski?</p>
    
    <button id="przyciskNiebieski">Zmień na niebieski</button>

Jeżeli domyślne ustawienia przeglądarki nie zostały zmienione, tekst w paragrafach klasy niebieski będzie koloru czarnego. Chcemy, aby po wcisinięciu przyciku “Zmień na niebieski” kolor tekstu owych elementów zmienił się na…niebieski 🙂 JavaScript nam w tym pomoże.

var przyciskNiebieski; // tutaj przypiszemy nasz przycisk

przyciskNiebieski = document.getElementById('przyciskNiebieski');

przyciskNiebieski.onclick = function(){ // po wcisnięciu przycisku

    var niebieskie; // tu zostanie przypisana tablica elementów klasy “niebieski”

    niebieskie = document.getElementsByClassName('niebieski'); // używany funkcji getElementsByClassName
// zmienna niebieskie jest tablicą.

    for(var i = 0; i < niebieskie.length; i++){ // skorzystajmy z pętli for aby dostać się do elementów tablicy niebieskie
        niebieskie[i].style.color = 'blue'; // zmieńmy kolor każdego elementu na niebieski
        niebieskie[i].innerHTML = 'Jestem niebieski! :-D'; // zmieńmy zawartość każdego elementu
    }
}

W taki prosty sposób zmodyfikowaliśmy grupę elementów dokumentu HMTL.

Skoro tak dobrze nam to idzie, dlaczego mielibyśmy nie poznać kolejnej (obiecuję, że już ostatniej w tym artykule) funkcji. document.getElementsByTagName pobiera wszystkie elementy o podanej nazwie tagu, np.: p, div, a itd. Zmieńmy kolor wszystkich paragrafów (p) na żółty. A co, nikt nam tego nie może zabronić.
Przygotujmy sobie UI 🙂

<p>Zmiana stylów - tagi</p>
    
    <button id="zmienParagrafy">Zmień paragrafy na zółte</button>

Pozwólmy javaScript zrobić resztę. Kod jest łudząco podobny do poprzedniego. Jedyną zmianą jest użycie funkcji getElementsByTagName zamiast getElementsByClassName

var zmienParagrafy;

zmienParagrafy = document.getElementById('zmienParagrafy');

zmienParagrafy.onclick = function(){
    var zolte; 
    zolte = document.getElementsByTagName('p');
    for(var i = 0; i < zolte.length; i++){
        zolte[i].style.color = 'yellow';
        zolte[i].innerHTML = 'Jestem żółty! :-D';
    }
}

Prawda, że proste. Myślę, że najnudniejsze (sic) mamy za sobą. Z naszą obecną wiedzą i umiejętnościami bez problemu napiszemy zabezpieczenie dla numerów telefonów na stronie. Często na portalach ogłoszeniowch musimy klinkąć napis lub przycisk “Pokaż numer telefonu”, aby zobaczyć go w calości. Chroni to dane osobowe przed robotami zbierającymi informacje ze stron internetowych.
Użytkownik odwiedzając nasz portal widzi:

<p>Numer telefonu</p>
    
    <p>Tel.:<span id="ukrytyTelefon">(starannie ukryty przed hakerami :-))</span><button id="pokazTelefon">Pokaż</button></p>

Zamiarem jest, aby po wciśnięciu przycisku “Pokaż” oczom naszym ukazał się wspomniany już po wielokroć numer.

Plan jest prosty:
dodaj zdarzenie do przycisku o id “pokazTelefon”.
w zdarzeniu tym zmień zawartość tagu span o id “ukrytyTelefon” na porzdąny numer
ukryj przycisk o id “pokazTelefon”

var przyciskTelefon;

przyciskTelefon = document.getElementById('pokazTelefon');


przyciskTelefon.onclick = function(){
    var telefon;
    telefon = document.getElementById('ukrytyTelefon');
    telefon.innerHTML = '600-451-010';
    przyciskTelefon.style.display = ‘none’; // tutaj zmieniamy styl display na ‘none’, aby ukryć przycisk
}

Bardzo prosta rzecz, a jakże praktyczna. Tak samo poczyńmy z adresem:

<p>Adres</p>
    
    <p>Adres.:<span id="ukrytyAdres">(starannie ukryty przed hakerami :-))</span><button id="pokazAdres">Pokaż</button></p>
 

Do tego odrobina kodu JavaScript:

var przyciskAdres;

przyciskAdres = document.getElementById('pokazAdres');


przyciskAdres.onclick = function(){

    var adres = document.getElementById('ukrytyAdres');

    adres.innerHTML = 'Jan Kowalski</br>ul. Asfaltowa 1/2</br>23-444 Programerów';
    
// this - jak w innych jęzkach programowania jest to wskaźnik do aktualnego obiektu, czyli w tym przypadku - przyciskAdres
    this.innerHTML = 'Ok, zrobione'; // zmień tekst przycisku
    this.onclick = null; // usuń zdarzenie onclick
    this.disabled = true; // ustaw przycisk jako nieaktywny
}

Następna część poradnika http://darkgl.pl/2015/05/04/krotki-wstep-dla-rozpoczynajacych-nauke-javascript-kontynuacja-2/

Adam Sawicki – programista aplikacji internetowych, obserwator nowych startup’ów i technologii webowych, autor kursu c++ dla początkujących cpp.jcom.pl

Dodaj komentarz