====== Krótkie polecenia ====== Żeby zebrać wszystkie id gier z linków


[].map.call(document.getElementById('app').getElementsByTagName('a'), a => a.href.match(/(\d+)/)).filter(x => x).map(a => a[0])

====== Podstawy ====== ===== Wstawianie w HTMLu =====

Lub umieszczając JavaScript w osobnym pliku:

===== Typy danych i zmienne ===== JavaScript to język //weakly typed//. Bardzo często nie trzeba deklarować typu, JS sam do tego dojdzie. Skrypt poniżej to pokazuje.


var mojaZmienna = 1; // liczba
mojaZmienna = mojaZmienna + "0"; // liczba + łańcuch znaków

for(var x = 0; x < mojaZmienna; x++) {
    document.write(x); // widzimy, że znowu mojaZmienna traktowana jest jak liczba
    document.write(" ");
}

A w przeglądarce powinniśmy zobaczyć: ''0 1 2 3 4 5 6 7 8 9''. Czasem jednak, przy porównywaniu zmiennych, może to być powodem powstawania błędów. Przykład z [[http://en.wikibooks.org/wiki/JavaScript/Operators#Comparison_operators]]:


0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true

Lepiej używać operatorów ''==='' i ''!=='':


0 === '' // false
0 === '0' // false
false === 'false' // false
false === '0' // false
false === undefined // false
false === null // false
null === undefined // false

==== Dane numeryczne ==== Mamy tu dwa rodzaje: * Liczby całkowite, np. 123, (//integers//), mogą przyjmować wartości od -2^53 do 2^53. * Liczby ułamkowe, 1,234, również znane jako liczby zmiennoprzecinkowe. ==== Dane tekstowe ==== Znane każdemu stringi (FTW!). Stringi zawieramy w cudzysłowach (''"'') lub w apostrofach(?) ('''''). Znaki specjalne, jak w innych językach musimy specjalnie kodować. ^ Kod ^ Reprezentowany znak ^ | \b | Backspace | | \f | Form feed | | \n | Nowa linia | | \r | Powrót karetki | | \t | Tabulator | | \' | Pojedynczy cudzysłów | | \\ | Backslash | | \xNN | NN to liczba szesnastkowa, identyfikująca znak w układzie Latin-1 | Przykładowo © to ''\xA9''. Można też z Unicode: ''\u00A9''. ==== Dane Boolowskie ==== True, false... nic nowego. ==== Zmienne ==== Zmienne w JS: * są wrażliwe na duże/małe litery (//case sensitive//), * istnieją pewne zastrzeżone znaki (&, %) i nazwy (na przykład //var// czy //with//), * można używać cyfr w zmiennych, ale zmienna od nich zaczynać się nie może. === Deklarowanie, nadawanie wartości === Zmienne deklarujemy poprzedzając jej nazwę słowem ''var''.


var mojaPierwszaZmienna;

Nadać jej wartość można tak;


mojaPierwszaZmienna = 404;
mojaDrugaZmienna = "Wiesiek";

Możemy zadeklarować i nadać wartość zmiennej w jednej linijce.


var mojaTrzeciaZona = "Alicja";

Wartości specjalne: * null * NaN (Not a Number) - gdy przypisujemy zmiennej liczbowej wartość nieliczbowa to będzie ona miała wartość NaN * nieskończoność - operator .isFinite() Odpowiednik if else:


x = (a > b) ? c : d

Interakcja z użytkownikiem:


alert("Wiadomosc");

confirm("Czy jestes pewien?");

a = prompt("Podaj","wartosc");

Zmienne zdefiniowane w funkcji działają tylko w niej. ===== Tablice =====


var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

* mozna mieszac obiekty roznych typow, * mozna laczyc elementy tablicy - join(), * przejscie po tablicy:


var a;
for (a in tablica)
{
}

===== Zdarzenia ===== * zdarzenia to zmiany strony www, np. kliknięcie myszką, etc., * powiązane z danym elementem strony, * jest ich dużo (onload, onunload, onclick, ondblclick...), ==== Przypisywanie zdarzeń do elementów ====

==== Odwoływanie się do obiektów strony ==== === getElementByID() ===


document.getElementByID("zawartosc");

Jeśli chcemy zmienić styl elementu piszemy:


document.getElementByID("naglowek").style.color = "red";
document.getElementByID("naglowek").style.backgroundColor = "green";

Ważne! Nie piszemy ''background-color'', jak w CSS. === getElementByTagName() ===


document.getElementByTagName("h2");

Aby zmienić tekst pierwszego elementu

piszemy: `document.getElementByTagName("h2")[0].innerHTML = "sqbell pwnz!";` ===== Obiekty ===== * wszystko jest obiektem, * odwołujemy się do danej właściwości za pomocą kropki (.), * metody obiektów: zmienna.to.UpperCase(); * deklaracja zmiennych; * Garbage Collector. Obiekt klasy String: * zawiera tekst; * długość - length(), * formatowanie - bold(), etc., * zamiana na liczbę: `s.parseInt() s.parseFloat var s=new String(7);` ====== Inne ====== * date() - data lokalna, * boolean() - wartosc true/false. Do obiektow na stronie odwolujemy sie tak: * document.write(), * document.forms[], * document.images[], * document.links[] * document.all.name - document.all.name.pole1.value="test", * x=document.getElementById(ID); - x.value=„test”, * x=document.getElementsByName(nazwa); - x.value=„test”. Co można z robic z innymi obiektami: * innerHTML (ostroznie!), * style CSS, mozna zmienic klase obiektu! ====== Linki ====== * http://net.tutsplus.com/articles/web-roundups/40-super-neat-javascript-plugins/