JavaScript Övning Start

(Spara din webbsida efter varje deluppgift med namn enligt modellen js_start_a.html, js_start_b.html, js_start_c.html, osv.)

1. 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.
   
   
2. 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.
   
   
3. 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.
   
   
4. Gör samma sak som i övning a men skriv ut ditt namn i en textruta.
   
   
5. 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..
   
   
6. 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.
   
   
7. 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.
   
   
8. Finns det ytterliggare sätt att skriva att en variabels värde ska öka med 1?
   
   
9. Skapa en webbsida med följande kod:
   
   <button type="button" id="jsbuttonx">Visa</button>
   <button type="button" id="jsbuttonxx">Visa mer</button>
   <div id="jsdivx">Här kommer viktig information!</div>
   
   <script>
   var x=22, y=7;
   document.getElementById('jsbuttonx').addEventListener('click', jsfunktionz);
   document.getElementById('jsbuttonxx').addEventListener('click', jsfunktionzz);
   function jsfunktionz() {
   x=1;
   var y=3, z=4;
   document.getElementById("jsdivx").innerHTML +=
   "<hr>"+"x="+x+"<br />"+ "y="+y+"<br />"+"z="+z;
   }
   
   function jsfunktionzz() {
   document.getElementById("jsdivx").innerHTML =
   document.getElementById("jsdivx").innerHTML +
   "<hr>"+"x="+x+"<br />"+ "y="+y;
   }
   </script>
   
   
10. Byt ut sista rade i jsfunktionzz mot , "<hr>"+"x="+x+"<br />"+ "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?
    
    
11. Starta med koden från övning i. Nu ska vi lägga till "var" framför x i funktionen jsfunktionz. Testa att köra webbsidan. Vad händer?
    Vad är skillnaden mot övning i? Varför? (Global, lokal variabel!)
    
    
12. Skapa en webbsida med följande kod:
    
    <button type="button" id="jsba">Visa</button>
    <button type="button" id="jsbb">Visa mer</button>
    <div id="jsdivx">Här kommer viktig information!</div>
    
    <script>
    var y=7;
    document.getElementById("jsba").addEventListener('click', testa);
    document.getElementById("jsbb").addEventListener('click', testb);
    function testa() {
    "use strict";
    x=1;
    document.getElementById("jsdivx").innerHTML +=
    "<hr>"+"x="+x+"<br />"+ "y="+y+"<br />";
    }
    
    function testb() {
    "use strict";
    var x = "HEJ!";
    document.getElementById("jsdivx").innerHTML +=
    "<hr>"+"x="+x+"<br />"+ "y="+y;
    }
    </script>
    
    
    Vad händer när du klickar på knapparna?
    Åtgärda problemet. Vad gör du?
    (Vi använder lokala variabler i funktionerna, variablerna har samma namn, x, men är bara synliga i respektive funktion och det kommer aldrig att ske någon krock mellan dessa.)