Dynamiske hjemmesider med Javascript

Tags:    javascript
<< < 123 > >>
Skrevet af Bruger #4575 @ 10.01.2005

Indledning



Inden jeg begynder på selve artiklen vil jeg godt lige fortælle dig, hvad du kan forvente at lære, hvis du har i sinde at læse denne artikel. Artiklen er rettet mod både nybegyndere og lettere øvede, men starter med at vise de mest basale ting omkring javascript. Senere vil jeg give et indblik i hvordan du kan gøre din side mere dynamisk ved at gøre brug af javascript til f.eks. at lave "short cuts", så brugeren kan trykke på fx. alt+a, hvorefter der vil ske det ene eller det andet.
Udover dette vil du, når du har læst denne artikkel, forhåbentligt også være i stand til selv at udvikle nye funktioner til din side, så du kan lave den så dynamisk som muligt!
Hvis du er fuldstændig nybegynder inden for javascript kan dette også være en god artikel at starte på, da jeg forsøger at give en grundig gennemgang af de basale ting i javascript, inden jeg går videre med det mere avancerede.

NB! Jeg gør udfra, at du allerede nu har kendskab til (X)HTML og CSS, da jeg senere i artiklen vil komme ind på brugen af dette sammen med javascript. Har du ingen kendskab til disse 2 sprog vil jeg råde dig til, at læse nogle artikler på dette emne samt lave et par simple sider selv, inden du tager fat på denne artikkel.

I gang med javascript!



Hvis du allerede kender de basale ting i javascript, som brugen af if-sætninger, løkker og variabler vil jeg råde dig til at springe dette afsnit over.

Når man skriver javascript skal det stå mellem 2 script tags, da browseren ellers bare ville skrive indholdet af javascriptet på skærmen :)
Et javascript uden nogen kode ser sådan ud:

Fold kodeboks ind/udKode 


Som jeg lige har fortalt så angiver <script></script> tags'ne, at vi vil skrive et "clientside script", altså et script, som bliver afviklet på klients computer. Et eksempel på et serverside sprog kunne være PHP, da det er serveren, som oversætter PHP koden til (X)HTML inden klienten (os) modtager den.
type attributen angiver hvilket sprog vi vil skrive i, i vores tilfælde javascript, som bliver defineret ved text/javascript. Man kunne også bruge f.eks. language="Javascript1.1", men hvis du ønsker at dine sider skal kunne validere efter de nye XHTML standarder skal du altid benytte type attributen.
Desuden skal det lige siges, at selve javascriptet som regel skal stå i headeren, altså mellem <head></head> tags'ne, da det ellers bliver forvirende at se på, hvis HTML'en og javascripts'ne er blevet blandede sammen.
Endelig skal du også huske <!-- og // --> lige får hhv. efter script start og slut, da der ellers kan opstå problemer med valideringen af din (X)HTML, hvilket vi jo ikke er interesserede i :)

Lige et hurtigt eksempel på en XHTML fil, med et javascript inde i headeren:
Fold kodeboks ind/udKode 


Nå. Så er det vidst tid til at komme videre med noget "rigtigt" javascript. Først vil jeg vise jer hvordan document.write, alert og et par af window værdierne virker. Lad os starte med et eksempel, hvor vi opretter nogle variabeler og skriver dem på skærmen.

Fold kodeboks ind/udKode 


Som i kan se skal man altid afslutte en linie i javascript med ";" tegnet, med mindre man definerer en funktion, bruger en løkke eller andet i den stil, men det kommer vi ind på om lidt. Desuden kan i nok se, at man kan kommentere sine scripts ligesom i C/C++, ved at skrive // KOMMENTAR, og det kan være ret effektivt i større javascripts, da det ellers kan bliver svært at holde styr på sine scripts.
Nå, men videre til det, som eksemplet egentligt skulle omhandle - Oprettelse af variabler. Når vi opretter en variabel bruger vi følgende syntax [var] {variabel navn} [= {værdi}].
Inden jeg forklarer videre vil jeg lige give en gennemgang af hvordan jeg skriver syntaksen for ting op: ting inden for tuborg paranteserne ({}) skal læses som noget, som i selv angiver. Når der står [] omkring noget så er det fordi, at det er valgfrit at benytte disse ting ifølge funktionens syntaks, og endelig skal fri tekst altid stå, som jeg har skrevet det op.
Som i så kan se skriver vi altså var efterfulgt af variablens navn. Herefter kan vi så vælge, om vi med det samme vil tildele en værdi til variablen, eller om vi vil lade den være "tom" - Vi vælger at sætte i og s til nogle specifikke værdier.
Dog skal i være opmærksomme på brugen af var, da dette definerer globale variabler - Altså variabler, som kan bruges af alle funktioner, som man selv har oprettet, men det kommer vi ind på senere. Der er altså ingen grund til at bruge var foran en variabel, hvis den kun skal benyttes i en enkelt funktion, da den så bliver fjernet fra hukommelsen igen efter funktionen er færdig.

Syntaksen for document.write er document.write({værdi}). Vores eksempel er ikke den simpleste udgave af document.write, da vi også benytter os af +, hvilket angiver at vi vil udskrive noget nyt. F.eks. kan du ikke bare skifte mellem at skrive tekst direkte i funktionen og udskrive variabler, da der bruges gåseøjne ("") omkring tekst, som man skriver direkte inde i funktionen, og når man skal udskrive en variabel benytter man sig blot af navnet uden noget omrking.
For at kunne skifte mellem at skrive fri tekst og variabler ud bliver man så nødt til at bruge +, da den, hvis vi bare skrev document.write("Værdien af s er: " s " - Værdien af i er: " i); ville give en syntaks fejl. Men som i kan se, så er det let ordnet med brugen af + tegnet, som fortæller, at vi vil tilføje en ekstra ting.
+ tegnet kan også bruges i oprettelsen af variabler på følgende 2 forskellige måder:

Fold kodeboks ind/udKode 


Som i kan se, så fungerer plus'et altså forskelligt alt efter, om vi laver matematiske beregninger i en integer (et tal) eller tilføjer værdier i en streng.

Nu er det vidst på tide at lære noget omkring brugen af loop's. Der er 2 vigtige loops, som jeg vil beskrive: While og for loops'ne. De er begge to brugbare i forskellige situationer, men det kommer jeg ind på om lidt.
Først starter vi lige på et eksempel af brugen af for-loop'et. Vi vil her udskrive tallene fra 1 til 10 via javascript:

Fold kodeboks ind/udKode 


På første linie laver vi et for loop. Syntaksen for et for loop oversat til dansk vil minde om "for({start betingelse}; {slut betingelse}; {gentagelses regel})".
Start betingelsen kan være en hvilken som helst varaibel - Både en, som er oprettet i forvejen samt en, som man laver inde i for-loopet. I vores tilfælde vælger vi at oprette en nye variabel, som hedder i med værdien 1.
Slut betingelsen bestemmer hvilket betingelser, som skal være opfyldt før loop'et stopper. I vores tilfælde vælger vi at sige, at så længe i er mindre end (<;) eller lig med (=) 10, så skal vi fortsætte loopet. Vi kunne også have valgt at sammenligne i med en variabel, hvis vi f.eks. havde oprettet b = 10; kunne vi også have brugt den.
Endelig har vi gentagelses reglen, som definerer en handling, som skal gentages hver gang loop'et er blevet udført. Vi har valgt at bruge i++, som betyder increment i (læg 1 til i), men hvis vi ville udskrive hver 2. tal kunne vi også have brugt i += 2 (læg 2 til i). Også her kunne man have gjort brug af en anden variabel, hvis man har behov for det.

Tuborg paranteserne ({}) angiver hvilke handlinger, som skal udføres i loopet. I vores tilfælde er det bare document.write, så vi har ikke andet stående :)

Inden jeg går videre vil jeg lige give en liste over sammenlignings operatorerne:
Fold kodeboks ind/udKode 


Endelig vil jeg lige komme med et eksempel på et for-loop, hvor jeg også udfører nogle handlinger uden for loop'et, samt gør brug af variabler til at sammenligne og opdatere i:

Fold kodeboks ind/udKode 


Jeg håber, at du allerede til dels forstår hvordan denne kode virker, men jeg vil lige komme med en kort forklaring. Først sætter vi i til at være 2, da det første tal i to tabellen jo er 2 :)
Bagefter definerer vi max, som vi senere brugere til at definere hvor længe loopet skal gentages. Vi vil kun have den lille tabel, hvor maximum i to tabellen er 20, så det sætter vi max til. Endelig laver vi inc med værdien 2, som vi skal bruge til at lægge oven i i inde i loopet. Vi sætter den til 2, da det jo kun er hvert andet tal der skal udskrives...
Til sidst gør vi brug af document.write og for, for at gøre opmærksom på at to tabellen bliver skrevet ud, udskrive den samt gøre opmærksom på, at den er blevet skrevet ud.

Så! Nu håber jeg du forstår det mest basale omkring for loop'et, samt brugen af variabler, så vi iler videre til while loopet.
While loopet er en anden effektiv måde at gentage en handling på, men det er samtidig helt anderledes fra for loopet. Men lad os da starte med et eksempel, hvor vi vil tælle hvor mange gange vi kan trække 3 fra 31:

Fold kodeboks ind/udKode 


Vi starter med helt simpelt at oprette 2 variabler, hvor den ene skal indeholde antal gange man kan trække 3 fra 31 inden det bliver 0, og den anden indeholder den resterende mængde af 31, så vi kan tjekke om det er blevet under 0 endnu.
Der efter laver vi et while loop, som fortsætter så længe i er større end 3 (Så kan vi jo stadig godt trække 3 fra ;)), og inde i det loop trækker vi 3 fra i (-= fungerer som +=, dog trækker den fra i stedet for at lægge til), og lægger 1 til antal gange man kunne trække 3 fra 31.
Når loop'et er færdigt udskriver vi så hvor mange gange man kunne trække 3 fra 31 samt hvor meget der vil være tilbage af de 31, når vi har trukket det fra.

Syntaksen for et while loop er while({betingelse}), hvor loop'et forsætter så længe betingelsen er sand, hvilket er en modsætning til for loop'et, som fortsætter indtil slut betingelsen er sand.

Jeg tror ikke, at der er så meget andet at forklare omkring loops nu andet end hvornår det er bedst at bruge for og while. For er et ekkektivt loop, hvis du ved hvor mange gange du vil gentage en handling, men hvis du ikke er sikker på hvor mange gange handlingen skal gentages bør du benytte while.
Det er en meget grov beskrivelse, men du burde nu være nogenlunde i stand til at skelne mellem dem, samt hvornår du bør bruge hvilket.


Så skynder vi os videre til brugen af if-sætninger. En if-sætning bruges til at tjekke om en variabel er lig en værdi, og hvis den er udfører man en handling, og hvis ikke udfører man en anden.
Et eksempel på en if-sætning kunne være, at vi ville tjekke om i er mindre end 18. Det kan gøres sådan:

Fold kodeboks ind/udKode 


Her tjekker vi, om i er mindre end 18, og hvis den er så skriver vi det, hvis ikke skriver vi den er over. Det er en meget simpel if-sætning, og et halv kedeligt eksempel, da vi jo med det samme kan se, at 15 er mindre end 18, men jeg tør love, at i før eller siden får brug for if-sætninger.
Syntaksen for en if sætning er if({betingelse}), og hvis betingelsen bliver opfyldt fortsætter den med handlingen inden for tuborg paranteserne.

Det forrige eksempel var meget simpelt, men man kan lave nogle langt mere komplicerede if-sætninger:

Fold kodeboks ind/udKode 


Her gør vi brug af en langt mere kompliceret if-sætning, hvor vi både tjekker 2 betingelser i en if-sætning, samt gør brug af else if.
I den første skriver vi if(i - j > 20 && i + j < 100), hvilket kan oversættes til hvis i - j er større end 20 OG hvis i + j er mindre end 100. I den næste gør vi det samme, men her gør vi brug af || i stedet for &&, hvilket betyder eller. Det vil sige, at hvis en af betingelserne opfyldes i anden sætning bliver den betragtet som sand, hvor imod begge betingelserne skal være sande i den første.

Det er muligt at lave så mange betingelser, som man vil i en if-sætning, samt gøre brug af så mange else if, som man vil, så man kan designe sin if-sætning, så den passer netop til dit behov.
Det er muligt, at der findes andre operatore end && (OG) og || (ELLER), men jeg kender ikke noget til dem, hvis de gør.

Så er vi ved at være ovre de mest basale ting i javascript, men dog vil jeg lige lære jer hvordan man gør brug af funktioner i javascript, da det kan gøre det meget lettere at kode javascript, når man laver sine egne funktioner...
Jeg vil her lave en funktion, som bliver kaldt når siden bliver loadet, og som henter klientens bredde og højde, samt kommer en besked, som indeholder browserens navn.

Fold kodeboks ind/udKode 


Vi starter med at oprette 2 globale variabler, så de kan bruges i vores "hjemmelavede" funktioner. Derefter definerer jeg en fuktion, som hedder loading og som ikke tager nogen parametre - Syntaksen for oprettelsen af en funktion er function {funktion navn}([{variabel1}, {variabel2}, {...}]).
Derefter definerer jeg hvad der skal ske inde i funktionen (alt koden inden for de tilsvarende tuborg paranteser). Derinde sætter jeg så width og height til at skærmens bredde og højde ved at sætte dem til window.screen.width hhv. window.screen.height.
Endelig laver jeg en meddelelsesboks med alert funktionen, som har samme syntaks som document.write (alert({værdi})), hvor jeg bruger navigator.appName til at udskrive browserens navn, og width og height til at udskrive opløsningen.

Det var en meget simpel funktion, som ikke tager nogen parametre, men man kan senere opleve at få brug for parametre i funktioner.
Ønsker man at kalde en funktion fra javascript gør man sådan: {funktion navn}({parametre});. Et eksempel på at kalde vores funktion fra javascriptet ville være: Loading();, da den hedder loading og ikke tager nogen parametre.

Endelig har i også lært hvordan man kan bruge events til at kalde javascript funktioner (hvis i ikke skulle have set det, så står der <body onload="Loading();">, hvilket får funktionen Loading til at blive kaldt når siden bliver læst).
Jeg vil lige give en liste over andre nyttige events, som kan bruges til at kalde javascript funktioner:

Fold kodeboks ind/udKode 


Desuden er der mange mange mange flere, men det der er de mest basale (og mest brugte?) events, som kan bruges på stort set alle elementer.

Det var så min indledning til brugen af javascript. Jeg håber du har fået lært det mest basale, ellers prøv at læse denne del igen - Ellers skynd dig videre til næste del, for det er nu det begynder at blive rigtig sjovt :D





<< < 123 > >>

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Kommentarer (17)

User
Bruger #3275 @ 11.01.05 12:18
WOW...det er godt nok det længste artikel jeg nogensinde har set. Har ikke fået tygget mig igennem hele artiklen endnu men den ser spændende ud. Godt arbejde :D
User
Bruger #345 @ 11.01.05 16:35
Jeg har et par kommentarer til artiklen.
Den rækkefølge du checker for browserne i er omvendt. Du indikerer via kommentarne at du checker for IE4 via
if(document.all)

Nu er det bare sådan at alle IE versioner har document.all collectionen, og derfor vil den matche samtlige versioner, ikke kun version 4. Du bør derfor placere
if(document.getElementById)
som den første betingelse.

Dernæst er din translateKeyCode funktion langt mere kompleks end det er nødvendigt.

function translateKeyCode(code) { return String.fromCharCode(code).toUpperCase(); }

Du bruger også Object som et variabel navn. Object er en indbygget type i javascript, og det kan derfor lede til visse problemer at bruge netop det som et variabel navn. Jeg vil forslå du ændrer det til noget ala obj.

Og så lige en mindre detalje, i dit mouseOver/mouseOut script har du en lille kommentar fejl. Du indikerer at du checker for IE4, men du checker document.layers, og derfor Netscape. :)
User
Bruger #4404 @ 12.01.05 16:15
God artikkel Mads :P
Den lære man sq noget af :D
User
Bruger #4575 @ 12.01.05 19:49
Hybbe:
Tak fordi du gør opmærksom på det!.. Jeg kendte faktisk ikke til de problemet med rækkefølgen af browser tjekket samt brugen af Object som variabel navn, men jeg vil forsøge at rette det i løbet af ugen...

Hvad angår translateKeyCode, så kan jeg sq godt se at din er noget smartere :)

Jonas:
Ved godt den ser lang ud, men der er meeeget af den, som er kode eksempler...

Mere generelt... Jeg ligger og roder med et WYSIWYG Online CMS, dog endnu kun på test niveau, men er der stemning for en tutorial om det emne, når jeg engang har fået sat mig ind i hvordan man laver sådan et system?..
User
Bruger #6080 @ 15.01.05 10:52
Kanon artikel Mads

Tog dog lidt tid at tygge sig igennem men har da lært en del, så tak for det.

Ja, fra min side syntes jeg det ville være fedt med en artikel om det emne, så håber da det kommer. :D

4 hefra.
User
Bruger #4575 @ 15.01.05 11:01
Jamen så må jo se om ikke jeg inden alt for lang tid kan få skrevet en artikel om det emne...

Jeg tror dog, at jeg inden det lige vil skrive en artikkel om avanceret javascript, som string handling, at lave sine egne objekter samt image preload, da jeg allerede nu bruger disse ting meget i mit CMS.
User
Bruger #7227 @ 09.02.05 14:58
Det er svært at vide, hvor man skal starte og hvor man skal slutte :)

Skriver du noget somhelst før din DTD, disabler du IE's mulighed for at gøre brug af en meget væsentlig del af CSS-standarden - box-modellen. Altså slet din XML-prolog (du har ikke brug for den, da du alligevel ikke kan skrive XHTML).
Du kan teste din sides CSS-kompatibillitet med følgende. der skal returnere 'CSS1Compat':

<script type="text/JavaScript">
document.compatMode()
</script>

Læs evt. mere her (specielt under The !DOCTYPE "Switch"):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Dernæst er det at skifte klasse temmelig dårlig kodeskik. Når en CSS-klasse skiftes på et element, spytter browseren et helt nyt DOM-træ ud, som kræver en genberegning af hele dokumentet ... det er yderst dårligt performende.
Langt bedre er det at skifte de enkelte style-properties på elementet. Det kan nu også gøres ganske 'sexy':

<script type="text/JavaScript">
var stylesA = {
"color": "#ff0000",
"backgroundColor": "#ffff00",
"border": "1px solid #ff0000",
};
var stylesB = {
"color": "#ffff00",
"backgroundColor": "#ff0000",
"border": "1px solid #ffff00",
};
function swapStyles(elm, styleObj) {
for (x in styleObj) elm.style[x] = styleObj[x];
}
</script>

<div onmouseover="swapStyles(this, stylesA)" onmouseout="swapStyles(this, stylesB)">TEST</div>

- hvilket giver browseren langt mindre at svede over - og dermed er betydeligt bedre.

Til slut kommer vi så til det spørgsmålet om XHTML:
Sagen er, at XHTML ikke kan bruges på ordentlig måde på nettet, som dette ser ud idag. Faktisk parses stort set al XHTML idag som dårlig HTML4-kode.
Dels fordi, der er så få, der overhovedet _kan_ kode XHTML (det er nemlig *meget* mere end blot at lukke tags og skrive med småt) - dels fordi, den ultimativt største browser (IE6.0) kun understøtter XHTML, hvis XP er opdateret med SP2 ... og så ikke engang fuldt ud.

Du bruger både document.write og innerHTML på trods af, at disse to hører til HTML-DOM'en og ikke kan bruges under XHTML. Gør man det alligevel, tvinger man browseren til at parse siden som HTML4 - men koden må altså parses som fejlfyldt HTML4, da den er fyldt med ' />', som HTML-parseren ikke kender ... og en forkert DTD i forhold til indholdet.
Det samme gælder f.eks. for document.images og document.forms. De tilhører også HTML-DOM'en og kan således ikke bruges under XHTML.

I virkeligheden er din XHTML-kode langt dårligere, end hvis du havde skrevet i HTML4.01-Strict.
Jeg tror, du bør læse noget helt grundlæggende om XHTML, da der tydeligvis er en hel del ting, du slet ikke har forstået. Prøv f.eks. at begynde her:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538
- hvor jeg har forsøgt at få styr på nogle af de grundlæggende misforståelser omkring XHTML, der hærger nettet - og som din artikel er et udmærket eksempel på.

Jeg giver ikke laveste karakter, da der trods alt er huller mellem fejlene :)
/mvh
User
Bruger #7227 @ 09.02.05 15:20
PS: Jeg manglede alert'en :o)

<script type="text/JavaScript">
alert(document.compatMode)
</script>
User
Bruger #4575 @ 20.02.05 14:29
Til Ole Clausen:
Kan godt se du har ret angående problemerne med XHTML'en ;)
Hvad angår det med klasse skift fra javascript ved jeg godt, at det kan være et problem at gøre det på den måde, som jeg har vist her - Men da det skulle være en relativt simpel artikkel har jeg valgt at vise klasse skift frem for ændringer af attributerne hver for sig (Jeg vidste faktisk ikke man kunne gøre som du viser).
Hvad det problem angår vil jeg så tilgengæld i næste artikkel vise hvordan man laver en klasse, som kan bruges til at ændre attributer osv. for et element, hvilket jeg generelt foretrækker fremfor at skulle identificere elementet hver gang :)

Men ellers tak for kritikken...! Den var konstruktiv og kan helt sikkert bruges i den næste artikel (og evt. videre artikler)...
User
Bruger #7227 @ 25.02.05 02:32
Hej igen Mads :)

Det glæder mig, du får noget ud af mine udgydelser. I den forbindelse - og da du skriver, du ikke kendte metoden, jeg viste til property-skift - kunne det være, du også skulle læse denne:
http://www.eksperten.dk/artikler/227
- hvor jeg prøver at gøre rede for det nære slægtskab mellem JS-objekter og JS-arrays :)
/mvh
User
Bruger #4575 @ 27.02.05 15:53
Det vil jeg da gøre :)
Dog... Jeg er lidt overbebyrdet med lektier & arbejde for tiden, så jeg får desværre ikke tid til at ændre artiklen foreløbig, men jeg vil ordne det hurtigst muligt!
User
Bruger #4575 @ 15.04.05 13:44
Har indsendt en rettet version til godkendelse, så nu er der bare tilbage at vente på, at den bliver godkent :)
User
Bruger #7553 @ 04.06.05 02:05
Har lige et spørgsmål kun hvofor gør du den ik lidt kortere og vælger at lave en style.css eksempel. Men ellers meget god.. :)
User
Bruger #4575 @ 17.06.05 22:36
Har rettet den, så den er blevet væsentligt kortere, men er desværre ikk blevet godkendt (eller afvist) endnu :|
User
Bruger #5062 @ 15.07.05 14:30
Dobbelt op på super duper mega giga onderen total niceren sej artikel dér!
User
Bruger #7812 @ 05.11.05 01:31
Jah! er færdig med den!

Mega godt skrevet Go artikel
User
Bruger #9674 @ 29.11.06 16:00
Rigtig god artikel som man kan lære rigtig meget af...

Nogle enkelte småfejl, men blot taste fejl, ellers fejl fri efter min forståelses evne...

Den sikrer ens basiks med JS og har givet mig en del videre muligheder...
Du skal være logget ind for at skrive en kommentar.
t