{ "year": "2014", "title": "Introduktion" }
The Java connection Det første spørgsmål man kunne stille sig 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 at sige, at der ikke er nogen sammenhæng overhovedet, er svaret 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 at 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 også sprogligt er inspireret af Java. Meget af syntaksen er den samme, og f.eks. findes Math-biblioteket også i JavaScript. Til gengæld er JavaScript langt mere funktionelt orienteret, og dets syn på objektorientering er temlig 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 at manipulere html'en så siden kommer til at virke interaktiv og levende. Selvom man godt kan arbejde med html'en 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.
jQuery JavaScript er efterhånden et halvgammelt sprog, og det er ikke alle ting der er lavet lige hensigtsmæssigt. En af de ting der halter mest er hvor bekvemt det er at lave den kode der manipulerer DOM'en. Det er ganske enkelt besværligt! Det har også gjort, at der i tidens løb er fremkommet diverse frameworks til JavaScript, som gør det enklere at lave forskellige ting. Blandt disse fremstår frameworket jQuery som den helt store spiller, og man bliver overrasket over hvor udbredt det er. Det er svært at få et helt præcist overblik over, hvor stor en del af alle hjemmesider der anvender JavaScript, som også anvender jQuery, men man overdriver nok ikke ved at sige at det er halvdelen! Og måske nærmer det sig mere to-tredie-dele af alle hjemmesider (men her er der måske tale om en overdrivelse). Hvor om alting er, så er hjemmesider, der ikke anvender et framework, der lapper på det grundlæggende JavaScript's mangler, i klart mindretal. Jeg vil derfor ikke anbefale, at man seriøst arbejder med sproget, uden et framework (jeg bruger selv jQuery), med mindre man har planer om at ville hade sproget! Det betyder, at det på de følgende sider om JavaScript antages, at der med JavaScript reelt menes "JavaScript med jQuery".
  Inden vi fortsætter, skal det nævnes at de følgende sider om JavaScript ikke er tænkt som en udtømmende gennemgang af hverken JavaScript eller jQuery, men i første række er en gennemgang af forskellige emner der har særlig interesse. Det antages derfor at man har et vist kendskab til JavaScript og jQuery, så man er i stand til at forstå hvad der foregår.
  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 noget småt man vil lave, og måske mest for at prøve det af, kan man godt 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>
            <head>
              <meta charset="UTF-8">
              <title>Inline testside</title>
              <script type="text/javascript" src="jquery.min.js"></script>
            </head>
            
            <body>
              <p id="output">
                Her skal stå noget.
              </p>
              <script>
                $('#output').text('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'en fortæller <meta charset="UTF-8">, at html-filen er 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. I header'en finder vi også <script ...> ... </script>, der inkluderer JavaScript-filen med jQuery. Uden den vil vores brug af jQuery senere i filen ikke fungere. 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 lille JavaScript program bliver udført sker der følgende. Vha. jQuery udvælger vi det element der har id 'output' (i.e. vores paragraph), og sætter dets tekst indhold til 'Hello World!', hvilket erstatter det tidligere indhold 'Her skal stå noget.'.
  JavaScript i en file
  Som nævnt bør man ikke anvende inline JavaScript fordi det sammenblander præsentationen (html'en) og processen (JavaScript'en). Man bør i stedet placere JavaScript'en i en file for sig selv, og referere til den i html'en — sådan som vi faktisk allerede har set det med 'jquery.min.js'. Vi kan ændre eksemplet ovenfor til:
  
            function main() {
              $('#output').text('Hello World!');
            }
            
            $(main);
          
            <!DOCTYPE html>
            <html>
            <head>
              <meta charset="UTF-8">
              <title>Inline testside</title>
              <script type="text/javascript" src="jquery.min.js"></script>
              <script type="text/javascript" src="hello_world.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'en, har vi ændret lidt i JavaScript'en, for at den ikke bliver udført før DOM-træet er konstruret i browseren. Det sker ved at vi i sidste linie har tilmeldt funktionen main som eventhandler på at DOM'en er klar. Bemærk at navnet 'main' er et vi selv har valgt.
Not included Vi har allerede set script-tagget brugt til at inkludere jQuery, og her bruger vi det også til at inkluderer vores egen JavaScript-file. Som vi så i inline-eksemplet ovefor, er det ikke nødvendigt at anføre type-attributten, da JavaScript er default, men man ser det ofte, og diverse værktøjer har det med at indsætte det automatisk. Hvis man har mange html-sider (e.g. docjava.dk etc.) er brugen af disse (mange) script-tags besværlig, eftersom de skal indsættes og vedligeholdes på mange sider. Men der findes ikke i html mulighed for at inkludere html-fragmenter, hvilket ville gøre det nemmere at ændre det hele ét sted. Et godt eksempel på ulempen ved redundans. JavaScript-filer har heller ikke nogen muligheder for at inkludere andre JavaScript-filer, så det er et gennemgående svagt punkt, når man arbejder med web-programmering.
  "println"
Firebug, DevTools Det kan være udfordrende at debugge JavaScript, fordi det skal køres i en browser. 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 mulig løsning. Anvender man Firefox kan man installere Firebug (latest: det behøver man ikke, man kan bare trykker ctrl+shift+K for at åbne Firefox' egen konsol), der har en indbygget konsol. På Chrome er der indbygget noget der hedder DevTools, som også har en konsol, og der findes tilsvarende muligheder for andre browsere.
  Man anvender i alle tilfælde konsollen ved at skrive:
  
            console.log('Hello World!');
          
            Hello World!
Kan udskrive objekter Vi har endnu ikke arbejdet med objekter, men console.log, kan også udskrive disse. Konsollerne understøtter i varienerende grad at man kan inspicerer dem. console har (mange) andre funktioner, men det varierer alt efter hvilken browser man bruger (f.eks. har Firebug over 20 funktioner).
screen grabs I de eksempler der optræder på disse sider, vil konsollen nogle gange blive vist med screen grabs, mens den ofte kun vil blive vist som tekst. Det skyldes, at det er en større arbejdesbyrde at lave screen grabs, og de samtidig er vanskelige at vedligeholde, da man ikke kan rette i dem — man er nød til at "tage det hele om", hvis man ændrer noget.