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.

• 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.

• 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?

• 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.
  

• 1. Lägg till två stycken länkar genom att använda <a> taggarna. Kommer du ihåg att det var lite annorlunda med <a> taggen? Du kan länka till vilka sidor du vill. Kanske någon av de sidorna du gillar eller något som kan ge mer information om vad din hemsida handlar om?! Om du inte kommer ihåg hur man skriver finns det ett exempel till höger på sidan.

//Detta är ett kodexempel på hur man skriver en länk i HTML kod.

<a href="https://www.haja-kod.se">Länk till Haja Kod </a>

• 2. Lägg till minst 2 bilder och för att göra det kommer du behöva använda <img> taggen. Den här kan vara lite klurig, men vi vet att ni kommer klara det! Ett exempel på hur en <img> tag kan se ut ser du till höger.
• TIPS! För att lägga till en bild i vårt program(Codepen) så behöver den finnas “online”.
  
  1. Det innebär att om du går in på Google och söker efter en bild, t ex “Söt hund”.
  
  2.Välj ut bilden du vill ha på din hemsida genom att trycka på den.
  
  3.När den har kommit upp i ett större format till höger så högerklicka på bilden
  
  4. Välj “Kopiera bild adress”.
  
  5. När du gjort detta kan du klistra in din länk i <img> taggen. Se kodexemplet till höger om du är osäker.
  

//Här är ett exempel på hur du kan lägga till en bild i din kod
<img src="https://i.pinimg.com/cute-pig.jpg" 
     alt="bild på en söt gris"/>

• 3. Nu så ska du göra så att 2 st av bilderna i under Del 3 – övning 2 går att trycka på – dvs när du trycker på bilden så skall du komma till en ny sida. Ledtråd: du behöver använda både <img> och <a> elementen för att lyckas med den här uppgiften.

//Här är ett exempel på hur du kan göra en bild till en klickbar länk.
<a href="https://www.google.se"><img src="https://i.pinimg.com/cute-pig.jpg" 
                alt="bild på en söt gris"/></a>