JavaScript er som et Kinderæg – det har hele tre sider til sig. Den første side er almindeligt proceduralt programmeringssprog. Den anden er objektorienteret, og den tredje låner en del fra funktionsprogrammering. Vi vil i denne artikel kigge på disse tre aspekter i denne serie. Denne gang vil vi fokusere på JavaScripts baggrund, forudsætninger og de procedurale elementer.

Baggrunden

JavaScript så dagens lys første gang for snart 15 år siden i web-browseren Netscape Navigator. Idéen dengang var at give web-mastere en mulighed for at validere felter i en formular og andre mindre opgaver. Men siden da er JavaScript vokset, og især inden for de sidste 3-4 år har vi set, at en større del af en web-applikations kode bliver skrevet i JavaScript.

Nogle applikationer er gået så vidt, at JavaScript er blevet det bærende element. For eksempel er Google Docs en god illustration af, hvor at det er muligt at give brugeren en oplevelse af en lokal applikation, selv om der er tale om en web-applikationer.

Mozilla Firefox kalder det stadig JavaScript, mens Microsoft omtaler det som Jscript

Laboratoriet

Inden du kommer for godt i gang med JavaScript, skal du have et laboratorium klar. I det kan du udføre dine eksperimenter med JavaScript-kode. JavaScript er et fortolket sprog, og den lettere måde at få fingrene i en fortolker er at installere en web-browser. Hver browser har sin implementering af JavaScript, så der er nok at vælge imellem. I dag er alle browsere gratis at downloade og installere, men visse browsere virker kun under bestemte styresystemer.

Vælger du at installere Firefox, kan du bruge Firefox’ JavaScript-fortolker som dit laboratorium. Da det ikke rigtig er til at se, hvad der sker inden i fortolkeren, kan du med fordel installere udvidelsen »Firebug«. Det er en meget fin debugger, som ikke kun kan bruges til JavaScript men også til HTML og CSS. Bruger du Firefox/Firebug, bliver du nødt til at have en tom HTML-side, da Firebug ellers ikke kan virke. I infoboks »En tom HTML-side« finder du en enkel HTML-fil, som du kan bruge.

For at gøre dit laboratorium helt klar, skal du have en editor, hvor du kan skrive dine JavaScript-programmer. Bruger du Windows, kan du i princippet nøjes med Notepad, men du vil hurtig ønske dig en editor, som kan lidt mere.

Notepad++ er et open source program til Windows, som giver dig mange gode funktioner, når du programmerer. Under Linux findes der rigtig mange editorer, og de mest kendte er VI og Emacs. Ingen af de to editorer er så lette at komme i gang med – dog er de utrolig stærke. Bruger du GNOME er gedit værd at overveje, men Kate er et glimrende valg for KDE-brugere.

Variabler

JavaScript opererer med variabler som alle andre programmeringssprog. Du behøver ikke erklære variabler, men JavaScript-fortolkeren holder selv styr på dine variables typer. Og fortolkeren kan godt skifte type på variablen under udførelsen af programmet – et skift fra et tal til en streng er ikke ualmindeligt. I datalogien kaldet det for dynamiske typer.

Da du ikke kan se typen umiddelbart ved at skimme koden (du ved ikke på forhånd, hvordan kørslen af programmet vil være), omtales JavaScripts typesystem som duck typing. Dette sære navn stammer fra ideen om, at en fugl er en and, hvis den ligner en and og lyder som en and. Med andre ord; du kan kun bestemme typen af en variable på et givent tidspunkt ved at se på værdien af variablen.

Et variabelnavn skal begynde med et bogstav, og navnet kan indeholde både bogstaver, cifre og underscore (_). Vil du erklære en variabel, kan du gøre det vha. nøgleordet var. Der er forskel på store og små bogstaver.Der er typer i JavaScript, selv om de ikke optræder så direkte i kildeteksten til dine programmer.

Det er muligt at indtaste og udføre JavaScript-kode direkte i Firebug (højre side). Resultatet vises i konsollen til venstre.

Der er følgende typer: Tal, strenge, objekter og tabeller (arrays). I princippet er alle variable objekter, og du vil i et senere afsnit lære meget mere om objekter. Tal dækker over både heltal og kommatal, og der er egentlig ingen forskel. Et array kan have elementer af blandede typer og stadig virke ganske fint. I infoboksen »Variable« finder du en række små eksempler på variabler.

Funktionen console.log bruges til at skrive log-beskeder i Firebug.
Et array har egenskaben (property) length, som angiver antallet af elementer. Du kan få fat i elementerne med at bruge kantede parenteser ([]). Du kan se brugen i eksemplet i infoboksen »Løkker og forgreninger«.

Kontrolstrukturer

Eftersom JavaScript har rødder i de procedurale programmeringssprog som Pascal og C, finder du de »klassiske« kontrolstrukturer i Java-Script. Her tænkes på forgreninger og løkker. De minder meget om de kontrolstrukturer, du finder i andre programmeringssprog.

I infoboks »Løkker og forgreninger« finder du et par eksempler. Strukturen for ... in ... er lidt speciel, da den kan bruges til at bygge en løkke op omkring et array. Det er værd at bemærke, at det ikke er elementet, men indeks, som bruges som løkke-variabel.

Et par uheldige sider

Desværre har JavaScript nogle uheldige sider, og dem må du hellere lære at kende, inden du kommer for godt i gang med at programmere.

Virkefeltet for variabler er mildest talt bizar. Et virkefelt er det område i kildeteksten, hvor en variabel eller en funktion kan bruges. I mange programmeringssprog er virkefeltet blok-baseret, og i JavaScript skriver du blokke ved at sætte koden i krøllede parenteser ({}). Du bruger blokke ved forgreninger, løkker og funktioner.

Men virkefeltet i JavaScript er ikke blok-baseret. Eftersom du ikke behøver at erklære en variabel, er den synlig over det hele – altså en global variabel. Eneste blok, som kan begrænse virkefeltet for en variabel, er en funktion. Det er let at glemme at erklære en variabel, og det kan give helt uventede resultater. I infoboksen »Virkefelt« ser du et eksempel, hvor variablen y ikke er erklæret i funktionen udregn. Du får ingen fejl eller advarsel, og den globale variabel y ændres.

En anden uheldig side af JavaScript er sammenligningsoperatoren == (som du måske kender fra C, Java eller PHP). Den siger sand i nogle sjove sammenligninger. For eksempel er ’’ == ’0’ falsk, mens 0 == ’’ er sand og 0 == ’0’ er sand. Som du kan se, afhænger resultatet af hvilken side, værdier står. Brug hellere JavaScripts === operator.

Disse par eksempler viser, at det er meget let at begå fejl, når du skriver JavaScript-programmer. Du kan med fordel bruge værktøjet JSLint til at tjekke dine programmer (se infoboks »Få mere at vide«).

Næste gang

I næste afsnit i serien vil du komme til at lære mere om, hvordan objekter virker i JavaScript. Godt nok er JavaScript et objekt-orienteret sprog, men det adskiller sig væsentlig fra mange andre programmeringssprog som C++ og Java, idet JavaScript ikke benytter klasser. Det giver en række fordele – men også nogle udfordringer.

Eksempler

En tom HTML-side
<html>
<head>
<title>Tom fil</title>
</head>
<body>
</body>
</html>

Variable
var a, b, c;
var s, t, r;
var x, y, z;

a = 1;
b = 2;
c = a+b;

s = ’Alt’;
t = ‘DATA’;
r = s+’ om ‘+t; // sæt strenge sammen

x = []; // tomt array
x.push(r); // tilføj streng
x.push(c); // tilføj tal

console.log(c); // udskrive log-besked
console.log(r);
console.log(x);
console.log(x.toString());

Løkker og forgreninger
var a, i;

a = [’Alt’, ’om’, ’Data’];
for(i=0; i<a.length; i++) {
if (i%2 == 0) {
console.log(’--- ’+a[i]+’ ---’);
} else {
console.log(’>>> ’+a[i]+’ <<<’);
}
}

for (i in a) {
console.log(i+’:’+a[i]);
}

Virkefelt
function udregn(x) {
// y skal erklæres her med var y
y = 2;
for(i=0; i<x; i++) {
y = y+2;
}
return y;
}

y = 1;
z = udregn(2);
console.log(‘z = ‘+z);
console.log(’y = ’+y);