Datakurser
Aktuell vecka: 51

Tillbaka till toppen

JAVASCRIPT Grunder

Inledning

Javascript använder vi för att skapa interaktivitet på webbsidor. Javascript är ett skript-språk vilket är ett lättvikts-programmeringsspråk jämfört med Java, C, C++ som är fullständiga programmeringsspråk. Javascript körs på klientsidan, det vill säga i webbläsaren.
Javascript är ett interpreterande språk, det vill säga koden kompileras samtidigt som den körs. Javascript reagerar på händelser och kan ändra innehåll i en webbsidas del, kontrollera formulärdata, skapa cookies.
Javascript heter också ECMAScript som var det ursprungliga namnet och började utvecklas av Netscape 1995.

Placering av Javascripten

Javascriptkoden ska ligga i separata js-filer. Den kan ligga lokalt på webbsidan innanför script-taggar men vi strävar efter att ha separerade filer med olika innehåll, html, css, javascript.
Vi länkar till filen på följande sätt:

<script src="hello.js"></script>

Ovanstående länkning till js-filer bör helst ligga precis innan "</body>"-taggen. Anledningen är att javascripten kan användas till att manipulera delar på webbsidan (webbsidan laddas ju in i webbläsaren som bygger upp en trädstryktur av alla element, enligt DOM(Document Object Model)) och om skripten placeras inom head-taggarna så är ju inte sidan laddad ännu och elementen som javascripten hänvisar till finns inte, ännu.
Det går att lösa med onload-händelsen, men den körs inte förrän alla sidor och bilder är färdigladdade och är det många bilder blir det onödigt segt att behöva vänta.

Bäst är att lägga länkningen till js-filerna precis innan "</body>"-taggen.

Om du tittar på exempel på internet så kan koden enbart ligga inom script-taggarna direkt på webbsidan.

<script> //Din js kod</script>

Variabler

Regler för variabelnamn: de är "case sensitive", dvs xyz och xyZ är två olika variabler (eftersom Javascript är det)
de måste börja med en bokstav

Variabler deklareras med "var".

var x;

ger en variabel som är tom, dvs har inget värde.

var y=5;

Ger att variabeln initieras direkt med ett värde.

Snyggast och tydligast är att först deklarera sina variabler och initiera de som ska ha ett värde från start.

// Deklarera variabler
var x, y, z;

// Initiera variabler
x=3;
y=2.5;
z="Hej svejs!";

Ger att variabeln initieras direkt med ett värde.

Lokala och globala variabler

Om en variabler deklareras inuti en funktion så kallas den lokal. Den syns då bara inuti funktionen och när funktionen avslutas så försvinner variablen. Detta gör att det går att ha samma variabelnamn i olika funktioner.

De variabler som deklareras utanför funktionerna är globala och blir åtkomliga i alla javascriptdelar på hela webbsidan. Globala variabler försvinner först när webbsidan stängs.

Om man inte deklarerar en variabel (det vill säga skriver "var" framför variabelnamnet) utan använder den ändå så blir variabeln automatiskt global. Onödigt och inte bra programmerat.

x=5;

Operatorer

Aritmeriska operatorer

+ - * / känner vi igen
% (modulo) och är resten vid heltalsdivision, 15/4 ger att 4 går i 15 3 hela gånger och då plockas 3*4=12 bort från 15 och resten som blir kvar är 15-12=3, 15 modulo 4 är 3 .
++ och -- är ökning respektive minskning med 1 i en variabel. Det finn både att man kan skriva x++ och ++x (normalt i vår kod har det ingen betydelse, men i det första fallet skickas värdet vid tilldelning innan ökningen med 1 görs och i det andra fallet så sker ökningen först och överflyttningen vid tilldelning sedan, vi använder detta mest för att skapa räknare) x=3 ger att 3 finns i x, med x++ så ökas 3:an till en 4 .

Tilldelningsoperatorer

= är den operator som lägger över allt i en variabel

det finns även några kortare skrivsätt för t ex
x=x+5; som kan skrivas x+=5;
x=4*x; som kan skrivas x*=4;
osv.

+ operatorn

Är lite speciell eftersom den fungerar olika beroende på vad vi vill "plussa", addera för tal och konkatenera för textsträngar. Blandar man tal och textsträngar så blir det en textsträng som resultat.

var a,b,c,d,x,y,z;
a=5;
b=3;
c="Hej svejs ";
d="i lingonskogen.";
x=a+b; //Blir 8
y=c+d; //Blir Hej svejs i lingonskogen.
z=a+d; //Blir 5i lingonskogen.

Villkor

Jämförelse operatorer

När vi ska jämföra om två variabler innehåller samma tal så använder vi == (OBS! Två likamedtecken).

Dubbla likameds-tecken för att testa om x innehåller samma tal som y, x==y .

x!=y, x<y, x>y, x<=y, x>=y
testar om x INTE är lika med y, x är mindre än y, x är större än y, x är mindre än eller lika med y, x är större än eller lika med y.

var a,b,text;
a=parseFloat(document.getElementById("jsex5divinputone").value);
b=parseFloat(document.getElementById("jsex5divinputtwo").value);
text="";

if (a>b) {
     text = a + " är större än " + b;
}
else if (a==b) {
     text = a + " är lika med " + b;
}
else{
     text = b + " är större än " + a;
}

document.getElementById("jsex5div").innerHTML = text;


Logiska operatorer

Använder du när du vill kombinera olika tester med jämförelseoperatorer.
&& är OCH
|| är ELLER
! är INTE

var a,b,c,text;
a=5;
b=3;
c=12;
text="";

if (a>b && a>c) text="a är störst <br>";
else text="a är inte störst <br>";

if (a>b || a>c) text+="a är större än ett eller flera tal <br>";
else text+="c är inte större än ett eller flera tal <br>";

if (a!=b) text+="a är inte lika med b";
else text+="a är lika med b";

document.getElementById("jsex4div").innerHTML = text;

Enkla funktioner och enkel händelsehanterare

Skapa ett paket av kod som körs först när vi anropar paketet

Vi introducerar den allra enklaste formen av funktioner redan nu, så vi kan skapa lite textrutor och knappar på våra webbsidor som i sin tur gör olika saker som vi programmerat.
Vi lägger lite kod i en funktion. Den koden körs först då vi anropar funktionen. Nu till en början anropar vi funktionen genom att vi klickar på en knapp. Vi lägger på en inbyggd händelsehanterare på vår knapp, onclick och ser till att funktionen anropas då vi klickar på knappen.

För att styra så vi inte får använda vissa delar i javascript som lätt blir fel så använder vi "use strict" i våra funktioner. "Use strict" gör så att vissa accepterade fel inte får användas utan vi måste skriva korrekt kod. Använd det inte globalt då det kan slå ut färdiga bibliotek vi kanske kommer att använda senare.

<form>
      <input type="text" size="10" id="jsex9text" value="25">
     <button type="button" id="jsex9button">Visa</button>
</form>
<div id="jsex9div"></div>
<script>
      document.getElementById('jsex9button').onclick = jsex9;

      function jsex9() {
            "use strict";
            var text = document.getElementById("jsex9text").value;
            var tal = parseInt(text);
            document.getElementById("jsex9div").innerHTML = "";
 
            var nyttTal=tal*tal;
            document.getElementById("jsex9div").innerHTML = "Kvadraten blir: " + nyttTal;
      }
</script>

 

Loopar

while

//initiera en variabel innan loopen
//du kör loopen om testen i parentesen efter while är sann
var x=0;
while ( x<5 ) {
      //gör något
      . . .
      //öka räknaren (i detta exempel)
      x++;
}

<form>
   <input type="text" size="10" id="jsex1btext" value="11">
   <button type="button" id="jsex1bbutton">Visa</button>
</form>
<div id="jsex1bdiv">
</div>
<script>
   document.getElementById('jsex1bbutton').onclick = jsex1b;

   function jsex1b() {
      var text = document.getElementById("jsex1btext").value;
      var tal = parseInt(text);
      document.getElementById("jsex1bdiv").innerHTML = "";
 
      var x = 0;
      while (x<tal) {
             document.getElementById("jsex1bdiv").innerHTML += "Varv: " + x + "<br>";
             x++;
      }
   } //slut funktion jsex1b
</script>

Ett lite knepigare exempel med lite finesser

<form>
   <input type="text" size="10" id="jsex1atext" value="11">
   <button type="button" id="jsex1abutton">Visa</button>
</form>
<div id="jsex1adiv">
</div>
<script>
   document.getElementById('jsex1abutton').onclick = jsex1a;

   function jsex1a() {
      var text = document.getElementById("jsex1atext").value;
      var tal = parseInt(text);
      document.getElementById("jsex1adiv").innerHTML = "";
 
      var x = 0;
      while (x<tal) {
         if (x > 8) break; // gå ur loopen
         x++; // x = x + 1;
         if (x % 2 == 0) {
            document.getElementById("jsex1adiv").innerHTML += "Varv: " + x + "<br>";
         }
      }
   } //slut funktion jsex1a
</script>

for

<form>
   <input type="text" size="10" id="jsex1text" value="11>
   <button type="button" id="jsex1button">Visa</button>
</form>
<div id="jsex1div">
</div>
<script>
   document.getElementById('jsex1button').onclick = jsex1;

   function jsex1() {
      var text = document.getElementById("jsex1text").value;
      var tal = parseInt(text);
      document.getElementById("jsex1div").innerHTML = "";
      for (var i = 0; i<tal; i++)
      {
         document.getElementById("jsex1div").innerHTML += "Varv: " + (i+1) + "<br >";
      }
    } //slut funktion jsex1
</script>

Timer

setTimeout

Vi kan skapa en timer med, setTimeout( minFunktion, tidTillNästaAnropAvFunktionen); . Där tiden till nästa anrop anges i millisekunder. Lägger vi även till en variabel som får en koppling till timern så kan vi stänga av den. Med setTimeout så skapar vi ett anrop till en funktion.

var id;
xxx
id = setTimeout(jsex3_start,1000);
xxx
xxx
clearTimeout(id);

OBS! Det är FEL att skriva på följande sätt: id = setTimeout(jsex3_start,1000);

Vi visar med ett simpelt tidtagarur som har en liten bugg i sig genom att första sekunden går alldeles för snabbt, men detta lämnas till dig att fixa :-) .

<form>
   <label>Tidtagarur (minuter:sekunder)</label><br>
   <input type="text" id="jsex3text" size="20" value="0:00"><br>
   <button type="button" id="jsex3_start_button">Start</button>
   <button type="button" id="jsex3_stopp_button">Stopp</button>
   <button type="button" id="jsex3_nollning_button">Nolla räknare</button>
</form>
<script>
   document.getElementById('jsex3_start_button').onclick = jsex3_start;
   document.getElementById('jsex3_stopp_button').onclick = jsex3_stopp;
   document.getElementById('jsex3_nollning_button').onclick = jsex3_nollning;

   var antalSekunder=0;
   var id;
   function jsex3_start() {
      antalSekunder++;
      var minut= parseInt(antalSekunder/60);
      var sekund=antalSekunder-minut*60;
      if (sekund < 10) {
         sekund = "0"+sekund;
      }
      var temp = minut+":"+sekund;
      document.getElementById("jsex3text").value = temp;
      id = setTimeout(jsex3_start,1000);
   }
   function jsex3_stopp() {
      clearTimeout(id);
   }
   function jsex3_nollning() {
      antalSekunder=0;
      document.getElementById("jsex3text").value = "0:00";
   }
</script>


setInterval

Vi kan skapa en timer med, setInterval( minFunktion, tidTillNästaAnropAvFunktionen); . Där tiden till nästa anrop anges i millisekunder. Lägger vi även till en variabel som får en koppling till timern så kan vi stänga av den. Skillnaden mot setTimeout är att här startar man en timer som anropar en funktion med ett visst tidsintervall tills man stänger av timern.

var id;
xxx
id = setInterval(jsex6_klocka,1000);
xxx
xxx
clearInterval(id);

Vi visar med ett simpelt tidtagarur som har en liten bugg i sig genom att första sekunden går alldeles för snabbt, men detta lämnas till dig att fixa :-) .

<form>
   <label>Tidtagarur (minuter:sekunder)</label><br>
   <input type="text" id="jsex6text" size="20" value="0:00"><br>
   <button type="button" id="jsex6_start_button">Start</button>
   <button type="button" id="jsex6_stopp_button">Stopp</button>
   <button type="button" id="jsex6_nollning_button">Nolla räknare</button>
</form>
<script>
   document.getElementById('jsex6_start_button').onclick = jsex6_start;
   document.getElementById('jsex6_stopp_button').onclick = jsex6_stopp;
   document.getElementById('jsex6_nollning_button').onclick = jsex6_nollning;

   var antalSekunder=0;
   var id;
   function jsex6_klocka() {
      antalSekunder++;
      var minut= parseInt(antalSekunder/60);
      var sekund=antalSekunder-parseInt(minut*60);
      if (sekund < 10) {
         sekund = "0"+sekund;
      }
      var temp = minut+":"+sekund;
      document.getElementById("jsex6text").value = temp;
   }

   function jsex6_start() {
      id = setInterval(jsex6_klocka,1000);
   }
   function jsex6_stopp() {
      clearInterval(id);
   }
   function jsex6_nollning() {
      antalSekunder=0;
      document.getElementById("jsex6text").value = "0:00";
   }
</script>



Källor

Webbutveckling 1, Thelin Läromedel & Lars Gunther (2013)

HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode(september 2014)

w3schools - javascript

 

Program

Webbredigering
NotePad++ (gratis)
Sublime (gratis)
MS Expression Web 4
(licens genom skolan)
Dreamweaver (dyrt)

Filöverföring
FileZilla
(Introduktion av FileZilla)
(Hur du skapar en plats)

Checka din kod

JSHint

Chrome Developer Tool
(Ctrl+Shift+I)

Firefox Developer Tool
(Ctrl+Shift+K)

En liten film om ovanstående (15 min)