Table of Contents

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

<script type="text/javascript">
document.write("Hello World!");
</script>

Lub umieszczając JavaScript w osobnym pliku: 

<script type="text/javascript" src="zmienne.js"></script>

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:

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:

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:

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";
var a;
for (a in tablica)
{
}

Zdarzenia

Przypisywanie zdarzeń do elementów

<body onload="start()">
</body>
 
<input type="text" onblur="sprawdzEmail()">
 
<form method="post" action="xxx.html" onsubmit="return sprawdzFormularz()">

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 <h2> piszemy: 

document.getElementByTagName("h2")[0].innerHTML = "sqbell pwnz!";

Obiekty

Obiekt klasy String: 

s.parseInt()
s.parseFloat
var s=new String(7);

Inne

Do obiektow na stronie odwolujemy sie tak:

Co można z robic z innymi obiektami:

Linki