JavaScript zábavky

Veľa z príkladov na tejto stránke sa dá skúšať rovno v javascript konzole vo Firefoxe alebo Chrome (tá v Chrome je trochu lepšia/krajšia a tak budeme používať príklady z nej)

V Chrome sa ku konzole dostaneme cez menu -> Nástroje -> JavaScript konzola, alebo stlačením Ctrl+Shift+J.

Vo Firefoxe je to nápodobne Nástroje -> Web developer -> Web konzola (Ctrl+Shift+K). Pozor: vo Firefoxe Ctrl+Shift+J otvorí inú konzolu, ktorá nie je veľmi vhodná na experimentovanie.

Jedným z nie celkom obyčajných použití JavaScriptu sú Bookmarklet-y. Sú to malé (aj keď niekedy nie až tak malé:-)) kúsky JavaScriptu, ktoré môžeme mať v záložkách (ideálne v paneli záložiek, aby sa ne ľahko klikalo) a ktoré po kliknútí namiesto otvorenia novej stránky spravia niečo s tou aktuálnou.

Pár bookmarkletov na ukážku. Keď ich kliknete priamo tu, tak sa aktivujú na tejto stránke. Najlepšie je pridať si ich na panel záložiek. Keď si ho zobrazíte (Ctrl+Shift+B v Chrome), tak ich naň stačí pretiahnuť. Niektoré prehliadače majú po kliknutím pravým tlačítkom možnosť "Pridať záložku". V iných treba dať skopírovať odkaz a pridať ho ako novú záložku (niekde v menu).

Bookmarklet	Popis	Domovská stránka
Skry obrázky	Skryje všetky obrázky.	http://www.bookmarklets.com/tools/categor.html
Ukáž elementy	Ukáže jednotlivé HTML elementy.	http://www.bookmarklets.com/tools/categor.html
Click2Zap	Kliknutím na element ho zmažeme.	http://www.mrclay.org/2006/02/18/click2zap-bookmarklet/
Skry element	Ďalší skrývací bookmarklet. Escape skončí skrývanie.	https://gist.github.com/agibsonsw/1746472
Kick Ass	Asteroids hra: pohybuj sa po stránke a odstreľuj jednotlivé prvky.	http://kickassapp.com/

>>>

vvv

JavaScript

Deklarácia premenných: var menoPremennej = hodnota

var a = 1
undefined

var b = "ahoj"
undefined

Deklarácia premennej nevracia žiadnu hodnotu ako výsledok, preto nám konzola píše undefined ako výsledok.
Základné typy: undefined, number, string, boolean

typeof nedefinovanaPremenna
"undefined"

typeof 47
"number"

typeof 4.7
"number"

typeof "retazec"
"string"

typeof true
"boolean"
Polia

var p = ["a", "b", "c"]

undefined

p[2]

"c"

p.push("d")

4

p

["a", "b", "c", "d"]

p.length

4

p[1] = "bbb"

"bbb"

p

["a", "bbb", "c", "d"]

p.concat(["x", "y", "z"])

["a", "bbb", "c", "d", "x", "y", "z"]

p

["a", "bbb", "c", "d"]

p.indexOf("c")

2

p.reverse()

["d", "c", "bbb", "a"]

p

["d", "c", "bbb", "a"]

p.splice(1,2)

["c", "bbb"]

p

["d", "a"]

[4,2,66,3,0,-7,3.5].sort()

[-7, 0, 2, 3, 3.5, 4, 66]
Objekty: dátová štruktúra, do ktorej môžeme vkladať viac premenných podľa mena.

var o = {}

undefined

o

Object {}

o.a = 1

1

o.b = "ahoj"

"ahoj"

o

Object {a: 1, b: "ahoj"}

o.a

1

o.b

"ahoj"

var o2 = o

undefined

o2

Object {a: 1, b: "ahoj"}

o2.a = 2

2

o2

Object {a: 2, b: "ahoj"}

o

Object {a: 2, b: "ahoj"}

var o = { a: 1, b: "ahoj"}

undefined

o

Object {a: 1, b: "ahoj"}

o2

Object {a: 2, b: "ahoj"}

<<<

>>>

vvv

Funkcie

Funkcie sa v javascripte definujú pomocou slova function. Funkcie je možné priraďovať do premenných a potom ich pomocu týchto premenných volať. Tiež sa dajú zadefinovať funkcie bez mena (samozrejme majú zmysel len ak si ich hneď uložíme do nejakej premennej alebo odovzdáme ako parameter).

function f(x) { return x+1; }

undefined

f(2)

function g() { alert("ahoj"); }

undefined

g()

undefined

var g = function() { alert("ahoj"); }

undefined

g()

undefined

function zavolaj(fcia) { fcia(); }

undefined

zavolaj(g)

undefined

Funkcia g nič nevracia (nie je v nej príkaz return), preto nám konzola ako výsledok jej zavolania vypísala undefined.

Funkcie samozrejme možno tiež vkladať aj do objektov (a aj polí):

var o = {}

undefined

o.plus = function(a, b) { return a+b; }

function (a, b) { return a+b; }

o.mocnina = function(a) { return a*a; }

function (a) { return a*a; }

o.mocnina(o.plus(2,3))

var o = { plus : function(a,b) { return a+b; }, mocnina : function(a) { return a*a; }, }

undefined

o.mocnina(o.plus(2,3))

var zvacsovac = { kolko: 10, zvacsi: function(x) { return x + this.kolko; }, }

undefined

zvacsovac.zvacsi(7)

zvacsovac.kolko = 5

zvacsovac.zvacsi(7)

this je špeciálna premenná, ktorá ukazuje na objekt, z ktorého funkciu voláme (tá istá funkcia môže byť vložená vo viacerých objektoch naraz :-)).

<<<

>>>

vvv

Cykly a iné

console.log je funkcia, ktorá do konzoly vypíše argumenty s ktorými ju zavoláme.

console.log(1)

undefined

console.log({a:1, b:"ahoj"})

Object {a: 1, b: "ahoj"}

undefined

console.log(console.log)

function log() { [native code] }

undefined

Cykly fungujú podobne ako v C/C++

var i

undefined

for(i=0; i<4; ++i) { console.log("cislo: ", i); }

cislo: 0

cislo: 1

cislo: 2

cislo: 3

undefined

var i = 0

undefined

while(i < 4) { console.log("cislo: ", i); ++i; }

cislo: 0

cislo: 1

cislo: 2

cislo: 3

Podmienka je tiež rovnaká ako v C/C++

var i = 1

undefined

var x = 0

undefined

if (i>5) { x = "mesie"; } else {x = "vacsie" }

"vacsie"

<<<

>>>

vvv

Hráme sa s funkciami

Možnosť ľahko manipulovať s funkciami ako s premennými sa v JavaScripte často používa. Napríklad každé pole má funkciu forEach, ktorá ako parameter očakáva funkciu s jedným alebo dvoma parametrami, ktorú potom zavolá postupne s každým prvkom poľa (a jeho indexom, ak má funkcia 2 parametre).

a=["jablko", "hruska", "ceresna"]

["jablko", "hruska", "ceresna"]

a.forEach(function(e) { console.log("prvok: ", e); })

prvok: jablko

prvok: hruska

prvok: ceresna

undefined

a=["jablko", "hruska", "ceresna"]

["jablko", "hruska", "ceresna"]

a.forEach(function(e,i) { console.log("prvok", i, ":", e); })

prvok 0 : jablko

prvok 1 : hruska

prvok 2 : ceresna

<<<

>>>

vvv

HTML+CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
  </head>
  <body>
    <h1>Nadpis</h1>
    <div id="vsetko">
      <p>Odstavec</p>
      <p class="zvyraznene">Druhý odstavec</p>
    </div>
  </body>
</html>

h1 {
  background-color: lightblue;
}

#vsetko {
  border: 1px dashed blue;
}

.zvyraznene {
  font-style: italic;
  font-family: fantasy;
}

<<<

>>>

vvv

HTML+JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
    <script src="test.js" type="text/javascript"></script>
  </head>
  <body onload="javascript:start();">
    <h1 onclick="javascript:kliknutyNadpis(this)">Nadpis</h1>
    <div id="vsetko">
      <p>Odstavec</p>
      <p class="zvyraznene">Druhý odstavec</p>
      <p id="sprava"></p>
    </div>
  </body>
</html>

function start() {
  console.log("Nacitane");
}

function kliknutyNadpis(e) {
  e.innerHTML = e.innerHTML + "s";
}

<<<

>>>

vvv

Získavame elementy

document.getElementById("id")
document.getElementById("sprava")

document.getElementById("sprava").innerHTML = "ahoj"

"ahoj"
documents.getElementByTagName("tag")
document.getElementsByTagName("body")
[
<body onload="javascript:start();">…</body>
]
document.getElementsByTagName("p")
[
Odstavec
,
Druhý odstavec
,
…
]
document.getElementsByTagName("p")[0].innerHTML="Zmenený odstavec"

"Zmenený odstavec"

<<<

>>>

vvv

JS+CSS

Z javascriptu vieme aj meniť CSS vlastnosti

Odstavec s id 'odstavec'

p = document.getElementById('odstavec')

Odstavec s id 'odstavec'

p.style.backgroundColor="red"

"red"

p.style.border = "1px dashed blue"

"1px dashed blue"

p.style.borderRadius = "10px"

"10px"

<<<

vvv

Bookmarklet

JavasScript sa dá vložiť aj ako cieľ odkazu (ale musi to byť len jeden príkaz).

<a href="javascript:alert('ahoj');">Ahoj</a>

Ahoj

Ako spojiť viacero príkazov do jedného? Vyrobíme funkciu, ktorú hneď aj zavoláme.

(function() {
  var ps = document.getElementsByTagName('p');
  for(var i=0; i<ps.length; ++i) {
    ps[i].innerHTML='AHOOOOJ';
  }
}) ();

AHOOOJ

Bohužial pole, ktoré vráti getElementByTagName, nie je úplne pole, iba niečo čo sa na pole podobá. Napríklad nemá funkciu forEach :-(. V JS ale vieme ľahko zavolať funkciu forEach z normálneho poľa na tom, čo nám vráti getElementByTagName:

[].forEach.call(
    document.getElementsByTagName("p"),
    function(p) {
      p.innerHTML="AHOOOOJ";
    }
);

CENSORED

Takéto odkazy sa potom dajú pridať do záložiek (bookmarks), idaálne na panel záložiek, čím vznikne bookmarklet.

<<<

vvv

Čo ďalej

Menenie CSS vlastností z JS (farby, formátovanie, pozícia, viditeľnosť)
Časovač + pozícia (CSS): animácie
Kreslenie (canvas)