Vi gick igenom lite ES6 features som destructuring, rest parameters och spread syntax. Därefter kikade vi på Babel och WebPack. Se screencasts från dagens lektion samt video 107, 148-150 samt 151-155 från Udemy-kursen. 107. Destructuring (3 min) 148. Spread & Rest (8 min) 149. Sets (9 min) 150. Symbols (4 Läs mer…
Vi fortsatte prata om databaser och gjorde en recept-databas och en app som hämtade ut recept därifrån, men vi gjorde det utan att skapa klasser som med TODO-appen, för att hålla det enklare. Därefter lade vi till funktionalitet för att skapa recept direkt från webb-appen, och avslutade med att även Läs mer…
Vi pratade om prototypes och hur den ES6-syntaxen vi precis lärt oss egentligen bara är syntaktiskt socker (syntactic sugar) och att prototypes är det som händer ”behind the scenes” när vi skriver class Animal {} och class Dog extends Animal {} Se screencasts från dagens lektion samt video 123-124 från Läs mer…
Vi pratade om vad arv är inom objekt-orienterad programmering (OOP) och hur man kan använda det för att ärva egenskaper och metoder från ”förälder-klasser” (kallas även ibland super-klasser). Efter en kortare genomgång så gjorde vi ett antal exempel på arv, se lesson-21 branchen på GitHub-repositoryt. Se screencasts från dagens lektion Läs mer…
Vi pratade om vad objekt-orienterad programmering (OOP) är och tittade på hur man skapar en klass i JavaScript. Se screencasts från dagens lektion samt video 115-119 från Udemy-kursen. 115. What is OOP? (8 min) 116. Object Literal Recap (5 min) 117. Classes (4 min) 118. Class Constructors (5 min) 119. Läs mer…
Ni ska skapa en komplett mini-web-app där man kan söka på ett namn och få reda på när det namnet har namnsdag, och samtidigt kunna se vilka andra som också har namnsdag samma dag. Man ska även kunna ange en specifik dag och få reda på alla som har namnsdag Läs mer…
För att refresh:a minnet efter jul och nyår så gjorde vi en sista async-app där vi hämtade nuvarande väder för en ort ifrån OpenWeatherMap’s API. Skaffa gratis konto och skapa en egen API-nyckel eller kolla i 03-JavaScript 1-kanalen i Teams för min API-nyckel. Workshop Fortsätt på vår väder-app och börja Läs mer…
Flera har frågat efter lite svårare JavaScript-övningar att pyssla med, så här kommer några länkar som jag hittat. Övningar Exercises on the JavaScript track https://exercism.io/tracks/javascript/exercises JavaScript coding challenges and excercises with solutions for beginner and advanced Verkar som att man gör övningarna i form av ett spel där man når Läs mer…
Idag har vi kikat på hur man kan använda de nya async/await nyckelorden som kom i ES8, och de låter oss skriva vår asynkrona promise-baserade kod som om den vore synkron kod. I grund och botten är det fortfarande promises, så detta är bara en annan syntax för att skriva Läs mer…
OBS! Denna uppgift är struken! Ni ska skapa en komplett mini-web-app där man kan söka på en artist/album/låt och få reda på information om varje sökträff. Man ska kunna Välja om man vill söka enbart på artister, album, låtar eller alla kombinationer Se cover-photo för varje träff (om det är Läs mer…
Idag har vi kikat på Promises och hur vi kan använda dem för att slippa ”Callback Hell” och göra vår kod renare och lättare att följa. Vi gjorde en enkel workshop på förmiddagen i promises där ni skrev om fredagens workshop-uppgift till att använda Promises istället för callbacks. Därefter gick Läs mer…
Vi gjorde en funktion av vår Request-kompis och tittade på hur vi kan kalla på den många gånger, och hur vi istället för att låsa den i hur den ska hantera svaret så kan den istället kalla på en funktion som vi ger den som en parameter. Därefter gjorde vi Läs mer…
Vi gick igenom lösningsförslag på workshopen från i tisdags och därefter pratade vi om synkron vs asynkron kod, vad som är skillanden och hur vi kan skriva asynkron kod i JavaScript. Därefter gick vi igenom de olika delarna som utgör en HTTP Request och dess svar (HTTP Response), samt de Läs mer…
Vi gick kort igenom vad som definierar en Higher Order Function och hur vi med hjälp av Higher Order Array Methods kan jobba med array:er på ett enklare och smidigare sätt än traditionella for och forEach-loopar. Higher Order Array Methods .filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter .map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map .reduce() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce .sort() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort .find() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find Läs mer…
Vi gick igenom hur man kan angripa en problemställning genom att bryta ner vår för Guess My Number’s ”roadmap” till olika steg vi behöver göra för att uppnå varje mål i roadmap:en. Man kan så klart lika väl använda sig av punktlistor, där man börjar på en hög nivå och Läs mer…
Vi gick lite kort igenom att funktioner kan ha ”default values”. Därefter stegade vi igenom en funktion rad för rad för att se vad alla variabler har för värde och vad som händer i varje steg. GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-9 Workshop Nu när ni är bekanta med funktioner och att hämta/skriva Läs mer…
Vi gick igenom lösningsförslag på gårdagens lilla workshop och därefter började vi bygga på vår lilla miniräknar-app. GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-8 Länkar MDN Form Events https://developer.mozilla.org/en-US/docs/Web/Events#Form_events Workshop Ta den lilla miniräknare vi gjort idag och lägg in stöd för fler räknesätt än addition. Gör det i form av en knapp per Läs mer…
Vi gick igenom Document Object Model (DOM) createElement() remove() append() prepend() Events Event Bubbling LocalStorage Checking for support getItem() setItem() JSON JavaScript Object Notation JSON.stringify() JSON.parse() GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-7 Länkar LocalStorage HTML5 Web Storage https://www.w3schools.com/html/html5_webstorage.asp Window.localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage JSON JSON.stringify() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify JSON.parse() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse Workshop Dagens lilla övning: Se om ni kan Läs mer…
Vi gick igenom Objects i mer detalj Properties (egenskaper) Methods (metoder) Document Object Model (DOM) Querying the DOM querySelector querySelectorAll Modifing content and attributes innerText innerHTML getAttribute setAttribute style className classList textContent Traversing the DOM children parentElement nextElementSibling previousElementSibling Event Listeners addEventListener GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-6 Workshop Öva på att hämta Läs mer…
Vi gick igenom Functions Function Declarations Function Expressions Arrow Functions Callbacks Objects Enkla objekt this-nyckelordet GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-5 Workshop Skriv om (refaktorera) workshop:en om lösenord från dag 3 till att använda funktioner (glöm inte använda Function Expressions och inte Function Declarations). Varje funktion ska vara ”isolerad”, dvs den ska ta Läs mer…