Javascript för testare

Många testverktyg förutsätter en viss kunskap av Javascript för att kunna nå sin fulla potential. De flesta kurser i Javascript tar avstamp i Node.js vilket är en omväg för att lära sig Javascript om man är testare och därför mest arbetar med att interagera med serversidan från klientsidan.

Förutsättningar

Dessa övningar kommer att köras i en webbläsare och texteditor, som t.ex. Notepad, Notepad++, Visual Studio Code eller liknande.

Vilken editor som används är i grunden egalt, men man får mer stöd i t.ex. Visual Studio Code än i Notepad.

Omfattning

Det finns några grundläggande saker man behöver förstå för att kunna använda Javascript som testare.

• Allmänt
  • JSON
  • objekt-typer
  • case-sensitiveness
  • Kod-block
• Variabler
  • var, let, const, global
  • Scope
• Funktioner och funktionsanrop
  • Inparametrar
  • Returvärden
  • Try-catch-finally
  • Pekare till funktioner
• Iterationer (=loopar)
  • for-loopar
  • while-loopar
• Selektioner
  • if-else/elsif
  • switch-case
• Trick
  • setInterval
  • setTimeout
  • console.log()
  • alert()
  • klasser
• Att inte göra bort sig
  • Variabelnamnstandard
  • Funktionsnamnstandard

Allmänt om Javascript

Kort historik

Javascript kom till under en hackaton-helg där två personer ville ta fram ett programmeringsspråk för att manipulera innehållet i webbsidor på klientsidan.

Webbsidor bestod på den tiden av HTML-filer, så det var elementen på dessa sidor man ville manipulera.

Programmeringsspråket Java var hett på den här tiden så, utan att det finns någon teknisk koppling mellan Java och Javascript så åkte man snålskjuts på Javas popularitet genom att inkludera Java som en del i namnet.

Sedan dess har Javascript gått igenom många utvecklingssteg för att bli det som vi använder idag.

Javascript på serversidan och klientsidan

Javascript har länge använts på klientsidan och har stöd i alla välspridda webbläsare.

På serversidan finns implementationer som Node.js som innehåller paketdistributionsmekanismer och mycket mer.

Egenheter

Semikolon

Varje kommando i Javascript avslutas med semikolon. Det finns en inbyggd felhantering i Javascript så det händer att det fungerar ändå, men det är en god praxis att vänja sig vid att alltid använda semikolon efter varje kommando.

    console.log('Hejsan javascriptivrare');
            

Kodblock

Olika programmeringsspråk har olika sätt att markera kodrader som hör ihop och ska ses som en sammahållen enhet även om det är flera rader.

Python och YAML använder indrag som markering, medan Javascript har inspirerats av Java, C# och liknande språk och använder måsvingeparenteser.

    function getCurrentDate(){
        var date = new Date();
        console.log(date);
        return date;
    }
            

Notera att i exemplet ovan exekveras alla tre kodraderna i funktionen eftersom de omges av måsvingeparenteser.

Exekveringsordning

Javascript exekveras generellt uppifrån och ner som det står. Det finns dock några undantag, som asynkrona funktioner och callbacks vilket t.ex. kan vara användbart vid parallell exekvering. Det är dock mer vanligt att vi i testsammanhang exekverar tester sekventiellt.

JSON

Den notation som Javascript använder för att beskriva programatiska objekt i textform (serialiserade objekt) har blivit standard för att överföra data och kallas för JSON.

Inbyggt i Javascript finns några grundläggande typer av objekt. Man kan hantera heltal (integer), decimaltal, textsträngar, tecken och boolska (true/false) objekt.

Även komplexa objekt, som t.ex. datum, består i grunden av något av dessa, eller en kombination av dessa.

Skrivformat

De flesta tecken är tillåtna i Javascript. Språket är dock skiftlägeskänsligt, så en variabel som heter hjulantal är t.ex. inte densamma som HjulAntal.

Funktioner

En av grunderna i Javascript är att man kan dela upp sin kod i enkelt förvaltningsbara smådelar som man anropar från andra delar av koden.
Dessa kallas för funktioner och deklareras med ordet function.

Man kan skicka med inparametrar till en funktion, men man måste inte det. Vill man ha med parametrar in gör man det inom parenteser:

    function welcomeMessage(){
        alert "Hello world!";
    }
            

I funktionen ovan skickar vi inte med några inparametrar, det är därför parentesen efter funktionsnamnet är tom. Funtionen visar en popup-ruta med texten Hello world!.

En bra funktion är fristående, återanvändningsbar, och får med sig alla de parametrar den behöver in. Den har också ett namn som gör att man förstår vad den gör.

Vill vi göra denna funktion mer generisk kan vi lägga till en inparameter med den text som ska visas:

    function welcomeMessage(message){
        alert(message);
    }
            

För att använda denna funktion behöver vi anropa den:

    function welcomeMessage(message){
        alert(message);
    }

    welcomeMessage("Hejsan världen!");
    //Öppnar en popup med texten 'Hejsan världen!'
            

Notera att även om scriptet läses uppifrån och ner så registreras bara funktionen, men den kommer inte att användas innan den anropas.

Övningar för funktioner

I denna övning ska vi skapa vår första funktion. Först måste vi dock se till att vi har en grund.

1. Skapa en ny katalog som du kallar för Övningar
2. Ladda ner följande HTML-fil och lägg in i katalogen du skapade
3. Ladda ner följande tomma Javascript-fil och lägg även den i katalogen du skapade
4. Öppna nu filen som heter exercise1.js i en valfri texteditor och klistra in följande text i den:

                       
       function init(){
           alert("Hej!");
       }
                   

5. Spara excercise1.js-filen och öppna därefter filen exercise1.html

I HTML-filen finns en referens på body-tagen som heter onload. Denna anger vilken metod som ska köras när sidan är laddad. I vårt fall är det funktionen init() som står angiven så det som händer i din javascript-funktion med namnet init är det som händer så fort sidan är laddad.

I vårt fall handlar det om att det ska dyka upp en popup av typen alert med texten Hej! i sig.

Variabler

Variabler är väsentliga för vilket programmeringsspråk som helst.

Man kan tänka på variabler som en låda man kan lägga saker i.
Man kan t.ex. ha en låda märkt Ordernummer, och där kan man tänka sig att man lägger i en lapp med ett ordernummer på.

När man pratar om variabler bör vi också nämna konstanter. Variabler är som lådor där man kan ändra innehållet, medan konstanter är som lådor man lägger i något i en gång och sedan inte kan ändra det.

Variabler kan vara mer eller mindre komplexa. En variabel som heter var familyName = "Damberg"; har ett enkelt strängvärde, men ska man t.ex. låta en variabel vara en personuppgift med adress, telefonuppgifter, namn och så vidare så blir det en mer komplicerad struktur.

    var testPerson = {
        name: "Guran",
        familyName: "Lanister",
        addressList: [
            {
                addressType: "Work address",
                streetAddress: "Storgatan 15",
                postalCode: "111 15",
                city: "Stockholm"
            },
            {
                addressType: "Home address",
                streetAddress: "Lillgatan 5",
                postalCode: "182 43",
                city: "Sundbyberg"
            }
        ],
        phoneNumbers: [
            {
                numberType: "Personal mobile",
                number: "+467632523"
            },
            {
                numberType: "Work",
                number: "+46812345677"
            }
        ],
        emailAddresses: [
            emailAddress: "no.no@no.no",
            verified: true
        ] 
    }
            

Den som har sett JSON-formatterat data förr känner ingen syntaxen för sammansatta variabler.

Tilldelningar: Likamedtecken och kolon

I variabeldeklarationen ovan finns både likamedtecken och kolon för tilldelning vilket kan vara ganska förvirrande.
Det beror på att man skiljer på variabler och och objekt-fält. I detta fall deklarerar vi en variabel som har namnet testPerson och likamedtecknet används för att tilldela denna variabel ett objekt.
Tilldelning sker med likamedtecknet.
Objektet i sig har olika namngivna fält och värden som tilldelas dessa fält sätts med kolon.

Om du är mer nyfiken på variabler, googla gärna skillnader på var, let och const samt hur en variabels scope påverkar var den finns nåbar.

Selektioner - Om detta, så gör detta

Det är mycket vanligt att man vill styra programexekveringen till olika kommandosekvenser beroende på någonting.

Denna mekanism kallas för en selektion. I de flesta programmeringsspråk görs detta på snarlikt sätt - med en så kallad if-sats.

    if(personAge == 20){
        welcomePhrase = "Välkommen till Systembolagets shoppingsidor, kära nya kund!";
    } else if(personAge < 20){
        welcomePhrase = "Välkommen till ANT-informationen.";
    } else {
        welcomePhrase = "Tips till kräftskivan";
    }
            

I kodstycket ovan avgränsas olika kodblock av måsvingeparenteser, alltså {}.

Jämförelser: Dubbla (eller trippla) likhetstecken

Man använder ofta variabler för att kunna göra jämförelser eller återanvända värden. Jämförelser görs i Javascript med dubbla eller trippla likamedtecken.

Det finns tillfällen då man vill använda tre likamedtecken i rad. I Javascript betyder det att man jämför värden OCH värdets typ.

Jämförelse-operander

Logiska operander

Det går också att ha flera jämförelser på rad med hjälp av logiska operander (AND, OR).

Exempel:

    if(applicant.age >= 18 && applicant.type == "local"){
        approveApplicant(applicant);
    }

    if(applicant.age >= 65 || applicant.grantStatus == "withdrawn"){
        removeApplicant(applicant);
    }
            

Övning med variabler och selectioner

1. Öppna filen excercise2.html i en webbläsare.
2. Studera källkoden på denna sida. Förstår du vad koden gör? Det är en del HTML-kod, men också en del Javascript-kod.
3. Editera nu koden så att den skriver ut Tjohoo! när du skriver in ditt eget namn.

Tips

• Ett tips är att det behövs en ny if-sats, och kanske en ny variabel.
• Var noga med likamedtecknena, semikolon och måsvingeparenteser.