Kursinnehåll JavaScript

Då förutsättningarna har förändrats flera gånger under kursens gång så kommer här hjälp till att göra kursen med fokus på JavaScript.

1. Lära sig grunderna i ett nytt programmeringsspråk

Som alltid när man lär sig ett nytt programmeringsspråk så handlar det om att lära sig syntaxen för just detta programmeringsspråk. Om man tidigare har pogrammerat så gäller det ju att på smidagast möjliga sätt koppla den kunskap du redan har till det nya språkets förutsättningar. Eftersom du redan har läst Programmering01 med Python som programmeringsspråk så kommer du i JavaScript känna igen en hel del i hur språket är uppbyggt och hur det används.

1.1 Lära sig syntax för JavaScript

Det finns många olika tutorials, guider eller kurser publicerade på nätet för att lära sig JavaScript. Nedan kommer jag att tipsa om material som jag gillar. Det är inte helt omöjligt att det finns ännu bättre material, men det länkar jag in om vi hittar.

Vad behöver du kunna för att gå vidare? Jag tycker att du bör ha kunskaper om de delar som vi fokuserade på i kursen Programmering01, vilket innebär:

  • Var koden körs, hur den körs och hur du jobbar i konsollen.
  • Utskrifter
  • Variabler, datatyper, aritmetik och operatorer.
  • Selektioner, if/elseif/else och switch
  • Iterationer, for och while
  • Funktioner
  • Global och local scope, var vs let är bra att kunna.
  • Array och listor

Om du har grundläggande förståelse för dessa strukturer och kan lösa uppgifter som vi gjorde i Programmering01 så har du en bra grund att stå på. Det kanske känns lite klurigt i början, men du kommer snart in i det.

1.1 Förslag på tutorial

Här kommer den kursen som jag tidigare har länkat som exempel. Den är dryga tre timmar lång, men om du fokuserar på punkterna ovan så ser du att du inte behöver köra hela tutorial. Välj själv vilka delar du vill arbeta med.

Tutorial: Learn Javascript - Full Course for Beginners

1.2 Andra förslag

Det finns naturligtvis fler alternativ för att lära sig koda JavaScript, har du hittat någon egen bra tutorial så skicka mig gärna länk till den.

Udemy har mycket bra material. Börja leta efter kurser som är gratis och har höga betyg satt av många användare så brukar det vara ett tecken på att den kursen är bra. Vissa kurser är kortare och fokuserar på något/några områden medan andra kurser är oändligt långa och kan vara både djupa och breda.

2. Tillämpning

När du nu känenr dig, någorlunda, bekväm med språket så är det dags att gå in på tillämpningen. Hur kan vi använda JavaScript för att göra våra websidor bättre eller helt koda lösningar i JavaScript?

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?

Här kommer det publiceras fler tutorials / projekt inom kort. Tanken är att nu börja bygga lite större projekt som kan vara grund till ett slutprojekt i kursen. Kanske har du redan tankar på vad du själv skulle vilja bygga, då kan det vara dags att börja skissa på detta projekt.