JavaScript/Juandev/W3Schools

Tak po bojích s dvěma knihami v JavaScript/Juandev, jsem se rozhodl, že to přeci jenom zkusím s W3Schools: [1].

Zdrojem mi může být i následující specifikace: Standard ECMA-262.

Hodina 1

je to skriptovací jazyk, tedy jednodušší programovací jazyk
vhodné pro webdesignéry svojí jednoduchostí
JS je tedy objektově orientovaný skriptovací jazyk
funguje na straně klienta v jeho browseru
je to jedna z variací ECMAScriptu, který je postaven na standardu ECMA-262
JS vyvinu Brendan Eich z Netscapu (Netscape byl jedním z nejrozšířenějších vyhledávačů, pak se ale propadnul a vypadá to, že ho Netscape Communications, nebudou už dále podporovat. Poslední verzí byl Netscape 8, NC je společnost spojená s AOL)
JS, nemá nic společného z Javou až na pár věcí, a je stejně jako Java založen na syntaxi jazyka C
Microsoft vyvinul JScript, který je s JS skoro totožný. JScript vyřešil problém Y2K (problém roku 2000)
na JavaScriptu je postaven AJAX (asynchronní JavaScript a XML). Využívá se na webu, protože dokáže asynchronně přenášet data ze serveru --> to zajišťuje plynulost procesu a neruší to uživatele. Například Google je psán v AJAXu.

Hodina 2

JavaScript stejně jako CSS se dá vkládat několika způsoby:
- jako inline (například "onclick" přímo v html tagu)
- na začátek html dokumentu do hlavy:

<html><head><script type="text/javascript">...</script></head><body>...</body></html>

- - ovšem pro starší prohlížeče je nutné ten skript skrýt: to se dělá HTML a JavaScriptovým komentářem: . Tedy:

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

. Zde se nám objevuje i značka js pro komentář // - je to kvůli Netscapu 4, kterej by to mohl interpretovat jinak. Čili v dnešní době to // už můžu de facto vynechat.--Juandev 4. 1. 2010, 11:00 (UTC) Na druhou stranu Molly říká, že to dělá, málo lidí, ale pokud chceme to dělati my, tak by jsme tam ten JavaScriptovej komentář měli vrazit.--Juandev 5. 1. 2010, 13:52 (UTC)

- - a daleko větší bordel nastává pokud vkládám javascript do XHTML, který v DOCTYPE deklaruji správně jako XHTML, tedy v podstatě, když browser donutím, aby to četl jako XHTML. Jinak to totiž čte špatně a to jako HTML. V takovém případě je syntaxe

<script type="text/javascript"><!--//--><![CDATA[//><!--alert("Hello World!");//--><!]]></script>

- no něco šílenýho. Čili vkládat skript do hlavy jen v nouzi!

- - - a vlastně ta příšernost s tím CDATA je jazyk XML
- externí soubor popup.js:

<html><head><script type="text/javascript" src="popup.js"></script></head><body>...</body></html>

- - tak jsem zjistil, že script atribut href nemá, tudíž je třeba používat atribut src--Juandev 5. 1. 2010, 13:36 (UTC)
do JavaScriptu jdou vkládat také HTML tagy: document.write("<h1>Hello World!</h1>"); - drobná záměna na stránce mi vytvoří nadpis první úrovně.
a nebo vložené CSS: document.write('<h1 style="color: red; font-size: 50px;">Hello World!</h1>');

Hodina 3

dnes se dozvídám, že JavaScript v hlavě se nečte hned, ale funguje jen když je volán, kdežto JavaSript v těle funguje již při načítání, tedy v momentu, kdy k němu vyhledávač dorazí
externí soubor se skriptem má mít v tomto případě koncovku .js
odkaz na externí skript, se může vložit jak do hlavy tak těla HTML dokumentu, tedy tam kam bych ho jinak běžně vložil
syntaxe pro vložení je <script type="text/javascript" src="xxx.js"></script>, zde tedy vkládají s atributem src - source, hmmm....

Hodina 4

JavaScript je o příkazech, které prohlížeči říkají co má vykonat
JavaScript je case sensitive, tedy pozor na malá a velká písmena
konec příkazu je označen koncem řádku nebo středníkem, v ideálním případě oběma najednou
- čili chci-li vložit více příkazů na jednu řádku, tak používám k ukončení středníkem
kód je čten postupně odshora dolů a tak se i postupně vykonávají příkazy
příkazy se seskupují do bloků. Blok je ohraničen složenými závorkami {}, vše uvnitř bloku se tak vykoná najednou. Používá se hlavně u funkcí a podmínek.

Hodina 5

komentáře se vkládají dvěma způsoby:
- komentář pouze na jedné řádce se uvozuje dvěma lomítky: // text komentáře
- komentář přesahující více řádků, se dělá podobně jako v CSS následovně: /* text komentáře */
dále se dají komentáře využít při hledání chyb. Stačí prostě zakomentovat určitý příkaz nebo blok, ono se to znefunkční a je to.
samozřejmě komentáře mohou stát na svém vlastním řádku/cích, ale i na řádku, kde je umístěn nějaký příkaz – často se tak používají právě k popisu příkazů apod.

Hodina 6

v JavaScriptu může proměnná (variable) obsahovat hodnotu (value) nebo výraz (exprssion)
každá proměnná má své jméno. Tato jména jsou "case sensitive" (česky doslova citlivý na velikost písma), čili "b" není totéž co "B". Dále je také třeba říct, že každé jméno musí začínat pímenem, nebo potržítkem.
deklarování proměnných znamená, přiřazování jmen proměnným
textová hodnota se uzavírá do závorek
proměnnou lze deklarovat dvěma způsoby:
- buďto takto var x; var x=6; var user; var user="Juan"
- nebo takto var x; x=6; var user; user="Juan"
no a z proměnnými se dají dělat běžné aritmetické funkce

Hodina 7

v JavaScriptu se setkáváme s následujícími matematickými operátory:
- + – sčítání
- - – odčítání
- * – násobení
- / – dělení
- % – modulo, neboli zbytek po dělení. Například, když y = 5 a x = %2, pak x = 1, protože x = 5/2 = 2 a zbytek 1
- ++ – inkrementace (zvýšení o 1). Tedy: y = 5 a x = ++x (nebo x++, to je jedno), pak x = 6. Zvýšení se dále dělí na:
  - preinkrementaci ++x, kde
```
var y = ++x;
```
    je vlastně
```
x = x+1;
```
```
var y = x;
```
  - postinkrementaci x++, kde
```
var y = x++;
```
    je vlastně
```
var y = x;
```
```
x = x+1;
```
- -- – dekrementace (sníženi o 1). Tedy: y = 5 a x = --x (nebo x--, to je jedno), pak x = 4. Snížení se dále dělí na:
  - predekrementaci --x, kde
```
var y = --x;
```
    je vlastně
```
x = x+1;
```
```
var y = x;
```
  - postdekrementaci x--, kde
```
var y = x--;
```
    je vlastně
```
var y = x;
```
```
x = x+1;
```
dále jsou tu přiřazovací operátory:
- = – rovná se, čili např.:
```
var vek = 25;
```
```
vek = vek;
```
  pak vek = 25
- += – vysvětleno příkladem znamená:
```
var vek = 25;
```
```
vek += 1;
```
  je vlastne
```
vek = vek + 1;
```
  tedy vek = 26
- -= – zde tedy:
```
var vek = 25;
```
```
vek -= 1;
```
  je
```
vek = vek - 1;
```
  čili vek = 24
- *= – a analogicky:
```
var vek = 25;
```
```
vek *= 1;
```
  bude vek = 25, protože
```
vek = vek * 1;
```
  což je vek = 25 * 1 = 25
- /= – zde totéž pro dělení
- %= – a zde totéž pro zbytek po dělení. Čili cvičně:
```
var vek = 25;
```
```
vek %= 1;
```
  dá vek = 0, protože
```
vek %= 1;
```
  je vlastně:
```
vek = vek%1;
```
  což je 25/1 = 1, zbude 0. Čili pro věk nesmyslná operace, ale může se hodit jinde.
+ se také používá ke spojování proměných v řetězcích. Může být:
```
var zacatek = "What a cold";
```
```
var konec = " day!";
```
```
var veta = zacatek + konec;
```
To mi dá: What a cold day! Je jasně vidět, že do jedné z proměných je třeba vložit mezeru, aby se pak projevila mezi jednotlivými proměnými ve větě. Jiný způsob jak zařídit mezeru, mezi sčítanými proměnými řetězce je:
```
var zacatek = "What a cold";
```
```
var konec = "day!";
```
```
veta = zacatek+" "+konec;
```
A opet bych mel dostat What a cold day! Je tedy nutné nezapomínat na mezeru, protože třeba
```
var project = "Wiki" + "verzita";
```
mi dá Wikiverzita. Další příklad s čísly:
```
var vek = 28;
```
```
vek = ++vek;
```
```
var veta = "Podle Cinanu je mi ";
```
```
var konecvety = ".";
```
```
celaveta = veta + vek + konecvety;
```
by mělo dát Podle Cinanu je mi 29.
dále je třeba si uvědomit, že + je tu pro sčítání, ale jakmile jednu z částí zakomentuji, stává se z toho řetězec. Takže např.
```
rovnice = 5 + 5;
```
mi dá 10, kdežto
```
rovnice = "5" + 5;
```
mi dá 55 a stejně tak
```
rovnice = "5" + "5";
```
mi dá 55.

Příklady

var vek = 25;
vek = vek;
document.write(vek);

var vek = 25;
vek += 2;
document.write(vek);

var vek = 25;
vek -= 2;
document.write(vek);

var vek = 25;
vek *= 1;
document.write(vek);

var vek = 25;
vek = ++vek;
document.write(vek);

var vek = 35;
vek %= 4;
document.write(vek);

var zacatek = "What a cold";
var konec = " day!";
var veta = zacatek + konec;
document.write(veta);

var zacatek = "What a cold";
var konec = "day!";
veta = zacatek+" "+konec;
document.write(veta);

var project = "Wiki" + "verzita";
document.write(project);

var vek = 28;
vek = ++vek;
var veta = "Podle Cinanu je mi ";
var konecvety = ".";
celaveta = veta + vek + konecvety;
document.write(celaveta);

Hodina 8

pak tu jsou comparison operators (porovnávací operátory):
- == – true, je-li A rovno B, jinak false. Tedy příklad vyhodnocení true:
```
var name = "Juan de Vojnikov";
```
```
if (name =="Juan de Vojnikov") { alert("Vitej")};
```
  Vyhodnoceni false:
```
var name - "Juan de Vojnikov";
```
```
if (name == "Sancho Panza")  { alert("Vitej")};
```
- === – je přesně rovno, tedy např.:
```
var x = 5;
```
```
if (x === 5) { alert("True")};
```
  - rozdíl, mezi == a === je takový, že === vystupuje jako kontrola typu. Vezměme si následující příklad: x = 5; y = 5; x == y dává hodnotu true, kdežto x === y false, muselo by být x === 5.--Juandev 21. 1. 2010, 11:35 (UTC)
- != není rovno:
```
var x = 5;
```
```
if (x != 6) { alert("True")};
```
- > větší než:
```
var x = 5;
```
```
if (x > 3) { alert("True")};
```
- < menší než
- >= větší nebo rovno
- <= menší nebo rovno
čili hodí se to třeba na takové ty weby, kde se vás to ptá jestli jste plnoletí. Pak to může dopadnout i takhle:
```
if (age>18) document.write("I don't believe you! Access denied.");
```

dále je tu pár logických operátorů:

&& označuje „a“. Takže třeba, jde o přístup na můj pivní web. Nějak definuji proměnnou age:

 var age = 19;

 if (age > 18 && age < 21) { alert("Chlastat můžeš, ale traktor ti nepůjčím. Pojď dál!")};

|| znamená „nebo“. Čili:

var name1 = "Kychot";

if (name1 == "Juan" || name1 == "Venca24" || name1 == "Kychot") { alert("Vítej Wikiverziáne!")};

var name2 = "Zirland";

if (name2 == "Zirland") { alert("Vítej Andoriáne!")};

! true, pokud je logická hodnota false. Čili

var name = "Kychot";

if(!(name === "Juan")) { alert("Kdo to sem zas leze?!")};

? : je tak zvaný conditional operator (podmínkový operátor?). Čili pokud to zapíšeme obecně: podmínka ? hodnota1:hodnota2;, pak platí, že pokud je podmínka true, použije se hodnota1, jinak je podmínka false a použije se hodnota2. Čili příklad:
```
privitani = (user == "Mercy")?"Čau řezníku!": "Vítejte!";
```

Hodina 9

dnes o podmínkových příkazech:
- if – spustí kód pokud (=if) je podmínka true. Takže například vítací skrypt:
```
var d = new Date();
```
```
var time = d.getHours();
```
```
if (time < 8) {  document.write("Dobré ráno!");  }
```
  Čili vytvářím proměnnou „d“, kde „Date“ je objekt. Další proměnnou je „time“, který definuji jako objekt proměnné „d“ a používám metodu „getHours()“ pro získání aktuální hodiny číslem. Samozřejmě, jelikož je JavaScript jazyk operující ve vyhledávači je to lokální čas počítače, nikoliv čas na severu. Následně dám podmínku, že proměnná „time“ musí být menší než 8. Pokud tato podmínka nastane, můžu uživatele přivítat hláškou „Dobré ráno“! Je třeba si ale také uvědomit, že tento skrypt bere v potaz jen celé hodiny. Čili pokud chci dostat do hry minuty musím použít metodu getMinutes(). Něco složitějšího:
```
var d = new Date();
```
```
var time = d.getHours();
```
```
var minute = d.getMinutes();
```
```
if (time > 4 && time <= 8 )   {  document.write("Dobré ráno!");  }
```
```
if (time > 8 && time <= 11 )   {  document.write("Dobrý den! ");  }
```
```
if (time >= 11 && time <= 14 )   {  document.write("Dobrou chuť!");  }
```
```
if (time == 15  && minute <= 30 )   {  document.write("Po jídle siesta:-)");  }
```
  Čili tady vidíme takový dlouhý skrypt s několikanásobným použitím podmínkového příkazu if. Je třeba si všimnout několika věcí. Jednat jsou zde vymezeny určité rozsahy. To znamená „(time > 4 && time <= 8 )“ znamená, že se berou v potaz všechny hodniny větší než 4 a všechny hodiny menší nebo rovné 8. Je to tedy průnik čísel 5, 6, 7, 8, 9, 10 atd. a čísel 8, 7, 6, 5, 4, 3 atd. Což dává 5, 6, 7, 8. Neřeší se zde minuty. Čili když máme 7:27, tak to hlásí „Dobré ráno!“ protože je to v průniku 7. A stejně tak 8:00 a 8:57 stále hlásí „Dobré ráno!“ Čili „8:59“ je stále „Dobré ráno!“, kdežto „9:00“ je již „Dobrý den“! Což definuje druhá podmínka. Dále si můžeme povšimnout, že 2. a 3. podmínka se časově překrývají. Proto je v textu za „Dobrý den! “ mezera. Protože v čase od 11:00 do 11:59 se bude zobrazovat „Dobrý den! Dobrou chuť!“ Poslední podmínka pak ukazuje způsob nasazení minut. To znamená, opět hledám průnik dvou proměnných: time je 15, tzn. 15:00–15:59 a minute je 30–0. Čili tato podmínka je platná v rozsahu 15:00–15:30. Na závěr jednoduchý skryptík z minulé hodiny:
```
var x = 5;
```
```
if (x === 5) { alert("True")};
```
- if…else – pokud (=if) je hodnota true, spustí se kód, jinak (=else) se spustí jiný kód:
```
var d = new Date();
```
```
var time = d.getHours();
```
```
if (time < 8) { document.write("Dobré ráno!"); }
```
```
else { document.write("Dobrý den!"); }
```
  Tento skrypt Vám přeje podle času „Dobrý den!“, nebo „Dobré ráno“! Je z něj jasně vidět, že pokud je 00:00-->7:59 tak se přeje „Dobré ráno!“ a pokud je 8:00-->23:59 tak se přeje „Dobrý den“! Čili je to jen ukázka, jinak by se to muselo více rozparcelovat.
- if…else if…else – stejně tak, jak je možné za sebou seřadit několik if příkazů, je možné za sebou seřadit několik if else příkazů. Následující skrypt ukazuj 2 if else příkazy za sebou:
```
var d = new Date();
```
```
var time = d.getHours();
```
```
if (time<8) { document.write("Dobré ráno!"); }
```
```
else if (time>=8 && time<18) { document.write("Dobrý den!"); }
```
```
else { document.write("Uááá, kdo mě to budí?!"); }
```
  Nicméně místo mnohonásobného použití těchto dvou příkazů, je lepší používat swich. Dalším učebnicovým příkladem je Random link:
```
var r=Math.random();
```
```
if (r>0.5) { document.write("<a href='http://cs.wikiversity.org'>Wikiverzita</a>"); }
```
```
else { document.write("<a href='http://cs.wiktionary.org'>Wikislovník</a>"); }
```
  Definuji proměnou „r“ objektem math. Metoda random() pak generuje náhodné číslo mezi 0 a 1. Vhledem k tomu, že podmínka je „r>0.5“, pokud je vygenerována 1, tato podmínka platí (je true) a je mi nabídnut odkaz na Wikiverzitu, v druhém případě, kdy je vygenerováno 0, podmínka neplatí (je false, použije se else) a je mi tedy vygenerován odkaz na Wikislovník. Jak asi funguje special:random? Není to podobné? Abych vymyslel svoje „random“, budu jistě potřebovat swich, tak vzhůru na další lekci!

Hodina 10

dalším podmínkovým příkazem je switch
učebnicový příklad je:
```
var datum = new Date();
```
```
var den = datum.getDay();
```
```
switch (den)
```
```
{
```
```
case 1: document.write("Je pondělí.");
```
```
break;
```
```
case 2: document.write("Je úterý.");
```
```
break;
```
```
case 0: document.write("Je neděle a dneska nic nedělám.");
```
```
break;
```
```
default: document.write("Co já vím co je dnes za den?!");
```
```
}
```
Prostě definuji proměnou „datum“, využívaje objektu Date. Následně použiji metodu getDay() k proměnné „datum“, kdy říkám, že „den“ se rovná datum.getDay(). Poté jde podmínkový příkaz switch, a několik případů označených jako case. Default pak označuje defaultní hodnotu a říká, že se má vždy rozbalit hláška „Co já vím co je dnes za den?!“, pokud nenastal jeden z předchozích příkazů. Jelikož je ale na konci, dojde k nejprve k zprocesování dostupných případů. Před tím, ale následují případy, pokud jeden z případů nastává, použije se místo defaultu onen. Metoda getDay() generuje číslo od 0–6, kde 0 je neděle a 6 je sobota. Proto mají případy case různá čísla podle toho jaký den byl metodou getDay() vygenerován. Příkaz break pak přeruší cyklus. Čili case a default jsou součásti podmínkového příkazu bloku (označen {}) switch. Je třeba také říct, že by šlo použít
```
den = datum.getDay();
```
, protože to řada prohlížečů identifikuje správně, ale nejedná se o sématnické použití a v budoucnu to může přinést i problémy. Vlastní příklad randoom odkazu:

var x = Math.random(); // metoda Math.random() generuje cislo od 0-1

switch (x)
{
case (x < 0.2):
  document.write("<a href='http://cs.wikipedia.org'>Wikipedie</a>");
  break;
case (x >= 0.2 && x < 0.4):
  document.write("<a href='http://cs.wiktionary.org'>Wikislovník</a>");
  break;
case (x >= 0.4 && x < 0.6):
  document.write("<a href='http://cs.wikisource.org'>Wikizdroje</a>");
  break;
case (x >= 0.6 && x < 0.8):
  document.write("<a href='http://cs.wikibooks.org'>Wikiknihy</a>");
  break;
case (x >= 0.8):
  document.write("<a href='http://cs.wikinews.org'>Wikizprávy</a>");
}

Nějak se to ale nedaří. Unikají mi k tomu znalosti, tak snad v budoucnu se mi to podaří dodělat!

Hodina 11

dnes o vyskakovacích tabulkách
alert box je vyskakovací tabulka, kterou musím zavřít nebo kliknout na OK, abych mohl pokračovat dál. K čemu to využít:
```
alert("Na tuto stránku nemáte přístup!");
```
co je to "function"?
confirm box je potvrzovací tabulka:
```
confirm("Jste plnoletí?");
```
už mě to dnes nebaví--Juandev 29. 1. 2010, 18:37 (UTC)

Poznámky

jsou mi doporučeny jiné, prý lepší zdroje pro studium:
- http://eloquentjavascript.net/
- http://www.opera.com/company/education/curriculum//