STI Frontend

HTML

Javascript (Js)

Sammankopplande

Resurser

Explore

Javascript (Js)

Javascript

Interaktivitet, logik & händelser

/ *____________ Tentastress ____________ */

Kunskap:

Känna igen / förstå hur de används:

Variabel, Funktion, Event-händelse (eventListener), If / else (om något stämmer) och 1 variant av loop (for-loop) (Koden utförs flera gånger. X antal gånger).

Veta vad en variabeln (var) och funktion (något som genomför en förändring eller en relation mellan 2 saker) är.

Se hur variablerna defineras i ( ) av funktionen.

Veta att en funktion kan definera sina egna variabel-namn inuti sina ( ) .

Kunna veta hur man importerar in Javscripten i HTML-dokumentet.

Känna till grunderna i Javascript-syntax ((GRAMMATIKEN I javascript)).

Tex Öppning och stängning med ( ) { } ;

I vilken ordning koden blir läst. Att man ej använder “ - “ i namn på variabler och funktioner.

Skilja mellan att använda en/flera variabel eller ren text i javascripten ihop. Tex:

console.log(minVariabel + “en annan text”);

Egen färdighet att skapa & ändra:

Kunna fylla i befintlig kod:

En in-kopierad if ( ) / else-regel , eventlistener (”click”) samt en inkopierad loop.

På egen hand:

Skapa en funktion med ett specifikt namn på funktionen.

Faktiskt se till att koden använder/kör just den funktionen.

Skapa en variabel med ett specifikt namn och ett satt värde.

Faktiskt se till att koden använder just den variabeln.

Kunna ändra värdet på den variabeln.

Nå ett element på sidan och ändra värdet i det.

Kunna printa ut i console.log().

/ *____________________________

_____________________________

____________________________

SLUT PÅ målen

____________________________

____________________________ */

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

}