JavaScript v HTML

Pomocí programovacího jazyka můžeme dělat dynamické a interaktivní HTML stránky.

Programování v JavaScriptu není obtížné, ale množství funkcí jazyka je hodně velké. Toto je jenom malá ukázka, není naším cílem se naučit programovat v JavaScriptu. Kdo se do JavaScriptu chce ponořit, tak si může prostudovat některé knihy, které jsou uvedeny na konci tohoto dokumentu.

První JavaScriptový program

Zobrazení času

<!DOCTYPE html>
<html>
<body>

<h1>První JavaScript program</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Ťukni na mě a zobrazím aktuální čas.</button>

<p id="demo"></p>

</body>
</html>

Změna stylu HTML prvku

<!DOCTYPE html>
<html>
<body>

<h1>Druhý JavaScriptový program</h1>

<p id="demo">JavaScript umí měnit styl HTML prvku.</p>

<script>
function zmenStyl() {
  var date1 = new Date();
  document.getElementById('demo').innerHTML = date1.toLocaleDateString();

  document.getElementById("demo").style.fontSize = "25px";
  document.getElementById("demo").style.color = "#f61a48";
  document.getElementById("demo").style.backgroundColor = "#dadada";
}
</script>

<button type="button" onclick="zmenStyl()">Spustit</button>

</body>
</html>

JavaScript umí měnit styl HTML prvku.

Změna obrázku

<!DOCTYPE html>
<html>
<body>

<h1>Třetí JavaScript</h1>
<p>Budeme měnit obrázek</p>

<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "zarovka/zarovka_nesviti.png"
  } else {
    pic = "zarovka/zarovka_sviti.png"
  }
  document.getElementById('zarovka').src = pic;
}
</script>

<img id="zarovka" src="zarovka/zarovka_nesviti.png" width="300" height="540">

<p>
<button type="button" onclick="light(1)">Rozsviť</button>
<button type="button" onclick="light(0)">Zhasni</button>
</p>

</body>
</html>

Budeme měnit obrázek

HTML prvek `<script>`

JavaScriptový program, který má běžet na klientovi (v prohlížeči), uzavíráme do prvku <script> a </script>.

Prvek <script> může obsahovat jak samotný kód programu, tak i odkaz na soubor s programem v atributu src.

Prvek <script> se může vyskytovat jak v sekci <head> tak i v sekci <body>.

Příklad s atributem src

<!DOCTYPE html>
<html>
<head>
    <script src="zarovka/zarovka.js"></script> (1)
</head>
<body>
<h3>Žárovka</h3>
<p>...</p>

<img id="zarovka" src="zarovka/zarovka_nesviti.png" width="300" height="540">

<p>
<button type="button" onclick="light(1)">Rozsviť</button>
<button type="button" onclick="light(0)">Zhasni</button>
</p>

</body>
</html>

1	JavaScriptový program je v souboru `zarovka/zarovka.js`

V souboru zarovka.js je

function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "zarovka/zarovka_nesviti.png"
  } else {
    pic = "zarovka/zarovka_sviti.png"
  }
  document.getElementById('zarovka').src = pic;
}

HTML prvek `<noscript>`

Prvek <noscript> definuje alternativu pro stav, že prohlížeč nemá v sobě JavaScript. Buď je vypnutý, nebo zablokovaný a nebo ho prohlížeč vůbec nemá naprogramovaný.

Příklad <noscript>

<script>
document.getElementById("demo").innerHTML = "Nazdar studenti!";
</script>
<noscript>
Zapněte si prosím JavaScript, jinak příklad nemůže fungovat.
</noscript>