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.

2.1 Color Flipper

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

Här följer ett exempel på lösning av vidareutvecklingen. Jag har givit exempel på hur man kan påverka <html>-element med både id- och klass-selektorer.

extra.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Color Flipper || Simple</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav>
    <div class="nav-center">
      <h4>color flipper</h4>
      <ul class="nav-links">
        <li><a href="index.html">simple</a></li>
        <li><a href="hex.html">hex</a></li>
        <li><a href="extra.html">extra</a></li>
      </ul>
    </div>
  </nav>
  <main>
    <div class="container">
      <h2 id="opp">background color: <span class="color">#F1F5F8</span></h2>
      <button class="btn btn-hero" id="btn">click me</button>
    </div>
  </main>
  <script src="extra.js"></script>
</body>
</html>

extra.js

// https://www.w3docs.com/snippets/javascript/how-to-convert-decimal-to-hexadecimal-in-javascript.html
// Det finns ett antal inbyggda möjligheter att göra detta på.

const btn = document.getElementById("btn");     // ett sätt att ange ID
const color = document.querySelector(".color");
const opp = document.querySelector("#opp");     // ett annat sätt att ange ID
const max = 255;

btn.addEventListener('click', function(){
  let hexColor = "#";             // hexadecimalt värde för bakgrund
  let hexOpp = "#";               // hedadecimalt värde motsatt till hexColor

  // kör loopen tre gånger.
  for(let i = 0; i < 3; i++){
    let number = Math.floor(Math.random() * max+1); // slumpa värde 0 - 255
    hexColor += getHexCode(number);
    hexOpp += getHexCode(max-number);
  }

  color.textContent = hexColor;           // ändrar texinnehåll
  color.style.color = hexColor;           // ändrar textfärg
  opp.style.backgroundColor = hexOpp;     // ändrar bakgrundsfärg
  opp.style.color = hexColor;             // ändrar textfärg
  document.body.style.backgroundColor = hexColor;   // ändrar bakgrund
  btn.style.backgroundColor = hexOpp;     // ändrar bakgrundsfärg
});

function getHexCode(n){
  /**
  * Funktion som gör om ett tal till hexadecimal,
  * tvingar att ha två värdesiffror & versaler.
  * @param {n} heltalet som skall göras om
  * @return {string} den hexadecimala strängen
  * Länk om toString(16) till hexadecimalt tal
  * https://www.w3schools.com/jsref/jsref_tostring_number.asp
  * Länk om shorthanded if mm
  * https://www.sitepoint.com/shorthand-javascript-techniques/
  */

  // Variant 1
  let output = n.toString(16).toUpperCase();
  if(output.length < 2){
    output = "0" + output;
  }
  // Shorthand if, ersätter selektionen
  // output = output.length < 2 ? "0" + output : output;
  return output;

  // Variant 2
  // return n.toString(16).padStart(2,"0").toUpperCase();
  // padStart(2,"0") tvingar svaret att bli två tecken, fyller upp med 0 först ifall det behövs.
}

2.2 Counter

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.

Ordning på tutorials

Jag har lagt in två nya tutorials här som jag från början tänkt hoppa över men som jag i efterhand tycker är bra att jobba med. Det är väldigt stor fokus på webbutveckling här, men det är saker som tillför en hel del. Ni som läser Webbutveckling kommer ha nytta av dessa tutorials, om inte annat för att få en ökad allmän förståelse kring webb/javascript och vanliga delar som finns i ramverk.

2.3 Reviews/quotes

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

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

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.