Javascript

Grunderna

Uttryck

(eng. expression)

Kod består av ett antal uttryck som tolkas i den ordning de skrivs.

För att datorn ska veta var ett uttryck slutar och nästa börjar används ; (semikolon).

Variabler

En variabel kan ses som ett namngivet värde.

let antal = 4;
						

let antal;
antal = 4;
						

Variabelnamn

Ett variabelnamn får innehålla siffror, bokstäver, understreck och dollartecken.

Ett variabelnamn får inte börja med en siffra.

• resultat
• ettBraNamn
• _special
• x3

Det finns ett antal reserverade ord som inte får användas som variabelnamn.

Reserverade ord

• await
• break
• case
• catch
• class
• const
• continue
• debugger
• default
• delete
• do
• else
• enum
• export
• extends
• finally
• for
• function
• if
• implements
• import
• in
• instanceof
• interface
• let
• new
• package
• private
• protected
• return
• super
• switch
• this
• throw
• try
• typeof
• var
• void
• while
• with
• yield

Datatyper

Alla värden har alltid en datatyp.

Javascript är ett dynamiskt typat språk och man måste inte ange vilken datatyp en variabel ska ha när den deklareras.

Javascript är mjukt typat och kommer försöka konvertera mellan olika datatyper.

Primitiva datatyper

I Javascript finns det 8 primitiva datatyper.
Boolean, Number, String och Object används mycket.
Null, Undefined, BigInt och Symbol används mindre ofta.

Andra datatyper

Det finns fler datatyper som inte är primitiva. De är uppbyggda en eller flera primitiva datatyper.

Exempel på sådana datatyper är array och function.

Operatorer

Exempel på operatorer är +, - och *.

operand

Är det som en operator arbetar med.

unär
(eng. unary)

En operator är unär om den bara har en operand.

binär
(eng. binary)

En operator är binär om den har två operander.

Aritmetiska operatorer

Jämförelseoperatorer

Logiska operatorer

Tilldelningsoperatorer

Förutom den vanliga tilldelningsoperatorn, =, finns det även ett antal operatorer som kombinerar tilldelning och en annan operator.

• +=
• -=
• *=
• /=
• %=
• **=
• <<=
• >>=
• >>>=
• &=
• ^=
• |=

x += 3 är samma sak som x = x + 3

Bitvisa operatorer

Hoppar vi över, för stunden...

• &
• |
• ^
• ~
• <<
• >>
• >>>

...tillsammans med kommaoperatorn och den trinära operatorn.

Kontrollstrukturer

if

if (x > 0) {
  console.log('x är positivt');
}
						

Koden i if-satsen kommer endast att köras om villkoret är sant.

if…else

if (x > 0) {
  // Gör rätt sak
} else {
  // Gör rätt sak
}
						

if…else if…else

if (x > 100) {
  // Gör rätt sak
} else if (x > 50) {
  // Gör rätt sak
} else {
  // Gör rätt sak
}
						

else if kan upprepas flera gånger.

for

Ofta behöver något göras många gånger och då kan man använda en for-loop.

for (let i = 0; i < 100; i++) {
  /* Denna kod körs 100 gånger. */
}
						

Först i parentesen finns en initiering följt av ett villkor och sist ett uttryck för "uppräkning".

for…of

När man en samling och vill tänka
en gång för varje.

for (color of allColors) {
  /* En gång för varje färg. */
}
						

Fler Kontrollstrukturer

Det finns fler kontrollstrukturer...

• switch
• while
• do…while
• for…in
• try…catch

Funktioner

Undvika upprepningar.

Strukturera koden.

Skapa en funktion

function multiply(a, b) {
  return a * b;
}
						

1. Använd nyckelordet function.
2. Ge funktionen ett namn (multiply).
3. Behöver funktionen någon parameter? (a och b).
4. Skriv innehåll funktionens innehåll. return?

Anonyma funktioner

Ibland skapar man i Javascript anonyma funktioner. De har inget namn utan används direkt.

setTimeout(function () {
  console.log('Den anonyma funktionen kördes.');
}, 1000);
						

Det handlar oftast om att fördröja körning av kod.

setTimeout( () => {
  console.log('Den anonyma funktionen kördes.');
}, 1000);
							

Användbar kod

För att webbläsaren ska hinna tolka all HTML och bygga upp DOM behöver man ofta vänta på den.

document.addEventListener("DOMContentLoaded", function () {
	console.log('DOM Ready...')

	// Mer kod som är beroende av DOM.
});
						

Hämta element i DOM.

document.getElementById('id');
document.getElementsByClassName('klass');

document.querySelector('selector');
						

Skapa timers

// Skapa ny timer som kör minSuperFunktion var 500 ms.
let timer = setInterval(minSuperFunktion, 500);

// Stoppa timer
clearInterval(timer);

// Skapa ny timer som kör minSuperFunktion om 1 s.
let timer = setTimeout(minSuperFunktion, 1000);

// Stoppa timer utan att minSuperFunktion körs.
clearTimeout(timer);