Script-elementet og noter i JavaScript

I det her blogindlæg skal vi have fingrene ned i JavaScript og tage de første skridt til at programmere: Det skal handle om script-elementet, som er det allerførste element, man bruger, når man skal skrive JavaScript-kode. Og så skal vi også se på, hvordan man kan skrive noter til sig selv inde i sin kode. Det gør det lettere at gå tilbage i gammel kode og lave rettelser. 

En god editor

Hvis du ikke allerede har downloadet en editor, så skal du gøre det nu. Du kan sagtens bruge din almindelige notepad, der allerede er installeret på din computer. Men der vil være mange fordele ved at downloade en mere avanceret version: En mere avanceret editor vil farvekode din kode, den vil auto-fuldføre dine elementer (som den intelligente ordbog på en mobiltelefon), og den vil markere dine fejl (som i et worddokument). Jeg bruger selv notepad++, der er gratis og let at bruge.

Her kan du se en fin liste over gode editors til JavaScript.

Byg din side op med HTML

I det sidste blogindlæg skrev jeg om, hvordan man kan se en hjemmeside som en lagkage bestående af HTML, CSS og JavaScript.

Jeg synes, at det billede er godt, fordi at browseren læser al kode kronologisk. Fra den ene ende til den anden – fra HTML, til CSS og til slut til JavaScript.

I billedet med lagkagen er HTML fundamentet. Uden HTML- ingen hjemmeside, for CSS og JavaScript kan ikke svæve frit i luften. Til gengæld kan man godt bygge en hjemmeside med HTML alene. Den bliver bare meget statisk og ret kedelig at se på.

Så altså – begynd med din HTML-kode. Det er den, vi skal have fat i, når vi skal skrive JavaScript.

Foto: Valeria Boltneva, Pexels

Script-elementet

Det element, som du skal skrive ind i din HTML-kode for at markere, at nu begynder du altså på JavaScript-kode, hedder script-elementet.

script-elementet skal du sætte ind i body-tagget i din HTML-kode. Det vil altså sige:

Her har vi et eksempel på noget HTML-kode:

script-elementet skal du sætte ind her:

script-elementet er en boks til dit JavaScript

script-elementet er den mappe eller boks, som du skal skrive al din JavaScript-kode ind i. Hvis din hjemmeside er af begrænset størrelse, så kan du bare skrive al din kode i et dokument i din editor.

Hvis din hjemmeside er lidt større med flere undersider, så kan det være en god idé at dele dine dokumenter op, så du har et HTML-dokument, et CSS-dokument og et JavaScript-dokument.

script-elementet på en mindre hjemmeside

Lad os først se på, hvordan det ser ud, hvis du laver en mindre hjemmeside, der består af en forside og et par undersider:

Først starter du med at angive, hvilken type script, du vil lave, og det gør du sådan her:

Og du afslutter hele dit script med:

 

Præcis som du ellers kender det fra HTML.

 

Et lille skridt videre

Hvis du ikke kan vente med at få din hjemmeside til at komme med et konkret output på din JavaScript, så kan du tilføje:

Husk altid at afslutte alle kommandoer med et semikolon.

Det vil altså sige, at din kommando samlet kommer til at lyde:

Gem din JavaScript i et separat dokument

Hvis din hjemmeside er lidt større, så vil det som sagt være en god idé at lave et separat dokument til din JavaScript-kode.

Det gør du ved at skrive al din JavaScript-kode i et dokument i din editor og gemme dokumentet som en .js-fil. For eksempel kan den hedde ”minjavascriptkode.js”.

Filen skal du gemme i samme mappe, som du har gemt din HTML-kode. Dit HTML-dokument er naturligvis gemt som en .html-fil.

Næste skridt er, at du skal have skabt en forbindelse mellem de to dokumenter. Det gør du ved at skrive følgende i din HTML-kode – inde i body-tagget:

Nu er dokumenterne forbundet – præcis som hvis de havde været et enkelt dokument.

Det betyder, at det fremover vil være meget lettere for dig at lave rettelser i din kode.
Der kan være nogle fordele ved at hente din JavaScript ind i header-tagget i stedet for body-tagget. Det afhænger af, hvordan din hjemmeside ser ud.

Skriv noter til dig selv

Et andet fif, som du lige skal have med her er, hvordan du kan skrive noter til dig selv i din kode.

Og hvad skal du så bruge det til? Du kan beskrive, hvorfor du har skrevet koden, som du har. Det kan være, at der er noget lidt kompliceret ved den. Og dine kommentarer kan hjælpe dig (eller en anden) til at huske på, hvorfor koden ser ud som den gør, så det vil være let at foretage rettelser i den.

Hvor meget må du så skrive i dine kommentarer? I princippet er der ikke nogen begrænsninger. Browseren læser lige forbi dem, så det er kun noget, der kan ses i backenden, altså i dit dokument i editoren.

En enkelt note

Hvis du kun vil skrive en enkelt note på én linje, så skal du bare skrive ”// ” før din note. For eksempel:

Du kan skrive din kode overalt i dit dokument. Uanset hvor den står, så vil browseren nemlig læse forbi den, hvis du husker at skrive de to streger før noten.

Flere linjers noter

Hvis du skal skrive en lidt længere note til dig selv om din kode, så skal du bruge et andet element, nemlig /*-elementet. For eksempel:

Som du kan se, skal du både sætte et begyndelses-tag på (/*) og et slut-tag (*/), så browseren ved, hvornår den skal reagere på din kode igen.

Derudover skal du også for hver linje skrive en *, så browseren ikke skal spilde sin tid med at læse linjer og komme med fejlmeddelelser om dem (fordi det jo er noter og ikke kode).

Næste afsnit

I næste blogindlæg om JavaScript skal vi se på et element, der hedder en variabel. En variabel er et element, som du har brug for at gentage flere gange i din JavaScript-kode.

Det er super smart, og man skriver stort set aldrig JavaScript-kode uden at bruge variabler.