kursolle.se

Kursinnehåll JavaScript

Då intresse fanns att köra jobba med tillämpad programmering i JavaScript istället så bygger vi gemensamt upp en sådan delkurs. Hur denna inriktning examineras kommer vi återkomma till.

1. Innehåll i momentet

Vi har just nu två delar som bygger upp denna kursen, elevernas önskemål var att kunna arbeta med delarna i den ordning de själva vill.

1.1 JavaScript Essentials 1

Materialet tillhandahålls av Cisco/Skills for all och är gratis. Denna kursen beräknas ta 40 timmar att genomföra. Kursen JavaScript Essentials 1 ger en badge när kursen genomförts på ett godkänt sätt. Det finns också en fortsättningskurs som heter JavaScript Essentials 2 bedöms ta ca 50 timmar att genomföra.

Kursen drivs på egen hand i det material som finns tillgängligt.

1.2 Bro Code JavaScript Full Course

Bro Code som vi har stiftat bekantskap med i kursen webbutveckling har också en kurs i JavaScript.

Tutorial: Learn Javascript - Full Course for Beginners

Risken när man som lärare använder andras material är att materialet försinner eller ändras. Den kursen som tidigare var 8 timmar lång är nu 12 timmar lång.

Här är den tidigare kursen som är 8 timmar lång.

2. JavaScriptsmoduler kopplade till webben

Här kommer jag lista några bra exempel på tillämpningar som i början inte är allt för avancerade men ändå är trevliga exempel på vad man kan göra. Vi väntar med de lite större projekten, de kommer tids nog.

Många av de uppgifter som följer är utmärkta komplement till kursen Webbutveckling och det finns flera möjliga användningsområden i de uppgifter vi har gjort i den kursen. Varje uppgift är sin egen och de bygger inte på varandra så det går också bra att jobba med detta arbetsområdet ifall man inte läser kursen Webbutveckling.

2.1 Color Flipper [klicka för att visa mer]

Tutorial: Color Flipper (Build 15 JavaScript Projects - Vanilla JavaScript Course)

I denna tutorial så skall du lära dig att förändra bakgrundsfärgen på en hemsida med hjälp av JavaScript.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Color Flipper

Uppgiften är att följa tutorial Color Flipper ovan. Se till att du förstår vad som händer och att du lär dig att påverka innehåll och utseende för <html>-element.

Vidareutveckling

I tutorialen ovan så slumpas tre färger utifrån en lista med alla värden från 0-F. Läser du Webbutveckling så vet du hur färgkoderna är uppbyggda, vilket innebär att varje färg har ett värde mellan 0 och 255 och dessa värden sedan görs om till hex-värden. Kan du bygga om applikationen så att färgens hex-värde byggs upp av tre slumpade hexvärden utifrån talen 0-255? Kan du skapa en text som är exakt motsatt färg? Motsatsen till FFFFFF är 000000, motsatsen till FF9966 är 006699 osv.

Ta gärna hjälp av mitt lösningsförslag nedan men detta är ett utmärt tillfälle att testa dina egna kunskaper. Det är genom att utmana dig själv och leka med olika lösningar du befäster dina kunskaper och även utvecklar nya kunskaper.

Lösningsförslag på vidareutveckling

2.2 Counter [klicka för att visa mer]

Tutorial: Counter (Build 15 JavaScript Projects - Vanilla JavaScript Course)

I denna tutorial så skall du med hjälp av knappar styra en räknare så att den räknar uppåt och nedåt samt nollställa räknaren. Även detta projekt är ganska grundläggande men genom att göra flera mindre projekt så tänker jag att du blir allt mer van att jobba med JavaScript och den tillämpning som vi i detta moment använder oss av.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Counter

Uppgiften är att följa tutorial Counter ovan. Fokus i denna uppgift är att kunna koppla händelser till olika knappar.

Vidareutveckling

Vidareutveckling till detta projekt skulle kunna vara att lägga till ytterligare knappar som först kan addera/subtrahera ett slumpat värde till räknaren.

När du lärt dig att arbeta med formulär och JavaScript så kan denna applikation byggas ut ytterligare genom att du då kan välja vilket tal som skall adderas/subtraheras.

Lösningsförslag på vidareutveckling

2.3 Reviews/quotes [klicka för att visa mer]

Tutorial: Reviews/quotes (Build 15 JavaScript Projects - Vanilla JavaScript Course)

I denna tutorial så får du lära dig att ändra innehåll i ett element. Detta är en typ av Carousel som styrs av JavaScript. I just detta exempel så skrivs endast grundelementet i html och uppdateras sedan från JavaScript, jag vill senare visa på alternativet där alla element skrivs i html och JavaScript endast används för att välja vilket som skall vara synligt. Men det återkommer vi till.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Reviews/quotes

Uppgiften är att följa tutorial Reviews/quotes ovan. Fokus i denna uppgift är att kunna skapa en bläddrare (carousel/slide show).

Vidareutveckling

Här finns det direkt en möjlighet att använda detta i ett tidigare projekt. Om du läser kursen Webbutveckling01 så skulle du kunna bygga om Paolos Webb där vi har sidor som visar upp projekt och tekniker. Denna teknik skulle fungera utmärkt att implementera i det projektet.

2.4 Navbar [klicka för att visa mer]

Tutorial: Navbar (Build 15 JavaScript Projects - Vanilla JavaScript Course)

I denna tutorial så får du lära dig att ändra innehåll i ett element. Detta är en typ av Carousel som styrs av JavaScript. I just detta exempel så skrivs endast grundelementet i html och uppdateras sedan från JavaScript, jag vill senare visa på alternativet där alla element skrivs i html och JavaScript endast används för att välja vilket som skall vara synligt. Men det återkommer vi till.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Viktig info till tutorial

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Navbar

Uppgiften är att följa tutorial Navbar ovan. Fokus i denna uppgift är att kunna skapa en bläddrare (carousel/slide show).

Vidareutveckling

Här finns det direkt en möjlighet att använda detta i ett tidigare projekt. Om du läser kursen Webbutveckling01 så skulle du kunna bygga om Paolos Webb för att använda denna navbar. Denna teknik skulle fungera utmärkt att implementera i det projektet.

2.5 Sidebar [klicka för att visa mer]

Tutorial: Sidebar (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot Webbutveckling och är en teknik som ofta används för att skapa en meny/sidebar på små skärmar.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css samt den filen utils.txt som han använder för att hämta data ifrån.

Viktig info till tutorial

När han för första gången har lagt till sidebar så ritas den ut webbläsaren. När du gör samma sak så ritas den inte ut och det beror på att han har kommenterat bort rad 271 i sin css. Det är denna instruktion som stänger klassen sidebar när sidan visas i webbläsaren. Koden som kommenteras bort är transform: translate(-100%); för klassen sidebar. Flera CSS-instruktioner kan verka krångliga jämfört med det vi har lärt oss i kursen Webbutveckling01 men CSS är väldigt brett och används ofta ihop med JavaScript för att det skall hända något annat än att element endast skall visas eller döljas. Instruktionerna transform och transistion gör att elementen kan röra på sig. Gör du en sökning så kommer du se mängder av exempel på lyckade, och mindre lyckade, varianter.

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Sidebar

Uppgiften är att följa tutorial Sidebar ovan. Fokus i denna uppgift är att kunna lägga till en sidebar som styrs av JavaScript.

Vidareutveckling

Denna uppgift har för tillfället ingen vidareutveckling. Det naturliga steget är ju att denna sidebar endast är tillgänglig på små skärmar och att menyn ser ut på ett annat sätt på en större skärm.

Här kommer det troligtvis krävas lite sökning och exprimenterande. Se möjligheten att utmanas på riktigt.

2.6 Modal [klicka för att visa mer]

Tutorial: Modal (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot Webbutveckling och visar på en teknik Modal som används för att få en pop-up-känsla då en mindre sida läggs ovanför den befintliga sidan.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Viktig info till tutorial

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Modal

Uppgiften är att följa tutorial Modal ovanför.

Vidareutveckling

Här finns det ett perfekt tillfälle att bygga om Paolos Webb och skapa en, eller flera, Modal för någon av informationerna som finns på sidan. Kanske skall varje teknik, på tekniksidan, eller varje projekt, på projektsidan, visas upp i en Modal. Kanske skall sidan med alla kontakuppgifter visas upp i en Modal och på det sättet helt ta bort sidan med dessa uppgifter och direkt länka menyalternativet till en Modal.

2.7 Questions [klicka för att visa mer]

Tutorial: Questions (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot Webbutveckling och skapar en sida där man kan visa/dölja text. I exemplet så är det skapat för att kunna vara grunden till en FAQ.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Viktig info till tutorial

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Questions

Uppgiften är att följa tutorial Questions.

Vidareutveckling

Här finns det ett perfekt tillfälle att bygga om Paolos Webb och skapa motsvarande teknik där du visar/döljer element på en eller flera sidor. Detta är möjligt att skapa på sidorna med tekniker, projekt och sidan med kontaktinformation.

2.8 Scroll [klicka för att visa mer]

Tutorial: Scroll (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot webbutveckling och visar hur man kan skapa en one pager, alltså en webbsida som byggs i en sida även om den innehåller flera delar, och hur man på ett smidigt sätt kan rulla genom sidans olika delar.

OBS: Detta är ett något större projekt som tar lite länger tid att jobba med jämfört med de tidigare projekten.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Viktig info till tutorial

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Scroll

Uppgiften är att följa tutorial Scroll.

Vidareutveckling

Här finns det ett perfekt tillfälle att bygga om Paolos Webb till en one pager som fungerar med scroll. Tänk på att du kanske behöver bygga om sidan lite så att det passar. Kanske kan/bör du använda någon av de tidigare teknikerna, då tänker jag främst på Question.

2.9 Tabs [klicka för att visa mer]

Tutorial: Tabs (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot webbutveckling och visar hur man med tabs kan skapa möjlighet att visa olika delar av en sida utan att behöva ladda om sidan. Tabs kan användas som alternativ, eller komplement, till Questions som vi använt tidigare.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Tabs

Uppgiften är att följa tutorial Tabs.

Vidareutveckling

Här finns det ett perfekt tillfälle att bygga om Paolos Webb med Tabs, troligtvis passar detta bäst på sidan för tekniker och projekt. Kanske bygger du om/ut någon tidigare uppgift där du byggt vidare på Paols Webb.

2.10 Countdown Timer [klicka för att visa mer]

Tutorial: Countdown Timer (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Denna tutorial är tydligt inriktad mot webbutveckling och visar hur man kan skapa en tidsräknare som i realtid räknar ner till en specifik tidpunkt.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Countdown Timer

Uppgiften är att följa tutorial Tabs.

Vidareutveckling

Testa sedan att ändra datum/tid för att räkna ner till något du själv väljer. Kanske påsklovet, sommarlovet eller tills den dagen du tar studenten. Kan du skapa flera räknare på samma sida?

2.11 Grocery Bud [klicka för att visa mer]

Tutorial: Grocery Bud (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Nu kommer det ett lite större projekt där du skall bygga en app som lagrar en shoppinglista där du kan lägga till artiklar och sedan ta bort varorna allt eftersom du har handlat dem.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Viktig info till tutorial

I denna tutorial så används Font Awesome vilket är en vanlig resurs att använda för att få snygga ikoner när vi bygger hemsidor. I tutorial så använder han version 5.12.0, den senaste tillgängliga versionen är 5.15.2 (1 mars 2021). Ladda ner den här och lägg sedan hela mappen i din projektmapp. Se till att få ordning på länken så att css-filen verkligen läses in.

Uppgift Grocery Bud

Uppgiften är att följa tutorial Grocery Bud.

Vidareutveckling

För att appen skulle vara fullt användbar så skulle jag vilja bocka av artiklar som jag handlat utan att ta bort dem. Troligtvis stryka över dem eller ändra färg för att tydligt visa att dessa artiklar är redan plockade. Har du kunskapen att lägga till detta så kommer detta absolut vara till din fördel när betyg skall sättas på kursen.

En ytterligare fördjupning är att inte kunna lägga till en artikel som redan finns, har man lagt till smör och skriver smör igen, vad vill vi då skall hända? Endast smör eller smör (2)?

2.12 Slider [klicka för att visa mer]

Tutorial: Slider (Build 15 JavaScript Projects - Vanilla JavaScript Course)

Återigen ett projekt där fokus är på presentation på webbsidan. Du skall nu bygga en slider/carousel som gör att du kan bläddra mellan delar av en sida. Denna uppgift liknar den du kanske redan har gjort, reviews men skillnaden är att i reviews så skapades all kod som skulle visas i JavaScriptet medan i Slider så finns all info (html-element) i htmlfilen och JavaScriptet sköter bara vilken del som skall visas. Denna tekniken är oftast att föredra, framförallt när vi i senare kurser kommer hämta data från databasen för att publicera på webben.

Kopplat till denna tutorial finns hela projektet i färdig form och där går det också att ladda ner den css som används till tutorialen. Länk till projekt och till css.

Uppgift Slider

Uppgiften är att följa tutorial Slider.

Vidareutveckling

Här är det lämpligt att testa denna tekniken i ett tidigare projekt. I Paolos webb så har du skapat sidor med projekt och tekniker som lämpar sig väl att använda med denna teknik.

Det finns länkar för att bläddra Next och Prev, kanske kan du lägga till en som slumpar ett värde och visar upp den sidan? Det kan också vara trevligt som användare att veta att du nu är på sida 4 av 9 ifall det är en presentation som skall gås igenom. Kan du lägga till detta?