Úvod do JavaScriptu

Obsah

Tato stránka obsahuje některé příklady toho, co JavaScript umí.

JavaScript může změnit obsah HTML

Jednou z mnoha metod JavaScriptu HTML je getElementById().

Níže uvedený příklad „najde“ prvek HTML (s id="demo"), a změní obsah prvku (innerHTML) na „Ahoj JavaScript“:

Příklad

document.getElementById("demo").innerHTML = "Hello JavaScript";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript přijímá dvojité i jednoduché uvozovky:

Příklad

document.getElementById('demo').innerHTML = 'Hello JavaScript';

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript může měnit hodnoty atributů HTML

V tomto příkladu JavaScript mění hodnotu atributu src (zdroj) značky <img>:

Žárovka

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

JavaScript může měnit styly HTML (CSS)

Změna stylu prvku HTML je variantou změny HTML atribut:

Příklad

document.getElementById("demo").style.fontSize = "35px";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

JavaScript může skrýt prvky HTML

Skrytí prvků HTML lze provést změnou stylu zobrazení:

Příklad

document.getElementById("demo").style.display = "none";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

JavaScript může zobrazovat prvky HTML

Zobrazení skrytých prvků HTML lze provést také změnou stylu zobrazení:

Příklad

document.getElementById("demo").style.display = "block";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

Věděl jsi?

JavaScript a Java jsou zcela odlišné jazyky, oba v pojetí a design.

JavaScript vynalezl Brendan Eich v roce 1995 a stal se standardem ECMA v roce 1997.

ECMA-262 je oficiální název standardu. ECMAScript je oficiální název jazyka.