JS ÖVNINGAR

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.

6. Bra jobbat! Nu kan du scrolla ner till Del 2 – Din första JS kod.

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?

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.

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.

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.

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!