[w3schools är ett fantastiskt ställe...]

8) Javascript

I den här lektionen ska vi titta på Javascript – det programmeringsspråk som våra webbappar använder.

Javascript körs i webbläsaren. Javascript togs först fram för att få mera dynamiska och flexibla webbsidor men används nu också utanför webbläsaren ofta på serversidan.

Den som utvecklar i JavaScript för webbläsaren (gör webbappar) måste hantera ”samtidighet” annars blir det fel. Med samtidighet menar jag att allt händer inte i följd utan saker kan hända parallellt (samtidigt) någon annanstans i koden.

Vi har sett det i koden för imagecp där vi först väntar på att modellen ska laddas klart och sedan gör så att knappen Klassificera kan användas:

async function loadModel() {
   // wait here until model is loaded   
   model = await mobilenet.load({version: 1, alpha: 1.0}); 
   // enable predict button after model is loaded
   document.getElementById("predict").disabled = false; 
   document.getElementById('results').innerHTML='';   
}

Om vi inte hade gjort så hade användaren kunna trycka på knappen Klassificera och köra funktionen predict() innan modellen hade laddats och det hade förstås inte gått bra.

Javascript finns i alla webbläsare. En webbapp ska alltså funka överallt: Platta, smartphone, PC, Mac och på Windows, Mac OS, Linux, Android, iOS.

Namnet Javascript är missvisande. Javascript och Java är två helt olika programmeringsspråk.

Här skulle jag kunnat lägga in en Javascript ’crash course’ men det här inte en programmeringskurs och det är ganska tråkigt att lära sig ett nytt programmeringsspråk utanför sitt sammanhang.

Så därför finns ett par övningar där du kan pröva på lite Javascript.

w3schools är ett fantastiskt ställe där du kan lära dig det mesta om programmering för webben. Ofta interaktivt där du kan ändra i koden och se vad som händer.

Felsökning

Andra ord för felsökning är debugging (på engelska) eller avlusning på svenska.

Om du har ett fel i koden och inte vet vad som händer måste du felsöka.

Ett sätt är lägga till en utskrift i koden av en variabel som du är osäker på - som till exempel 'console.log(predictions)' i imagecp.

Ett annat sätt är att i Javascript-konsolen sätta en brytpunkt så att programmet stannar. Då är det möjligt att se vilka värden olika variabler har. Du kan också stega fram i koden rad för rad för att se vad som händer eller köra till nästa brytpunkt.

Du kan förstås sätta mer än en brytpunkt om du vill.

Se videon nedanför för en enkel demo av debuggern i Javascript-konsolen. Scrolla ner och kör videon i fullskärm så blir det tydligare.

Summering

Den här lektionen handlade ganska ytligt om Javascript.

I nästa lektion får du lära dig att installera en utvecklingsmiljö för webbappar.

Följ lektionen men du behöver inte själv göra installationen. Installationen finns med som en övning för den som är lite nördig.

<< Bakåt Framåt >>