Övningar
Här kan man hitta länkar till alla övingar jag gjort:
Allmäna övningar
- - Webtest
- - Kontrol test så allt funkar.
Specifika övningar
- - Övning A
- - Skapa ett divelement i html-koden som det inte
står något i. Lägg till sist i body-elementet en script-del. Skriv javascriptkoden som skriver
ditt namn i div-elementet. Vi har inga funktioner utan allt sker när sidan läses in. Testkör och se
till att ditt namn dyker upp på webbsidan.
- - Övning B
- - Skapa ett divelement och skriv sen sist i bodyelementet lite javascriptkod. Deklarera 4 variabler (x, y, z och summa) variabler. Tilldela de 3 första variablerna värdena 12, 34 och 56. Skriv koden för att summera x,y, z och lägga svaret i summa-variabeln. Till slut skriv ut det som står i summa-variabeln i ett divelement. Vi har inga funktioner utan allt sker när sidan läses in. Testkör och se till att summan dyker upp på webbsidan.
- - Övning C
- Gör samma sak som i övning b, men lägg all javascriptkod i en egen fil och länka in den i din html-fil istället. Resultatet ska se likadant ut.
- - Övning D
- Gör samma sak som i övning a men skriv ut ditt namn i en textruta.
- - Övning E
- Skapa ett divelement i html-koden som det inte står något i. Skapa en knapp.
Lägg till sist i body-elementet en script-del. Skriv en funktion som skriver ditt namn i div-elementet. Koppla knappens "klick"-händelse till din funktion. Testkör och se till att ditt namn dyker upp på webbsidan när du klickar på knappen.
- - Övning F
- Utöka e-övningen. (Kopiera e-övningen och ändra.) Se till att div-elementets innehåll utökas vid varje klick. Det vill säga har du klickat 5 gånger på knappen så ska ditt namn stå 5 gånger på webbsidan.
- - Övning G
- Kopiera e-övningen men ändra så att så att varje gång du klickar på knappen så ökar värdet på en global variabel (t ex variabeln "antalklick") med ett. När värdet är uppdaterat så skriver du ut det i div-elementet. (Du kan testa både "antalklick=antalklick +1;" och "antalklick++;") . Finns det någon skillnad.
- - Övning I
- Skapa en webbsida med följande kod:...
- - Övning J
- Byt ut sista rade i jsfunktionzz mot , "
"+"x="+x+"
"+ "y="+y + "z="+z; dvs du lägger till + "z="+z . Kör filen, vad händer?
Titta i "Console" i Developer Tools, Ctrl+Shift+I så kommer du dit i Chrome.
Varför?
- - Övning A
- Skapa 2 textrutor och en knapp och en div-ruta. I dessa ska du mata in ett tal i de två textrutorna, vid klick på knappen ska du anropa en javascriptfunktion som skriver ut det största av dessa tal.
- - Övning B
- Skapa 1 textruta och en knapp och en div-ruta. När du handlar i Hen&Hen så får du rabatt om du handlar för en viss summa. När du handlar för mer än 1000kr så får du rabatten 10% , över 5000 kr så får du rabatten 20% , över 10000 kr så får du rabatten 30%. Läs in summan och skriv ut vilken rabatt du får och slutpriset.
- - Övning C
- Skapa 3 textrutor och en knapp och en div-ruta. I dessa ska du mata in ett tal i de tre textrutorna, vid klick på knappen ska du anropa en javascriptfunktion som skriver ut det största av dessa tal.
- - Övning D
- - Läs in tre tal och skriv ut talen i storleksordning?
- - Övning A
- - Skriv en funktion som skriver ut 1 till och med 100 i en div-ruta. Använd while-loop. Använd en knapp för att starta funktionen.
- - Övning B
- - Gör samma sak som a men se till att det blir ny rad för varje tal.
- - Övning C
- - Skriv ut alla jämna tal från 2 till och med 100.
- - Övning D
- - Summera alla heltal från 1 till och med 1000. Skriv ut svaret i en div-ruta.
Javascript Övning For-Loopar
- - Övning A
- - Skriv en funktion som skriver ut 1 till och med 100 i en div-ruta. Använd for-loop. Använd en knapp för att starta funktionen.
- - Övning B
- - Gör samma sak som a men se till att det blir ny rad för varje tal
- - Övning C
- - Skriv ut alla jämna tal från 2 till och med 100.
- - Övning D
- - Summera alla heltal från 1 till och med 1000. Skriv ut svaret i en div-ruta.
- - Övning A
- - Skriv ett javascript som skapar ett tidur som visar hur många sekunder du varit inne på just den här sidan. Eller om du vill kan du själv starta tiduret. Eller skapa en av varje!
- - Övning B
- - Skriv ett javascript som skriver ut "Hejsvejs" var 5:e sekund i en divruta. Se till att den bygger på i divrutan. Det vill säga efter 15 sekunder ska det stå "Hejsvejs" på 3 rader.
- - Övning C
- - Utveckla uppgift a till ett fungerande stoppur.
- - Övning D
- - Utveckla uppgift a så tiduret visar timmar, minuter och sekunder.
- - Övning 1
- - Skriv en funktion som skriver ut ditt namn 10 gånger. Testkör den.
- - Övning 2
- - Skriv en funktion med 2 parametrar (namn, x). Funktionen ska skriva ut namn x gånger. Varje gång namn skrivs ut så blir det på ny rad. Testkör.
- - Övning 3
- - Skriv en funktion med 2 parametrar (namn, y) som bygger ihop en textsträng med namn, y gånger efter varandra. Funktionen ska returnera textsträngen så du måste ta emot den därifrån du anropar funktionen. Skriv där ut textsträngen.
- - Övning 4
- - Skriv en funktion som multiplicerar två tal. Som returvärde ska funktionen returnera resultatet, dvs produkten av talen. Skriv en till funktion som hämtar värdena från textrutor, anropar din multiplicera-funktion, skickar med värdena, tar emot och skriver ut.
- - Övning 1
- - Skapa en webbsida med en knapp som ställer om bakgrundsfärgen på webbsidan om du för musen över knappen. Och ställer tillbaks färgen när du drar bort musen från knappen.
- - Övning 1
- - Övning 1
- - Övning 2
Podd
- på Taras
Javascript Canvas
- - Övning 1
- - Övning 2
- - Övning 3