W poniższym kursie będę prezentował tematy, które przerabiam w ramach Specjalizacji z uczniami 3 klasy Technikum Elektrycznego w Słupsku. Kurs ma służyć zarówno uczniom w powtórce materiału, jak i wszytkim zainteresowanym programowaniem Aplikacji Internetowych

Tablice w języku JavaScript działają na podobnych zasadach jak w innych językach programowania, jednak tutaj programista może dużo więcej. Tablice to w JS bardzo rozbudowany mechnizm. Korzyści jakie niesie za sobą stosowanie z tablic w JS w porównaniu do innych języków to:

• nie trzeba na początku przewidywać rozmiaru tablicy
• dane przechowywane w komórkach tablicy nie muszą być tego samego typu, choć oczywiście zalecane jest aby były
• tablice można w dowolnej chwili rozszerzać i zmniejszać
• dostęp do indeksu wykraczającego poza tablicę (przy zapisie) nie powoduje błędu, a automatyczne rozszerzenie tej tablicy.

Jak widac mamy sporo korzyści, jednak zacznijmy od samego początku.

Deklarowanie tablic w kodzie JS

Jak pamiętamy zmienną w JS deklarujemy w taki sposób:

var a = 0;

Czyli deklarujemy zmienną i od razu nadajemy jej wartość, z tablicami jest podobnie, pustą tablicę deklarujemy w taki sposób

var tablica = [];
//lub
var tablica = new Array();

Programiści na codzień programujący w w innych językach programowania, mogą się nieco zdziwić, ale deklarowanie pustej tablicy jest jak najbardziej poprawne w języku JavaScript. Oczywiście możemy również ustalić rozmiar tablicy już podczas deklaracji

var tablica = new Array(3);

Powyższy kod spowoduje utworzenie tablicy 3 elementowej.

Oczywiście można również zadeklarować tablicę i od razu wypełnić ją elementami, taka deklaracja wygląda następująco

var tablica = [1,2,45,67,89,34];
var dnittygodnia = ["poniedziałek","wtorek","środa","czwartek","piątek","sobota","niedziela"];

A co z typami danych ?

Jak pamiętamy, w przypadku zmiennych możemy w każdej chwili zmienić typ danych przechowywany przez zemienną, podobnie jest z tablicami, to jakiego typu dane przechowuje tablica decydujemy dopiero w momencie wpisywania danych do tablicy. Do tej samej tablicy możemy zapisac dane różnego typu, poniższa deklaracja będzie prawidłowa.

var tablica = [1,"wtorek", 2.76, "niedziela"];

Dostęp do danych w tablicy

Podobnie jak w innych językach programowania, w JavaScript tablice indeksowane są od 0, czyli tablica 3 elementowa to elementy o indeksach odpowiednio 0,1,2

var tablica = [65,76,83];
var a = tablica[0]; //a=65;
var b = tablica[2]; //b=83;
tablica[1] = 45;    //podmiana drugiego elementu tablicy z 76 na 45

Ciekawostką w JavaScript jest to, że gry próbujemy zapisać dane do elementu o nieistniejącym indeksie, JavaScript automatycznie rozszerzy tablicę i umieści ten element

tablica[3] = 55;   // rozszerzy tablicę do 4 elementów [65,45,83,55];

Dodawanie nowych elementów do tablicy

Poza standardowym dostępem do danych w tablicy, JavaScript udostępnia kilka ciekawych metod umożliwiających różne operacje na tablicach. Pierwszą z nich jest metoda push() dodająca nowy element na końcu tablicy

var tablica = [1,2,3];
tablica.push(4);   //po tej operacji tablica = [1,2,3,4];

Odwrotnie do push() działa metoda pop(), usuwa ona ostatni element z tablicy

var tablica = [1,2,3];
tablica.pop();   //po tej operacji tablica = [1,2];

Kompletną listę metod znajdziemy tutaj http://www.w3schools.com/jsref/jsref_obj_array.asp

Rozmiar tablicy, określający aktualną ilośc elementów w tablicy, odczytamy poprzez włąściwość length

var tablica = [1,2,3];
a = tablica.length;  //a = 3;

Przykładowe zastosowanie tablicy

Jak widac tablice pozwalają na łatwe operacje na seriach danych. Możemy w łatwy sposób dodawać i usuwać elementy z tablicy oraz odczytywać z niej dane. Poniższy kod pokazuje w jaki sposób można policzyć średnią ze wszystkich liczb wpisanych do tablicy

var wyniki = [80, 76, 56];

//sumowanie elementów tablicy

var suma = 0;
 for (var i = 0; i < wyniki.length; i++) {
   suma = suma + wyniki[i];
 }

//obliczanie średniej
var avg = suma / wyniki.length;