Podklad pro kurz "Tvorba www stránek".

1. Tvorba www stránek
JavaScript

2. JavaScript Výstup (zobrazení v
prohlížeči)
• window.alert().
• document.write().
• innerHTML.
• console.log()

3. innerHTML

4. window.alert().

5. document.write()

6. console.log()
Aktivuje se v prostředí (Chrome, IE, Firefox)
F12, vyber "Console" v debugger menu.
<script>
console.log(5 + 6);
</script>

7. Syntaxe
• Jednotlivé části jsou odděleny středníky
• var x = 3;
var y = 7;
var z = x + y;
• Číslice se mohou psát s desetinou čárkou i
bez desetinné čárky
Může být 50 i 50.55

8. Uvozovky
Mohou se psát uvozovky jak jednoduché,
tak dvojité.

9. Proměnná
Proměnná je definována výrazem var x a
její hodnota je přiřazena rovnítkem a
má v příkladu hodnotu 8.
var x;
x = 8;

10. Proměnná II.
var cena1 = 5;
var cena2 = 6;
var celkeml = cena1 + cena2;

11. Vytváření proměnné
var jmenoAuta;

12. Operátory
=
+
-
*
/
%
++
--

13. Komentáře
var x = 8; // zde můžu psát komentář
// var x = 9; to je špatný zápis komentáře
/*
document.getElementById("odstavec").innerHTML = "My First
Page";
document.getElementById("footer").innerHTML = "My first
paragraph.";
*/

14. Case Sensitive
Camel Case
CitliveNaVelikostPismen

15. Prohlášení
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Toto se objeví v prohlížeči
na místě odstavce s názvem demo.";
</script>
Najdi element, který se jmenuje demo a vypiš v HTML text – Toto se objeví …
Dokument je název pro webovou stránku.

16. Typy dat
var length = 16; // Number
var lastName = „Novák"; // String
var cars = ["Škoda", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object

17. Funkce
function myFunction(a, b) {
return a * b; // Funkce vrátí výsledek
}
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
Výledek v prohlížeči je 12

18. Objekty
Objekty mají název a hodnotu
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

19. Události
<button onclick='getElementById("de
mo").innerHTML=Date()'>Kolik je
hodin?</button>
Při klinuti na tlačítko se zobrazí
aktuální datum a čas.

20. Běžné typy události
Událost Popis
onchange událost při změně elementu (např.) formulář
onclick Změní se po kliknutí
onmouseover Změní se při přejetí kurzoru pře element
onmouseout Změní se když kurzor opustí element
onkeydown Stlačení tlačítka na klávesnici
onload Prohlížeč ukončil načítání stránky

21. Objekt this
<p onclick="this.style.color = 'red'">text přebarvený
kliknutím</p>Po dvojkliku na tento odstavec se změní barva
pozadí odstavce.
<p ondblclick="this.style.backgroundColor = 'yellow'">změna pozadí
dvojklikem</p>Po přejetí tohoto slova se to slovo ztuční.
<span onmouseover="this.style.fontWeight= 'bold'">slovo</span> ztučnělé
přejetím

22. String
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
txt.length mi spočítá počet písmen
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>

23. Array
<p id="demo"></p>
<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars[2];
</script>
Pozor, počítá se vždy od 0.
Poznámka: Od nuly jdou i měsíce!

24. Boolean() Function
• YES / NO
• ON / OFF
• TRUE / FALSE
Logický datový typ

25. Operátor
<button onclick="myFunction()">Můžu volit?</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "Příliš mladý":"Jsi dost starý";
document.getElementById("demo").innerHTML = voteable + " můžeš jít k
volbám.";
}
</script>

26. If...Else
Jestliže se splní podmínka, tak se stane toto.
<button onclick="myFunction()">klikni zde</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "dobrý den";
} else {
greeting = "dobrý večer";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>

27. Loop
Loop je smyčka. Stále spouští stejný kód znovu
a znovu pokaždé s jinou hodnotou.
Místo tohoto zápisu
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Můžete napsat:
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";}

28. Do / while
• do {
text += "Číslo je " + i;
i++;
}
while (i < 10);
Uvedený příklad používá do / while. Smyčka bude vždy provedena alespoň jednou, a to i v
případě, že je podmínka nepravdivá, protože kód je uskutečněn před tím, než se testuje stav.

29. DOM
Document Object Model

30. DOM

31. JavaScript může:
• změnit všechny prvky HTML ve stránce
• změnit všechny atributy HTML ve stránce
• změnit všechny styly CSS na stránce
• odstranit existující HTML elementy a atributy
• přidávat nové HTML elementy a atributy
• reagovat na všechny stávající události HTML ve
stránce
• vytvářet nové události v HTML stránky

32. document.getElementById("demo").innerHT
ML = "ukaž se!";

33. Nalezení elementů
document.getElementById()
Najdi element podle ID
document.getElementsByTagName()
Najdi element podle jména
namedocument.getElementsByClassName()
Najdi element podle třídy

34. Změna HTML elementů
element.innerHTML=
Změna HTML zápisu elementu
element.attribute=
Změna atributu HTML elementu
element.setAttribute(atribut,hodnota)
Změna atributu HTML elementu
element.style.property=
Změna stylu HTML elementu

35. Přidání a vymazání elementů
document.createElement()
document.removeChild()
document.appendChild()
document.replaceChild()
document.write(text)

36. Nalezení objektů
document.anchors
document.applets
document.baseURI
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
document.documentURI
document.domain
document.domConfig
document.embeds
document.forms
document.head
document.images
document.implementation
document.inputEncoding
document.lastModified
document.links
document.readyState
document.referrer
document.scripts
document.strictErrorChecking
document.title
document.URL

37. Změna CSS
<h1 id="id1">Nadpis</h1>
<button type="button"
onclick="document.getElementById('
id1').style.color = 'red'">
Změn mě!</button>

38. Nalezení CSS selektrou
var x = document.querySelectorAll("p.intro");