25
Tags:
javascript
Skrevet af
Bruger #11328
@ 12.03.2008
Forord
I denne artikel, vil jeg prøve at lærer dig om JavaScript.
Javascript har en lang og indviklet historie bag sig, den vil jeg ikke forklare da det ikke er formålet med denne artikel. Hvis du alligevel vil vide det foreslår jeg at du kigger på Wikipedia, W3Schools eller Google...
Du skal ikke bruge noget specielt, bortset fra:
- En browser (IE, FF, osv.)
- En editor - Notepad, WebCoder, ja ligefrem Word. Jeg foreslår dog, at hvis du bare vil se hvordan koden virker at du bruger W3Schools online editor. Bare slet koden og klik "Edit the text and click me"
- Et lille kendskab til (X)HTML
Det er
IKKE meningen at denne artikel skal copy pastes!
Nå, men lad os komme i gange! Jeg vil starte med at vise hvor man kan placere Javascript.
<html>
<head>
<script type="text/javascript">
// Her kan vi skrive vores kode!
</script>
</head>
<body>
<script type="text/javascript">
// Og her kan vi skrive vores kode!
</script>
</body>
</html>
Som du kan se kan man placere koden både i <head> og i <body>.
Javascript i <head>, er oftest funktioner som kan kaldes ved hjælp af et javascript i <body>.
<script type="text/javascript">Her starter vi vores kode. Hvis du nogenside er støde ind i et lidt ældre Javascript, kan det være der står: <script language="javascript"> Det er ikke korrekt mere, brug altid type="text/javascript".
// Her kan vi skrive vores kodeHer er så et eksempel på en kommentar, alt der skrives efter // er en kommentar. Det er god skik at lave kommentarer i sin kode, først og fremmest for at den bliver overskuelig, men også så andre kan bruge din kode i deres egne projekter.
Man kan også lave "multiline" kommentarer, altså kommentarer over flere linjer, det gøres sådan:
/*
Her er en kommentar.
Den fylder flere linjer,
end én...
*/
Faktisk bruger man også tit en HTML kommentar, for at starte og ende et script. Det skyldes at nogen browsere ikke kan vise JavaScript, eller at brugeren har slået det fra.
<script type="text/javascript">
<!--
document.write("Sikker kode");
//-->
</script>
Jeg vil dog ikke gøre det i denne artikel, da jeg simpelthen er for doven
Men jeg opfordrer dig helt klart til at gøre det!Men nok om kommentarer og placeringer, lad os skrive noget kode!
Hvor kan jeg bruge det?
JavaScript kan bruges mange steder, faktisk er der mange store 3D-spil der bruger enten JavaScript eller et lignende script sprog til at gøre det lettere at kode.
Det er dog ikke formålet med denne artikel, vi vil bruge JavaScript til web-sider.
JavaScript på websider kan indsættes i HTML filer. Man kan dog også lave eksterne JavaScript filer med endelsen ".js".
De kan tilføjes i en HTML fil i <head> med følgende kode:
<script type="text/javascript" src="javascriptfil.js"></script>
Events
Her følger en hurtig gennemgang og beskrivelse af de events du mest sandsynligt kommer til at bruge med JavaScript:
onblur - Når et element mister fokus.
onchange - Når en bruger ændrer indholdet af et felt.
onclick - Når en bruger klikker på et element
onload - Når siden er loadet.
Disse funktioner er taget fra W3schools. Du kan finde en komplet reference
Her!Events tildeles som en attribut til et element:
<p onclick="document.write(this.id)" id="En_id">Prøv at klikke!</p>
Dette ekspempel udskriver "En_id" hvis man klikker på teksten.
man kan også skrive en funktions navn i en event:
<p onclick="udskriv_id()" id="En_id">Prøv at klikke!</a>
Her udfører JavaScript altså funktionen "udskriv_id()" hvis der bliver klikket på teksten.
Start
Vi starter med at den altid elskede "Hello World". Når man kun skal udskrive noget gøres det i <body>
<html>
<head>
<title>Hello world! - Mit første javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Prøv at skrive det her i din editor, gem som f.eks. helloword.html og åben det i din browser. Sådan! Dit første JavaScript.
Gennemgang:
documentdocument repræsenterer det dokument, som vises.
document.write("Hello World!")Ret selvforklarende, document.write er en standard javascript kommando, der udskriver noget på din skærm...
Til sidst er der kun semikolonet tilbage, det er valgfrit om man vil bruge det eller ej, men det er god stil og gør det muligt at skrive kode over flere linjer...
Variabler
Hvis du har lavet noget programmering før kender du helt sikkert også udtrykket "en variabel". En variabel er en ting der indeholder noget data som tal eller bogstaver. En javascript variabel er bare et ord, som du finder på som så forbinder med en værdi, du har givet den
Variabler kan defineres på to måder:
// 1. måde
variabelnavn
// 2. måde
var variabelnavn
Jeg foreslår at du altid når du skal definere en variabel bruger "var" foran, men så snart den er defineret, skal du selvfølgelig kun bruge variabelnavnet i koden.
Jeg vil lægge ud med et simpelt regnestykke:
<script type="text/javascript">
var tal1 = 21;
var tal2 = 23;
document.write(tal1 + tal2);
</script>
Gennemgang:
var tal(1/2)Vi definere her de to variabler og giver dem en værdi.
document.write(tal1 + tal2)Her udskriver vi resultatet. Den opmærksomme læser har måske opdaget at der ikke er sat
gåseøjne ("") rundt om det vi skal udskrive. Det er fordi at når man laver "" rundt om det som skal udskrives bliver det opfattet som en streng, og bliver derfor ikke lagt sammen. Når man IKKE laver "" uden om er det simpelthen fordi at vi vil have de to variabler lagt sammen.
Resultatet af det stykke kode bliver: 44. Hvis vi havde sat gåseøjne rundt var det blevet: tal1 + tal2.
Alt dette kunne også gøres sådan:
<script type="text/javascript">
var tal1 = 21;
var tal2 = 23;
var resultat = tal1 + tal2;
document.write(resultat);
</script>
Det vi gør her at simpelthen at lægge de to variabler sammen i en anden variabel, og så udskrive den.
Hver af de forskellige regnemetoder har deres eget tegn. Jeg vil ikke komme ind på de mere avancerede, men bare dem den almindelige programmør vil få brug for:
plus = +
minus = -
gange = *
divider = /
læg én til = ++;
træk én fra = --;
Som sagt før kan variabler også indeholde tekst, de variabler kaldes strenge.
<script type="text/javascript">
var streng = "Jaaa, nu kan vi også udskrive tekst!";
document.write(streng);
</script>
En streng skal altså bare have " " rundt om sig.
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.