25
Tags:
javascript
Skrevet af
Bruger #11328
@ 12.03.2008
Funktioner
Indtil videre har vi kun arbejdet med JavaScript som et sprog der kun kan bruges alene. Nu vil vi begynde at lære om funktioner, som er det man bruger mest på hjemmesider.
En funktioner oprettes altid i <head>. Så kan man kalde den senere, enten i <body> eller i en anden funktion.
Eksempel:
<html>
<head>
<title>Min første funktion</title>
<script type="text/javascript">
function Popup()
{
alert("En popup box!");
}
</script>
</head>
<body>
<script type="text/javascript">
Popup();
</script>
</body>
</html>
function Popup()Her laver vi en funktion. Det gøres ved at skrive
function foran det navn vi vil give vores funktion. I dette eksempel har jeg kaldt den Popup. De to parenteser bruges til at definere nogen variabler, det forklarer jeg senere i artiklen.
alert("En popup box")Ja, teksten inde i beskriver jo næsten det hele. Det er en popup box...
Det vi så gør nede i <body> er simpelthen at kalde funktionen, bare uden
function foran, det er meget vigtig at vi kun skriver navnet når vi kalder en funktion, ellers tror browseren at vi bare definere den igen.
Definere variabler i en funktionMan kan få lavet nogen variabler hver gang en funktion bliver kørt. Disse variabler får tildelt en værdi når man kalder funktionen!
Her bruger jeg eksemplet fra før med en popupbox. Denne gang vil vi dog bruge variabler til at selv kunne vælge indholdet af en popupboxen.
<html>
<head>
<title>Popupbox funktionen</title>
<script type="text/javascript">
function Popup(tekst)
{
alert(tekst);
}
</script>
</head>
<body>
<a href="#" onclick="Popup('Første tekst')">Første tekst!</a><br />
<a href="#" onclick="Popup('Anden tekst')">Anden tekst!</a><br />
<a href="#" onclick="Popup('Tredje tekst')">Tredje tekst!</a><br />
<a href="#" onclick="Popup('Fjerde tekst')">Fjerde tekst!</a><br />
</body>
</html>
I dette eksempel kan du se at vi kalder funktionen som vi plejer. Der er dog én ændring. Vi kalder den ikke bare ved hjælp af navnet, men skriver også noget tekst inden i.
Det opfanger funktionen popup, og putter ind i variablen "tekst" som er skrevet mellem de to parenteser.
Man kan også have flere variabler i en funktionen, det kræver bare at man adskiller dem med et komma.
document
Som før beskrevet i artiklen er
document det der repræsenterer den side browseren viser. Via document kan du få fat på elementer i din (X)HTML kode.
Den mest brugte metode er nok:
getElementById (læg mærke til at kommandoen er case-sensitive.)
For dem der kan engelsk siger funktionens navn stortset hvad den bruges til "få fat i element ved hjælp af ID".
Id er det man bruger i (X)HTML til at gøre et element unikt, og til at kunne få fat på den over f.eks. JavaScript.
En id tildeles sådan:
<div id="txt"></div>
Her opretter vi en div med id'et "txt". Vi kan nu få fat på den i JavaScript ved hjælp af getElementById. Jeg vil bruge funktioner som vi lærte om i sidste afsnit:
<html>
<head>
<title>getElementById</title>
<script type="text/javascript">
function tekst()
{
document.getElementById("txt");
}
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
I dette eksempel sker der ingenting, da vi ikke tildeler
txt nogen attributter. Man kan gøre mange ting ved hjælp af getElementById.
attributEn attribut kunne f.eks. være style.
Ekspempel:
<html>
<head>
<title>Ændre style på et element</title>
<script type="text/javascript">
function farver()
{
document.getElementById("txt").style.color="#FF6600";
}
</script>
</head>
<body>
<div id="txt" style="color: #000000">Her er noget tekst</div>
<a href="#" onclick="farver()">Klik her for at ændre farven på teksten!</a>
</body>
</html>
I dette eksempel har vi et link, der ved hjælp af eventen
onclick laver farven på teksten om til orange(#FF6600).
For at forstå denne kode, må vi kigge grundigt på sammenhænget mellem div attributten
style og det vi gør med getElementById.
Det vi gør med getElementById er at vi først får fat i div'ens
style. Derefter får fat i
color os så tildeler den en ny værdi: "#FF6600".
innerHTML
innerHTML er en attribut stortset alle elementer har. Det den gør er at finde værdien inden for start tagget og slut tagget.
Her er et eksempel med en div, hvor vi udskifter værdien, når siden loader:
<html>
<head>
<title>innerHTML eksempel!</title>
<script type="text/javascript">
function skiftindhold()
{
document.getElementById("txt").innerHTML="Her er det andet indhold!";
}
</script>
</head>
<body onload="skiftindhold()">
<div id="txt">Her er det første indhold!</div>
</body>
</html>
Man får altså fat i "txt" ved hjælp af getElementById, og bruger så attributten innerHTML til at skrifte indholdet af "txt". Virkelig smart ikke?
Konklusion
Denne artikel dækker hverken helt eller halvt over JavaScript. Den er blot en smagsprøve på muligheder man har med JavaScript.
Dog burde du nu alligevel kunne lave en masse fede og sjove ting ved hjælp af JavaScript, ved at blande alt det du har fået at vide i denne artikel.
Hvis du har problemer med koden eller bare har brug for hjælp kan du bruge tråden som jeg har oprettet til denne artikel.
Start på JavaScript tråd
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 (12)
Jeg synes din artikel gav mig blod på tanden og mod på at prøve at lære lidt simpel Javascript.
Men så kom det der med variablerne, og det synes jeg var alt for indforstået. Jeg fattede simpelthen hat og briller....
Desværre.
Okay,
En variabel er... Hvad skal jeg kalde det? Et stikord...? En henvisning...
En variabel indeholder noget data, som man kan kalde ved hjælp af variablens navn.
En variable kan indeholde stort set alt, ikke kun data, da et object let kan bestå af andet.
Niveauet bør være begynder til denne artikel, der er massere af "bad practice" - Ting man ikke bør benytte på sin hjemmeside.
Men sikkert fin til at få en form for start.
Herlig artikel, men jeg må indrømme at din beskrivelse angående variabler var lidt kryptisk, heldigvis (for mig) har jeg selv lidt erfaring med php og kan så drage min viden derfra. Det er også lidt svært at forklare hvad en variabel er uden at give et eksempel. Eksemplet du bruger senere er fint. Men lidt mere beskrivelse kunne være godt
Jeg kan ikke ligefrem kalde mig ekspert til JavaScript, men du har skrevet en ok artikel, jeg vil nok ikke have noget imod at den blev lidt mere udfordrende, for man kan ikke lave meget hjemmeside ud af hvad du fortalte der.. Men artiklen giver da en vis basisviden.
Ups, jeg VILLE have give Maksimal rating hvis jeg havde kunnet finde ud af det
TAK! Jeg er indehaver af en 'gammel' bog indkøbt i en DSB®-kiosk, men var ved at
græde da jeg opdagede at forfatteren led af hvad jeg i mangel af bedre kalder 'nørd-
instruktør-syndromet';
vedkommende er uden tvivl meget god til det han prøver at lære fra sig, og med masser
af gode intentioner..
MEN kan ikke sætte sig ned på begynderens niveau.
(Jeg stødte f.eks en gang på en bog, der lovede en MEGET lettilgængelig vejledning i
AMIGA og brugen af disse fede maskiner.
Det startede næsten lidt FOR lovende med noget i retningen af:
Dette er din Amiga;
Dette er din skærm;
Den der dimmer med en masse knapper på er dit "TAS-TA-TUR"..
Men fortsatte med (sådan ca.):
..Og så skal du bare lige installere styresystemet i de rette bibleoteker med de rette flippidaxer og gobbelinokker i et subcirectory du ikke har den ringeste forudsætning for at fatte hvad er!
Ligesom man f.eks kan få at vide at man skal skrive "<HTML> i starten af et html-dokument, men med næsten 1/999999999999999999999999999..n'te-dels sandsynelighed ville kunne gætte at man skal skrive en super-kompliceret meta-
kode i starten af teksten, hvis du skal gøre dig de ringeste forhåbninger om at kunne
lave en side, der fungerer på nettet..)
Jeg ved at det er ekstremt svært og tidshrævende at lave manualer, men det fede ved
manualen på disse sider er at den er LOGISK!!
Man behøves ikke at skulle gætte sig frem til hvad begreberne betyder, og vil derfor
efter lidt tilegnelse kunne gå videre selv, og gætte sig til meget hen ad vejen..
samo
Tak for den her artikel. Den har helt sikkert givet mig mod på at lære mere til JavaScript.
Jeg har før prøvet det lidt, men har opgivet da jeg ikke syntes guider og manualer var så nemme at gå til som denne artikel.
Mange tak!
God artikel, den giver mig lyst til at tilføje noget javascript til min hjemmeside
især dejligt at du har vist hvordan man gør så teksten skifter farve !
men som andre siger, lidt kryptisk ang. Variabler
eller flot , 4.
Dejlig artikel! Kan vi regne med en mere avanceret?
Den var skide god og forstod alt. Meget simpelt forklaret.
4/5 - den fik ikke 5 fordi den ikke var så lang, men dækkede det basale.
God artikel for mig, Nu kan jeg også lidt php, Det er bygget op på stort set samme måde bare med andre tegn, Så meget nemt. Men det her får mig da virkelig til at give det et forsøg. Tak
Super god artikel. Glæder mig til nummer 2
Kan ikke vente
Super fin artikel!
Bogen '
Introduktion til Javascript' kan også foreslås hvis man vil lære JS. Det var bogen der gav mig lysten, og det var artiklen der gav mig sparket! Så mange tak!
Du skal være
logget ind for at skrive en kommentar.