|
Filezilla och Webbservern och VScode |
Du har tillgång, under kursen, till en webbserver. Till den kan du skicka upp (ftp:a) dina html JS och ev. php filer med hjälp av Filezilla ftp-program. Sen kan du surfa in till dem för att se att de funkar som de ska. Du har även tillgång till vscode direkt i webbläsarfönstret så du koda din html, JS och php filer via vscode direkt till webbservern. Du kan också sitta lokalt på din maskin och koda för sen ftp:a upp filerna hemifrån.
|
|
Fö1 Intro Webbkomponenter |
Genomgång vad är webbkomponenter? Varför använda dem? Fördelar med dem. Nyckelkoncept och begrepp. Kodexempel på hur du skapar och använder sin första webbkomponent. Callback metod för att fylla webbkomponent med data från Rest API
|
|
Fö2 SumCalculator Webcomponent |
Visa hur man i javascript gör en första webbkomponent, för att summer två tal. Den importeras för att sen användas som en tagg i en html sida
|
|
Fö2_2 UserName webcomponent |
Hur du sätter och hämtar attribut värde till egen gjorda webkomponent. Du använder set och get metoder för samt observedAttributes() i klassen. Visar också hur du med javascript dynamiskt skapar upp denna webbkomponent och sätter dess attribut värden.
|
|
Fö3 Google books api webcomponent |
Visar hur du skapar och använder en egengjord webbkomponent som gör ett http anrop mot googlebooks api:et med hjälp av fetch api:et. Funna böcker baserat på sökningen presenteras i som en ul lista
|
|
Fö4 Weather webcomponent |
Webbkomponent som hämtar och visar väder för viss stad. Den har attributet, city, som bestämmer vilken stad man hämtar väderdata för.
|
|
Fö5 Customevents |
Hur man skapar customevents i en Sender webbkomponent. Hur andra Webbkomponenter, receivers kan lyssna på detta event för att tex hämta ut dess data. Sender dispatchar detta customevent med sitt data så att Receiver kan lyssna på det och hämta ut dess data för att gör nått med det.
|
|
Fö6 Cars webcomponent - Sender |
Visar hur två webbkomponenter samarbetar genom att sender komponenten skapar och dispatchar ett custom event med bil data som receivern komponenten lyssnar på för att hämta ut bil data och presentera det.
|
|
Fö7 Cars webcomponent - Receiver |
Receiver webbkomponenten ligger och lyssnar på ett customevent från sendern. När det sker så hämtar receivern ut det eventets bil data och presentera det.
|
|
Fö8 Leaflet karta med jordbävningar |
Hämta jordbävningsdata från API för att presentera det data på en karta med marker och popup med data för var jordbävningen skedd, dess magnitud samt länk till var du kan läsa mer om denna jordbävning.
|
|
Fö10 Chart.js för att visa vin priser i ett diagram. |
Lär dig använda Chart.js för att visa data i linjediagram. Ett EU API för vin priser används.
|
|
Fö11 Chart.js Hur rendera linjediagram med vin priser för viss kategori |
Försättning hur vi skapar upp själva linje diagrammet och fyller det med data så vi kan rita ut det. Visar även hur du söker efter högsta resp. lägsta priset för att presentera det.
|
|
Fö Vue javascript ramverk - frivillig |
Hur använda Vue javascript ramverk för att söka och presentera bok data från googlebooks api:et. Vi kommer att gå igenom Vue.js ramverket mer i en annan kurs men här får du en 'teaser' hur du kan använda det i en egengjord webbkomponent
|
|
Youtube: Learn Web Components In 25 Minutes |
Grunder i hur du gör webbkomponenter.
|
|
Youtube: How to create a Web Component using Vanilla JS |
Grunder i hur du gör webbkomponenter.
|
|
Kort intro till projektarbetet - Metal for all |
Kort beskrivning av Metal for all, som är ett, av de två projektarbeten du kan välja mellan.
|
|
Kort intro till projektarbetet - Shop 'til u die |
Kort beskrivning av Shop 'til u die, som är ett, av de två projektarbeten du kan välja mellan.
|