JavaScript Hvor skal du hen

Indholdsfortegnelse

    Vis indholdsfortegnelse

<script>-tagget

I HTML er JavaScript-kode indsat mellem <script> og </script> tags.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

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

</body>
</html>

Gamle JavaScript-eksempler kan bruge en type-attribut: <script; type="text/javascript">.
Typeattributten er ikke påkrævet. JavaScript er standard scriptsprog i HTML.

JavaScript-funktioner og begivenheder

En JavaScript funktion er en blok af JavaScript-kode, som kan udføres, når "kaldes" til.

For eksempel kan en funktion kaldes, når en hændelse indtræffer, som når brugeren klikker på en knap.

Du vil lære meget mere om funktioner og begivenheder i senere kapitler.

JavaScript i <head> eller <body>

Du kan placere et vilkårligt antal scripts i et HTML-dokument.

Scripts kan placeres i , eller i sektionen på en HTML-side, eller i begge.

JavaScript i <head>

I dette eksempel er en JavaScript funktion placeret i sektionen <head> af en HTML-side.

Funktionen aktiveres (kaldes), når der klikkes på en knap:

Eksempel

<!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>

Prøv det selv →

<!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 i <body>

I dette eksempel er en JavaScript funktion placeret i sektionen på en HTML-side.

Funktionen aktiveres (kaldes), når der klikkes på en knap:

Eksempel

<!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>

Prøv det selv →

<!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>

Placering af scripts i bunden af <body>-elementet forbedrer visningen hastighed, fordi manuskriptfortolkning sænker visningen.

Ekstern JavaScript

Scripts kan også placeres i eksterne filer:

Ekstern fil: myScript.js

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

Eksterne scripts er praktiske, når den samme kode bruges på mange forskellige websider.

JavaScript-filer har filtypenavnet .js.

For at bruge et eksternt script skal du sætte navnet på scriptfilen i src (kilde) attributten for et </script> tag:

Eksempel

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

Prøv det selv →

<!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>

Du kan placere en ekstern scriptreference i ><head> eller , som du vil.

Scriptet vil opføre sig, som om det var placeret præcis der, hvor </script>-tagget er placeret.

Eksterne scripts kan ikke indeholde </script>-tags.

Eksterne JavaScript-fordele

At placere scripts i eksterne filer har nogle fordele:

  • Det adskiller HTML og kode

  • Det gør HTML og JavaScript nemmere at læse og vedligeholde

  • Cachelagrede JavaScript-filer kan fremskynde sideindlæsninger

For at tilføje flere script-filer til én side - brug flere script-tags:

Eksempel

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

Eksterne referencer

Et eksternt script kan refereres på 3 forskellige måder:

  • Med en fuld URL (en fuld webadresse)

  • Med en filsti (som /js/)

  • Uden nogen vej

Dette eksempel bruger en fuld URL til at linke til myScript.js:

Eksempel

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

Prøv det selv →

<!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>

Dette eksempel bruger en filsti til at linke til myScript.js:

Eksempel

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

Prøv det selv →

<!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>

Dette eksempel bruger ingen sti til at linke til myScript.js:

Eksempel

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

Prøv det selv →

<!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>

Du kan læse mere om filstier i kapitlet HTML Filstier.