PC-SOLUTIONS.CZ | ČLÁNEK | VLASTNÍ FUNKCE V JAVASCRIPTU

Andrej Niesner

2 minuty

VLASTNÍ FUNKCE V JAVASCRIPTU

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:

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é.

Syntaxe JavaScriptu