JavaScript Vart


Innehållsförteckning

    Visa innehållsförteckning


Taggen <script>

I HTML infogas JavaScript-kod mellan taggarna <script> och </script>.

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

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

</body>
</html> 

Gamla JavaScript-exempel kan använda ett typattribut: <script; type="text/javascript">.
Typattributet krävs inte. JavaScript är standardskriptspråket i HTML.


JavaScript-funktioner och evenemang

En JavaScript funktion är ett block av JavaScript-kod, som kan köras när "kallas".

Till exempel kan en funktion anropas när en händelse inträffar, som när användaren klickar på en knapp.

Du kommer att lära dig mycket mer om funktioner och händelser i senare kapitel.


JavaScript i <head> eller <body>

Du kan placera valfritt antal skript i ett HTML-dokument.

Skript kan placeras i , eller i avsnittet på en HTML-sida, eller i båda.


JavaScript i <head>

I det här exemplet placeras en JavaScript funktion i avsnittet <head> av en HTML-sida.

Funktionen anropas (anropas) när en knapp klickas:

Exempel

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

Prova själv →

<!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 det här exemplet placeras en JavaScript funktion i avsnittet <body> på en HTML-sida.

Funktionen anropas (anropas) när en knapp klickas:

Exempel

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

Prova själv →

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

Genom att placera skript längst ned på <body>-elementet förbättras visningen hastighet, eftersom manustolkning saktar ner visningen.


Extern JavaScript

Skript kan också placeras i externa filer:

Extern fil: myScript.js

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

Externa skript är praktiska när samma kod används på många olika webbsidor.

JavaScript-filer har filtillägget .js.

För att använda ett externt skript, lägg in namnet på skriptfilen i attributet src (källa) för en </script>-tagg:

Exempel

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

Prova själv →

<!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 placera en extern skriptreferens i eller som du vill.

Skriptet kommer att bete sig som om det fanns exakt där </script>-taggen finns.

Externa skript kan inte innehålla </script>-taggar.


Externa JavaScript-fördelar

Att placera skript i externa filer har några fördelar:

  • Det separerar HTML och kod

  • Det gör HTML och JavaScript lättare att läsa och underhålla

  • Cachade JavaScript-filer kan påskynda sidladdningar

För att lägga till flera skriptfiler på en sida - använd flera skripttaggar:

Exempel

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

Externa referenser

Ett externt skript kan refereras på tre olika sätt:

  • Med en fullständig URL (en fullständig webbadress)

  • Med en filsökväg (som /js/)

  • Utan någon väg

Det här exemplet använder en fullständig URL för att länka till myScript.js:

Exempel

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

Prova själv →

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

Det här exemplet använder en filsökväg för att länka till myScript.js:

Exempel

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

Prova själv →

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

Det här exemplet använder ingen sökväg för att länka till myScript.js:

Exempel

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

Prova själv →

<!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äsa mer om filsökvägar i kapitlet HTML Filvägar.