Javascript je jeden z troch základných nástrojov, ktorý sa používa pri zobrazovaní webstránok. Zatiaľ, čo html definuje, čo na stránke bude a CSS zase ako to bude vyzerať, Javascript zabezpečuje dynamické zmeny na stránke podľa toho, čo užívateľ urobí. Predstavte si to ako keď píšete vo Worde. To, čo tam napíšete, je html. To, ako to sformátujete – teda veľkosť písma, odsadenia, riadkovanie… – to je všetko CSS. A Javascript sa postará napríklad o to, čo uvidíte na dnešnom príklade – teda o zmenu veľkosti písma podľa rozhodnutia užívateľa.
Poďme teda na to. Najprv si vytvoríme html input, ktorým bude užívateľ voliť veľkosť písma. Dôležité je, aby sme zadali ID, aby Javascript vedel, odkiaľ bude brať hodnotu veľkosti písma:
Potom si vložíme textové pole so slepým textom. Tiež je dôležité, aby bolo označené jedinečným ID.
<p>sample text here</p>
</div>
Teraz príde na radu Javascriptová funkcia:
function fontVelkost() {
var ovladac = document.getElementById(„fontsize“).value;
var text = document.getElementById(„text“);
text.style.fontSize = ovladac + „px“;
}
</script>
<html lang=“en-US“>
<head>
<meta charset=“UTF-8″>
<title></title>
<style type=“text/css“>
#ovladanie {
margin: 0 auto;
width: 15%;
padding: 2px;
text-align: center;
}
#text {
width: 80%;
padding: 10px;
margin: 0 auto;
background-color: lightgray;
border: 1px solid black;
border-radius: 10px;
}
</style>
<script type=“text/javascript“>
function fontVelkost() {
var ovladac = document.getElementById(„fontsize“).value;
var text = document.getElementById(„text“);
text.style.fontSize = ovladac + „px“;
}
</script>
</head>
<body>
<div id=“ovladanie“>
<input type=“range“ onmousemove=“fontVelkost();“ id=“fontsize“ min=“10″ max=“35″ step=“5″ value=“15″/>
</div>
<div id=“text“>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit nisi dui, eu dignissim erat consectetur et. Nunc viverra quam et augue fringilla, a tempor orci tincidunt. Phasellus tempus fermentum purus, vel suscipit tortor. Donec sagittis lectus sit amet eros porttitor faucibus. Maecenas id ipsum ultricies, molestie diam sit amet, rutrum metus. Nam varius et ex sed porta. Suspendisse ut elit massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vitae efficitur eros. Mauris sit amet mauris sit amet quam mollis iaculis quis nec leo. Duis dui augue, pulvinar non venenatis imperdiet, eleifend id lacus. Phasellus sodales quis eros eget feugiat. Donec ornare elementum mauris, vel ornare risus semper nec.</p>
</div>
</body>
</html>