Logotyp för Björns studiewebb

Språket (JS)

Innehåll

På denna sida beskrivs syntax för JavaScript, d.v.s. regler för hur man skriver JavaScript-kod samt använder variabler, datatyper, programkonstruktioner (selektion, loopar, m.m.), m.m..

JavaScript som språk påminner mycket om C/C++, C# och Java. Många av de operatorer som finns i C/C++/C#/Java är de samma som i JavaScript. Så kan du C#, C/C++, C# eller Java så är du på god väg mot att förstå språket JavaScript. (Hur man använder JavaScript är en annan sak...)

Kommentarer

Kommentarer är mycket användbara för att förklara kod så att man vid ett senare tillfälle (eller någon annan än skaparen) kan förstå vad kodens uppgift är. Kommentarer kommer användas flitigt i denna introduktion till JavaScript för att förklara vad som sker i exempel.

Kommentarer kan vara enradiga eller flerradiga. En enradig kommentar börjar med dubbla snedsteck (//) och allt till höger om snedstrecken på raden kommer betraktas som en kommentar. En flerradig kommentar påbörjas med ett snedstreck och en asterisk (/*) samt avslutas med en asterisk och snedstreck (*/). Allt mellan de öppnande och avslutande kommentartecken kommer betraktas som en kommentar.

//En enradig kommentar
/* En fler-
   radig kommentar */
/*
  alert('Hello world!');  //"Bortkommenterad" kod
*/

Den flerradiga kommentaren kan även användas för att "kommentera bort" en eller flera rader med kod som i det tredje exemplet ovan.

Satser

En sats är en av de mest grundläggande delarna av programmering. Att addera två tal och spara dem i en variabel eller att anropa en funktion är exempel på satser. Vanligen brukar man skriva en sats per rad. Satser avslutas i JavaScript med ett semikolon (;). I exempel nedan visas på två satser.

var min_variabel = 1 + 2;         //sats 1
min_variabel = min_variabel / 3;  //sats 2

Satser man vill ska exekvera som ett s.k. block, d.v.s. som "en sats", innesluts mellan "vågiga hakparenteser" ({ och }). Block används bl.a. när man utför villkorssatser (om dessa längre fram). Efter ett block utelämnas (oftast?) semikolon. Exempel nedan visar på ett block (se även nedan).

{
  var min_pi = 3.14;
  var r = 1;
  var area = min_pi * r * r;
}

Semikolon kan ibland utelämnas, men jag rekommenderar emot det!

Datatyper och variabler

Variabler i JavaScript är vad man kallar "löst/svagt typade" (eng. weakly-typed), d.v.s. man behöver inte ange datatyp för variablerna (som i många andra programmeringsspråk). Variabler behöver inte heller deklareras innan de används, vilket dock rekommenderas. För att deklarera en variabel använder man sig av det reserverade ordet var, som dock inte är obligatoriskt, samt tilldelar variabel ett initialt värde. Genom att använda det reserverade ordet var så blir deklarationer av variabler tydligare samt man undviken en del problem (se nedan).

Variabler kan vara av datatyperna:

var min_variabel = 1;  //innehåller heltalet 1
var minvariabel = "1"; //innehåller strängen 1 

Operatorer

Operatorer används för att bl.a. utföra beräkningar med tal samt för att jämföra olika värden.

Aritmetiska

De fyra räknesätten: + (addition), - (subtraktion), * (multiplikation) och / (division).

1 + 2;
3 - 1;
2 * 3;
9 / 3;

Tilldelning

Tilldelning sker med likhetstecknet (=).

var min_pi = 3.14;

Upp- och nedräkning

Precis som i C/C++ (samt C# och Java) så kan man använda operatorerna ++ för att öka en variabels värde med 1 och -- för att minska variabelns värde med 1.

i = 1; //tilldela 1 till variabeln i
i++;   //öka variabeln i med 1, d.v.s. i är nu 2
i--;   //minska variabeln i med 1, d.v.s. i är nu 1.

Jämförelse

'a' < 'b'   //sant
1 > 2       //falskt
2 * 3 == 6  //sant
4 / 2 != 4  //falskt

Logiska

var vinter = true;
var sommar = false;
!vinter           //falskt
vinter || sommar  //sant
vinter && sommar  //falskt

Villkorssatser

Villkorssatser används för att testa villkor och, beroende på resultatet av villkor, så kan olika programsatser utföras. T.ex. kan man testa om en besökare av en hemsida (med JavaScript-kod) klickade på Ja eller Nej i en dialogruta.

Det finns två typer av villkorssatser i JavaScript: if och case. If-satser används oftast då man man har få alternativ att välja på och case-satser då man har ett större antal alternativ.

If-satser

If-satser kommer i två versioner: den (vanligare) som kan ha fler än två alternativ och den som endast kan hantera två alternativ. Vi börjar med den "större" varianten.

if(villkor)

I sin enklaste form så kan if-satser användas för att avgöra om satser ska utföras eller inte, d.v.s. om villkor är sant utförs satser. Vi kan även ha en s.k. else-sats om vi vill göra olika saker beroende på om villkor är sant respektive falskt. Else-block kan även innehålla en ny if-sats, men man brukar ändå skriva som i exempel 3 nedan.

if( villkor ) { 
  satser 
}
if( villkor ) { 
  satser 
}
else { 
  satser 
}
if( villkor1 ) { 
  satser 
}
else if( villkor2 ) { 
  satser 
}
else { 
  satser 
}

Observera att man inte skriver ett semikolon efter blocken (hakparenteserna)! Däremot bör alla satser i respektive block avslutas med semikolon.

Om block endast innehåller en sats så kan man utelämna hakparenteserna, d.v.s. följande form för if-sats är också korrekt.

if( villkor1 )
  sats;
else
  sats;

Nedan visas två varianter på if-sats med else-block, d.v.s. vi testar om variabeln min_var multiplicerat med två blir sex.

var min_var = 3;
if( min_var * 2 == 6) {
  min_text = "Villkoret var sant";
}
else {
  min_text = "Villkoret var falskt";
}
if( min_var * 2 == 6)
  min_text = "Villkoret var sant";
else
  min_text = "Villkoret var falskt";

villkor ? om_sant : om_falskt

Den "mindre" varianten ser ut enligt nedan och skrivs oftast på en rad.

(villkor) ? värde om sant : värde om falskt

Exempel ovan med if-sats ovavn kan skrivas om enligt nedan.

min_text = (min_var*2 == 6) ? "Villkoret är sant" : "Villkoret är falskt";

Exempel 2.1 - If-satser

Case-satser

Case-satser används som sagt då man har ett större antal alternativ att välja från. Formen (syntaxen) för case-satser är följande.

switch(uttryck)
{
  case värde1:
    satser;
    break;
  case värde2:
    satser;
    break;
  default:
    satser;
}

När vi använder case-satser så använder vi inte block (hakparenteser), utan vi avslutar "block" genom att skriva break;. Skälet till detta är att vi skulle kunna ha två värden (för uttryck) som skulle kunna göra samma sak. D.v.s. nedanstående form av case-sats är tillåten, d.v.s värde1 och värde2 kommer innebär att samma satser utförs.

switch(uttryck)
{
  case värde1:
  case värde2:
    satser;
    break;
  case värde3:
    satser;
    break;
  default:
    satser;
}

Observera att ett vanligt fel när man använder case-satser är att man glömmer satsen break;! Gör man det kommer efterföljande alternativ (case) att utföras tills en break-sats påträffas.

Exempel med if-satser ovan kan skrivas om (något "krystat") enligt följande.

switch(min_var * 2)
{
  case 6:
    min_text = "Villkoret var sant"
    break;
  default:
    min_text = "Villkoret var falskt"
}

Exempel 2.2 - Case-satser

Loopar

Loopar (iterationer) används för att utföra en eller flera satser ett visst antal gånger eller tills ett visst villkor är uppfyllt. I JavaScript finns det tre typer av loopar: for, while och do...while. Syntaxen för looparna är enligt nedan.

for

For-loopen används (oftast) då man vill loopa ett visst antal gånger. Man använder sig av en räknare för att avgöra om loopen ska avbrytas.

I for-loopar så börjar man med att tilldela ett startvärde till räknaren (i = 0). Sen anger man det värde som räknaren för uppnå innan loopen avbryts (i < 10). Och sist anger man hur räknaren ska ökas på (i++ i exemplet).

var i;
for(i = 0; i < 10; i++)
{
  satser;
}

Genom att utelämna de tre satserna (som det faktiskt är) i for-loopens parentes så skapar man en oändlig loop, d.v.s. en loop som sker tills den avbryts på något annat sätt. Längre ner förklaras hur man kan avbryta loopar.

while

While-loopen loopar så länge som ett villkor är sant.

Med while-loopar så anger man ett villkor först som anger hur länge loopen ska utföras. Så länge villkoret är sant så kommer loppen att utföras. Eftersom villkoret skrivs först så kan det tänkas att loopen aldrig utför om villkoret är falskt från början.

while( villkor )
{
  satser;
}

do...while

Do...while-loopen fungerar som while-loopen men med den skillnaden att den alltid genomförs minst en gång då villkoret testas först efter att loopen genomförts.

do
{
  satser
} while( villkor );

Avbryta loop med break och continue

Om man vill avbryta en loop då ett villkor, annat än det för loopen, har skett så kan man använda det reserverade ordet break. Loopen kommer då avbrytas i förtid och exekveringen kommer fortsätta med första satsen efter loopen.

for(i = 0; i < 10; i++)
{
  //satser
  if(i / 5 == 1)  //om talet jämt delbart med 5...
    break;        //... avbryt loop
  //satser
}

Vill man inte vara så "drastisk", d.v.s. man vill bara avbryta just det "varvet" i loopen, använder man det reserverade ordet continue. D.v.s. resten av satserna i loopen skippas och man fortsätter exekveringen vid första satsen i loopen. Givetvis efter att ha undersökt att loopens eventuella villkor är sant.

while(i < 10)
{
  //satser
  if(i % 2 == 0)  //om talet jämt delbart med 2
    continue;     //... fortsätt med nästa loop
  //satser som exekverar om if-sats ger falskt
}

Exempel 2.3 - Loopar

Det finns även något som kallas etiketter (eng. label) som kan användas för att att "hoppa" till vid exekvering. Det rekommenderas (jag rekommenderar) inte att man använder dessa då det gör koden svårare att läsa (kan finnas en anledning att språket BASIC - inte Visual Basic - har förlorat i betydelse...:-)). 

Vektorer (arrays)

När man har flera värden man vill spara, kanske ett okänt antal, så är det inte vidare praktiskt att skapa en (enkel) variabel för varje värde. Man kan då använda sig av en s.k. vektor (eng. array). En vektor kan sägas vara ett (variabel-)namn som refererar till flera värden. Värden lagras i vektorn på fasta positioner (kallat index) som kan vara från noll (0) till storleken på vektorn minus ett. D.v.s. vektor i JavaScript är vad man kallar nollbaserad.

En vektor är egentligen ett objekt av klassen Array men behandlas här då vektorer brukar klassas som en del av programmeringsspråk (mer om objekt senare). I motsats till de flesta andra språk så behöver man inte, i JavaScript, ange storleken på vektorer när de skapas.

För att använda en vektor måste man först skapa objektet den och för att skapa en vektor (av obestämd storlek) så skriver man enligt nedan.

var enVektor = new Array;

Om man vet hur många positioner man vill ha i vektor så skriver man enligt nedan. I exempel skapas en vektor med 20 positioner,

var enVektor = new Array(20);

För att lägga till (placera) ett värde i vektorn så anger man index för den position man vill lagra värdet på. Man säger att man "indexerar" i vektorn och man använder då "fyrkantsparenteser" ([ och ]).

enVektor1[0] = "Första position"; //Lagra på pos. 1
var str = enVektor[0];      //Hämta värde på pos. 1

Vektorer kan även skapas och tilldelas ursprungliga värden samtidigt. Då skriver man de ursprungliga värdena inom parentes efter ordet Array.

  //Ex.1: Skapa vektorobjektet av okänd storlek
var enVektor1 = new Array;
enVektor1[0] = "Första position"; //Lagra på pos. 1
enVektor1[1] = "Andra position";  //Lagra på pos. 2
enVektor1[99] = "99:e position";  //Position 100
  //Ex.2: Skapa vektorobjektet av storlek 20
var enVektor2 = new Array(20);
enVektor2[0] = "Första position"; //Lagra på pos. 1
enVektor2[1] = "Andra position";  //Lagra på pos. 2
enVektor2[19] = "20:e position";  //Lagra pos. 20
  //Ex.3: Skapa vektor och ange värden samtidigt
var enVektor3 = new Array("Första", "Andra");

Exempel 2.4 - Vektorer

Funktioner

En funktion är en samling av satser som kan "refereras till" med ett namn. Funktionerer används också för att bryta ut kod som används på flera ställen i ett program (eller JavaScript). För att anropa funktionen i ett JavaScript så skriver man helt enkelt namnet på funktionen (följt av parenteser med eventuella argument).

För att skapa en funktion så använder man följande syntax:

function funktionsnamn(parameter1, parameter2, ...)
{
  //satser
}

För att anropa (utföra) funktionen så skriver funktionens namn följt av argument (värden), som ska skickas till funktion, inom parenteser (enligt nedan).

funktionsnamn(argument1, argument2, ...);

Funktionen ovan returnerar inget resultat (och är, vad som i vissa programmeringsspråk kallas för en procedur). Om man vill ha tillbaka ett resultat från en funktion (d.v.s. den ska fungera som, vad som kallas, en funktion) så använder man sig av det reserverade return för att returnera ett resultat från funktionen.

Observera, kära kunniga programmerare, att man inte skriver någon typ för returvärdet i funktionens signatur! :-) Kom ihåg, språket är otypat.

function funktionsnamn(parameter1, parameter2, ...)
{
  //satser
  return returvärde;
}

Genom att returnera ett värde så avbryts exekveringen av funktionen. Man kan m.a.o. använda det reserverade ordet return utan ett returvärde för att avbryta en funktions exekvering (utan att returnera ett resultat). För att ta vara på (fånga upp) ett returvärde från en funktion skriver man enligt nedan.

var min_var = funktionsnamn(arg1, arg2, ...);

Funktioner bör deklareras (skrivas) inom HTML-dokumentets HEAD-tagg, d.v.s. i början på dokumentet, eller länkas in i ett externt dokument så att de finns tillgängliga för hela dokumentet. (Externa dokument rekommenderas.)

Nedan deklareras en funktion addera som, just, adderar två tal som skickas som argument till funktionen. Funktionen anropas sen och tilldelar resultatet (returvärdet) till en variabel.

function addera(tal1, tal2) {
  return tal1 + tal2;
}

var summa = addera(1, 2);  //Anropa funktionen

Exempel 2.5 - Funktioner

Inbyggda funktioner

JavaScript har ett antal "fördefinerade" funktioner som alltid finns tillgängliga. Bland annat följande:

Om strängen som skickas till ovanstående funktioner inte innehåller ett tal så returneras ett värde kallat NaN (Not-a-Number).

För att isNaN(värde) ska returnerar sant så måste värde börja på en siffra. Om värde börjar på ett annat tecken så returnerar funktionen falskt.

Exempel 2.6 - Inbyggda funktioner

Räckvidd på variabler

Variabler kan deklareras var som helst i SCRIPT-taggar. Men det rekommenderas i de flesta programmeringsspråk att variabler deklareras i början av kod.

Om en variabel deklareras utanför alla block kommer att vara, vad man kallar, global. En global variabel kan nås från var som helst i skriptkod (som finns efter den rad som variabeln har deklarerats på). Om en variabel istället deklareras (med det reserverade ordet var) i ett block (t.ex. en funktion), så kommer variabeln endast vara giltig inom blocket (funktionen). Räckvidden för variabeln sägs vara lokal för blocket (funktionen).

Ett skäl till att alltid använda det reserverade ordet "var" när man deklarerar en variabeln är för att undvika eventuella missförstånd. T.ex om man vill använda en variabel i ett block, och det finns en global variabel med samma namn, så måste man använda det reserverade ordet var när man deklarerar den lokala variabeln. Om inte så kan den globala variabeln ändras av misstag vid en eventuell tilldelning till variabel inom blocket.

Det här med globala variabler och hur de fungerar i JavaScript kan vara mycket förvirrande för oss som programmerar i "vanliga" programmeringsspråk så som Java och VB.NET!

Exempel 2.7 - Variablers räckvidd

Till början på sida

Referenser

Nedan finns några webbsidor/-platser med mer information om ämnet på denna webbsida.