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:
<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>
</head>
<body>
<button id="tlacitko">Tlačítko</button>
<div id="div_1">Ovlivněný
text.</div>
</body>
</html>
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:
function zmenText {
document.getElementById("div_1").style.color
= "blue";
document.getElementById("div_1").style.backgroundColor
=
"red";
}
Aktuální podoba našeho HTML dokumentu vypadá nějak takto:
<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é.