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?

Webbutvecklingsdagbok (Webbutveckling, 120 hp) | Dag 5 av 759

Dag 5 av 759 (Kurser: Datateknik GR (A), Webbutveckling I, 7,5 hp & Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp) | Att följa loopar är min nuvarande akilles häl
Det blir ett kortare inlägg idag då jag ska ta helg och jag får se hur mycket kodning det blir i helgen.

Jag har gjort 2 av 3 övningar från Functions-kapitlet i EloquentJS (övningar i första bild, lösningar i andra):

Bortse från ihoptryckta {} och alla överflödiga kommentarer för att få plats med det så det syns på bild.

Kommentera gärna dock om mina lösningar är lämpliga och om de verkar vara "senior"-,"junior"- eller "noob"-nivå trots att det är extremt fundamentala koncept som övningarna syftar till!

Fråga 1: Finns det något annat sätt att konvertera ett negativt tal till positivt utan att behöva multiplicera det med sig självt inom två parenteser? (se min lösning i Övning 2)

Fråga 2: I övning 3 så verkar boken syfta till att använda en array[] för strängen?: ("You can get the Nth character, or letter, from a string by writing "string"[N]".) Kapitlet för Arrayer och Objekt är nästa kapitel så boken verkar vilja att man ska kunna extrapolera redan nu?

Jag är också fortfarande förbluffad och fundersam över hur sådana här fundamentala saker sedan kan extrapoleras till att skapa program som hanterar mer än bara nummer och strängar såsom bildhanteringsprogram, GPS-program, spel, med mera.

Trevlig helg!

Mvh,
WKL.