QUAD Web Handbook

HTML

Javascript (Js)

Sammankopplande

Resurser

PowerPoints

Hemside-input

Explore

Javascript (Js)

Javascript

Interaktivitet, logik & händelser

Variabel

Såhär skapar man en variabel. Denna variabel har namnet “minVariabel” och har värdet “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

//vanlig text skriver man inom “ “. Tex “min egna text”

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”);

// Syns i den osynliga konsolen ( Högerklicka → inspektera/granska → konsol)

console.log(”min text”) ;

// Textruta, bra för felsökning och för att testa att funktioner körs

alert("Text ruta med 'ok' knapp på")

Koppling till HTML-dokument

// 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;

// innerHTML sätter in faktiskt HTML-kod inuti elementet. Inte bara att det står en text i elementet utan att det läggs in faktisk HTML inuti

theElement.innerHTML = “<h1>Detta blir en riktig rubrik </h1>;

// querySelctor låter dig använda # samt . precis som du gör i CSS

⁠

document.querySelector('.min-klass');⁠

⁠

// Skriv ut texten som står i elementet

theTestFunction(myElementText);

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

theElement.textContent =”my new value”;

// För att lägga till en klass till ett element

var mittElement = document.getElementById("ett-specifikt-element");

// Elementet har nu en ny klass kopplad till sig som heter “en-klass”

mittElement.classList.add(”en-klass”);

// Elementet har nu blivit av med specifikt klassen “en-klass”.

mittElement.classList.remove(”en-klass”);

EventListener

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

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

}

If / Else

// EN lokiskt kontroll

// OM värdet stämmer

// OM textinnehållet är lika med exakt "Rea!"

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

theElement.textContent = "Köp i REAN"

// ANNARS ska följade kod ske

} else {

theElement.textContent = "Rea!"

}

});

For loop

⁠

https://www.w3schools.com/js/js_loop_for.asp⁠

⁠

// 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)

var numberOfTwitterCategories = 5;

// ++ = +1 på en variabel

// Allt som sitter mellan klamrarna / måsvingarna kommer att upprepas flera gånger.

// denna kommer att köras 5 gånger eftersom värdet på numberOfTwitterCategories är 5

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

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

// En kod som sätter ut InnerHTML i ett element

// Eller bara testar med en console-print

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

}

// Try catch.

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