JavaScipt

• JavaScript er et objektorientert skriptingspråk.
• Det er ikke en "lightversjon" av Java.
• JavaScript brukes i hovedsak for å programmere dynamikk på websider
• JavaScript kan lese og skrive HTML elementer.
• JavScript kan brukes til å legge cookies på brukerens maskin
• JavaScript kan ikke skrive til andre filer på brukerens maskin
• JavaScript kan ikke manipulere maskiner som er knyttet til brukerens datamaskin
• JavaScript har ikke og kan ikke få tilgang til andre programmer på brukerens maskin

Litt om språket

• Syntaksen ligner ganske mye på Java.
• (JavaScript-linjer avsluttes med et semikolon)
• Tekst skal alltid omsluttes av anførselstegn - eller fnutter
• Case sensitivt, skiller på små og store bokstave (jeg bruker alltid bare små)
• Variable, men ikke typer.
• Arrayer
• Kontrollstrukturene som if-else, repeat, for, while.
• Unntaksprogrammering, try-catch-finally.

Plassering av JavaScript-kode

Vi kan i prinsipp plassere javaScript-kode hvor vi vil på en HTML-side. Koden skal pakkes inn i script-elementer.

<script type="text/javascript">
  function myfunction()
  {
    ...
  }
</script>

• Det er ikke særlig lurt å spre skriptkoden
• Normalt samler vi koden i head-elementet på en HTML-side eller i egen fil (.js).
• Fordelen er da at scriptet er på plass når resten av siden lastes og eventuelt forsøker å bruke det.

JavaScipt i <body>-elementet, js1.html

<html>
<body>
<script type="text/javascript">
  document.write("Hello World!")
</script>
</body>
</html>

JavaScipt i <head>-elementetst, js2.html

<html>

<head>
  <script type="text/javascript">
    function melding() 
    {
      alert("Hello World!")
    }
</script>

</head>

<body onload="melding()">

</body><
/html>

Et bedre alternativ er å legge skriptet på en fil for seg og la nettleseren hente det når siden lastes:

<script type="text/javascript" src="mycode.js"></script>

Det er to grunner til dette.

• Man kan vedlikeholde skriptet ett sted selv om det brukes på mange sider.
• Man sparer litt tid ved at skriptfila caches og altså ikke trenger å lastes hver gang sider lastes.

Javascript på egen fil, js3.html, kode1.js

<html>

<head>
  <script type="text/javascript" src="mycode.js"></script> </head>

<body onload="melding()">

</body><
/html>

Testing og debugging

Noen enkle mekanismer for å debugge:

• Alle nettlesere som er aktuelle har mulighet for å sette opp et eget vindu som rapporterer feil i JavaScript som kjøres på siden. Jeg pleier å bruke Tools - Error Console i FireFox. Du finner tilsvarende under Tools - Advanced på nye Operaversjoner. Mozilla har også et nyttig verktøy som heter FireBug.

• Det er en grei strategi å bruke alert() funksjonen for å rapportere status på variable under kjøring.

  s="test";
  alert(s);
  

• Ellers er det mulig å skrive verdier direkte til vevsiden. Det kan være nyttig i en testfase.

  document.write("<p>Nå er vi her</p>");
  

Deklarering av variabler

• Globale variable i Javascript er rett fram.
• Alt vi definerer utenom funksjoner er tilgjengelig i alle funksjoner.

Et enkelt eksempel, myNumber er global:

var myNumber; 
function setMyNumber(nr) { 
  myNumber=nr; 
} 

function showMyNumber() { 
  alert('My number is: '+myNumber); 
}

Ved å bruke var foran en variable sikrer vi oss at variabelen er definert for den blokken (scope) vi er i. Det er en god vane å bruke var for å unngå å bruke globale variable med samme navn ved en misforståelse.

var myNumber=123;

function setMyNumber(nr)
{
    myNumber=nr;
}

function showMyNumber()
{
    var myNumber=13;
    setMyNumber(24);
    // will allways display 13
    alert('My number is: '+myNumber);
}

Variable skal ikke typedeklareres og de kan instansieres

• var noe;
• var noe = "ett eller annet";
• var noe = 2;
• var noe = true;
• var noe = document.bgColor;

Tilordne verdier til variabler

Den vanligste måten å tilordne verdier til en variabel er ved bruk av =tegnet.

Eksempel med variabel: js4.html

Betingelser

JvaScript har følgende setninger for betingelser:

• if statement , (js5.html)
• if...else statement , (js6.html)
• if...else if....else statement , (js7.html)
• switch statement , (js8.html)

Operatorer for sammenligninger

Logiske operatorer

Popup bokser

JavaScript tilbyr tre forskjellige pop-up bokser:

• alert
• confirm
  • Returnerer true (OK) eller false (Cancel/Avbryt)
• prompt
  • Returnerer en tekststreng (OK) eller null (Cancel/Avbryt)

jc9.html

Funksjoner

• Javascript-kode som er skrevet inn i en funksjon vil ikke bli utført av browseren før vi ber om det.
• Funksjoner deklareres enten i <head> seksjonen eller i en egen JavaScript kodefil .js.
• En funksjon blir kalt av et event eller en annen funksjon.

Syntaksen for å definere en funksjon

function funksjonsnavn(var1,var2,...,varX)
{
  kode; 
}

var1, var2 osv er variabler som overføres til funksjonen som parametere.

En funksjon uten parametere må likevel ha parentseser () etter funksjonsnavnet

function funksjonsnavn()
{
  kode;
}

Returvedi til funksjoner

return setningen brukes til å returnere en verdi fra funksjonen.

function prod(a,b)
{
  x=a*b
  return x
}

Funkjsjonen må kalles med to parametere

produkt=prod(2,3)

Returverdien fra funksjonen prod() er 6, og blir lagret i en variabel men navn produkt.

js10.html

for-løkke

Syntaks

for (var=startverdi; var<=sluttverdi; var=var+inkrement) 
{
    kode
}

js11.html, js12.html

while-løkke

Syntaks

while (var<=sluttverdi)
{
    kode
}

js13.html, js14.html

For...In-løkke

Brukes til å iterere gjennom elementene i en array eller egenskapene til et objekt.

Syntaks

for (variable in object)
{
    code to be executed
}

js15.html