JavaScript – en kort introduktion!
Efter at have læst en mindre vellykket artikel om JavaScript vil jeg her komme med mit korte bidrag omkring JavaScript til jer begyndere, som har lyst til at bruge denne (efter min mening) fremragende teknologi.
Jeg vil udelukkende beskæftige mig med principperne for JavaScript i denne introduktion.
Hvad angår syntaks så findes der masser af bøger. Desuden minder syntaksen utrolig meget om PHP, C, C++ og Java (ikke det samme som JavaScript) så hvis man har lidt kendskab til det skal det nok gå hurtigt!
Før du går igang med at lære JavaScript vil jeg foreslå, at du har styr på HTML (www.html.dk) ellers så lær det først!
Hvad er JavaScript?
JavaScript er et programmerings sprog som giver dig mulighed for, at gøre dine statiske HTML interaktive. Så du for eksempel får mulighed for at ændre i sidens indhold, baggrundsfarver og meget mere ved et input fra keyboardet, mus eller når siden lukkes eller loades.
Derudover har du også mulighed for at lave forskellige popup vinduer og alarmmeddelelser.
JavaScript er også meget andet, f.eks Object Orinteret. Dette har du ikke behov for viden om, før du har en idee om hvad du kan bruge JavaScript til!
Da dette kun er en introduktion vil jeg nævne, at dette kun er nogle af mulighederne der findes langt flere. Som jeg meget gerne vil uddybe i andre artikeler.
Hvordan fungerer JavaScript?
JavaScript er et stykke kode (script) man indskriver i en HTML-fil. Når HTML-filen så loades i en browser kan man ved hjælp af JavaScript sætte siden til f.eks. at give en ALERT-popup, når der bliver klikket på en bestemt knap (der kommer et eksempel længere nede).
Dette kaldes "handlingshåndteringer" – når der sker en bestemt handling skal denne håndteres på en bestemt måde.
Altså "Tryk på knappen" er handlingen. ALERT-popupen er håndteringen.
Hvad med et eksempel?
Godt så vil jeg forslå dig at du lige laver et Copy-Paste af det nedenstående, så skal du nok få en forklaring, når du har loadet en side i din browser med nedenstående kode!
<html>
<head>
<title>Handling og håndtering!</title>
</head>
<BODY onload="alert(’Din handling var at loade siden i din browser – Dette er håndteringen!’);">
<input type=button value="Tryk på mig!" onclick="alert(’Din handling var at trykke på knappen –
Dette er håndteringen!’);">
</body>
</html>
Når du læser dette skulle du have fået en ALERT-popup i din browser hvor der står "Din handling var at loade siden i din browser – Dette er håndteringen!" – denne tekst beskriver ganske godt hvad der er sket!
I BODY-taggetl står koden:
onload="alert(’Din handling var at loade siden i din browser – Dette er håndteringen!’);".
onload – er handlingen, at du har loadet. Hvad der kommer efter ligemedtegnet er håndteringen – hvad der sker.
alert() – er en defineret funktion i JavaScript-sproget, som genererer popupboksen samt den tekst som er skrevet imellem parantesen.
Hvis du så også trykker på knappen kommer samme ALERT-popup bare med teksten – "Din handling var at trykke på knappen – Dette er håndteringen!".
I INPUT-tagget for knappen står koden:
onclick="alert(’Din handling var at trykke på knappen – Dette er håndteringen!’);".
Onclick – er handlingen, at du har trykket på knappen – hvad der står efter ligmedtegnet er håndteringen!
Kort fortalt:
Når siden loades sker handlingen onload i body-tagget som kalder funktionen alert() der genererer popupboksen med teksten "Din handling var at loade siden i din browser – Dette er håndteringen!".
Når du trykker på knappen onclick sker handlingen onclik som kalder funktionen alert der genererer popupboksen med teksten " Din handling var at trykke på knappen – Dette er håndteringen!".
En handlingshåndtering behøves ikke bare skrives i et INPUT-tag eller et BODY-tag, men kan også skrives i andre tags som IMG (et billede) eller A-tag (links), næsten alle tags kan der skrives handlingshåndteringer i.
Handlingshåndteringer skal altid skrives på følgende måde i et tag:
<TAGNAVN <i>HANDLING</i>="<i>HÅNDTERING</i>"><br>
<TAGNAVN onclick="alert("Dette er håndteringen af handlingen "click"");">
Der findes også mange andre handlinger som:
onMouseover = når cursoren er over elementet handeleren er skrevet i.
onMouseout = når cursoren forlader et element handleren er skrevet i.
onDoubleclick = når der dobbeltklikkes på et element handleren er skrevet i.
Se også
http://developer.netscape.com/docs/manuals/js/client/jsref/handlers.htm for en komplet oversigt.
Du skulle forhåbentligt have forstået princippet i handlingshåndtering nu! Ellers vil jeg foreslå, at du læser det hele engang til!
Den popup er jo ikke særlig fed! Hvordan kan jeg lave noget fedt der ikke er det samme hver gang?
Gør det samme med nedenstående kode, som du lige har gjort en gang.
<html>
<head>
<title>Dit navn!</title>
</head>
<body onload="startup();">
<SCRIPT language=javascript>
function startup()
{
var ditnavn = prompt("Skriv dit navn:");
document.body.innerHTML = ditnavn;
}
</SCRIPT>
</body>
</html>
Når du loader denne side åbnes er dit browservindue helt tomt. Men der popper en brugerprompt op, hvor der står "Skriv dit navn". Det du skriver i denne promt bliver indholdet i browservinduet. Skriver du f.eks. "Dette er indholdet mellem og ", så kommer der til at stå "Dette er indholdet mellem og "," i vinduet.
Du kan faktisk også skrive html-tegn i prompten og derved ændre skrifttype og farve. Prøv at kopiere en anden sides indhold mellem og og sæt det ind i brugerprompten.
Hvordan virker DET så?
Igen sættes der en håndtering af onload i BODY-tagget, denne håndtering er funktionen startup() (denne funktionen er ikke defineret i JavaScript-sproget, men en jeg selv har lavet).
Imellem <script language=javascript> og </script>, står der "function startup()". Dette definerer funktionen startup. Med andre ord hvad der står imellem { og } efter startup() er hvad der skal ske når startup kaldes efter en handling (i dette tilfælde onload, men du kunne lige så godt have klikket på en knap, som kaldte funktionen ved onclick).
Den første linie i startup() er:
var ditnavn = prompt("Skriv dit navn:");
"var ditnavn" – Variablen ditnavn bliver oprettet.
"= prompt("Skriv dit navn:")" – Inputtet fra bruger promten tilskrives variablen ditnavn.
Linie nummer to:
"document.body.innerHTML = ditnavn" - ditnavn tilskrives indholdet i body-tagget.
document.body.innerHTML er en variabel som også er defineret i JavaScript-sproget den angiver indholdet mellem og (Kun brugbart på explorerbrowsere).
At ændre indholdet på et HTML-dokument bliver rigtigt sjovt, når man først har forstand på CSS. Der er rent faktisk uendelige muligheder for hvad du kan med dette.
Har jeg andre muligheder med JavaScript?
Selvfølgelig har du det! To andre meget brugt egenskab ved JavaScript er, at man kan gå ind og forhindre brugere i at overføre en formular før de har udfyldt bestemte felter (lidt mere advanceret kan du også sørge for at felter skal være udfyldt korret) eller åbne et nyt browservindue til at vise et link i.
Hvad har jeg så lært?
1. Hvordan man aktiverer et JavaScript, der er selvfølgelig mange flere mulighederne end at trykke på en knap eller loade en side.
2. At man kan ændre en hel sides indhold fuldstændigt! Det viste eksempel er kun en bizar løsning. JavaScript sproget er defineret med langt mere effektive og advancere funktioner til dette.
Udfra disse to korte eksempler håber jeg du kan se bare nogle af mulighederne i JavaScript, som sagt er det kun en kort introduktion og jeg har ingen intentioner om, at lære jer sproget komplet. Blot vise nogle enkelte af mulighederne og give jer en grundlæggende forståelse af brugen af JavaScript.
Hvis man skulle have lyst til at lære mere JavaScript vil jeg anbefale at finde en bog om JavaScript som er uptodate, læse den og lære af eksemplerne.
To gode link til at lære mere er:
http://developer.netscape.com/docs/manuals/javascript.html
(komplet dokumentation af javascript mm.)
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties.asp#om40_prop
(lidt mere specifikt til IE Explorer)