Tablice javascript. Użycie funkcji push() oraz each()

Przykład prostego wykorzystania tablic w języku programowania javascript, wraz z możliwością dynamicznego dodawania elementów do tablicy, jak i wyświetlania w postaci ciągu znaków.
Tablice w javascript, tak jak w innych językach i funkcjach służą do przechowywania zmiennych. Sama tablica traktowana jest również jako zmienna, którą możemy dowolnie operować. Tablice bardzo dobrze nadają się do przechowywania większej ilości zmiennych, do których się odwołujemy. Możemy do zrobić oczywiście przy ładowaniu strony, a także przy ingerencji użytkownika.

Tablice JavaScript

Utworzenie tablicy jest bardzo proste, jak również dodanie do nich elementów:

var Nazwa_Tablicy = new Array('zmienna1','zmienna2','zmienna3')
//lub
var Nazwa_Tablicy = ['zmienna1','zmienna2','zmienna3']

Odwołanie się z kolei to elementów tablicy możliwe jest za pomocą funkcji:

document.write(Nazwa_Tablicy[1])

Funkcja ta wyświetli na ekranie wartość ‚zmienna2’.
Aby wyświetlić wszystkie elementy z tablicy jako ciąg znaków możemy posłużyć się funkcją join().

document.write(Nazwa_Tablicy.join(" / ") + "<br />") 

Efektem będzie wpisanie na ekranie:
zmienna1 / zmienna2 / zmienna3 / jQuery

Funkcja push();

Taki sposób wstawiania wartości do tablicy to metoda statyczna. A więc taka, którą programista musi wpisać w kodzie. Można również wstawić wartość do tablicy w sposób automatyczny. Robimy to za pomocą funkcji push().

Nazwa_Tablicy.push("jQuery");

A więc do naszej tablicy z wartościami, dodana zostanie wartość ‚jQuery’ jako ostatni element tablicy.

Funkcja each();

Funkcja each(); nie dotyczy się typowo tablic w JavaScript. Jest to funkcja wielozadaniowa, do które bardzo często się odwołujemy, przy różnych zastosowaniach. W poniższym przykładzie została zastosowana właśnie funkcja each() połączona z push(), a więc z tablicami js.

$('#ewd_thumbnails img').each(function() {
    ewd_image_array.push($(this).attr('src'));
	ewd_imaalt_array.push($(this).attr('alt'));
	
});

Aby dopełnić formalności, to kod HTML, w którym odwołujemy się w naszym skrypcie js wygląda tak:

<ul id="ewd_thumbnails">
    <li><img src="path/img1.jpg" alt="landscape" /></a></li>
    <li><img src="path/img2.jpg" alt="abstract" /></a></li>
    <li><img src="path/img3.jpg" alt="people" /></a></li>
</ul>

Kod można przeczytać w następujący sposób: dla każdego elementu img w znaczniku ewd_thumbnails dodaj do tablicy ewd_image_array wartość src, zaś do tablicy ewd_imaalt_array wartość alt

Dynamiczne wyświetlanie wartości tablicy

Wiemy już jak manualne wyświetlić elementy tablicy. Jednak z racji tego, że automatycznie dodajemy do tablicy elementy to również automatycznie możemy jest wyświetlić na ekranie. Zrobimy to za pomocą pętli for.
Na początek musimy określić ile elementów jest w naszej tablicy. Możemy to bardzo prosto zrobić poprzez:

var mm = $('#ewd_thumbnails > li').length;

Mając już liczbe elenetów przechodzimy do naszej pętli generowania wyników:

for (var m = 0; m < mm; m++) {

   document.write("<br /><span>img path</span>: " + ewd_image_array[m] + "<span> img alt</span>: " + ewd_imaalt_array[m] );
}

Efektem tak napisanej funkcji będzie:
IMG PATH: path/img1.jpg IMG ALT: landscape
IMG PATH: path/img2.jpg IMG ALT: abstract
IMG PATH: path/img3.jpg IMG ALT: people

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code