STI Intro lathund

CSS

HTML

Javascript (Js)

Sammankopplande

Resurser

Hemside-input

Explore

Javascript (Js)

Javascript

Interaktivitet, logik & händelser

Att ha koll på och kunna nyttja:

Variabler, skapa + använda funktioner, for-loop, if- / else-sats , try-catch och dokument-interaktion (trycka på knapp från javascripten, läsa av / ändra värdet på ett element).

Variabel

Såhär skapar man en variabel. Denna variabel har namnet “minVariabel” och har värder “32”. Varje gång vi skriver “minVariabel” så kommer datorn förstå att det är samma sak som att skriva 32.

var minVariabel =32;

När man använder sina variabler så räcker det att mans skriver variabelnamnet.

minVariabel

Function

Såhär skapar vi en funktion. Skriver först “function” följst av namnet på funktionen, samt den/de variabler som funktionen ska köras med. De blir inlästa med ett nytt eget namn när funktionen körs och matchas i den ordningen som man lägger in i parentesen när man triggar funktionen ( variabel1, variabel2)

function minFunktion(variabel1, variabel2, variabel3) {

Här i skriver man instruktionerna som ska köras i funktionen

}

/* Såhär skriver man när man ska använda sin funktion. värdet på variablerna sätter man in i ( ). Dessa används sedan av funktionen i samma ordning som de sätts in. /*

minFunktion(”värdet på variabel1”, “värdet på variabel2”, “värder på variabel3”);

// HTML-dokumentet är document

// Från HTML vill vi ha elementet med ID "texten"

var theElement = document.getElementById("texten");

// Vi tar textContent = texten i elementet ovan

var myElementText = theElement.textContent;

// Skriv ut texten som står i elementet

theTestFunction(myElementText);

var theButton = document.getElementById("the-button");

theElement.textContent =”my new value”;

// Sidan lyssnar efter ett tryck och gör en funktion

theButton.addEventListener("click",function(){

// EN lokiskt kontroll

// OM värdet stämmer

// OM textinnehållet är lika med exakt "Hej"

if(theElement.textContent == "Rea!") {

theElement.textContent = "Köp i REAN"

// ANNARS ska följade kod ske

} else {

theElement.textContent = "Rea!"

}

});

// For loop. Upprepa en funktion flera gånger. Tex kör för funktionen samma antal gånger som det finns i skillnaden i antalet “step” med värdet 0 och 5 (alltså 5)

for (let step = 0; step < 5; step++) {

// Runs 5 times, with values of step 0 through 4.

console.log('Walking east one step');

}

// Try catch.

// Fånga upp potentiella fel i koden utan att det stannar upp resten av koden efter.

// I “catch” fångar vi felmeddelandet i variabeln “error” som vi sedan kan använda i tex en console.log

try {

nonExistentFunction();

} catch (error) {

console.error(error);

// expected output: ReferenceError: nonExistentFunction is not defined