Filip Tammergård
Filip Tammergård
kontakta mig

Vad är Javascript?

Javascript är en av webbens tre grundläggande byggstenar tillsammans med HTML och CSS. Om HTML utgör strukturen och CSS designen, kan man säga att Javascript utgör funktionaliteten på internets webbsidor. Numera kan enkla animationer åstadkommas med hjälp av CSS, men generellt är det Javascript som möjliggör allt som "händer" på en webbsida. Exempel på saker som händer kan vara att någonting ändras när man klickar på en knapp, att ett formulär visar att jag har fyllt i mitt personnummer i fel format, eller att någonting rör på sig eller ändras på hemsidan.

En vanlig missuppfattning är att Java och Javascript är samma sak, vilket inte stämmer. Båda är programmeringsspråk, men de är relativt väsensskilda vad gäller hur de används.

Vad kan du göra med Javascript?

Ett vanligt användningsområde för Javascript är att bestämma vad som ska hända när en användare interagerar på olika sätt på en webbsida. Det kallas för att använda "eventlyssnare" (eng. event listeners). Exempelvis går det att lyssna efter att en användare skrollar, klickar på ENTER-tangenten eller börjar fylla i ett formulär, och bestämma vad som ska hända när lyssnaren hör dessa saker.

Javascript kan också användas för att anropa API:er (se exempelvis blogginlägget Vad är ett API?), för att hantera logik med loopar och if-satser, för att utföra beräkningar och mycket annat. Det mesta går att göra med Javascript på ett eller annat sätt.


Här följer några exempel på hur Javascript kan användas för att reagera på en användares interaktion:

Webbläsarfönstrets bredd är just nu pixlar. Testa att ändra storleken på webbläsarfönstret! Om du använder mobil kan du testa att växla mellan porträttläge och landskapsläge.

Testa att trycka på lite olika tangenter (om du använder mobil kan du klicka i input-fältet nedan för att få fram ett tangentbord). Den senaste tangenten som trycktes är:  


Du har klickat gånger.

Testa att skriva in din ålder i input-fältet nedan. Notera vad som händer när du tar bort din ålder från rutan igen.


Hur använder du Javascript?

För att kunna använda Javascript är det bra att först ha en grundläggande förståelse för hur HTML fungerar, vilket du kan få i blogginlägget Vad är HTML?.

Något av det allra mest grundläggande i Javascript är användningen av variabler. Om siffran 25 ska sparas i variabeln age kan man skriva så här:

var age = 25;

Om en text ska sparas i en variabel används citationstecken kring texten, så här:

var name = "Filip Tammergård";

Varje uttryck i Javascript avslutas med semikolon.


Eventlyssnare kan skapas genom funktionen addEventListener(). Alla funktioner i Javascript avslutas med parenteser, och inom parenteserna skrivs de inparametrar som funktionen behöver. Funktionen addEventListener behöver veta två saker, dels vad som ska lyssnas efter och dels vad som ska hända när det som lyssnas efter sker. Så här kan det beskrivas:

element.addEventListener(event, function);

Den första delen element beskriver vad lyssnaren ska appliceras på. Det kan exempelvis handla om att man vill lyssna efter att någon klickar på en viss knapp. I det fallet är knappen "element". För att lyssna på ändringar i webbläsarfönstrets bredd, som gjordes ovan, gör man så här:

window.addEventListener("resize", 
showChangedWindowSize);

Window är ett objekt i Javascript som innehåller all information om webbläsarfönstret. Här skapas en lyssnare på window-objektet, och vi väljer att specifikt lyssna efter ändring i fönsterstorlek. Den andra inparametern, showChangedWindowSize, är ett namn på en ny funktion som ska ange vad som ska hända när fönstrets storlek har ändrats. Funktionen showChangedWindowSize kommer alltså att anropas varje gång fönsterstorleken ändras. En ny funktion kan definieras så här:

function showChangedWindowSize() {
 console.log(window.innerWidth);
}

Först skrivs nyckelordet function, som anger att en ny funktion är på väg att definieras. Sedan kommer funktionsnamnet, som i det här fallet är showChangedWindowSize, och efter funktionsnamnet kommer parenteser. Parentesen är tom, eftersom funktionen inte behöver några inparametrar. Funktionen öppnas sedan upp och stängs med hjälp av måsvingar {}. Koden som finns mellan måsvingarna utgör funktionens innehåll. I det här fallet används funktionen console.log() som loggar det som finns inom parentesen. Om du använder webbläsaren Chrome på en dator kan du testa att högerklicka var som helst på den här sidan, klicka på Inspektera och sedan ändra bredden på webbläsarfönstret, så kommer bredden i pixlar skrivas ut i området som har titeln Console i rutan som kom upp när du klickade på Inspektera.

Att logga är enkelt, men det bidrar inte direkt till interaktivitet med vanliga användare. För att i stället skriva ut bredden någonstans på webbsidan kan man använda funktionen document.querySelector() för att "greppa tag" i exempelvis ett paragraf-element (se Vad är HTML?) och infoga text i det elementet. Funktionen document.querySelector behöver en inparameter, nämligen beskrivning kring vilket element som ska greppas tag i.

 

Beskrivningen anges med hjälp av en CSS-selector, exempelvis en klass (se Vad är CSS?). Vi tar ett nytt exempel så blir det förhoppningsvis lite tydligare.

Anta att vi har den här HTML-koden:

<p class="mouse-position"></p>


Alltså ett tomt element med en klass för att kunna komma åt elementet i Javascript-koden.

I Javascript-koden kan vi då skriva så här:

window.addEventListener("mousemove"
showChangedMousePosition);
var mousePosition = 
document.querySelector(".mouse-position");

function showChangedMousePosition() {
    mousePosition.innerHTML = 
"Muspekaren befinner sig "
+ window.event.pageX 
+
" pixlar från vänsterkanten och " 
+ window.
event.pageY
+
" pixlar från den övre kanten.";
}


Först och främst skapas en eventlyssnare som lyssnar efter muspekarrörelser med hjälp av nyckelordet "mousemove". I nästa kodrad greppas paragraf-elementet tag i genom att ange att vi vill få tag i första elementet som har klassen mouse-position och elementet sparas i variablen mousePosition. Vid varje muspekarrörelse anropas funktionen showChangedMousePosition. I den funktionen används variabeln mousePosition och med tillägget .innerHTML anges att man önskar att ändra HTML-koden i paragrafen. Man kan se det som att innehållet ändras mellan start- och sluttaggen i paragraf-elementet som för tillfället är tomt. mousePosition.innerHTML sätts till en mix av text och siffror som kan sammanfogas med hjälp av plus-tecknet. window.event.pageX och window.event.pageY innehåller data för muspekarens nuvarande position i förhållande till webbsidans vänsterkant respektive övre kant. Testa att röra på muspekaren (eller klicka på olika delar av skärmen om du använder mobil). Detta blir resultatet:

 

Något annat som kan bidra till interaktivitet är att göra någonting med text som en användare skriver in. För att göra det kan ett input-element skapas i HTML-koden så här:

<input class="text-input" 
placeholder="Skriv någonting här...">


För att komma åt elementet i Javascript-koden kan du som vanligt skriva så här:

var textInput = 
document.querySelector(".text-input");


Om vi av någon anledning får för oss att vi vill skriva ut texten som använder har skrivit baklänges kan vi göra det genom att först skapa en eventlyssnare som lyssnar efter input i inputelementet så här:

textInput.addEventListener("input", 
showReversedText);


Vid varje nytt input i inputelementet kommer funktionen showReversedText att anropas. Även en paragraf där baklänges-texten ska skrivas ut behöver kunna kommas åt, så vi gör på samma sätt som vanligt med ett paragraf-element i HTML-koden:

<p class="reversed-text"></p>


Och i Javascript-koden kommer vi åt elementet så här:

var reversedTextElement = 
document.querySelector(".reversed-text");


Funktionaliteten att skriva ut text baklänges kan åstadkommas så här:

function showReversedText(event) {
    var text = event.target.value;
    var reversedText = 
text.split("").reverse().join("");
    reversedTextElement.innerHTML = 
reversedText;
}

Notera att vi här anger en inparameter, trots att vi inte gjorde det vid eventlyssnaren. Det som händer då är att vi får tillgång till ett event-objekt där en stor mängd information kring vad som händer i inputrutan finns att tillgå. Vi sparar sedan texten som har skrivits in i variabeln "text" genom att sätta den till event.target.value. Därefter används existerande Javascript-funktionalitet till att först separera bokstäverna i texten, reversera och sedan foga samman texten igen. Slutligen skrivs resultatet ut i paragraf-elementet. Detta är resultatet:

 

Det finns nästintill oändliga möjligheter med Javascript, och därför är det jag har gått igenom här självklart bara en bråkdel av vad som kan åstadkommas. Men det är trots allt lite av den mest grundläggande funktionaliteten som ofta används.

På Exsitec gör vi webbapplikationer till våra kunder, som i botten fungerar som vanliga hemsidor och därför använder vi bland annat Javascript när vi bygger dem. Vi använder egentligen ett så kallat "superset" av Javascript som kallas för Typescript och vi gör det inom ett ramverk som heter Angular. Men mer om de verktygen en annan gång.

Hör av dig till oss om du har ett behov av en webbapplikation!

Mer om webbapplikationer

Kontakta skribenten
Filip Tammergård
Filip Tammergård