Webbutvecklingsdagbok (Webbutveckling, 120 hp)

Dag 3 av 759 (Kurser: Datateknik GR (A), Webbutveckling I, 7,5 hp & Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp) | Jag börjar förstå rekursiva funktioner bättre!

Detta läromedel (2018) hade jag påbörjat cirka en vecka innan jag skapade denna tråd och jag fastnade på rekursiva funktioner:

Jag hakade upp mig på att variablerna history och current inte hade tilldelats några värden ännu.

Men så upptäckte jag att det är ju

return find(1, "1");

som skickar argumenten 1, "1" till current respektive history och sedan "loopar" den igenom find(current, history)-funktionen för att se om den kan i findSolution(n)-funktionen kan hitta antalet faktorer av 3 eller termer av 5 som leder till värdet av n, annars returneras null.

Sedan insåg jag att den inre funktionen först definieras innan den anropas av den ovanstående koden som är en del av den yttre funktionen. Jag kollade enbart inuti den inre funktionen och fattade inget först varifrån den fick sina argument.

Jag försökte då på mig en lättare rekursiv funktion för att förstå hur en funktion går in i sig själv flera gånger som "inception". Jag gjorde en multiplikationsfunktion som adderar rekursivt (fjärde function uppifrån i bilden nedan). Den kan till och med multiplicera med 0 vilket blir 0!

Den som vill får gärna ge mig en annan matematisk rekursiv kodutmaning som använder kanske en funktion inuti en annan funktion samt en eller flera if-satser för att kontrollera när den skall stanna rekursionen för att den hittat rätt eller bara returna null!

I index.html-koden så försökte jag slänga in JS-kod som skapade en paragraf med en sträng:

<script>
	let GetHTMLID = document.getElementById('FirstPAnchor');
	GetHTMLID.appendChild('p');
	GetHTMLID.innerText('Jag har skapat en paragraf med en sträng');
</script>

Men den skapade aldrig den. Tanken var att den skulle skapas precis under paragrafen som har id="FirstPAnchor" som redan används för att komma högst upp på sidan via <a href="#FirstPAnchor".

JS-Läromedlet har inte ens börjat gå in på DOM-användning så inte undra på att jag bara chansade och inget blev rätt!

Fråga: Går det att skriva i Powershell-terminalen så att "clear" och "node app.js" körs på samma rad istället för att behöva skriva två separata kommandon?

Vi ses imorgon!

Mvh,
WKL.

.container {
  margin: 0 auto;
}

Tack för koden, det löste problemet!

Är MVC en Design Pattern? Jag såg ett kort videoklipp om det och att det verkar vara väldigt vanligt bland arbetandes webbutvecklare.

Tack så mycket! Jag kör med VSCode Extension "Andromeda" och gillar Dark Mode i många appar (youtube, vscode, mm). Solen och taklampor får räcka som "white theme" för mig!

Programansvariga är fortfarande på semestrar så har inte hört något från dem. Skall fråga vilka läromedel som faktiskt ska användas till just HTML- och CSS-delen då JS-materialet är gratis online (EloquentJavaScript.net) och åtminstone från 2018.

Tack för kodtipset! Det jag inte förstår är hur min div kunde försvinna som om webbläsaren hade någon inbyggd maxhöjd för innehåll uppifrån?

Dag 4 av 759 (Kurser: Datateknik GR (A), Webbutveckling I, 7,5 hp & Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp) | "Closures" både uppmuntrar och förvirrar en...

Idag i JS-grunderna har jag kommit in i "Closures" vilket är både förståeligt och förvirrande. Om jag förstått rätt så är "Closures" till en början funktioner definierade inuti andra funktioner och "scope" av variabler går inifrån och utåt?

Detta ska då betyda om, jag förstått rätt, att inre definierade funktioner kan komma åt yttre definierade funktioners variabler? En annan sak med "Closures" verkar vara att de behåller variablerna i "minnet" tills nästa gång de anropas via den yttre funktionen? Något med "Callstack memory vs heap memory" när jag kollat på YouTube!

I bildens övre kodexempel: När jag ändrade inuti wrapValue(n) till

return n;

istället för

return () => n;

så kunde jag anropa funktionen med

console.log(wrap1);

men om det är

return () => n;

inuti funktionens retur så måste jag också anropa den med en funktion?:

console.log(wrap1());

I bildens nedre kodexempel: Jag upptäckte att

let twice = multiplier(2);

inte kunde definieras två gånger utan då behövde det vara med var trots att let ska gå att tilldela nya värden till skillnad från const. Är detta en väsentlig skillnad mellan var kontra let i JS? Se bilden nedan med rättad kod:

I den rättade koden har jag också två funktioner: en pilfunktion (inuti multiplier2()) och en "vanlig" funktion. Senare i läromedlet kommer jag att få lära mig vad som gör pilfunktionen annorlunda från "vanliga" funktioner, om ingen vill berätta redan för mig!

Imorgon kommer jag att göra övningarna för Functions-kapitlet i JS-läromedlet och jag tänkte presentera mina kodlösningar här så får andra gärna ge mig "hintar" om hur jag skulle kunna göra lösningarna bättre/mer senior.

Vi ses imorgon!

Mvh,
WKL.

// Fel
let a = 3;
let a = 4;

// Rätt
let a = 3;
a = 4;

Ja, det verkar vara ett ytterligare skäl till att känna till var men aldrig använda det. Jag fick visst lite hjärnsläpp. Man verkar få det av progarmmering efter ett par timmar nötande!

Jag tittade på flera videoklipp igår om "References vs values" och "Primitives vs objects". Väldigt upplysande grund inom JS. Är det ett koncept som sträcker sig över flera programmeringsspråk?