Datakurser
Aktuell vecka: 31

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.

Grunder från webbutveckling 1

Börja med att repetera det du lärde dig i kursen webbutveckling 1.

Variabler, dialogrutor, funktioner, händelser (onclick, onload), hämta och skriva värden i formulärkomponenter, enkla if-satser, timers, de inbyggda objekten Date, Window, Screen samt visa/dölja ett område.

Javascript Grunder i Webbutveckling 1

Placering av Javascripten

xxx
xxx
xxx
xxx

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.

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.

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, xy, 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.

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,d,x,y,z;
a=5;
b=3;
c=12;
d="";
if (a>b && a>c) d="a är störst, ";
else d="a är inte störst, ";
//Blir "a är inte störst"
if (a>b || a>c) d+="a är större än ett eller flera tal, ";
else d+="c är inte större än ett eller flera tal, ";
//Blir "a är större än ett eller flera tal"
if (!(a==b)) d+="a är inte lika med b";
else d+="a är lika med b";
//Blir "a är inte lika med b", eftersom !(a==b) blir "inte false" (not false) utan då true
document.getElementById("jsex4div").innerHTML = d;

Loopar och operatorer

xxx
xxx
xxx
xxx

<form>
   <input type="text" size="10" id="jsex1text" value="11" />
   <input type="button" onclick="jsex1()" value="Visa" />
</form>
<div id="jsex1div">
</div>
<script>
   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 />";
      }
      document.getElementById("jsex1div").innerHTML += "<br />Och nu while-slingan!<br /><br />";
      var x = 0;
      while (x<tal) {
         if (x > 8) break; // gå ur loopen
         x++; // x = x + 1;
         if (x%2 == 0) {
            document.getElementById("jsex1div").innerHTML += "Varv: " + x + "<br />";
         }
      }
   } //slut funktion jsex1
</script>

Timer

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.

var id;
xxx
id = setTimeout("jsex3_start()",1000);
xxx
xxx
clearTimeout(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="jsex3text" size="20" value="0:00" /><br />
   <input type="button" onclick="jsex3_start()" value="Start" />
   <input type="button" onclick="jsex3_stopp()" value="Stopp" />
   <input type="button" onclick="jsex3_nollning()" value="Nolla räknare" />
</form>
<script>
   var antalSekunder=0;
   var id;
   function jsex3_start() {
      antalSekunder++;
      var minut= parseInt(antalSekunder/60);
      var sekund=antalSekunder-parseInt(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>


Källor

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

w3schools - javascript

 

Program

Webbredigering
NotePad++ (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