JavaScript i webbsidan

Nu tittar vi på hur man inkluderar JavaScript-kod i webbsidan.

Säg “Hello world!”

Vi har redan förberett webbsidan för att den skall inkludera javascript, det är följande html-kod som gör det.

  <script type="module" src="js/hello.js"></script>
</body>
</html>

Inuti filen js/hello.js kan vi nu lägga till följande kod.

/**
 * A short script saying hello.
 */
console.log("Hello world!")

Du kan nu öppna devtools flik Console (och ladda om sidan) för att se att texten skrivs ut.

Image description — Bild: Meddelandet skrivs ut i webbläsarens devtools console.

I devtools console kan man debugga och skriva ut information från sitt javascript. Det kan hjälpa dig att felsöka och utveckla din kod.

Uppdatera webbsidans innehåll med js

En sak du kan göra med javascript är att uppdatera sidans innehåll på ett dynamiskt sätt. Låt oss ta ett enkelt exempel.

I filen js/hello.js lägger vi till följande kod.

/**
 * Add the current year in the websites footer.
 */
const footer = document.querySelector('.footer-bottom')
const currentYear = new Date().getFullYear();
footer.textContent += ' ' + currentYear

Det som koden gör är att hämta en referens till html-elementet som har en klass footer-bottom och lägger till nuvarande år till dess innehåll.

Du ser hur webbsidans innehåll uppdateras dynamiskt med hjälp av javascript.