Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Tablice

Email Drukuj PDF

Tworzenie tablic

Tablice są to struktury danych pozwalające na przechowywanie uporządkowanego zbioru elementów. Najprostszą tablicę można sobie wyobrazić jako wektor elementów przedstawiony schematycznie na rysunku 2.8.

Rysunek 2.8. Schematyczny wygląd tablicy

Poszczególne pola danych nazywamy wtedy komórkami, a każda komórka ma identyfikujący ją indeks. Pierwsza komórka (zawierająca wartość 1) ma indeks 0, druga — indeks 1, trzecia — indeks 2 itd.

W celu utworzenia tablicy należy użyć słowa Array. Taka konstrukcja ma schematyczną postać:

var nazwa_tablicy = Array();

W deklaracji można również podać rozmiar tablicy:

var nazwa_tablicy = Array(rozmiar_tablicy);

np.:

var tablica = new Array(10);

Podanie rozmiaru nie jest konieczne, gdyż rozmiar tablicy będzie się zwiększał wraz z dodawaniem do niej kolejnych wartości. Od wersji 1.2 JavaScriptu (czyli we wszystkich współczesnych przeglądarkach) istnieje również możliwość jednoczesnego utworzenia i zapisania wartości w kolejnych komórkach, np.:

var tablica = new Array("wartość1", "wartość2", "wartość3");

Druga możliwość tworzenia tablic to konstrukcja klasyczna z użyciem nawiasu kwadratowego. Schematycznie:

var nazwa_tablicy = [element1, element2, ..., elementN];

Powstanie wtedy tablica o liczbie N elementów, np.:

var tablica = [1, 2, 3, 4, 5];

W poszczególnych komórkach tablicy można zapisywać dane dowolnych typów, w jednej tablicy można też mieszać różne typy danych:

var tablica = [1, 3.14, "abc"];

Można utworzyć pustą tablicę, do której dane będą dopisywane w dalszej części skryptu:

var tablica = [];

Odczyt wartości

Po utworzeniu tablicy za pomocą jednej z podanych konstrukcji jest ona wypełniona wskazanymi wartościami, tzn. każda kolejna komórka zawiera kolejno podaną wartość. Odczyt zawartości danej komórki osiągamy poprzez podanie jej indeksu w nawiasie kwadratowym, schematycznie:

nazwa_tablicy[indeks_komórki]

Ilustruje to skrypt z listingu 2.35.

Listing 2.35. Odczyt zawartości komórek tablicy

<script type="text/javascript">

var kolory = Array("czerwony", "zielony", "niebieski");

document.write("kolory[0] = " + kolory[0] + "<br />");

document.write("kolory[1] = " + kolory[1] + "<br />");

document.write("kolory[2] = " + kolory[2] + "<br />");

</script>

Została w nim utworzona trójelementowa tablica, której kolejnym komórkom zostały przypisane ciągi znaków określające kolory: czerwony, zielony i niebieski, oraz została ona przypisana zmiennej kolory. Nieco upraszczając, można powiedzieć po prostu, że powstała tablica kolory. Aby uzyskać dostęp do wartości zapisanej w danej komórce, należy podać jej numer (indeks) w nawiasie kwadratowym występującym za nazwą tablicy. Należy przy tym pamiętać, że indeksowanie tablicy zaczyna się od zera, co oznacza, że indeksem pierwszej komórki jest 0, a NIE 1. A zatem, aby odczytać zawartość pierwszej komórki, trzeba napisać kolory[0], drugiej — kolory[1], a trzeciej — kolory[2].

Jeśli tablica ma duży rozmiar, do odczytu jej zawartości lepiej użyć pętli. Może być to zarówno zwykła pętla for, jak i pętla typu foreeach, co zostało zaprezentowane na listingu 2.36.

Listing 2.36. Odczyt tablicy za pomocą pętli

<script type="text/javascript">

var kolory = Array("czerwony", "zielony", "niebieski");

 

for(var i = 0; i < 3; i++){

  document.write("kolory[" + i + "] = " + kolory[i] + "<br />");

}

document.write("<br />");

for(var indeks in kolory){

  document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}

</script>

W pierwszym przypadku zmienna iteracyjna i, która zmienia się w przedziale 0 – 2, jest wykorzystywana jako indeks tablicy, w drugim przypadku pod zmienną indeks w każdym kolejnym przebiegu pętli jest podstawiany indeks kolejnej komórki, aż do osiągnięcia komórki ostatniej. Warto zwrócić uwagę, że w przypadku pętli for...in nie trzeba znać rozmiaru tablicy.

Zapis wartości

Aby zapisać jakąś wartość w danej komórce tablicy, należy określić indeks tej komórki oraz użyć operatora =, schematycznie:

nazwa_tablicy[indeks_komórki] = wartość;

np.:

liczby[2] = 24;

Należy przy tym zwrócić uwagę, że jeżeli komórka o danym indeksie nie istnieje, to zostanie utworzona; jeśli natomiast istnieje, to jej poprzednia wartość zostanie skasowana. Ilustruje to skrypt z listingu 2.37.

Listing 2.37. Zapis komórek tablicy

<script type="text/javascript">

var kolory = Array();

kolory[0] = "czerwony";

kolory[1] = "zielony";

kolory[2] = "niebieski";

 

for(var indeks in kolory){

  document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}

document.write("<br />");

 

kolory[0] = "żółty";

kolory[1] = "fioletowy";

kolory[2] = "biały";

 

for(var indeks in kolory){

  document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}

</script>

Najpierw powstała tu tablica kolory (z użyciem składni ze słowem Array), a następnie zostały utworzone trzy pierwsze komórki o indeksach 0, 1 i 2, zawierające ciągi znaków czerwony, zielony i niebieski. Zawartość tej tablicy została wyświetlona za pomocą pierwszej pętli typu for…in. Następnie trzem istniejącym komórkom zostały przypisane nowe wartości, którymi są ciągi znaków żółty, fioletowy i biały. Tym samym poprzednia zawartość tablicy została bezpowrotnie utracona. Nowa zawartość została natomiast wyświetlona za pomocą drugiej pętli for…in.

Do wypełniania komórek tablicy, szczególnie jeśli ma ona większy rozmiar, można użyć pętli, np. typu for. Przykładowo: gdyby tablica miała mieć 20 komórek, w których zapisane byłyby kolejne liczby od 20 do 1, można byłoby użyć następujących instrukcji:

var tablica = Array();

for(var i = 20; i > 0; i--){

  tablica[20 - i] = i;

}

Usuwanie wartości

Aby usunąć zawartość danej komórki tablicy, należy przypisać jej wartość null:

nazwa_tablicy[indeks] = null;

lub też pusty ciąg znaków:

nazwa_tablicy[indeks] = "";

np.:

tablica[0] = null;

tablica[5] = "";

Trzeba jednak pamiętać, że w ten sposób usuwana jest jedynie zawartość komórki, a nie sama komórka. Usunięcie komórki z tablicy można przeprowadzić (począwszy od JavaScript 1.2 i JScript 3.0) za pomocą operatora delete:

delete nazwa_tablicy[indeks];

np.:

delete tablica[5];

 

JavaScript. Nieoficjalny podręcznik

JavaScript.
Nieoficjalny podręcznik

JavaScript. Pierwsze starcie

JavaScript.
Pierwsze starcie

JavaScript. Praktyczny kurs

JavaScript.
Praktyczny kurs

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464214