{ "year": "2026", "title": "Introduktion" }
The Java connection Det første spørgsmål man kunne stille omkring JavaScript, er hvad JavaScript har at gøre med Java; og det er også et spørgsmål der ofte er blevet stillet. Selvom nogle går så langt som til at sige, at der ikke er nogen sammenhæng, er svaret lidt mere nuaceret. JavaScript blev oprindelig lavet af Netscape tilbage i 1995, og blev kaldt LiveScript, da det var i beta. Det blev dog hurtigt ændret til JavaScript, under indtryk af, at Java netop var kommet frem, og man gerne ville "med på bølgen". Grundlæggende er navnet JavaScript derfor ret banalt — det blev valgt fordi det lød godt! Det minder lidt om en tid i 50'erne, hvor alting skulle hedde noget med "atomic" — for det lød vildt! Så JavaScript må være et atom-godt sprog! JavaScript er på mange måder et anderledes sprog end Java, men når det ikke er retvisende at sige, at der ikke er nogen sammenhæng, skyldes det at JavaScript sprogligt er inspireret af Java. Meget af syntaksen er den samme — f.eks. findes Math-biblioteket også i JavaScript. Til gengæld er JavaScript langt mere funktionelt orienteret, og dets syn på objektorientering er anderledes end det man finder i Java.
DOM Mens formålet med mange andre programmeringssprog er at lave applikationer der kører på en desktop, er formålet med JavaScript at lave client-side programmering i en web-browser. Det betyder at konteksten er en html-side, og opgaven der løses er manipulation af html, så siden kommer til at virke interaktiv og levende. Selvom man godt kan arbejde med html som tekst betragtet, er det normalt at man arbejder med den som et DOM-træ (DOM: Document Object Model), hvor man ændrer, indsætter og fjerner knuder i træet, for at opnå en dynamisk effekt.
  Inline JavaScript
En dårlig idé Man skal normalt ikke lave inline JavaScript, da det blander lagene (i.e. præsentation og proces). Men er det en mindre ting man vil lave, eller noget man vil teste eller demonstrere, kan man gøre det. Vores første eksempel vil derfor være med inline JavaScript.
  Inline JavaScript er, når man skriver JavaScript direkte ind i html'en:
  
            <!DOCTYPE html>
            <html lang="da">
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Eksempel med inline JavaScript</title>
            </head>
            
            <body>
              <p id="output">
                Her skal der stå noget.
              </p>
              <script>
                document.getElementById('output').textContent = 'Hello World!';
              </script>
            </body>
            </html>
          
            Hello World!
De enkelte ting Der er mange nye ting i ovenstående (specielt hvis man ikke kender så meget til html). Først er der <!DOCTYPE html>, der fortæller browseren, at der er tale om HTML 5. I header fortæller <meta charset="UTF-8">, at html-filen er encoded i UTF-8; hvilket er nyttigt for mange af de ting vi laver, da vi dermed kan bruge f.eks. æ, ø og å direkte i filen. Dermed slipper vi for at skulle bruge HTML Entities for disse bogstaver. Nede i body finder vi <script> ... </script>, der indeholder vores inline JavaScript. Scriptet bliver udført hvor det står, og derfor kan det ikke placeres før den paragraph vi har stående i body.
Erstatter indhold Når vores korte JavaScript program bliver udført sker der følgende. På document (der repræsenterer hele DOM-træet) kalder vi getElementById() med id "output" for paragraph-elementet (<p>...</p>). Dette giver os adgang til paragraph-elementet i vores program. På dette paragraph-element tilgår vi nu textContent, der repræsenterer tekstindholdet i paragraph-elementet. Dette indhold sætter vi til 'Hello World', hvilket erstatter det tidligere indhold 'Her skal stå noget.'. Dette bliver vist i browseren, men vi har her valgt at vise det som et output efter html-filens indhold.
  JavaScript i en file
  Som nævnt bør man ikke anvende inline JavaScript fordi det blander præsentation (html) med proces (JavaScript). Man bør i stedet placere JavaScript i en fil for sig, og referere til den fra html. Vi kan ændre eksemplet ovenfor til:
  
            function init() {
              document.getElementById('output').textContent = 'Hello World!';
            }
            
            init();
          
            <!DOCTYPE html>
            <html>
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Eksempel med JavaScript i fil</title>
              <script defer type="text/javascript" src="script.js"></script>
            </head>
            
            <body>
              <p id="output">
                Her skal stå noget.
              </p>
            </body>
            </html>
          
            Hello World!
Når DOM'en er klar Eftersom vi har placerer referencen til JavaScript-filen i header, har vi tilføjet defer, så vores JavaScript ikke bliver udført før efter DOM-træet er klar. Der er her lavet en funktion init() for at introducere muligheden for at lave funktioner, vi kunne i det konkrete eksempel nøjes med blot at skrive linien: "document.getElementById..." fra før, som den eneste i JavaScript-filen. init() bliver her en slags main(), som det kendes fra andre sprog. Bemærk, at navnet 'init' er et vi selv har valgt. I det hele taget er der mange ting, der kan laves på forskellig måder, men dette er kun en kort introduktion. Ting der kunne nævnes, men ikke forklares her, er at man ser script-tagget placeret sidst i body, for at det ikke bliver udført før DOM-træet er læst ind, eller at man bruger moduler (igen anført i header), som altid først bliver udført når DOM-træet er klar. Angivelsen af "type="text/javascript" er overflødig, fordi det er default for script-tagget. Disse og flere andre ting må vi lade ligge i denne omgang.
  "println"
DevTools med Console Det kan være udfordrende at debugge JavaScript, fordi det skal køres i en browser. Hvis et JavaScript program går ned, sker der normalt ingenting, det ophører blot med at gøre noget uden nogen form for fejlbesked! Derfor ønsker man nogen gange at kunne bruge System.out.println (Java) eller Console.WriteLine (C#). Selvom en browser ikke rigtig har noget sted at skrive sådanne beskeder, findes der alligevel en løsning. Alle moderne browsere har noget der ofte kaldes DevTools. Man åbner DevTools med F12 i browseren. De muligheder DevTools stiller til rådighed er meget omfattende. Panelerne Console og Network (disse kan, som alt andet i DevTools, hedde noget lidt andet afhængig af hvilken browser man bruger) finder jeg særlig interessante. I Console kan man se udskrifter fra JavaScript-programmer. Disse laves med:
  
            console.log('Hello World!');
          
            Hello World!
Kan udskrive objekter og arrays Vi har endnu ikke arbejdet med objekter og arrays, men console.log(), kan også udskrive disse. Console understøtter, at man kan inspicerer dem, ved at man kan "åbne" dem og se indholdet. Hvis der opstår fejl under udførslen af JavaScript vil der ofte optræde fejludskrifter i console. Så det er et vigtigt sted at tjekke, hvis noget ikke virker.
Netværks-kommunikation Under Network-panelet, kan man se al netværkskommunikation, som både browseren og JavaScript-programmet foretager. Her kan man også finde fejl og se detaljer om de forespørgsler, som er udført.