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.

Validering med linter

När du är klar kan du köra din linter som kontrollerar om det finns något “skräp” eller oönskad kodstruktur i dina js-filer.

Gå till terminalen och stå i rooten av ditt katalogen där ditt git-repo ligger. För min del är sökvägen dbwebb-kurser/webtec-mosstud.

$ pwd
/home/mos/dbwebb-kurser/webtec-mosstud

$ npx eslint

Om du inte får någon utskrift från npx eslint så är allt okey. Om lintern upptäcker något fel så försöker du gå in och rättar det. Lita på att lintern har rätt. Kan du inte rätta det så ber du om hjälp.

Om du vill veta mer om eslint och dess regler så finns det dokumentation om varje regel.

Som tur är finns det också ett sätt att låta eslint försöka rätta felet, ibland går det bra. Nästa gång detta händer kan du prova att låta eslint rätta felen med följande kommando.

npx eslint --fix

När du gör din inlämning så får det inte finnas några fel när lintern kör.