Předešlý článek
o JavaScriptu pojednával o použití základních funkcí, které mají již
předdefinované vlastnosti a úkony, které mají provádět. Dnešní článek se
zaměří na tvorbu vlastních funkcí, které budou již trochu pokročilejší,
jelikož se budou skládat z těch základních. Princip používání vlastních
funkcí je založen na principu dočasné úpravy HTML kódu, který se ale
svou syntaxí trochu liší od klasického HTML. Vezměme si příklad, kdy
máme HTML dokument ve kterém se nachází tlačítko, a element, který má
být ovlivněn:
Do HTML dokumentu vložíme mezi tagy
<script></script> následující JavaScriptový kód, který
obsahuje funkcí, která zároveň změní barvu a pozadí textu:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="PCSOLUTIONS" content="PCSOLUTIONS editor, https://pc-solutions.cz/">
<title>Index.html</title>
<script>
function zmenText {
document.getElementById("div_1").style.color = "blue";
document.getElementById("div_1").style.backgroundColor = "red";
}
</script>
</head>
<body>
<button id="tlacitko">Tlačítko</button>
<div id="div_1">Ovlivněný text.</div>
</body>
</html>
Poslední nezbytnou úpravou v našem HTML dokumentu je přidání způsobu
zavolání funkce do tlačítka, aby se JavaScript mohl aktivovat na náš
pokyn. V následujícím kódu je přidána funkce onClick v HTML tagu
<button></button>, která po kliknutí na tento element zavolá
naši nově napsanou funkci zmenText();, která změní barvu textu v
elementu div_1 na modrou a pozadí textu na červenou barvu.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="PCSOLUTIONS" content="PCSOLUTIONS editor, https://pc-solutions.cz/">
<title>Index.html</title>
<script>
function zmenText() {
document.getElementById("div_1").style.color = "blue";
document.getElementById("div_1").style.backgroundColor = "red";
}
</script>
</head>
<body>
<button id="tlacitko" onClick="zmenText();">Tlačítko</button>
<div id="div_1">Ovlivněný text.</div>
</body>
</html>
Nyní vidíme, že je náš kód kompletní a funkce pracuje tak jak má.
V příští kapitole o JavaScriptu se podíváme na práci s proměnnými hodnotami a vysvětlíme si, proč jsou užitečné.