JavaScript
Hvad er Javascript?
JavaScript er det mest populære scriptingsprog på internettet, og det bruges til at tilføre interaktivitet på dine websider. JavaScript er et klient-baseret sprog: det afvikles i browseren hos klienten uden nogen udveksling med serveren.
JavaScript har ikke noget at gøre med Java, som er et andet, større programmeringssprog. For at skrive JavaScript har du blot brug for en teksteditor, ligesom med HTML.
Hvad kan du med JavaScript?
Med Javascript kan du tilføre inteaktivitet, som du ikke kan med HTML. Et eksempel fra forsiden er datoen, som automatisk opdateres, når du besøger siden:
Dette er skrevet ind i HTML siden med følgende kode:
<script type="text/javascript">
Stamp = new Date();
document.write((Stamp.getDate() + 0) +"/"+(Stamp.getMonth()+ 1) +"/"+Stamp.getFullYear());
</script>
Du kan også få JavaScript til at reagere på begivenheder, f.eks. en knap, som lyser op, når du bevæger musen henover den. På kontaktformularen under ’Kontakt’ er JavaScript anvendt til at validere data før de sendes videre. Nogle anvender JavaScript til at lave ’cookies’, som er små filer der indeholder oplysninger om de besøgendes computere.
Quiz - eksempel på JavaScript
Denne lille quiz med 3 spørgsmål er et eksempel på den interaktivitet, som du kan tilføre dine HTML-dokumenter med JavaScript. For at se kildekoden, kan du højreklikke og vælge 'vis kilde' (i firefox: 'vis sidens kildekode').
Hvor placeres JavaScript?
Javascript kan sættes ind i HTML-koden, enten i <head> eller <body> delen, eller i begge sektioner. For at tilføre dit HTML-dokument JavaScript, skal du starte med <script type="text/ javascript"> og slutte med </script>. Alt mellem <script> og </script> vil browseren behandle som JavaScript. Du kan indsætte ligeså mange scripts i <head> og <body> sektionen, som du vil.
JavaScript kan også laves i en selvstændig .js-fil og linkes til i dit HTML-dokument. Du skriver blot <script src="filnavn.js"></script> i stedet for din normale JavaScript, og det kan både gøres i <head> og <body> sektionen. Dit eksterne .js-script må ikke indeholde et <script> tag.
Javascript Huskeliste
Dette er et eksempel på en huskeliste, som er lavet med JavaScript. Oplysningerne gemmes i cookies på din computer, dvs. hvis du senere går tilbage til denne side, vil huskelisten stadig være intakt indtil dine cookies slettes.
Jeg har fundet koden på The JavaScript Source, hvor du kan finde mange JavaScript ressourcer og tilpasse til din egen side. Eksempelvis kan koden let tilpasses med danske ord, style, osv.
Huskeliste
>>Tilføj notat!
JavaScript Lommeregner
Dette er et eksempel på en simpel lommeregner, som er lavet med JavaScript. Jeg har fundet koden på The JavaScript Source.
Basal javascript programmering
Javascript kommandoer kaldes for statements. JavaScript kode består af en række statements. F.eks. vil statementet document.write("<b>Hej</b>") skrive 'Hej' med fed i browserens vindue.
<html>
<body>
<script type="text/javascript"> document.write("Hej"); </script>
</body>
</html>
>>Klik her for at skrive JavaScript og se resultatet.
JavaScript er i modsætning til HTML Case Sensitiv, derfor skal du være opmærksom på store og små bogstaver.
Javascript kommentarer skrives: //kommentar:
Hvis du vil skrive flere linier kommentarer: /*kommentar*/
Variable
Variable er containere til at gemme informationer og anvendes i alle programmerings- og scriptingssprog. F.eks. kan du tilføje variablen x og given den værdien 1 ved at skrive: var x=1; eller bare x=1;
Det samme med at oprette en tekst-variabel:
var navn="Marianne"; eller blot navn="Marianne";
Et Array bruges til at gemme flere variabler, lidt ligesom en shoppingliste. F.eks. anvendes et Array til at gemme de rigtige svar i quizzen på denne side:
var rigtigeSvar=new Array("c","b","c");
Løkker
For-løkker bruges til at køre igennem den samme kode et vis antal gange. Du kunne selvfølgelig vælge at gentage den samme kode mange gange, men det ville være besværligt og ikke blive betragtet som god kode-skik. Se følgende kode:
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++) {
document.write(i);
document.write("<br />");
}
</script>
Der defineres en variabel i. For-løkken sørger først for at værdien starter med 0 (i=0), derefter at koden skal gentages sålænge i<=10, og for hver gang, koden gentages, skal der lægges 1 til i (i++). Alt det som står mellem { og } gentages, i dette tilfælde at værdien i bliver skrevet ud på en ny linie, da <br/> betyder linieskift.
Betingelser
If…else-betingelser sørger for at at noget skal ske, hvis der er en bestemt betingelse opfyldt. Ellers skal der ske noget andet, og måske noget tredje, osv.. Se følgende kode:
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 9) {
document.write("God morgen!");
}
else if (time<18) {
document.write("<b>God dag</b>");
}
else {
document.write("God aften!");
}
</script>
Først defineres en variabel ’d' som skal være af typen Date, dvs. den dato og det tidspunkt vi har lige nu. Så defineres endnu en variabel ’time’, som er det aktuelle timetal i variablen ’d’. Hvis timetallet er mindre end 9, skal browseren skrive God morgen. Ellers går turen videre til næste betingelse: hvis tiden er mindre end 18, skal browseren skrive ’God aften’. Hvis denne betingelse heller ikke er opfyldt, skal browseren skrive ’God aften’.
Funktioner og events
Funktioner er genbrugelig kode, som kan kaldes, hvornår man vil. Funktionen vil ikke blive kørt, når siden indlæses, men de kan kaldes i koden ved at skrive funktionens navn. De kan også kaldes af en Event. En event kan f.eks. være et museklik, en tastaturknap, en siden som indlæses, osv. Betragt følgende kode:
<head>
<script type="text/javascript">
function displaymessage() {
alert("Hej!");
}
</script>
</head>
<body>
<form> <input type="button" value="Klik her!" onclick="displaymessage()" > </form>
</body>
Når du klikker på knappen med teksten ’Klik her!’ (event) , så kaldes funktionen ’displaymessage’, som skriver ’Hej’ i en dialogboks.