JavaScript Kam vést

Obsah

    Zobrazit obsah

Značka <script>

V HTML se kód JavaScript vkládá mezi značky <script> a </script>.

Příklad

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Staré příklady JavaScriptu mohou používat atribut typu: <script; type="text/javascript">.
Atribut type není povinný. JavaScript je výchozí skriptovací jazyk v HTML.

Funkce a události JavaScriptu

funkce JavaScriptu je blok kódu JavaScript, který lze spustit při „volání“.

Funkci lze například zavolat, když dojde k události, jako když uživatel klikne na tlačítko.

Mnohem více o funkcích a událostech se dozvíte v dalších kapitolách.

JavaScript v <head> nebo <body>

Do dokumentu HTML můžete umístit libovolný počet skriptů.

Skripty lze umístit do <body> nebo do části <head> stránky HTML, nebo v obou.

JavaScript v <head>

V tomto příkladu je funkce JavaScriptu umístěna v sekci <head> stránky HTML.

Funkce se vyvolá (volá) po kliknutí na tlačítko:

Příklad

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try 
it</button>


</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript v <body>

V tomto příkladu je funkce JavaScriptu umístěna v části <body> stránky HTML.

Funkce se vyvolá (volá) po kliknutí na tlačítko:

Příklad

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

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

  <button type="button" onclick="myFunction()">Try 
it</button>
 
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
 
</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Umístění skriptů ve spodní části prvku <body> zlepšuje zobrazení rychlost, protože interpretace skriptu zpomaluje zobrazení.

Externí JavaScript

Skripty lze také umístit do externích souborů:

Externí soubor: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Externí skripty jsou praktické, když je stejný kód použit na mnoha různých webových stránkách.

Soubory JavaScript mají příponu .js.

Chcete-li použít externí skript, zadejte název souboru skriptu do atributu src (zdroj) značku <script>:

Příklad

<script src="myScript.js"></script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Do <head> nebo <body> můžete umístit odkaz na externí skript, jak chcete.

Skript se bude chovat, jako by byl umístěn přesně tam, kde je umístěn tag <script>.

Externí skripty nemohou obsahovat značky <script>.

Výhody externího JavaScriptu

Umístění skriptů do externích souborů má některé výhody:

  • Odděluje HTML a kód

  • To usnadňuje čtení a údržbu HTML a JavaScriptu

  • Soubory JavaScriptu uložené v mezipaměti mohou urychlit načítání stránek

Chcete-li na jednu stránku přidat několik souborů skriptu, použijte několik značek skriptu:

Příklad

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Externí reference

Na externí skript lze odkazovat 3 různými způsoby:

  • S úplnou URL (úplná webová adresa)

  • S cestou k souboru (jako /js/)

  • Bez jakékoli cesty

Tento příklad používá úplnou adresu URL k odkazu na myScript.js:

Příklad

<script src="https://www.w3schools.com/js/myScript.js"></script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

Tento příklad používá cestu k souboru k propojení s myScript.js:

Příklad

<script src="/js/myScript.js"></script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="/js/myScript.js"></script>

</body>
</html>

Tento příklad nepoužívá žádnou cestu k propojení s myScript.js:

Příklad

<script src="myScript.js"></script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Více o cestách k souborům si můžete přečíst v kapitole HTML Cesty souborů.