Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Javascript fra bunden (1. del)

Forord

Hej med dig :)
I denne artikel vil jeg gennemgå følgende.

1: Intro
2: Variabler
3: Arrays
4: Matematik
5: Betingelser
6: Løkker
7: Funktioner
8: Facitliste (Til de opgaver der kommer igennem artiklen)

Hej med dig :)
I denne artikel vil jeg gennemgå følgende.

1: Intro
2: Variabler
3: Arrays
4: Matematik
5: Betingelser
6: Løkker
7: Funktioner
8: Facitliste (Til de opgaver der kommer igennem artiklen)

Intro til javascript
Javascript er et såkaldt ClientSide Sprog, i modsætning til f.eks PHP og ASP som er ServerSide Sprog.
Det vil sige at Javascript ikke kan kommunikere med serveren ligesom PHP og ASP kan, det kan derimod kommunikere med Clienten/Browseren.
Hvis du kan andre programmeringssprog (nok især PHP), så vil du ikke finde Javascript ret svært at lære da syntaksten er meget ens.
Men lad os hoppe ud i vores første script.


Vores første script
  1. <script type="text/javascript">
  2. document.write("Hello World");
  3. </script>

Det første man ser er <script type="text/javascript"> og det fortæller browseren at den nu skal til at behandle Javascript i stedet for almindelig HTML, du har måske set noget andre javascript hvor det bruger <script language="javascript"> i stedet - det gjorde man før i tiden, men i den nye generation af javascript bruger man altså type.

Så ser man koden document.write(""); - det er det stykke kode som fortæller at vi vil udskrive noget til skærmen, det er nemlig ikke ligesom i almindelig HTML hvor alt hvad du skriver bliver udskrevet,
Hvis du kan PHP kan det sammenlignes med "echo()" og "print()" og i ASP kan det sammenlignes med "Response.write".
Alt hvad der står inden for paranteserne bliver udskrevet til browseren.

Og til sidst ser man </script> - Det er fordi som du jo nok ved skal man ALTID afslutte sine tags. Ellers kan man resikere at en hel side ikke virker:)

Se det var jo meget nemt at udskrive noget tekst.
Nu skal vi til at lege lidt med variabler.:O

Variabler
Og hvad er variabler så? - Jo hvis du kan et hvilket som helst andet programmeringssprog så ved du hvad det er - for det bliver brugt HELE tiden i alle programmerinssprog, så det er noget man skal have 100% styr på hvordan fungerer.
Men hvis du ikke ved det, så vil jeg forklare det her.
En variabel kan sammenlignes med en slags "kasse" hvor du kan putte noget ned i og opbevare det deri indtil du får brug for det.
En variabels navn skal starte med enten et bogstav eller en underscore (_), den må ikke starte med et tal.
Hvis du synes det lyder mærkeligt, så kig lidt på denne kode:
  1. <script type="text/javascript">
  2. var vores_variabel = "Hello World";
  3. document.write(vores_variabel);
  4. </script>

Nu kom der noget nyt ind i vores kode nemlig var vores_variabel - og det er faktisk vores første variabel, når man laver en variabel - eller "sætter" den som det hedder i programmeringssprog - så starter man i javascript altid med at skrive "var" som er en forkortelse for "variable", så ved browseren at den skal fortolke koden som en variabel.
Vi har givet vores variabel en værdi ved at sige = "Hello World";.
Nu kom der noget kode som du burde kunne huske (document.write).
Men denne gang er der ikke nogle anførselstegn inde i parantesen som du sikkert har opdaget ;)
Og det er fordi at hvis du have gjort det, så havde Javascript opfattet det som en "streng" ("streng" er programmeringsord for "tekst") - og ikke som en variabel som vi vil have den til.
Dvs at hvis vi have brugt anførselstegn så ville der kommer til at stå "vores_variabel" i stedet for "Hello World" som jo var variablens værdi.

Nu kan vi finde ud af at opbevare noget tekst i vores variabler - men vi skal vel også kunne opbevare tal?
Det gøres faktisk på sammen måde som med strenge.
Bare uden anførselstegn
  • var vores_tal = 5;
Grunden til at der ikke skal være anførselstegn rundt om et tal er at javascript så fortolker det som en streng i stedet for et tal, og du kan f.eks ikke lave regnestykker med tekst.

Så lang så godt. Nu skal vi igang med noget der hedder arrays :O

Arrays
Arrays er faktisk en slags udvidede variabler, og så alligevel ikke... Her kommer noget kode så forklarer jeg bagefter.
  1. <script type="text/javascript">
  2. var vores_array = new Array();
  3. vores_array[0] = "Hej";
  4. vores_array[1] = "med";
  5. vores_array[2] = "dig";
  6. </script>

Det første som vi ikke har set før er new Array() - men det er ganske enkelt fordi vi vil fortælle at vi skal igang med et array.
Efter det kommer der noget som faktisk ligner variabler - og så alligevel ikke, for der er nogle firkantede paranteser på ([]).
Et array består af et X antal variabler med firkantede paranteser på. Inde i de paranteser står der et tal (0-X).
Et array starter ved 0.
Det kan umiddelbart virke som en idiotisk måde at gøre det på da man jo kan spare en masse kode ved bare at bruge variabler -
det er også rigtigt nok, men du bliver glad for arrays når du kommer mere ind i programmeringen.
I en senere artikel vil jeg komme ind på fler dimensionelle arrays.

Men hvis du gerne vil udskrive noget fra dit array, skal du skrive navnet på array"et + nummeret.
eks
  • document.write(vores_array[2]);
Den vil udskrive "dig" :)

Nu skal vi til at gå videre - hvis du ikke har helt styr på det vi har gennemgået indtil videre så læs det igen, for det er et MUST at have 100% styr på det.
Hvis du har forstået det og er frisk på mere - så hent dig en kop kaffe, for nu bliver det lidt sværere ;)

Vi skal nemlig igang med noget matematik.:O
Ja det lyder kedeligt, men du vil helt sikkert få brug for det hvis du vil gøre noget ud af din programmering.

Matematik
Matematik i JavaScript minder utroligt meget om det du lærer i skolen, så det er et hurtigt kapitel.
De operatorer vi har til rådighed er
+ - Plus
- - Minus
* - Gange
/ - Dividere
% - Modulus (tilovers fra en division)

Her kommer en gennemgang af de forskellige operatorer.

Plus
Plus bruges ligesom i alt andet matematik til at lægge tal sammen, så 2+2 vil give 4.
Man kan også godt lægge variabler sammen.
eks
  1. <script type="text/javascript">
  2. var tal1 = 2;
  3. var tal2 = 2;
  4. var resultat = tal1+tal2;
  5. </script>
På den måde kan man lægge variabler sammen så længe de indeholder tal.

Minus, Gange, Dividere
Foregår på samme måde som plus

Modulus
Modulus er nok en operator du ikke har set før medmindre du har programmeret andre sprog.
Men modulus giver det der er tilover efter en dividering.
Det vil sige at 5%2 giver 1 for 2 går op i 5 to gange, og så er der én tilovers.
Det er den éne som modulus retunerer.

Det var lidt om det basale matematik med javascript.
Nu skal vi igang med "betingelser".

Betingelse
I javascript findes der noget der hedder betingelser, de kan bruges til at returnere "noget" hvis en forespørgsel er sand eller "nogetandet" hvis den er falsk.
Det lyder måske lidt forvirende, men her kommer et eksempel med noget forklaring bagefter.
  1. <script type="text/javascript">
  2. var dyr = "kat";

  4. if(dyr=="kat"){
  5. document.write("Dyret er en kat");
  6. }
  7. </script>

Først har vi lavet en variabel (dyr) som vi har givet værdien "kat".
Så kommer der noget nyt i vores kode som er if().
"if" er det engelske ord for "hvis", så den spørger altså om "hvis noget".
Inde i vores if står der dyr=="kat" det er den forespørgsel som vi laver i vores if.
Læg mærke til at vi har brugt "==" (dobbelt lighedstegn).
Det har vi gjort fordi vi skal sammenligne vores værdier, hvis du havde brugt et enkelt lighedstegn havde variablen dyr blevet sat til "kat" igen.

De grundlæggende sammenligningsmuligheder er:
== - Lig med
!= - IKKE lig med
> - Større end
< - Mindre end
<= - Mindre eller lig med
>= - Større eller lig med

Ekstra info
++ - Lægger +1 til et tal
-- - Trækker -1 fra et tal
(Kommer vi til at bruge senere).

Der findes også flere, men dem vil jeg ikke komme ind på endnu.

Men tilbage til vores forespørgsel dyr=="kat" - der spørger vi om variablen "dyr" er lig med "kat" hvis den er udskriver vi "Dyret er en kat" til browseren, ellers sker der ingenting.
Nu kunne det være meget passende at gøre noget andet hvis dyr IKKE er lig med "kat".
Til det skal vi bruge "else" som er engelsk for "ellers".
Så vores betingelse kunne se sådan her ud:
  1. <script type="text/javascript">
  2. var dyr = "kat";

  4. if(dyr=="kat"){
  5. document.write("Dyret er en kat");
  6. } else {
  7. document.write("Dyret er ikke en kat");
  8. }
  9. </script>

Her spørger hvis om dyr er en kat - hvis den er skal den udskrive "dyret er en kat" ellers skal den udskrive "dyret er ikke en kat".
Det burde være til at forstå ellers må du kigge på det én gang til.

Nu skal vi prøve at lave flere tjek i vores betingelse, til det skal vi bruge "if-elseif".
Det lyder måske forvirrende, men det er nemt nok.
Her kommer lidt kode.
  1. <script type="text/javascript">
  2. var dyr = "kat";

  4. if(dyr=="kat"){
  5. document.write("Dyret er en kat");
  6. } else if(dyr=="hund" {
  7. document.write("Dyret er en hund");
  8. } else {
  9. document.write("Dyret er hverken en kat eller en hund");
  10. }
  11. </script>

Der har vi lavet en "else if" - vores betingelse tjekker altså; er dyr lig med kat - udskriv "dyret er en kat". Ellers hvis dyr er lig med hund - udskriv "dyret er en hund". Ellers skal den skrive "dyret er hverken en kat eller en hund".
På den måde kan vi lave flere forespørgelser i stedet for at vi skal lave flere if"er inde i hinanden.

Det var det mest grundlæggende inden for betingelser i javascript.

Det næste vi skal kigge på er noget der hedder løkker.

Løkker
Løkker er noget som kan køre en forespørgsel flere - lige så mange gange som forespørgelsen bliver opfyldt.
Vi skal kigge på 2 forskellige løkker; "for" og "while".

Lad os starte med while, den har 2 parametre som skal være opfyldt før den kan køre;
  1. while(noget [u]forespørgsels[/u] noget andet){
  2. <!--gør noget-->
  3. }

Tidligere i artiklen gav jeg dig lidt "ekstra info" nemlig ++ og -- som henholdsvis siger +1 & -1 til et tal.
Det kan vi bl.a. bruge i vores løkker.
Vi kan lave en løkke som hele tiden lægger +1 til et tal indtil tallet når 100.
Det kommer til at se sådan her ud.
  1. <script type="text/javascript">
  2. var i = 0;
  3. while(i<=100){
  4. document.write(i);
  5. i++
  6. }
  7. </script>

Der sætter vi først en variabel lig med 0.
Så laver vi en løkke som skal køre så længe at tallet er mindre eller lig med 100.
I slutningen af løkken lægger vi +1 til vores variabel, og genstarter løkken.

Det var et eksempel på en simpel while løkke, vi kan faktisk få det samme resultat med en for løkke som jeg snakkede om tidligere.
Det kommer til at se sådan her ud.
  1. <script type="text/javascript">
  2. for(var i=0; i<=100; i++){
  3. document.write(i);
  4. }
  5. </script>

I modsætning til en while løkke så har for løkken 3 parametre.
for(startværdi ; betingelse ; hvad-skal-der-sker-ved-hver-gennemgang).

Opgave 1.0
Det var lige kort om løkker, selvfølgelig kan man bruge løkker til andet end at udskrive en talrække, så derfor kommer der her en øvelse til dig.
Du skal lave et array med 10 forskellige navne og bruge en for løkke til at udskrive dem alle sammen.
Jeg skriver løsningen i slutningen af artiklen, men vil helt klart råde dig til selv at lave det, da det er en rigtigt god måde at lære på.

Nu skal vi igang med at lave funktioner og bruge javascripts indbyggede funktioner.
Funktioner
Funktioner i javascript kan spare dig for en masse arbejde, der findes et hav af funktioner i javascript, og ellers kan du lave dine egne.
Jeg vil langt fra komme ind på alle funktionerne i javascript, men der findes en masse hjemmesider på nettet hvor du kan læse om dem.

Et eksempel på en funktion i javascript kunne være "Math.random()" som genererer et tilfældigt tal mellem 0 og 1.
  1. <script type="text/javascript">
  2. var tal = Math.random();
  3. document.write(tal);
  4. </script>

For at få funktionen til at generere et tilfældigt tal mellem 0 og 10 f.eks kommer den til at se lidt anderledes ud.
Nemlig sådan her:
  1. <script type="text/javascript">
  2. var tal = Math.random()*10;
  3. document.write(tal);
  4. </script>

Og for at få alle de frygtelig decimaler væk, kan vi bruge endnu en funktion som hedder "Math.floor()" som afrunder et tal.
eks
  1. <script type="text/javascript">
  2. var tal = Math.random()*10;
  3. tal = Math.floor(tal);
  4. document.write(tal);
  5. </script> 

Et andet eksempel på en funktion kan være substring() som kan skære i en streng efter x antal bogstaver.
  1. <script type="text/javascript">
  2. var tekst = "Hej med dig!";
  3. tekst = tekst.substring(0, 5);
  4. document.write(tekst);
  5. </script>

Først sætter vi en variabel med værdien "Hej med dig!".
Så bruger vi funktionen på vores variabel - det gør vi ved at skrive "variabel.funktion".
I funktionens parametre angiver vi først starttegnet og derefter sluttegnet.
Så vores lille script vil udskrive "Hej m".

Så fik du lidt indblik i hvordan funktioner virker, så nu skal vi igang med at lave vores egen funktion.
Vores funktion skal trække 2 tal fra hinanden - men den skal altid trække det mindste fra det største.
Her kommer koden til funktionen, så kommer der lidt forklaring bagefter.
  1. <script type="text/javascript">
  2. var facit
  3. function vores_funktion(x, y){
  4.     if(x<y){
  5.         facit = y-x;
  6.         return facit;
  7.     } else {
  8.         facit = x-y;
  9.         return facit
  10.     }
  11. }
  12. </script>

Nu begynder vores koder at blive lidt større, men det gør ikke noget så længe man forstår dem, så det vil jeg prøve at få dig til nu.
Allerførst har vi skrevet "function vores_funktion" det gør vi for at fortælle at vi skal lave en funktion "vores_funktion" er så navnet på vores funktion.
Så har vi skrevet "(x, y)" det er vores funktions parametre, vores har så 2 parametre. (2 tal).
Så laver vi et tjek på hvilket tal der er størst, så vi er sikre på at den trækker det mindste fra det største.
Og så har vi skrevet "return facit;" det er det vores funktion returnerer, altså variablen facit.

For at kalde vores funktion kan vi gøre det på denne måde
  1. <script type="text/javascript">
  2. var resultat = vores_funktion(12, 8);
  3. document.write(resultat);
  4. </script>

Det bruger vi vores funktion på tallene 12 og 8.

Altså kommer vores script til at se sådan her ud i en sammenhæng.
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var facit
  5. function vores_funktion(x, y){
  6.     if(x<y){
  7.         facit = y-x;
  8.         return facit;
  9.     } else {
  10.         facit = x-y;
  11.         return facit
  12.     }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <script type="text/javascript">
  18. var resultat = vores_funktion(12, 8);
  19. document.write(resultat);
  20. </script>
  21. </body>
  22. </html>

Ganske simpelt.
Men nu tror jeg vist det er på tide at du laver en ny opgave ;)

Opgave 1.1
Denne gang skal du lave en funktion som altid gør et tal positivt, lige meget om tallet er under eller over 0.
Altså en funktion der tager den numeriske værdi af tallet.(|tal|)

Det var en lille gennemgang omkring funktioner i javascript, håber det er forklaret godt nok :)



Facit Liste

Løsning på Opgave 1.0
  1. <script type="text/javascript">
  2. var navne = new Array();
  3. navne[0] = "Peter";
  4. navne[1] = "Klaus";
  5. navne[2] = "Kim";
  6. navne[3] = "Ditte";
  7. navne[4] = "Lotte";
  8. navne[5] = "Mik";
  9. navne[6] = "Louise";
  10. navne[7] = "Iben";
  11. navne[8] = "Mikkel";
  12. navne[9] = "Lars";

  14. for(var i=0; i<=9; i++){
  15. document.write(navne[i]);
  16. }
  17. </script>

Løsning på opgave 1.1
  1. <script type="text/javascript">
  2. var facit
  3. function numerisk_vaerdi(tal){
  4.     if(tal<0){
  5.         facit = -tal;
  6.         return facit;
  7.     } else {
  8.         facit = tal;
  9.         return facit
  10.     }
  11. }
  12. </script>

  14. <script type="text/javascript">
  15. var resultat = numerisk_vaerdi(-12);
  16. document.write(resultat);
  17. </script>


Det var alt for denne gang, jeg håber du har lært noget af denne artikel og ikke kan vente til jeg får skrevet den næste ;)
Du kan se nogle forskellige javascripts jeg har lavet på http://akmedia.dk

Mvh. Andreas


PS: Kommentér venligst kun hvis du har noget fornuftigt at sige!!
Sidst redigeret 12:00 17/09/2009
Oprettet af:
__ak

Javascript

Point modtaget: 0

Rate:
17:18 10/04/2006

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
God artikel! Lærte faktisk meget af den (da jeg ikke fattede så meget Javascript førhen), og det ligner jo meget PHP, Javascript så det er jo godt nok. Alt i alt god og lærenem artikel, gj.
Oprettet af:
Ukendt bruger
  Mail
19:19 10/04/2006
Det er en fantastisk artikel.
Den er idéel til "opslagsværk" om de mest grundlæggende ting.
Der er lige et par taste-bøffer et par steder, men ellers perfekt!

Mere i den stil! :up:
Oprettet af:
Micra
  Mail
18:46 16/04/2006
Er enig, rigtig god artikel, går absolut i dybten med mange gode ting, men det er nu ikke fordi man har skiftet language ud med type, det er for W3C ikke brokker sig over det - den vil så vidt jeg ved have begge med
Oprettet af:
deXo-fan
  Mail
18:33 08/05/2006
Heh guff.. da java jo faktisk er noget af det jeg aller mest går op i (: lærte nu ikke særlig meget, men da lidt sjovt at se andre skrive om det
Oprettet af:
Ukendt bruger
  Mail
19:28 20/05/2006
LR: Denne artikel har absolut ingenting med JAVA at gøre...
Sidst redigeret 17:19 - 28/12/2006
Oprettet af:
__ak
  Mail
01:29 06/06/2006
Man kan hvis også bruger <script language="js"></script>
Oprettet af:
JegCrazy-o2
  Mail
01:07 09/06/2007
Super artikel - lærte faktisk rigtig meget. Har ikke før givet mig i kast med JavaScript da jeg synes det har set for indviklet ud. Men det ligner jo rigtig meget fx PHP : )
Oprettet af:
olebrian
  Mail
23:31 19/07/2007
Super. Har du selv fundet på det?
Oprettet af:
Nik
  Mail
11:28 08/03/2009
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes