Webbutvecklingsdagbok (Webbutveckling, 120 hp)

Permalänk

Webbutvecklingsdagbok (Webbutveckling, 120 hp)

Hej! Jag hoppas det är okej att jag har en "dagbok för webbutveckling" i en och samma tråd så jag inte klottrar ner hela underforumet!

Tanken med "dagboken" är att dela med mig av olika tankar, framsteg, och frågor inom webbutveckling. Eventuellt kan vilka som helst få ge mig kodutmaningar baserat på utifrån hur mycket de tolkar att jag har bemästrat hittills. Jag citerar då med kodlösningsförslag som återkoppling kan ges till!

Dag 1 av 759 (Kurser: Datateknik GR (A), Webbutveckling I, 7,5 hp & Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp)
Idag är första dagen av det tvååriga programmet Webbutveckling, 120 hp, som jag går på distans. Egentligen börjar utbildningen först nu den 29:e augusti 2022, men jag tänkte börja lite tidigare så att jag lär mig de mest fundamentala bitarna inom webbutveckling.

Första dagen bjuder inte på så mycket mer än att komma igång med VSCode, läromedlen och lite grundläggande HTML och CSS (se bilderna nedan).

Jag har två olika HTML-filer:
1) Första är min "sandlåda" med egen kod och eventuella kodprojekt.
2) Andra är all HTML-kod från läromedlen inom HTML & CSS så att jag kan göra alla uppgifter där.

En sak jag har upptäckt med läromedlen är att ena boken är från 2011 (HTML & CSS) och andra från 2014 (JS). JS-koden som visas använder då "var" flitigt vilket jag förstått ej rekommenderas längre eftersom det kan bugga pga. något med "scope"?

Tyvärr är programansvariga på semester fortfarande för att jag skall få svar på varför så gamla läromedel används till något så snabbutvecklande som webbutveckling.

Just nu håller jag på att gå igenom den grundläggande HTML-strukturen (alla taggar). Läromedlet (Jon Duckett, 2011) är indelat i tre delar: HTML, CSS & Övningar.

I min "sandlåda" provade jag att centrera en div (med bakgrundsfärg för att se hur stor/liten den blev) och efter googling gick det. Men det är inte riktigt så jag vill lära mig! Och jag förstår inte helt (ännu) varför CSS-lösningen i ".container1" fungerar!

Vi ses imorgon!

Mvh,
WKL.

Permalänk

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

Dag 2 av 759 (Kurser: Datateknik GR (A), Webbutveckling I, 7,5 hp & Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp) | Mysteriet med den avklippta centrerade DIV:en...

Det är andra dagen och jag har redan stött på ett intressant CSS-problem när jag skrivit av i princip allt grundläggande jag lärt mig hittills om HTML-taggarna i läromedlet!

Problemet är troligen kopplat till denna CSS-kod för att centrera en div:

.container1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: bisque; padding: 25px; }

Så här ser det ut i VSCode:

Jag har en <p id="FirstPAnchor"> där man ska hamna när man klickar på en länk längre ned.

Men som det syns i bilden nedan så klipps div:en av och man ser inte allt högst upp på sidan. Jag har en 3440x1440 skärm.

Dussintals paragrafer ned finns det en länk: <a href="#FirstPAnchor"> och den fungerar men jag ser inte allt högst upp på sidan.

Hur löses detta då om det endast är en centrerad <div> inuti i en och samma <body>? Allt syns igen om jag inaktiverar ".container1". Längst ned i index.html-koden är </div></body></html> så den biten tror jag har blivit rätt.

Ett ytterligare problem är att sedan centrera en <a>-länk inuti denna centrerade div vilket inte gick utan att köra med padding-left: 25px; vilket inte kan vara rätt lösning, eller? Den hamnar konstigt inuti div:en när jag förstorar om webbfönstret genom att dra det åt vänster eller höger.

Läromedlet är uppbyggt med ett kapitel om HTML-taggar först innan CSS-kod så innan jag klurar ut problemet tack vare läromedlet tänkte jag bara fråga här om det är vanligt problem med centrerade divs.

Vi ses imorgon!

Mvh,
WKL.

Permalänk
Medlem

Gällande JS var. Det används ej längre som du påpekade, istället används ”let” för en variabel som ska byta värde alternativt ”const” för något som ej ska byta värde.

Permalänk
Medlem

För positionering av element osv rekommenderar jag en titt på flexbox.
Det är lättare att skriva CSS i en separat fil dessutom.

Permalänk
Medlem

Du kan centrera diven på det här sättet om du bara vill centrera horisontellt:

.container { margin: 0 auto; }

Lycka till med utbildningen! Ett tips är att läsa om koncept/patterns senare (komponenter, BEM etc) när du lärt dig mer grunder. Det är sånt som är nyckeln till att sluta skriva speghettikod och bli riktigt duktig

Permalänk
Medlem

2014 är stenåldern när det kommer till webbutveckling. Tekniken går framåt fort. Flexbox användes knappt då tex, men med det sagt är det bra att lära sig även äldre metoder för saker och ting (tips: gör saker i vanlig JS så mycket som möjligt istället för jQuery och andra bibliotek). Att 'var' buggar behöver du inte bekymra dig om, det är i extremt specifika fall. Väldigt många använder fortfarande var även om 'let' har ersatt det.

Däremot... VSCode i dark mode!? Nä, här är det Notepad++ i white mode som gäller

Men kul att du hoppat på webbuteckling! Härligt att se att man kan läsa sånt på distans nu. På min tid fanns inga såna program utan jag fick lära mig själv efter ett grundprogram inom programmering. Lycka till!

Permalänk
Medlem
Skrivet av Freezard:

Däremot... VSCode i dark mode!? Nä, här är det Notepad++ i white mode som gäller

Har du några faktiska argument för att ta dig tillbaka 15 år i utvecklingen eller är det någon form av dogmatiskt självhat du ägnar dig åt?

Intressant att du kallar en bok om javascript från 2014 för stenålders men använder en texteditor från 2003 att skriva kod i

Permalänk
Medlem
Skrivet av Freezard:

2014 är stenåldern när det kommer till webbutveckling. Tekniken går framåt fort. Flexbox användes knappt då tex, men med det sagt är det bra att lära sig även äldre metoder för saker och ting (tips: gör saker i vanlig JS så mycket som möjligt istället för jQuery och andra bibliotek). Att 'var' buggar behöver du inte bekymra dig om, det är i extremt specifika fall. Väldigt många använder fortfarande var även om 'let' har ersatt det.

Däremot... VSCode i dark mode!? Nä, här är det Notepad++ i white mode som gäller

Men kul att du hoppat på webbuteckling! Härligt att se att man kan läsa sånt på distans nu. På min tid fanns inga såna program utan jag fick lära mig själv efter ett grundprogram inom programmering. Lycka till!

Även om var kanske inte buggar så finns det absolut ingen anledning att använda det, let och const är best practice. Det vet du säkert om, men värt att tänka på när man ändå lär sig.

Används ens JQuery som bibliotek nuförtiden? Allt som JQuery löste finns väl nästan inbyggt i JS nu?

Permalänk
Medlem

Jag skulle aldrig köpa så föråldrad kurslitteratur. Min erfarenhet är att många lärare på universitetet ändå inte använder kurslitteraturen

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

Problemet är troligen kopplat till denna CSS-kod för att centrera en div:

.container1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: bisque; padding: 25px; }

Var länge sedan jag skrev css själv, men overflow: scroll; på .container eller överliggande?

Mvh
RilGurt

Permalänk
Medlem
Skrivet av Jaevel:

Har du några faktiska argument för att ta dig tillbaka 15 år i utvecklingen eller är det någon form av dogmatiskt självhat du ägnar dig åt?

Intressant att du kallar en bok om javascript från 2014 för stenålders men använder en texteditor från 2003 att skriva kod i

Det är väl mest att jag är van vid N++ så har inte orkat byta än, plus att jag är traumatiserad av Visual Studio och dess långsamhet/hungrighet. Precis som jag inte orkat byta från Chrome till Edge ännu. Det funkar ju ändå, texteditor som texteditor. Koden är det viktiga, det skall icke glömmas! Okej, PHP-debuggern kunde varit lite bättre i N++ dårå... men wooosh N++ är snabb .

Skrivet av AntiN:

Även om var kanske inte buggar så finns det absolut ingen anledning att använda det, let och const är best practice. Det vet du säkert om, men värt att tänka på när man ändå lär sig.

Används ens JQuery som bibliotek nuförtiden? Allt som JQuery löste finns väl nästan inbyggt i JS nu?

Jodå det används lite överallt, speciellt inom CRM. Men det har aldrig behövts enligt min mening. Folk har bara varit lata. querySelector och bättre gränssnitt/bibliotek för HTTP requests var väl vändningen. jQuery-spöket och suktet för automation lever dock vidare i och med alla dessa JS-ramverk som ploppat upp.

Permalänk
Medlem
Skrivet av Jaevel:

Har du några faktiska argument för att ta dig tillbaka 15 år i utvecklingen eller är det någon form av dogmatiskt självhat du ägnar dig åt?

Skrivet av Freezard:

Det är väl mest att jag är van vid N++ så har inte orkat byta än, plus att jag är traumatiserad av Visual Studio och dess långsamhet/hungrighet. Precis som jag inte orkat byta från Chrome till Edge ännu. Det funkar ju ändå, texteditor som texteditor. Koden är det viktiga, det skall icke glömmas! Okej, PHP-debuggern kunde varit lite bättre i N++ dårå... men wooosh N++ är snabb .

Man ska inte underskatta npp. Npp är fruktansvärt smidigt när man bara behöver ändra i några filer eller läsa loggar från diverse system. Att behöva dra igång Visual Studio Code, Atom eller någon annan kodredigerare är ganska jobbigt när npp går blixtsnabbt att starta och komma igång med.

Jag använder npp i princip hela tiden för logganalys eller ändra configfiler, men även för att skriva mindre kodsnuttar, så kan verkligen hålla med @Freezard i frågan

Permalänk

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

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.

Permalänk
Skrivet av Mika3l:

Du kan centrera diven på det här sättet om du bara vill centrera horisontellt:

.container { margin: 0 auto; }

Lycka till med utbildningen! Ett tips är att läsa om koncept/patterns senare (komponenter, BEM etc) när du lärt dig mer grunder. Det är sånt som är nyckeln till att sluta skriva speghettikod och bli riktigt duktig

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.

Skrivet av Freezard:

2014 är stenåldern när det kommer till webbutveckling. Tekniken går framåt fort. Flexbox användes knappt då tex, men med det sagt är det bra att lära sig även äldre metoder för saker och ting (tips: gör saker i vanlig JS så mycket som möjligt istället för jQuery och andra bibliotek). Att 'var' buggar behöver du inte bekymra dig om, det är i extremt specifika fall. Väldigt många använder fortfarande var även om 'let' har ersatt det.

Däremot... VSCode i dark mode!? Nä, här är det Notepad++ i white mode som gäller

Men kul att du hoppat på webbuteckling! Härligt att se att man kan läsa sånt på distans nu. På min tid fanns inga såna program utan jag fick lära mig själv efter ett grundprogram inom programmering. Lycka till!

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!

Skrivet av Gorgonzola:

Jag skulle aldrig köpa så föråldrad kurslitteratur. Min erfarenhet är att många lärare på universitetet ändå inte använder kurslitteraturen

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.

Skrivet av RilGurt:

Var länge sedan jag skrev css själv, men overflow: scroll; på .container eller överliggande?

Mvh
RilGurt

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?

Permalänk
Medlem
Skrivet av AntiN:

Även om var kanske inte buggar så finns det absolut ingen anledning att använda det, let och const är best practice. Det vet du säkert om, men värt att tänka på när man ändå lär sig.

Används ens JQuery som bibliotek nuförtiden? Allt som JQuery löste finns väl nästan inbyggt i JS nu?

Legacy min vän, legacy
Projekten jag sitter i på nuvarande jobb är så nedsudlade med JQuery att det skulle ta månader om inte år att byta ut det.

Permalänk
Medlem

När jag skriver kod vill jag ha musik jag inte känner igen, som någon form av bekväm muzak. Därför lyssnar jag på Amon Tobin, som är som ny varje gång.

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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:
<Uppladdad bildlänk>

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!
<Uppladdad bildlänk>

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>

<Uppladdad bildlänk>
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.

Klassnamn i CSS brukar vad jag vet skrivas som first-p-anchor snarare än FirstPAnchor, sen tycker jag att querySelector känns mer flexibel än elementById men är väl en smaksak antar jag.
Angående PowerShell kan du testa clear;node app.js (tror inte ens du behöver ha med .js men är inte säker då det var ett tag sedan jag körde node)

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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?

Testa:

clear; node app.js

Semikolon fungerar som en markering att ett kommando är färdigt.

Permalänk
Medlem
Skrivet av AntiN:

Används ens JQuery som bibliotek nuförtiden? Allt som JQuery löste finns väl nästan inbyggt i JS nu?

Ej tillåtet att använda Jquery i mitt projekt, finns bara som legacy. Man ska använda (i vårt fall) Vues inbyggda funktioner.

Permalänk
Medlem
Skrivet av BasseBaba:

Legacy min vän, legacy
Projekten jag sitter i på nuvarande jobb är så nedsudlade med JQuery att det skulle ta månader om inte år att byta ut det.

Jo, så är det förstås. Jag tänkte utifrån ett nybörjarperspektiv, då finns det nästan ingen anledning att gå ur vägen för att lära sig Jquery.

Skrivet av Pelegrino:

Ej tillåtet att använda Jquery i mitt projekt, finns bara som legacy. Man ska använda (i vårt fall) Vues inbyggda funktioner.

Låter som en vettigare lösning

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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

Ja det är en form av pattern/koncept som förmodligen är mest känt inom .NET. Dock kanske inte "design pattern" är korrekt men svårt att säga.. Jag jobbar mycket med UI själv och då känns design och MVC i samma mening fel, men för andra låter det säkert rätt.

Permalänk
Medlem
Skrivet av Freezard:

Det är väl mest att jag är van vid N++ så har inte orkat byta än, plus att jag är traumatiserad av Visual Studio och dess långsamhet/hungrighet. Precis som jag inte orkat byta från Chrome till Edge ännu. Det funkar ju ändå, texteditor som texteditor. Koden är det viktiga, det skall icke glömmas! Okej, PHP-debuggern kunde varit lite bättre i N++ dårå... men wooosh N++ är snabb .

VS Code är snabb också, ej att förväxla med visual studio som är tungdrivet.
Notepad++ är ju ingen IDE över huvud taget utan bara en texteditor. VS Code är ju hela paketet för utveckling

Skrivet av sparkar_boll:

Man ska inte underskatta npp. Npp är fruktansvärt smidigt när man bara behöver ändra i några filer eller läsa loggar från diverse system. Att behöva dra igång Visual Studio Code, Atom eller någon annan kodredigerare är ganska jobbigt när npp går blixtsnabbt att starta och komma igång med.

Jag använder npp i princip hela tiden för logganalys eller ändra configfiler, men även för att skriva mindre kodsnuttar, så kan verkligen hålla med @Freezard i frågan

Jag använder också notepad++, men inte till att skriva kod i.
Ordbehandling: Google docs
Utveckla: VS Code
Övriga textdokument: Notepad++

Permalänk

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

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.

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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:<Uppladdad bildlänk>

Det är en skyddsmekanism som hindrar dig från att råka deklarera en variabel med samma namn som en annan. Observera att det är skillnad på att deklarera (görs med let eller const) och att definiera (görs med =) även om båda ofta görs i samma uttryck. Deklaration görs bara en gång. Vill du tilldela ett nytt värde till samma variabel (omdefiniera) ska du inte skriva let igen.

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

var saknar denna skyddsmekanism, vilket är en av anledningarna till att det lättare att göra fel om man använder var istället för let/const.

Permalänk
Skrivet av LemonIllusion:

Det är en skyddsmekanism som hindrar dig från att råka deklarera en variabel med samma namn som en annan. Observera att det är skillnad på att deklarera (görs med let eller const) och att definiera (görs med =) även om båda ofta görs i samma uttryck. Deklaration görs bara en gång. Vill du tilldela ett nytt värde till samma variabel (omdefiniera) ska du inte skriva let igen.

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

var saknar denna skyddsmekanism, vilket är en av anledningarna till att det lättare att göra fel om man använder var istället för let/const.

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?

Permalänk

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

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.

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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)

Att multiplicera det med sig själv låter lite udda, jag hade istället multiplicerat det med -1 så blir det samma tal fast positivt. Det
gör också att din rekursiva funktion inte behöver anropas lika många ggr för att nå ett resultat.

Jag tog din kod och modifierade den så att den skriver ut vilken siffra den är på i varje rekursivt anrop så kan du se det själv.

Ex med -3

Om man kör number*number
number = (number)*(number) // -3*-3 = 9
Eftersom 9 inte är 1 eller 0 så kör vi ett rekursivt anrop med number-2 vilket blir 7
number = 7 // inte 1 eller 0, rekursivt anrop igen
number = 5 // inte 1 eller 0, rekursivt anrop igen
number = 3 // inte 1 eller 0, rekursivt anrop igen
number = 1 // Vi har kommit till vårt slut. 1 är udda.

Om vi istället kör med number * -1
number = number * -1 // -3 * -1 = 3
Eftersom 3 inte är 1 eller 0 så kör vi ett rekursivt anrop med number-2 vilket blir 1
number = 1 // Vi har kommit till vårt slut. 1 är udda.

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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?

I många andra programmeringsspråk så en string i grund och botten bara en arrary med karaktärer med lite extra funktioner tillagt för att göra det lättare att arbeta med. Så "Hello" är då arrayen med de 5 tecknen ['H', 'e', 'l', 'l', 'o'].

I Javascript introducerade de därför samma notation att kunna använda sig av arrayens hakparanteser (brackets) för att välja ut enskilda tecken på samma sätt som i andra spåk. Det är nästan samma som att anropa funktionen charAt(index), förutom att de beter sig lite annorlunda om man skulle försöka få ut en karaktär som ligger på ett index som inte finns. Kan tänka mig att det finns olika tillfällen då man vill använda sig av hakparanteserna och andra när charAt() passar bättre, men det gäller att veta att det är en liten skillnad ändå.

Permalänk
Medlem

! betyder "negationen av" eller "tvärtom", så du kan tolka det lite som du vill tycker jag. Det viktiga är att veta att om du förväntar dig svaret true inom parantesen så kommer ! göra det till false och vise versa. Så när man översätter det till vanlig svenska är det naturligt att lägga till "inte" innan man beskriver det som kommer innanför parantesen.

(number < 0) // "Är number mindre än noll?" - Om number är mindre än noll ger detta true annars false
!(number < 0 ) // "Är number INTE mindre än noll" - Om number är mindre än noll ger detta false annars true
(number > 0) // "Är number större än noll?" - Om number är större än noll ger detta true annars false
!(number > 0 ) // "Är number INTE större än noll" - Om number är större än noll ger detta false annars true

I ditt fall här så skulle jag nog använda mig av (number > 0) för att man inte ska behöva förvirra sig med negationer osv. Är lättare att läsa kod som säger

Om (number är negativt) {
Gör det här
}
Om (number är positivt) {
Gör det här
}

Permalänk
Medlem
Skrivet av WebbkodsLärlingen:

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)

Alternativ 1, inbyggd funktion för absolutbelopp.

x = Math.abs(x);

Alternativ 2, kvadrera (multiplicera med sig självt) talet och dra kvadratroten ur det (gissar att det var denna möjlighet du tänkte på när du multiplicerade talet med sig självt!?).

x = Math.sqrt(x*x); alternativt x = Math.sqrt(x**2); alternativt x = Math.sqrt(Math.pow(x, 2));

Alternativ 3, undersök om x < 0, och om det är det, x = -x, annars x = x.

if (x < 0) { x = -x; } else { x = x; }

Detta kan dock skrivas mycket kortare och snyggare:

x = (x < 0 ? -x : x);