JS ÖVNINGAR

Del 1 – Sätta upp din programmeringsmiljö
  • 1. Gå till Codepen.io
  • 2. Tryck på Logga in – den gråa knappen som du hittar till höger på sidan. (Se bild om du är osäker.)
  • 3. Fyll i dina uppgifter och tryck på den stora gröna knappen Logga in.
  • 4. Nu kommer det upp en meny till vänster där trycker du på “Pen”. Då kommer du få upp en helt tom “penna” och det är i HTML-rutan vi ska skriva all vår kod. Detta innebär att vi nu ska visa alla olika rutorna för HTML, CSS och JS (Se bild).

  • 5. En sak til behöver vi göra innan vi är helt klara. Vi behöver stänga av det som gör att sidan auto uppdateras. Detta gör vi genom att trycka på Settings –> Behaviour –> Auto-Updating Preview – Så drar ni denna radio-button till OFF. Det vi behöver göra nu är att trycka på knappen “Run” varje gång vi vill testa vår kod.

  • 6. Bra jobbat! Nu kan du scrolla ner till Del 2 – Din första JS kod.
Del 2 – Din första rad JS
  • Nu när du ska börja skriva dina första rader kod i Javascript så så kommer du att skriva all kod i rutan som har JS som rubrik. För att du ska kunna se om det fungerar kommer du behöva trycka på “Run” varje gång du vill testa koden eftersom vi har stängt av funktionen att den körs automatiskt.
  • 1. Din första uppgift blir att testa om du kan få Javascript att fungera i Codepen. I rutan JS skirv funktionen alert(“Hello world”) och tryck därefter på “Run”. Får du upp något alertbox?
  • 2. Din nästa uppgift blir att testa om du kan skriva samma kod i uppgiften ovan fast direkt i webbläsaren?!

    Börja med att öppna upp en ny flik, högerklicka och tryck på Inspektera. Då kommer du få upp det som kallas för konsolen. Här klickar ni på “Console” och lägger in samma kod som ovan. Fungerar det? Testa att byta till något annat än “Hello World”. Testa också att ta bort citattecknen, fungerar det fortfarande?
Har du redan hunnit klart? Spana in extra uppgifterna nedan.
  • 4. Testa att lägga till någon av de andra eventen i Codepen. Lyckas du implemnetera några av de eventen vi gick igenom i presentationen? Tips på hur man implementerar event hittar ni här och scrolla ner till delen med events. Olika event att testa
    load
    resize
    click
    scroll
    mousemove
    submit
    select.
Del 3 – Variabler
  • OBS! När vi skriver Javascript kod så kommer vi att behöva använda det som kallas för “console” dvs konsollen. Denna hettar vi i Codpen längst ner på sidan. (Se screenshot) För att kunna se vad vi skrivit i vår console så kommer vi att behöva använda en metod som heter console.log();

    Den här metoden används ofta flitigt och är väldigt användbar när programmerare söker efter buggar. För att använda den här metoden skriv console.log(); i din javascript del och inuti paranteserna skriver det du vill skall synas i konsollen. T ex console.log(funktionSnamn); eller console.log(“Jag heter Arne”);
  • 1. Börja med att skapa 2 st variablar som är en strängar.
  • 2. Skapa 3 st variablar som är tre olika nummer
  • 3. Testa att addera dina variabler som är siffror. Lyckas du få fram totalen?
  • 4. Lägg ihop dina två strängar. Behöver du göra något annorlunda när du adderar två strängar istället för två siffror?
  • 5. Vad händer om du försöker addera en varibel som innehåller en siffra och en variabel som innehåller en sträng?
  • 6. På samma sätt som du adderat variabler ovan vill vi att ni testar att subtrahera, multiplicera och dividera två variabler med varandra.
Del 4 – Arrayer
  • 1. Skapa en array som innehåller 5 olika rätter du kan tänka dig att äta till middag.
  • 2. Skapa en array med 5 olika siffror.
  • 3. Skapa en array som innehåller både siffor och strängar.
  • 4. Skriv ut det första objektet i din array med middagsrätterna.
  • 5. Skriv ut det sista objektet i din array med sifforrna.
  • 6. Under W3 Schools finns alla olika metoder som vi kan använda med arrayer listade. Använd länkenhär och försök se om ni kan hitta en metod som lägger till ett till objekt i din array.
  • 7. Med samma länk som iuppgiften ovan, testa att använda flera olika metoder och se om du hittar tex hur man tar bort ett objekt i en array.

Extra övning – Din egna hemsida
  • Vi har skapat en start på en hemsida som innehåller grunden till att skapa en väljare.

    Vi har valt att skapa en array med 4 stycken maträtter. nu är det upp till er att arbeta med den här sidan så att den blir precis som ni vill både med HTML, CSS och JS,

    Lycka till!
Länk till grundläggande material
Länk till vårt material hittar ni här
Haja kod logo

OM OSS

HAJA KOD introducerar programmering och digitalt skapande för barn och vuxna.

KONTAKT

Ingenjörsgatan 9
411 19 Göteborg
[email protected]

Haja kod logo

© Copyright 2020