Back to Top
 
 

Tablice

Do przechowywania wielu zmiennych w JavaScript służą tablice. Mamy następujące trzy zmienne:

var fruit1 = "ananas";
var fruit2 = "brzoskwinia";
var fruit3 = "arbuz";

równie dobrze możemy je umieścić w tablicy:

var fruitsArray = ["ananas", "brzoskwinia", "arbuz"];

Do elementów tablicy dostajemy się poprzez podanie indeksu (pozycji). Ananas znajdzie się na pozycji o indeksie 0, a więc aby się do niego dostać, to korzystamy ze składni:

fruitsArray[0]; //indeks podajemy w nawiasach kwadratowych

Siłą JavaScriptowych tablic są ich wbudowane metody. Jedna z nich .length była już wcześniej wspomniana.
Oto lista najczęściej używanych metod tablicowych:

Tablica Metoda Działanie     Co zwraca
[a,b,c,d] .length Zwraca długość tablicy 4
[1,15,22,-1] .sort() Zwraca posortowaną tablicę [-1,1,15,22]
["ananas","brzoskwinia","arbuz"] .push("kokos") Doda na koniec tablicy nową wartość ["ananas","brzoskwinia", "arbuz","kokos"]
["ananas","brzoskwinia","arbuz"] .pop() Usuwa ostatni element tablicy ["ananas","brzoskwinia"]
["ananas","brzoskwinia","arbuz"] .shift() Usuwa pierwszy element tablicy ["brzoskwinia","arbuz"]
["ananas","brzoskwinia","arbuz"] .unshift("kokos") Dodaje jako pierwszy element tablicy ["kokos","ananas","brzoskwinia","arbuz"]
["ananas","brzoskwinia","arbuz"] .reverse() Odwraca kolejność elementów tablicy  ["arbuz","brzoskwinia","ananas"]

Oto przykład użycia metody push:

 

Zadania

 
 

Zadanie 1

Do zadeklarowanej zmiennej spróbuj przypisać tablicę z ulubionymi serialami, tak by wyświetliła się poniżej.

Przejdź do pierwszego zadania:

Wskazówka: Pamiętaj, że tablica musi znajdować się w nawiasach kwadratowych, a jej wartości oddzielane są przecinkami.

Zadanie 2

W pliku JavaScriptowym do zadania 2 znajdziesz tablicę z latami oraz dwoma zmiennymi pomocniczymi. Zadeklaruj te zmienne, skorzystaj z odpowiednich elementów tablicy (nie wpisuj wartości liczbowych ręcznie), tak aby pod spodem prawidłowo wyświetlał się zakres wiekowy, w którym jesteś.

Przejdź do drugiego zadania:

Wskazówka: Konkretne wartości tablicy można przypisać do zmiennej w ten sposób.

var index = 9;
var zmienna = tablica[index];
// albo
var zmienna2 = tablica[4];

Zadanie 3

W trzecim zadaniu wyznacz długość tablicy.

Przejdź do trzeciego zadania:

Wskazówka: Metod tablicowych używa się przez podanie nazwy tablicy i po kropce nazwy metody oraz, jeżeli wymaga tego metoda, podania wartości w nawiasach.

var someNumbers = [5,2,9];
someNumbers.sort(); //teraz pod zmienną someNumbers znajduje się tablica
[2,5,9]

Zadanie 4

W pliku JavaScript znajdziesz tablicę z warzywami oraz drugą zmienną, która jest wyświetlana poniżej. Użyj odpowiednich metod, aby dodać na początku i na końcu, jakieś nowe warzywo.

Przejdź do czwartego zadania:

Wskazówka: Jeżeli nie wiesz, jakich metod użyć, wróć do tabeli z metodami tablicowymi.

Zadanie 5

Nic nie stoi na przeszkodzie, aby do tablicy wstawić inne tablice. Nazywa się to tablicami wielowymiarowymi a wyglądają tak:

var array = [5, "xyz", [33,29,"abc"], true];

Aby dostać się do wartości wewnątrz wewnętrznej tablicy należy najpierw podać indeks, na którym znajduje się sama tablica, a potem indeks wartości wewnątrz. Aby dostać się do wartości 29 należy użyć takiej konstrukcji:

array[2][1];

Najpierw wybieramy nazwę tablicy, następnie indeks, na którym znajduje się tablica wewnętrzna ([2]), a na koniec indeks interesującej nas wartości wewnątrz drugiej tablicy ([3]).

W kodzie do zadania znajduje się tam wielowymiarowa tablica z markami i modelami samochodów, spróbuj przypisać do zmiennej poniżej wartość "Juke". Tak by wyświetlała się poprawnie.

Przejdź do piątego zadania:

Czy wiesz o co chodzi? Spróbuj wewnątrz tablicy z modelami samochodów zagnieździć jeszcze jedną tablicę (np. z datą produkcji) tak, aby zyskały kolejny wymiar. Następnie zmodyfikuj zmienną tak, żeby wyświetlała którąś z wpisanych przez Ciebie wartość.

Wskazówka: wartość zmiennej będzie wtedy wyglądać mniej więcej tak: array[x][y][z].