React
Skyddad: JavaScript 1 – Tenta 3 (praktisk uppgift)
Det finns inget utdrag eftersom detta är ett skyddat inlägg.
React
JavaScript 1, dag 36 – React – Routing
Vi gick igenom lösningsförslag på måndagens workshop där ni skulle lägga till stöd för att toggle:a en TODO och sedermera även radera den. Efter det så lade vi in en spinner för att ge lite feedback till användaren något händer Läs mer…
React
JavaScript 1, dag 35 – React Basics – Intermediary Components and Firestore
Vi gjorde om TODO-appen till att använda TodoList som blir en s.k. Intermediary Component som skickar data mellan App och TodoItem. Sen gick vi igenom lösningsförslag på fredagens workshop, följt av lite tenta-snack och intro till att använda Firebase Firestore Läs mer…
React
JavaScript 1, dag 34 – React Basics – Container/Class Components vs UI Components, Forms, Life Cycle Methods and axios in React
Idag har vi gått igenom skillnaden mellan s.k. Container Components (även kallade Class Components) och UI Components. För en refresher se nedan skärmdump från avsnitt #15 om Stateless Components från Shauns video-serie om React: Därefter tittade vi på hur man Läs mer…
React
JavaScript 1, dag 33 – React Basics – Looping and Communicating with parent Component
Vi repeterade Props, States och setState från tisdagen och gick igenom workshopen. Därefter gjorde vi en TodoItem-komponent och kollade vi på hur vi kunde loopa ut en sådan komponent för varje todo-objekt i en array. Slutligen skapade vi en handleTodoToggle Läs mer…
React
JavaScript 1, dag 32 – React Basics – State, Events and Changing State
Vi fortsatte med introduktionen av React och repeterade fredagen lite kort för att sedan gå över till State, Events och hur man kan ändra State med hjälp av setState()-metoden. Workshop Starta med att en helt ny, tom React-app som du Läs mer…
Vanilla JavaScript
JavaScript 1, dag 25 – ES6 features
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 & Läs mer…
Agila projekt
Agila projekt – inlämningsuppgift
Enligt konceptet ELI5 (Explain it Like I’m Five) – beskriv både traditionell och agil projektmetodik, och därefter beskriv skillnaderna mellan dem. Tänk på att använda enkla ord och gör gärna liknelser/metaforer! Såväl en femåring som en 75-årig tant ska kunna Läs mer…
Vanilla JavaScript
JavaScript 1, dag 23 – Recept-databas
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 22 – Prototypes och Databaser
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 21 – Arv inom objekt-orienterad programmering
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, Läs mer…
Vanilla JavaScript
JavaScript 1, dag 20 – Objekt-orienterad programmering
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) Läs mer…
Vanilla JavaScript
JavaScript 1 – praktisk uppgift 1 (namnsdag)
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 19 – Weather-app
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 Läs mer…
Vanilla JavaScript
JavaScript – tips på övningar
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 17 – Async/await
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, Läs mer…
Vanilla JavaScript
JavaScript 1 – praktisk uppgift 1 (struken)
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 16 – Promises and Fetch
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 15 – Refactoring Asynchronous JavaScript
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 Läs mer…
Vanilla JavaScript
JavaScript 1, dag 14 – Asynchronous JavaScript
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 Läs mer…