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
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>
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
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!
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.
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
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)