10 Shrnutí + odklizení sněhu 1

Pojďme si všechno přehledně shrnout na jednom místě. Aneb kopírovací příručka.

 

HTML tágy

   <input type="text" value="bubli bubli">

<input type="button" value="ťuk">

 

<img src="/js_logo.png">

<p>odstavec</p>

<span>kousek textu</span>

<h1>nadpis</h1>

Seznam formulářových tágů (www.jakpsatweb.cz)

Seznam HTML tágů (www.jakpsatweb.cz)

 

Propojení HTML části s programovou části (SCRIPT)

Jak propojit viditelnou HTML část (<body>...</body>) s programovou části (<script></script>) a vytvořit z webu program.

1. Události (HTML -> SCRIPT)

To co nás hodí z HTML do scriptu jsou události (events). Události se přiřazují jednotlivým html tágům podobně jako vlastnosti. Události obsahují část scriptu, ideálně když se jen zavolá nějaká funkce do scriptové části.

 <input type="button" value="ťuk" onClick="baf()'">

<input type="button" value="Já tu nejsem" onClick="au()'" onMouseOver="bojim()" onMouseOut="uf()" id="ustrasenec">

 

Seznam některých událostí

onClick
kliknutí myší na prvek

onMouseOver
najetí myší nad prvek 

onMouseOut
odjetí myši z prvku 

onDblClick
dvojitý klik myší 

onLoad
načtení stránky 

onKeyPress
stisknutí klávesy

... a další na jakpsatweb.cz

Oba tlačítka výše odchytávají události onClick. K té dojde po kliknutí na tlačítko. První tlačítko zavolá při této události funkci baf() a druhé volá funkci au(). Další události které můžeme použít vidíte u druhého tlačítka. Jejich význam vidíte v zeleném rámečku vpravo.

Př.1: Poznáš z chování ukázkových tlačítek (výše) jaké příkazy obsahuje funkce uf()?

document.document.getElementById("idd").style.left = "300px";

 document.document.getElementById("ustrasenec").style.background = "green";

document.document.getElementById("ustrasenec").value = "Uf";

 document.document.getElementById("obrazek1").src = "logo-goole.jpg";

 document.document.getElementById("ustrasenec").style.background = "red";

 document.document.getElementById("ustrasenec").style.color = "red";

 document.document.getElementById("ustrasenec").value = "Co mi chceš udělat?";

document.document.getElementById("ustrasenec").style.background = "gray";

 

2. Identifikátor id=""

Ve skritpu potřebujeme pracovat zase s HTML prvky, takže se k ním potřebujeme nějak dostat. Abychom přesně určili (identifiovali) prvek s kterým chceme pracovat, musíme jej opatřit IDčkem. ID znamená jednoznačné identifikační číslo. Například jako ID člověka (občana) se používá rodné číslo. Nemohou (neměli by) existovat dva lidé se stejným rodným číslem. Pomocí inventárního čísla můžeme zase jednoznačně určit konkrétní stůl ve škole, jde tedy o ID nábytku.

V HTML a JavaSriptu můžeme použít jako ID nejen čísla, ale libovolný text. A to tak, že html tág opatříme vlastností id:

<img src="/jehla.jpg" id="obrazek1">

<input type="button" id="tlacitko">

<p id="skore"></p>

Ve skriptu se pak k těmto prvkům (které jsou opatřeny vlastnosti id) dostaneme pomocí tohoto příkazu (defaultní funkce JavaScriptu):

document.getElementById("obrazek1"); 

Tato funkce vrací objekt s daným id, v tomto případě tedy objekt obrázku. Můžeme mu tedy nastavovat vlastnosti typické pro obrázek jako třeba src. A to buďto rovnou, nebo si jej vložit do proměnné. To je výhodné, zejména chceme-li s tímto objektem pracovat více.


document.getElementById("tlacitko").value = "Ťukni si";

var obr = document.getElementById("obrazek1");

obr.src = "nit.jpg";

obr.style.width = "50px";

Př.2: Hra odklízení sněhu

hra.html

Kam dál?