|
Indholdsfortegnelse |
|
Indledning til tutorial .:Top:.
Velkommen til JavaScript-tutoriallen. Det kan anbefales at starte med HTML-tutoriallen, hvis du ikke har kendskab til HTML.
Er du træt af bare at kopiere andres javascripts uden mulighed for at tilrette dem? Eller er du bare nysgerrig for at finde ud af hvad JavaScript er, så er du kommet til det rigtige sted.
For at højne indlæringen er der mulighed for at afprøve JavaScriptet 'on-the-fly'. Tryk på knappen øverst for at starte et test vindue. Test vinduet sparer dig for at åbne et tekstdokument, skrive din kode, gemme dokumentet som en html-fil og åbne den i en browser.
For at få noget ud af tutoriallen er det vigtigt, at du selv prøver dig frem ved f.eks. at ændre i eksemplerne.
God fornøjelse :-)
Kort om JavaScript .:Top:.
JavaScript er et scripting sprog, der afvikles på klienten, d.v.s. scriptet bliver (ligesom HTML) sendt til surferens browser, og bliver først oversat dér.
JavaScript kan benyttes til mange ting og denne tutorial er kun tænkt som en kort introduktion.
Et eksempel .:Top:.
Inden jeg får sagt alt for meget forvirrende, er det måske en god idé med et eksempel. Tutoriallen er bygget op præcist som HTML-tutoriallen, d.v.s. der er ikke gjort noget specielt fordi vi skal til at i gang med JavaScript. Det er stadig et ganske almindeligt HTML-dokument.
For at fortælle browseren, at den skal til at håndtere et JavaScript skriver vi:
<SCRIPT Language="javascript">
//og når vi er færdige med at scripte:
</SCRIPT>
Prøv at indsætte:
<SCRIPT language="javascript">
alert("Wheee... Mit første JavaScript");
</SCRIPT>
alert() er en funktion, der skriver til skærmen. Prøv selv at rette den tekst der står i parantesen. (Bemærk: det startende- og det sluttende " skal blive der).
Lad os nu udvide eksemplet og lave en variabel før vi skriver til skærmen. En variabel er en slags opbevaringsplads.
Og i dette tilfælde opbevarer vi noget teksten 'Wheee... Min første variabel'.
<SCRIPT language="javascript">
var tekst = "Wheee... Min første variabel";
alert(tekst);
</SCRIPT>
(Bemærk at apostrofferne er flyttet fra alert op til variablen. Det er fordi " " benyttes til at fortælle at man skriver tekst, eller en streng som det kaldes i programmeringssprog.)
Nu vil vi prøve at lade brugeren selv indtaste den tekst der skal stå i alert-boksen. Dette gør vi med funktionen prompt()
<SCRIPT language="javascript">
var tekst = prompt("Skriv en streng");
alert(tekst);
</SCRIPT>
Det der sker er, at funktionen prompt siger til brugeren 'Skriv en streng', når brugeren har skrevet en streng kommes denne i variablen tekst, der udskrives med alert.
Variable .:Top:.
Vi har kort været inde på variable i ovenstående eksempel, men da variable er enormt vigtige at forstå, kommer her lidt mere forklaring.
En variabel er som nævnt opbevarings plads for ting man vil gemme. Det kan være en fordel at tænke lidt abstrakt på variable som kasser i computerens hukommelse.
I ovenstående eksempel brugte vi en variabel til at gemme tekst-strenge. Men variable er ikke begrænsede til blot at indeholde tekst. Man kan også gemme heltal, kommatal og meget mere.
Lad os prøve at lave et simpelt eksempel:
<SCRIPT language="javascript">
var talNr1 = 15.5;
var talNr2 = 20;
alert(talNr1 + talNr2);
</SCRIPT>
Som det ses har vi v.h.a. JavaScriptet lagt de to tal sammen. Man kan også trække fra (-), dividere (/), gange (*) og meget mere.
Det er ikke kun tal vi kan lægge sammen. Tekststrenge kan også lægges sammen. F.eks.:
<SCRIPT language="javascript">
var fornavn = "Hans";
var efternavn = "Hansen";
alert(fornavn + efternavn);
</SCRIPT>
vil vi have mellemrum mellem fornavn og efternavn, skal vi bare indsætte et:
alert(fornavn +" "+ efternavn);
Arrays .:Top:.
Arrays er en speciel form for variabel. Arrayes er nemlig en række af variable samlet i én.
Hvis vi foreksempel vil gemme en række af data om en person, kan det være en fordel at gemme alle data i én variabel. Til det kan vi bruge et array. Et eksempel:
<SCRIPT language="javascript">
var personarray = Array("Peter","Aude","peter@aude.dk","www.aude.dk");
document.write(personarray[3]);
</SCRIPT>
I stedet for at benytte funktionen alert() har jeg her valgt at skrive ud direkte til skærmen. Det gøres med funktionen document.write();
I dette tilfælde har vi 4 variable i arrayet. Måden den enkelte variabel tilgåes er ved at skrive variabelnavn[variabelnummer]
Bemærk at første plads i arrayet har nummer 0. D.v.s. vil vi hente teksten 'peter' ud gøres det med personarray[0].
Cookies .:Top:.
Cookies er variable man gemmer på surferens pc. Det er små ufarlige tekst-strenge, man kan benytte til flere ting.
F.eks. kan man udvide vores første eksempel, hvor brugeren indtastede sit navn, til at gemme navnet så brugeren ikke behøver indtaste det næste gang denne kommer til siden.
Man kan gemme antallet af gange brugeren har besøgt siden og meget mere.
Funktioner .:Top:.
En funktion er en måde hvor man kan samle en stump kode. Har man lavet nogle linier kode, som man ved at man skal bruge igen, kan det være en god idé at lave en funktion.
Vi har tidligere set på flere funktioner, bl.a. alert(), prompt() og document.write(), som alle er funktioner JavaScript tilbyder. Vi vil nu se på hvordan man kan lave sine egne funktioner.
I dette eksempel vil vi lave en funktion, der kan udregne arealet af en kasse. Den matematiske formel er bredde gange højde, og dette vil vi benytte i funktionen.
<SCRIPT language="javascript">
function beregnAreal(hoejde, bredde) {
var areal = hoejde * bredde;
alert("Arealet af kassen (" + hoejde + " * " + bredde +") er: " + areal);
}
//vi har nu lavet funktionen og nu skal den så 'kaldes'. Dvs. den skal tages i brug.
beregnAreal(20,20);
//Og den kan bruges igen, uden at vi behøver lave koderne igen:
beregnAreal(10,12);
</SCRIPT>
Bemærk: // i et script bruges til at skrive kommentarer om koden. Alt hvad der står efter // bliver ignoreret når browseren oversætter koden. Det er altid en god idé at kommentere sin kode, da det gør den mere overskuelig.
Her er en lille gennemgang af hvad der skal til for at lave en funktion:
function fortæller at vi vil lave en funktion. beregnAreal er det navn vi har valgt at give funktionen. Derefter kommer en parantes, hvor vi skriver navnene på de variable vi vil have ind i funktionen. Skal den ikke have variable ind skal parantesen være tom. Navnene på variablene er også navne vi beslutter, og er det vi kalder vores variable i funktionen. Efter parantesen er funktionen's scope omkrænset af { og }. Dvs. alt mellem { og } er det funktionen gør.
Herefter skal funktionen bare kaldes. I vores tilfælde med 2 variable.
beregnAreal(1,5);
Løkker .:Top:.
Løkker er gentagelser af kode x antal gange.
I dette eksempel vil jeg vise og forklare en for-løkke.
<SCRIPT language="javascript">
for (i = 1; i <= 10; i++){
document.write("<br>Dette er gennemgang nr: " + i);
}
</SCRIPT>
Forklaring:
