Crashkurs i JavaScript


Denna artikel ska vara en crashkurs i JavaScript eller ECMAScript som det egentligen heter, och vi kommer att gå igenom dom olika delarna rätt snabbt. Du bör redan kunna HTML och CSS för att få ut det mesta av den här guiden. Jag använder mig ofta av ett mycket bra verktyg som heter JS Bin vilket är en online redigerare, men det går lika bra med Notepad eller TextEdit, eller någon annan textredigerare tillsammans med utvecklingsverktyg som Chrome Developer Tools.


JavaScript != Java

Även om namnen är lika är JavaScript inte samma sak som Java! JavaScript är ett programmeringsspråk för webben och körs på klientsidan, dvs. i webbläsaren hos den som som besöker sidan. Vidare så tolkas källkoden live av syntaxtolken i motsats till Java där man först kompilerar källkoden innan den kan köras.

Det finns en massa andra språk som körs på serversidan, som PHP, Ruby och ASP.NET mfl.


Inkludera JavaScript

Det finns ett par olika sätt att lägga till JavaScript till ditt HTML-dokument, men alla inkluderar script taggen.

Första sättet är att skriva inline kod och då lägga in script taggen direkt i head delen av dokumentet:

Detta betyder dock att webbläsaren slutar läsa HTML dokumentet när den kommer till script taggen, och börjar då gå igenom koden.

Vi gör ett litet experiment:

Öppna sidan i en webbläsare så får du upp en alert box, men lägg märke till att huvudrubriken inte syns på sidan ännu, utan dyker upp först när du klickar på OK:

Crashkurs i JavaScript ›› Alert test

Alert test

Så det är bättre att placera script taggen precis innan avslutande body taggen så att sidan först visas:

Ännu bättre är dock att skilja på HTML och JavaScript helt och hållet genom att i stället länka till en JavaScript fil. Du lägger då till ett src attribut i script taggen (istället för den välbekanta href som används i ankare):

 


Kommentarer

I stora (även i små) program är det viktigt att kommentera sin kod, så att man kan återkomma till den senare och förstå hur man tänkte.

Det finns två sätt att skriva kommentarer på i JavaScript:


Syntax

Uttryck, dvs. kodstycken, vilka skiljs åt av ett semikolon.

Mellanslag och tab tecken ignoreras av JavaScript tolken, så det är helt okej att skriva på en rad:


Automatiska semikolon

Radbrytningar ignoreras dock inte eftersom det är ett ett osynligt tecken som JavaScript tolken ser och tolkar som att man avslutat raden, och sätter då in ett semikolon åt dig automatiskt, vilket gör att följande två rader tolkas likadant:

Det finns några misstag som man kan göra i fler-radiga uttryck och funktionsanrop, och på grund av utelämnande av semikolon.

Följande kommer inte att fungera:

Det beror på att en tolken anser att första raden är ett fullständig uttryck, och tolkar det som:

Sådana här fel kan vara väldigt svåra att hitta, så gör det till en vana att ALLTID avsluta rader med semikolon!

NOTERA! Du ska aldrig förlita dig på att JavaScript tolken ska sköta insättning av semikolon åt dig utan se till att avsluta dina rader med ett semikolon.


Variabler

Den viktigaste delen i alla programmeringsspråk är variabler. En variabel är helt enkelt en behållare som är namngiven eller namn/värde par. Namnet föregås i JavaScript av nyckelordet var, följt av namnet på själva variabeln.

Namnet kan vara vad som helst, men det får bara innehålla bokstäver, siffror, understreck (_) och dollartecken, men det får inte börja med nummer. Namnet får inte heller vara något av de reserverade orden i javascript (se längre ner):

Du behöver dock inte ange vilken typ de handlar om, dvs. om de är ett tal, en sträng (tecken omslutna av citationstecken, enkla eller dubbla), objekt, etc. JavaScript använder sig av dynamisk typning vilket också betyder att en variabel kan innehålla olika typer vid olika tillfällen. Detta skulle inte fungera i andra programmeringsspråk.

JavaScript är skiftlägeskänsligt, dvs. gör skillnad på stora och små tecken – myVariable är en annan variabel än myvariable. Om du stöter på problem så kontrollera alltid stavningen först 🙂

För att tilldela variabeln ett värde använder man lika med tecken (=).

Du kan tilldela variabeln ett värde direkt:

myVariable innehåller nu en sträng litteral, som är valfritt antal av tecken omslutna av enkla () eller dubbla (), men du kan, om du vill tilldela den en annan typ, i en annan del av skriptet, som ett nummer. Detta skulle, i andra språk utlösa ett undantag (error).

Du kan deklarera flera variabler på samma rad, genom att separera dom med komma:

 


Reserverade ord

Namnet på en variabel får inte vara en av dom reserverade ord som har speciell betydelse i JavaScript. Dom orden är; break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, och with.

Det finns även ett gäng framtida reserverade ord, dvs. ord som kan bli nyckelorden i en framtida revidering av ECMAScript; class, const, enum, export, extends, import, och super. Vissa framtida reserverade ord gäller endast i strikt läge (vi kommer till det senare): implements, interface, let, package, private, protected, public, static, och yield.


Objekt

Ett objekt är namn/värde par och är en fundamental byggsten i JavaScript. Et objekt kan initieras på flera olika sätt men jag går igenom det enklaste här:

Man skapar ett nytt objekt genom att tilldela variabeln värdet av två klammerparenteser och innehåller namn/värde par som är separerade av kolon.

 


 

Array

Objekt är som tidigare sagt namn / värde par, och därför är en array (matris) också ett objekt då den har index och innehåll vilka motsvarar namn / värde respektive:

Exempel:

Så, vad är det för skillnad mellan array och objekt? Jo, array har nummer som index och objekt har strängar som index.

Som alla för objekt i JavaScript, har arrayer egenskaper och metoder du kan använda för att modifiera objektet med.


Array egenskaper

  • constructor Returnerar funktionen som skapade Array objektets prototyp.
  • length Sätter eller returnerar antalet element i en array.
  • prototype Gör att du kan lägga till egenskaper och metoder för att ett Array-objekt.

Array metoder

  • concat() Sammanfogar två eller flera arrayer, och returnerar en kopia av de konkatenerade arrayn.
  • indexOf() Sök i arrayn efter ett element och returnerar dess position.
  • join() Sammanfogar alla element i en array till en sträng.
  • lastIndexOf() Sök arrayn för ett element, börja sök i slutet, och returnerar sin position.
  • pop() Tar bort det sista elementet i en array och returnerar det elementet.
  • push() Lägger till nya element i slutet av en array och returnerar dess nya längd.
  • reverse() Kastar om ordningen på elementen i en array.
  • shift() Tar bort det första elementet i en array och returnerar det elementet
  • slice() Väljer en del av en array och returnerar den nya arrayn.
  • sort() Sorterar elementen i en array.
  • splice() Lägger till / tar bort element från en array.
  • toString() Konverterar en array till en sträng och returnerar resultatet.
  • unshift() Lägger till nya element i början av en array och returnerar den nya längden.
  • valueOf() Returnerar det primitiva värdet av en array.

Math Objektet

Math objektet är ett objekt du ofta kommer ha användning av och har en massa funktioner som kan anropas med punkt notation:

Du kan läsa mer om Math objektet på Mozillas hemsida.


Sträng Objekt

Strängar är Objekt eftersom dom är arrayer av tecken och har därför egenskaper och metoder till ditt förfogande:


Strängegenskaper

  • constructor Returnerar strängens konstruktorfunktion
  • length Returnerar längden av en sträng
  • prototype Gör att du kan lägga till egenskaper och metoder till ett objekt

Strängmetoder

  • charAt() Returnerar tecknet vid den angivna index (position)
  • charCodeAt() Returnerar Unicode för tecknet vid den angivna index
  • concat() Fogar två eller fler strängar och returnerar en ny sammanfogade strängar
  • fromCharCode() Konverterar Unicode-värden till tecken
  • indexOf() Returnerar positionen för den första funna förekomsten av ett bestämt värde i en sträng
  • lastIndexOf() Ger positionen för den sista hittade förekomsten av ett angivet värde i en sträng
  • localeCompare() Jämför två strängar i den aktuella språket
  • match() Söker en sträng för en match mot ett reguljärt uttryck och returnerar matcherna
  • replace() Söker en sträng för ett visst värde, eller ett reguljärt uttryck och returnerar en ny sträng där de angivna värdena ersätts
  • search() Söker en sträng för ett visst värde, eller reguljära uttryck, och returnerar positionen i matchen
  • slice() Extraherar en del av en sträng och returnerar en ny sträng
  • split() Delar en sträng i en array med delsträngar
  • substr() Extraherar tecken från en sträng, med början vid en viss startposition, och genom det angivna antalet tecken
  • substring() Extraherar tecken från en sträng, mellan två angivna index
  • toLocaleLowerCase() Konverterar en sträng till gemener, enligt värdens locale
  • toLocaleUpperCase() Omvandlar en sträng till versaler, enligt värdens locale
  • toLowerCase() Konverterar en sträng till små bokstäver
  • toString() Returnerar värdet av ett String-objekt
  • toUpperCase() Konverterar en sträng till versaler
  • trim() Tar bort mellanslag från båda ändarna av en sträng
  • valueOf() Returnerar det primitiva värdet av en String-objektet

HTML Wrapper Metoder för Strängar

HTML wrapper metoderna tillbaka strängen insvept i lämplig HTML-tagg. Dessa är inte standardmetoder, och kanske inte fungerar som förväntat i alla webbläsare.

  • anchor() Skapar ett ankare
  • big() Visar en sträng med en stor font
  • blink() Visar en blinkande sträng
  • bold() Visar en sträng i fetstil
  • fixed() Visar en sträng med en fast-pitch typsnitt
  • fontcolor() Visar en sträng med en viss färg
  • fontsize() Visar en sträng med en viss storlek
  • italics() Visar en sträng i kursiv stil
  • link() Visar en sträng som en hyperlänk
  • small() Visar en sträng med en liten typsnitt
  • strike() Visar en sträng med en genomstruken
  • sub() Visar en sträng som nedsänkt text
  • sup() Visar en sträng som upphöjd text

Date Objektet

Date är också en användbar objekt och har en massa funktioner:


Jämföra Date Objekt

Man behöver ofta jämföra datum och det fungerar inte riktigt som man kanske tänkt sig:

Så hur ska man jämföra då? Jo man använder en av metoderna som Date objektet har:


Objekt ›› Metoder

En funktion som deklareras i ett objekt kallas för en metod. Det finns olika sätt att lägga till metoder.

Länk till yttre funktioner

Ett sätt är att länka till en yttre funktion. Eftersom det kan finnas många olika objekt som anropar yttre funktioner kan man använda sig av nyckelordet this som refererar till objektet som exekveras:


DOM

DOM som betyder Document Objekt Model. Document delen syftar till webbsidan och Object till det att delarna är objekt (som kan innehålla andra objekt) och Model syftar till hur vi kommunicerar med Document, vad vi kallar dom lika delarna, så det handlar om överenskomna termer för dom olika delarna. DOM låter oss kommunicera med webbsidan, som att:

  • Hämta titeln för sidan och förvara den i en variabel/objekt/array.
  • Hämta den tredje paragrafen och ändra färg till grönt.
  • Hämta alla länkar på sidan och avaktivera dom.
  • Hämta alla oordnade listor och ändra texten till bold.

DOM kan då representeras av ett träd:

JavaScript Crashkurs ›› DOM träd

DOM träd

Men dessa noder innehåller också attribut, text och kommentarer mm. så trädet är aningen mer komplicerad/större:

JavaScript Crashkurs ›› DOM Trädet består av olika noder

DOM Trädet består av olika noder

Varje nod är sin egen. Det finns 12 typer av noder, men vi är (oftast) bara intresserade av tre, det vill säga element, attribut och text;

  • Node.ELEMENT_NODE == 1
  • Node.ATTRIBUTE_NODE == 1
  • Node.TEXT_NODE == 1

Du kan läsa mer om DOM på W3C:s hemsida och på Mozillas hemsida.


Manipulera DOM

Okej, på vilket sätt har vi nytta av det här då? Det finns flera, men den absolut vanligaste är att ”sikta” på id-attribut, och därefter kan vi tilldela resultatet till en variabel/array/objekt:

document refererar till dokumentet som JavaScript exekveras i. getElementById hämtar elementet med id attributet. Därefter kan variabeln användas som ett handtag till elementet. Elementet kan nu också användas för att ”borra” ner eller upp i element trädet.

Du kan också använda klass-attributet för att hämta element:

Resultatet blir ett node objekt som man kommer åt genom index som börjar från noll:

Näst kollar vi på hur man väljer en element-typ:

Resultatet blir en node objekt som fungerar som en array, även om det bara finns ett ankar-element (om ingen finns blir längden på arrayn 0).


setAttribute & getAttribute

Du kan enkelt ändra och hämta värden från attribut som src, href, id, class med flera. Du har till ditt förfogande två metoder setAttribute och getAttribute;

getAttribute

HTML:

JavaScript:

 


setAttribute

För att sätta attribut behöver vi ange två  parametrar; attribut och värde (om attributet inte finns så skapas det):

HTML:

JavaScript:


querySelector

Ett annat sätt är att använda metoden querySelector. Man ska ange ett eller flera CSS-selektorer som argument och dessa kan vara id, class, typ, attribut, värden på attribut, etc. Följande exempel hämtar det första elementet i dokumentet med klassnamnet example:

Vi tar ett till exempel med flera CSS selektorer:

HTML:

JavaScript:


Hämta eller Ändra Innehåll i Element

Du kan hämta eller ändra innehållet i ett element med innerHTML:

HTML:

På ungefär samma sätt hämtar du texten ur ett element, men tilldelar inte elementet något värde utan tilldelar resultatet till en variabel:

HTML:

JavaScript:


Lägg till element

innerHTML är dock inte det rekommenderade sättet att att lägga till innehåll och oftast innehåller element en massa andra element, utan det bästa är att skapa nya text-noder och lägga till i DOM-trädet är att skapa dom, och du kan också skapa nya element-noder och lägga till dom.

För att göra det använder vi oss av createElement, createTextNode och appendChild vilka föregås av document med punkt notation:

Exempel

HTML:

JavaScript:

Resultatet:

HTML:


Smyga in Emellan

Okej, men man nu ville ha det nya elementet emellan dom två existerande li elementen? Då använder vi oss av getElementsByTagName och anger index för vilken av dom vi vill komma åt. Sedan använder vi en annan metod; insertBefore för att lägga in den innan ett element:
HTML:

JavaScript:

…och vi får resultatet:

  • Nummer 1
  • Nummer 2
  • Nummer 3

Event

Vi vill kanske reagera om någon gör en specifik sak på webbsida och göra sidan mer interaktiv. Händelser som sker i webbläsaren kallas för event och vi har en massa av om dom.

Dessa HTML DOM event börjar oftast med on:

  • Musklick onclick
  • Hovra över element onmouseover
  • Sidan laddas klart onload
  • Scrolla på sidan onscroll
  • Lägger fokus på ett input fält i ett formulär onfocus
  • Skicka formulär onsubmit
  • Varje gång användaren klickar på en tangent onkeydown

Och så vidare. Du hittar en komplett lista över alla event på min referens över dom ›› HTML DOM Event som är en översättning av W3C hemsida om HTML DOM event.

När nu dessa event sker så kan man ha funktioner som exekveras, och det finns olika sätt att hantera dom. Vi börjar med att kolla på HTML DOM event:

CSS:

HTML:

JavaScript:

HTML DOM event onclick

DOM event onclick

Resultatet:

Det andra sättet är med punkt notation efter det element som ska lyssna efter eventet och trigga en funktion. Det har följande syntax:

 

Om vi gör om förra exemplet till den formen så ser det ut så här:

HTML:

JavaScript:


 

 

 

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *