Datakurser
Aktuell vecka: 36

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>

Enkla funktioner och enkel händelsehanterare, koppla knapp till något som ska hända

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, click, och ser till att funktionen anropas då vi klickar på knappen.

"use strict";

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.

document.getElementById('idElement').addEventListener('händelse', namnPåFunktion);
function namnPåFunktion() {
      "use strict";
      document.getElementById("idElement").style.display = "show";
}

<button type="button" id="jsbutton">Visa</button>
<div id="jsdiv">Här finns viktig information!</div>
<script>
      document.getElementById("jsdiv").style.display = "none";
      document.getElementById('jsbutton').addEventListener('click', jsfunktion);

      function jsfunktion() {
            "use strict";

            document.getElementById("jsdiv").style.display = "block";
      }
</script>

Här finns viktig information!

För att kunna sätta egenskapen "display" till antingen "none" eller "block" så måste vi ta ett html-element, med ".style" få tag på massa egenskaper och med ".display" just visa/dölj-egenskapen, som vi sen tilldelar ett värde.

<input type="text" id="jstext" value="" placeholder="Skriv här!"><br>
<button type="button" id="moveButton">Kopiera</button>
<h1 id="jsh1"></h1>
<script>
document.getElementById('moveButton').addEventListener('click', kopieraText);

function kopieraText() {
      "use strict";
      document.getElementById("jsh1").innerHTML = document.getElementById("jstext").value;
}
</script>

I det här demot har vi använt en textruta och en h1-tagg som vi bearbetar. För att komma åt det som står i en textruta så använder vi egenskapen value och motsvarande när det gäller en html-tagg (h1, div, p, osv.) heter innerHTML.
document.getElementById("jsh1").innerHTML = document.getElementById("jstext").value;
Datorn arbetar med det på höger sida om likamed-tecknet (= - tecknet) och när höger sida är klar förs det över till vänster sida (tilldelning). I vårt fall så hämtar den det som står i textrutan med id:t "jstext" och för över det till id:t på vänster sida "jsh1". Vänster sida kommer skriva i html-elementet.
När vi klickar på knappen så tar den det som står i textrutan och skriver i h1-elementet. Stod något tidigare i h1-elementet så tas det bort och det nya skrivs in.

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 inte skriver "var" framför variabelnamnet) utan använder den ändå så blir variabeln automatiskt global. Onödigt och inte bra programmerat.

<button type="button" id="jsbuttonx">Visa</button>
<button type="button" id="jsbuttonxx">Visa mer</button>

<div id="jsdivx">Här finns viktig information!</div>
<script>
x=5;
var y=7;
document.getElementById('jsbuttonx').addEventListener('click', jsfunktionx);
document.getElementById('jsbuttonxx').addEventListener('click', jsfunktionxx);

function jsfunktionx() {
z=2;
var x=3, m=4;
document.getElementById("jsdivx").innerHTML += "<hr>"+"x="+x+"<br />"+"y="+y+"<br />"+"z="+z+"<br />"+"m="+m;
}
function jsfunktionxx() {
document.getElementById("jsdivx").innerHTML += "<hr>"+"x="+x+"<br />"+"y="+y+"<br />"+"z="+z;
}

document.getElementById("jsdivx").innerHTML = "x="+x+"<br />"+"y="+y+"<br />";

</script>

"Rock'n roll kodning", EJ BRA KODNING.
Först deklarera jag x och globalt i webbsidan, x utan "var" framför. Det blir samma funktionalitet men tydligare och bättre med "var" framför båda.
Inget "use strict" i funktionen vilket gör att när slarvar på samma saätt som ovan med deklarationerna av variablerna så blir z global och x och m lokala. Vilket syns genom att jag i en annan funktion kan skriva ut värdet på z. Ajajaj. Med "use strict" så hade vi fått felmeddelande. deklarera alla variabler med "var". Vill du ha en variabel som syns i flera funktioner, deklarera den utanför funktionerna så den blir global och du får tillgång till den i valfria funktioner.

Här finns viktig information!

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.

 

<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').addEventListener('click', 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>

Ett klassiskt problem dyker upp här och det är när vi hämtar ett värde från en textruta så tolkar javascript detta som en textsträng och vi får problem när vi räknar med textsträngar. Vi behöver då omvandla textsträngen till ett tal.
var tal = parseInt(text); betyder att vi använder en inbyggd funktion parseInt() som betyder "gör om en textsträng till ett heltal". Det vill säga den hämtar innehållet i varibeln "text", gör om detta till ett heltal och tilldelar variabeln "tal" själva heltalet. Detta gör att vi kan räkna med innehållet.

Om vi försöker göra om en bostäver till ett tal får vi som svar NaN, "Not a Number".

Vill vi plocka ut decimaltal så finns motsvarande funktion för detta och heter parseFloat() .

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)