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)

Zmiana stylów - klasy
Jestem niebieski?
Jestem niebieski?
Jestem niebieski?
    Zmień na niebieski

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 🙂

Zmiana stylów - tagi

Zmień paragrafy na zółte

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:

Numer telefonu

Tel.:(starannie ukryty przed hakerami :-))Pokaż

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:

Adres

Adres.:(starannie ukryty przed hakerami :-))Pokaż

Do tego odrobina kodu JavaScript:

var przyciskAdres;

przyciskAdres = document.getElementById('pokazAdres');

przyciskAdres.onclick = function(){

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

adres.innerHTML = 'Jan Kowalski
ul. Asfaltowa 1/2
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