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