JavaScript kan bl.a. brukes i vev-sider sammen med html og css-koder.
Koden lastes ned til nettleseren sammen med dokumentet.
JS-skript starter med starttagg <script> og avsluttes med sluttagg: </script>.
Koden legges inn i html-dokumenter.
Koden kjøres på klienten, etter at den er lastet ned til nettleseren.
Besøkende kan se koden ved å klikke på «vis kilde» i nettleseren.
Eksempel. Kommandoen document.write() kan brukes til å skrive ut tekst til vevsiden.
<script>
document.write("Hei "); document.write("verden! ");
document.write("<br>");
document.write('Hei og hå. ');
</script>
"<br>" gir en ny linje i html-kode.
Enkelfnutt kan i noen tilfeller brukes isteden for dobbelfnutt.
Legg merke til at instruksjoner avsluttes med semikolon;
En variabel kan sees på som en beholder med en verdi inni.
Rent fysisk er det minnecelle som inneholder en viss verdi.
Variabelen må ha et unik navn i den konteksten den er i.
Navnet kan tenkes på som en peker til variabelen.
Variabler tilordnes en verdi med bruk av = tegnet, som betyr «settes lik».
<script>
x=1;
// Navnet ‹x› settes til å peke på
// en beholder som tildeles verdien 1.
// I praksis sier man bare at x settes lik en.
abc = 123;
// Variabelen abc settes til
// tallet etthundre og tjuetre.
p = abc; // Her settes p til å være lik
// variabelen abc som er 123.
q = "abc";
// Her settes q til en tekststreng med teksten abc.
r = abc;
// Her settes r til en tekststreng med teksten abc.
document.write (x);
document.write (abc);
document.write (p);
document.write (q);
document.write (r);
</script>
x="abc"; er noe annet enn x=abc;
Det siste betyr at x settes lik en annen variabel som kan inneholde hva som helst.
Hvis det ikke finnes noen slik variabel så blir innholdet tilfeldigvis det som man tror det blir.
Doble skråstreker (//) er kommentartegn.
Kommandoen r = abc; er tvetydig og bør unngås. Alle tekst-tilordninger bør ha fnutter.
<script> // Flere variabler kan tilordnes en verdi samtidig: x = y = z = 1; // er ekvivalent med: x=1; y=1; z=1; </script>
Variabler i Javascript er case-sensitiv. Det vil si at f.eks. x og X er to forskjellige variabler.
Variablene over er ikke definert.
Ikke-definerte variabler gjelder globalt,
dvs. at de gjelder utenfor funksjoner, selv om de er brukt innenfor.
På den måten kan det oppstå variabel-kaos.
Derfor bør variablene deklareres med nøkkelordet var foran.
Variabelen er da lokal,
dvs. at den kun er kjent innenfor blokken den er definert i,
og usynlig utenfor.
Globale variabler må og bør defineres utenfor funksjoner.
Det anbefales å gi variabelen en utgangsverdi,
men er ikke nødvendig.
F.eks.
var x;
definerer variabelen, men uten en verdi.
Selv om variabelen er tilordnet et tall,
kan den i neste omgang settes til å peke på en tekst.
Denne koden x=1; x="abc"; er gyldig;
Variablene er ikke typedefinert og kan dermed peke til alle typer objekter. Javascript er såkalt svakt typet, ift. andre språk som har sterk typing; hvor de ikke bare må deklareres på forhånd, men en må også si hvilken type data variabelen skal inneholde.
Kommandoen
document.write()
kan brukes for å skrive ut
en variabel til vevsiden.
<script>
/* document.write() kan brukes for å skrive til vevsiden. */
x = "abc";
document.write(x); // Skriver tekststrengen "abc".
document.write('x'); // Skriver variabelnavnet x.
document.write("x"); // Skriver variabelnavnet x.
</script>
document.write( "kan " , "skrive " , "multiple parametre.");
<pre> <script> document.writeln( "lager en ny linje "); document.writeln( "etter hver kommando. "); </script> </pre>
Eksempel 1. Sette sammen (konkatenere) variabler.
<script>
var x = "a"; // Variablene x og y,
var y = "b"; // settes til henholdsvis bokstaven a og b.
// Konkatenering.
var t = x + y; // x og y settes sammen til t.
x += y // Kortform for x = x + y. (y føyes til x.)
// (x er lik t.)
document.write(t);
document.write(x);
</script>
Eksempel 2. Substring.
<script> var tekst = "abcdef"; var lengde = tekst.length; // lengde = 6. var start = 2; var slutt = 4; tekst = tekst.substring(start, slutt); document.write (tekst); // Her skrives ut en del av den opprinnelige teksten. /* Resultatet blir «cd». */ </script>
Variabelen tekst inneholder tekststrengen «abcdef».
Deler av den kan skrives ut vha. funksjonen substring().
Eksempel 3. Substring.
<script> var tekst = "abcdef"; var t1 = tekst.substring(0,1); var t2 = tekst.substring(1,2); var t3 = tekst.substring(2,3); var t = t1 + t2 + t3 ; document.write (t); // t blir abc. </script>
<script> var tekst ="abcdef"; var t = tekst.charAt(0) + tekst.charAt(1) + tekst.charAt(2); document.write (t); /* Resultatet blir «abc». */ </script>
Her inneholder variabelen tekst tekststrengen «abcdef».
Deler av den skrives ut vha. funksjonen charAt().
Eksempel 1. Regne eksempler.
<script>
var a=0; // Deklarerer en variabel a
// og tilordner en startverdi.
a = 1 + 2 + 3;
// Legger sammen 1, 2 og 3 og lagrer
// resultatet i variabelen a.
a++; // a økes med 1. (Kortform for a = a + 1;)
a += 2; // Kortform for a = a + 2;
var b = 10 - 3; // Subtraksjon.
b--; // b minkes med 1. (Kortform for b = b - 1;)
b -= 2; // Kortform for b = b - 2;
var c = 2 * 3; // Multiplikasjon.
c *= 2; // Kortform for c = c * 2;
var d = 11 / 3; // Divisjon.
d /= 2; // Kortform for d = d / 2;
var e = 2 + 2/2 - 1;
// Divisjon, addisjon, og subtraksjon.
var f = (2 + 2 ) / (2 - 1);
// Divisjon, addisjon,
// og subtraksjon med bruk av parenteser.
var g = 11 % 3; // Heltallsdivisjon.
// Modulus g = 2 er rest etter heltallsdivisjon.
var h = 11;
h %= 2; // Kortform for h = h % 2;
var i = Math.sqrt(9);
// i = √9 = 3.0.
// Merk at sqrt returnerer et flyttall.
var j = Math.PI;
// j = 3.1415926535898.
// Konstanten gir det samme som pi-funksjonen.
var k = Math.pow(2,4);
// Eksponent. k er to opphøyd i fjerde, som er 16.
document.write(a, b, c, d, e, f, g, h, i, j, k);
</script>
Eksempel 2. Konstanter.
En konstant er en identifikator for en bestemt verdi.
<script>
// Konstanter defineres med const.
const MAKS = '123'; // Definerer en konstant
// som symboliserer en bestemt verdi.
document.write("Maksverdien er: ", " ", MAKS, ".");
</script>
Konstanter er globale og kan ikke endres under kjøring.
Konstanter har også type.
Det er en fordel å bruke store bokstaver for KONSTANTER, for å skille dem fra andre variable.
Ofte har man en variabel av type tekst som man vil ha som tall-type.
<script> var x="2"; // x er en tekststreng. x = x+x; // To tekststrenger legges sammen. document.write(x); // Og skrives ut, og blir: </script>
Variabelen x må gjøres om til et tall.
<script> var x = "2"; // x er en tekststreng. //Et triks for å konvertere en tekst til et tall // er å ved å trekke fra og legge til 0: x-=0; x+=0; x = x+x; // To tall legges sammen. document.write(x); // Og skrives ut, og blir: </script>
Og da vil to pluss to vil være fire; slik det alltid har vært.
Javascript konverterer ofte automatisk fra en type til en annen når det er nødvendig.
Noen ganger vil man endre typen til en variabel. F.eks. gjøre om et heltall til et desimaltall eller en tekst.
Eksempel 1. Funksjoner som konverterer til heltall på litt ulike måter.
<script> var x = "12.3cde "; var x1 = parseInt(x); // Konverterer til heltall. // Funksjoner som konverterer et tall // til et heltall på litt ulike måter: var x2 = Math.floor(12.7); // Runder av nedover. var x3 = Math.round(12.7); // Runder av på normalt vis. var x4 = Math.ceil(12.1); // Runder av oppover. document.write(x,x1,x2,x3,x4); </script>
Et triks for å konvertere en tekst til et tall er å ved å trekke fra og legge til 0:
<script>
var x = "12.3 ";
document.write(typeof(x));
x-=0; x+=0;
// Nå er variabelen et tall, og
// typeof(x) =
</script>
Nå er variabelen et tall, og
typeof(x) =
parseInt() Parserer en streng og returnerer et heltall.
isNaN() Avgjør om verdien er et ugyldig tall.
Number() Konverterer verdien til et tall.
Infinity er en verdi som representerer positiv eller negativ uendelighet.
NaN «Not-a-Number» verdi.
undefined Indikerer at en verdi ikke er tilordnet en verdi.
Eksempel 2. Funksjoner som konverterer til desimaltall.
<script> var x=parseFloat(x); // Konverterer til flyttall. </script>
parseFloat() Parserer en streng og returnerer et flyttall.
Eksempel 3. Konvertering til tekst.
<script> var x = 123; var y = x.toString(); // Konverterer tall til tekst. var z = String(x); // Konverterer til tekst. document.write(typeof(x)); document.write(typeof(y)); document.write(typeof(z)); </script>
String() Konverterer en verdi til en tekst.
<script> // Her er to tekster som legges sammen. var x = "1abc"; y = "2def"; document.write(x + y); // Som gir teksten 1abc2def. // I PHP ville dette blitt noe helt annet, nemlig 3. // Dette kommer av at PHP omgjør // variablene til tall før regneoperasjonen. </script>
Eksempel 4. Konvertering til matriser.
<script>
var x ="5.5";
// Funksjonen typeof(x) returnerer variabelens type.
document.write(typeof(x)); // Tekststreng.
var y = x.split(); // Konvererer en tekst til et array.
// Sjekker om et objekt er en Array-funksjon.
if (y.constructor === Array) {document.write(" array ");}
else {document.write(" ikke array ");}
document.write(y);
document.write(y[0]);
document.write(".");
</script>
Eksempel 6. Symbolet === sammenligner verdi og type.
<script> x === y // betyr at x er lik y og har samme datatype. </script>
Boolske verdier kan ha to verdier; true eller false, samt udefinert.
Eksempel 1.
<script>
var a = 10;
// a tilordnes verdien 10. (a er lik 10.)
if (a == 10)
{document.write('a er lik 10 == TRUE. ');}
if (a == 11) {}
else {document.write('a er lik 11 == FALSE. ');}
if (a === 10)
{document.write('a er lik 10 og av samme type == TRUE. ');}
if (a != 10) {} else
{document.write('a er ikke lik 10 == FALSE. ');}
if (a !== 10) {} else
{document.write('a er ikke lik 10
og av samme type == FALSE. ');}
if (a < 10) {} else
{document.write('a mindre enn 10 == FALSE. ');}
if (a > 10) {} else
{document.write('a større enn 10 == FALSE. ');}
if (a <= 10)
{document.write('a mindre enn eller lik 10 == TRUE. ');}
if (a >= 10)
{document.write('a større enn eller lik 10 == TRUE. ');}
b = 11; // b tilordnes tallverdien 11. (b er lik 11.)
if (a == 10 && b == 11)
{document.write('a er lik 10 OG b er lik 11 == TRUE. ');}
if (a == 9 || b == 11)
{document.write('a er lik 9 ELLER b er lik 11 == TRUE. ');}
a = "a"; // a inneholder teksten 10.
if (a === 10) {} else
{document.write('a er lik 10 og av samme type == FALSE. ');}
var x = true;
if (!x) {document.write('x er lik IKKE-x == FALSE. ');}
else {document.write('x er lik IKKE-x == TRUE. ');}
</script>
Eksempel 2. OG.
<script> var x = false; var y = false; // x og y tildeles en boolsk verdi. var b = x && y; // x OG y. Begge er true. (false) document.write(b); // false. </script>
Eksempel 3. ELLER.
<script>
var x = false; var y = false;
// x og y tildeles en boolsk verdi.
var b = x || y;
// x ELLER y. En av dem er true. (false)
document.write(b); // false.
// ELLER kan også lages med en if-setning.
var c = true;
if (!x) { c = y;}
document.write(c); // false.
</script>
Eksempel 4.
<script> var a = 1 < 2; // a == TRUE. var b = 2 > 3; // b == FALSE. var c = a && b; // c == a OG b == FALSE. c = (1 < 2) && (2 < 3); // c = TRUE. a = ! b; // a == IKKE- b == TRUE. var d = a || b; // d == a ELLER b. </script>
Eksempel 5. false kan være litt forskjellig.
<script>
if (false == 0)
{ document.write('false == 0') }
else {document.write('noe annet');}
if (false == "")
{document.write('false == ""');}
else {document.write('noe annet');}
</script>
Eksempel 6. true.
<script>
if (true == 1)
{document.write('true == 1');}
else {document.write('noe annet');}
if (true != 0)
{document.write('true != 0');}
else {document.write('noe annet');}
</script>
En tom if-setning kan se slik ut: if () {}
Inne i (parentesen) er en betingelse (logisk uttrykk) og i { krøllparentesene } er kommandoer.
Eksempel: if (true) {alert("True.")}
<script>
var a = 1; // a tilordnes verdien 1.
if (a == 1) {document.write('Variabelen a er lik en. ');}
</script>
Eksempel. Sammenligning av verdier.
En variabel a settes til en boolsk verdi. Den testes i en if-setning, verdien byttes og variabelen skrives ut.
<script>
var a = false;
if (a == true) {a = false;}
else {a = true;} // a bytter verdi.
document.write ('Variabelen a = ' + a + ".");
</script>
Eksempel. Sammenligning av type.
Her er to variable. De testes i en if-setning om de er like og av samme type.
<script>
var a = 5; var b = 5.0;
if (a == b) {document.write("a == b er sant.");}
else {document.write("a == b er usant.");}
if (a === b) {document.write("a === b er sant.");}
else {document.write("a === b er usant.");}
</script>
Den ene variabelen er et heltall og den andre et flyttall (desimaltall), og de er derfor ikke av samme type, og derfor ulike.
<script>
var a = 0; // a er ikke 1, 2 eller 3.
if (a == 1) {document.write("a = 1. ");}
else if (a == 2) {document.write("a = 2. ");}
else if (a == 3) {document.write("a = 3. ");}
// elseif kan også skrives i to ord.
else {document.write("a er ikke 1, 2 eller 3. ");}
</script>
If-logikk:
<script> // OG.
var a = 3;
if ((a > 1) && (a < 10))
{document.write( 'a er større enn 1 og mindre enn 10.');}
else
{document.write('a er mindre enn 1 eller større enn 10.');}
</script>
<script> // OG kan også lages med en if-setning.
// Gjør det samme som over.
var a = 3;
if (a > 1)
{
if (a < 10)
{document.write('a er større enn 1 og mindre enn 10. ');}
}
else {document.write('a er mindre enn 1
eller større enn 10. ');}
</script>
<script> // OG som if-setning.
var x = false; var y = false;
// x og y tildeles en boolsk verdi.
var a = false;
if (x) {a = y;}
if (a) {document.write( 'a == true.');}
else {document.write( 'a == false.');}
</script>
<script> // ELLER.
var a = 3;
if ((a < 1) || (a > 10))
{document.write('a er mindre enn 1 eller større enn 10. ');}
else {document.write('a er mellom 1 og 10. ');}
</script>
<script>
// ELLER kan også lages med en if-setning.
// Gjør det samme som over.
var a = 3;
if (a < 1) {}
else if (a > 10) {}
else {document.write('a er mindre enn 1 eller større enn 10. ');}
</script>
<script> // Eller som if-setning.
var x = false; var y = false;
// x og y tildeles en boolsk verdi.
var b = false;
if (x) {b = true;} else if (y) {b = true;}
if (b) {document.write('b == true. ');}
else {document.write('b == false. ');}
</script>
Switch er en annen måte å sjekke betingelser på. f.eks. istedet for mange if else-if utsagn.
<script>
var a = 2;
switch (a)
{
case 1: { mld = 'a == 1. '; break; }
case 2: { mld = 'a == 2. '; break; }
case 3: { mld = 'a == 3. '; break; }
default: mld = 'a har ukjent verdi. ';
}
document.write(mld);
</script>
Switch-setningen tar en enkelt variabel som inndata og sjekker denne mot alle de andre verdiene.
break-kommandoen avslutter switch når den finner et treff. Det sparer litt tid.
default fanger opp de tilfeller hvor det ikke er treff.
Løkker (loop) er nyttig når en trenger å utføre samme operasjon mange ganger etter hverandre.
For-løkker kan brukes når en på forhånd vet hvor mange ganger kommandoen skal utføres.
En tom for-løkke kan se slik ut: for () {}
Inne i (parentesen) er en startverdi og sluttverdi for en variabel samt, en forøkelsesfaktor.
I {krøllparentesene} er kommandoer.
Eksempel 1:
<script>
for (var i = 1; i <= 10; i++)
{document.write(i);}
</script>
Kommandoen begynner med nøkkelordet for.
Inne i parentesen får variabelen i en startverdi = 1.
Deretter følger en betingelse som repeteres sålenge den er sann. I dette tilfelle at variabelen i er mindre eller lik tallet ti.
For hver repetisjon økes variabelen i med 1.
Kommandoene utføres mellom {krøllparentesene}. I dette tilfelle skrives verdien av i ut.
En tom while-setning kan se slik ut: while (betingelse) {kommandoer}
While-løkken repeteres så lenge betingelsen er sann.
Eksempel 1:
<script>
var i = 1; // Variabelen i tilordnes startverdien 1.
while(i <= 5) // Betingelsen sjekkes.
{
document.write('Variabelen i = ' + i + ".<br>");
i++; //For hver repetisjon økes variabelen i med 1.
}
</script>
Eksempel 2: Samme program hvor verdiene skrives ut i en html-tabell.
<script>
document.write("<table>");
var i = 1; // i tilordnes startverdien 1.
while(i <= 5)
{
document.write("<tr><td>");
document.write('Variabelen i = ' + i + '.<br>');
i++;
document.write("</td></tr>");
}
document.write("</table>");
</script>
Do er en modifisert utgave av en while-loop.
En tom do-setning kan se slik ut: do {kommandoer} while (betingelse);
Kommandoen begynner med nøkkelordet do fulgt av kommandoer og en while-betingelse.
Forskjellen fra while er at løkken blir kjørt minst en gang selv om betingelsen er usann. Det er fordi betingelsen blir sjekket etter at løkken kjøres første gang.
Eksempel 1:
<script>
var i = 1; // i tilordnes startverdien 1.
do
{
document.write('Variabelen i = ' + i + ". <br>");
i++;
}
while (i <= 0);
</script>
Eksempel 2, med break.
<script>
var i = 1;
do
{
document.write('Variabelen i = ' + i + ". <br>");
i++;
Break;
}
while (i <= 10);
document.write("Løkken er stoppet og fortsetter
med etterfølgende kode utenfor løkken.");
</script>
Break stopper løkken og fortsetter med eventuell etterfølgende kode utenfor løkken.
Eksempel 3, med continue.
<script>
var i = 1;
do
{
i++;
if (i <= 6) {continue;} // Hopper over tallene til seks.
document.write('Variabelen i = ' + i + ". <br>");
}
while (i <= 10);
</script>
Kommandoen continue bryter en loop før den er fullført. Når variabelen $i har nådd en gitt verdi, fortsetter løkken på nytt, uten å utføre etterfølgende kommandoer.
En array er en spesiell variabel som kan inneholde flere verdier. Verdiene kan hentes fram ved å referere til en nøkkel-indeks.
En array kan sees på som en matrise eller tabell som består dataelementer. Hvert element har nøkkel (eller indeks) og tilhørende verdi. Elementene er indeksert fra 0 og oppover.
Innholdet i matrisen kan ha ulik datatype.
Eksempel 1: Éndimensjonal matrise
<script> var a = []; // Lager en tom matrise. a[0] = "Her en liten tekststreng. "; a[1] = "Andre tekststreng. "; a[2] = "Tredje tekststreng. "; document.write(a[0] + a[1] + a[2]); </script>
Denne matrisen kan sees på som en éndimensjonal tabell med et tre dataelementer som er indeksert fra 0 til 2.
For å referere til enkeltelementer brukes arraynavn og indeks. Arraynavnet kalles derfor også for en indeksert variabel.
Arrayvariabelen er en peker til arrayobjektet.
Eksempel 2: Array-funksjonen.
new Array() er en funksjon som kan opprette en matrise.
<script>
var a = new Array ("a", " b", " c", " d. ");
// Samme som over. Indekseringen er automatisk.
document.write(a[0] + a[1] + a[2] + a[3]);
</script>
Indeksene legges til automatisk, (og starter alltid på 0).
Eksempel 3: Innholdet i matrisen kan endres.
<script> var a = ["a", " b", " c", " d. "]; a[0] = "d "; a[1] = "e "; a[2] = "f. "; document.write(a[0] + a[1] + a[2] + a[3]); </script>
Her er innholdet abc endret til def.
Eksempel 4: Sortering.
Matriser kan sorteres, f.eks. med: sort().
<script> var a = ["i. ", "h ", "g "]; a.sort(); // Sorterer tekster alfabetisk. a.reverse(); // Sorterer motsatt. document.write(a[0] + a[1] + a[2]); </script>
Eksempel 5: En for-løkke kan skrive ut alle elementene.
<script>
// Skriver ut elementene i en matrise vha. en for-løkke.
bokstavmatrise = ["a", " b", " c", " d. "];
var antall = bokstavmatrise.length - 1;
for (var i=0; i <= antall; i++ )
{document.write(bokstavmatrise[i]);}
</script>
Eksempel 6: Elementer kan tilføyes og fjernes med push og pop.
<script>
bokstavmatrise = ["a", "b", "c"];
// Legger til et nytt element på slutten.
bokstavmatrise.push("d"); // ["a", "b", "c", "d"]
// Nøkkel er ikke spesifisert,
// men på dette stedet i koden
// er det det samme som x[3] = "d";
// Legger til et nytt element med nøkkel "4".
bokstavmatrise[bokstavmatrise.length] = "e";
// ["a", "b", "c", "d", "e"]
// Fjerner det siste elementet.
bokstavmatrise.pop(); // ["a", "b", "c", "d"]
// Sletter element nr 2.
delete bokstavmatrise[2];
// bokstavmatrise = ["a", "b",,"d"]
</script>
Foreach kan gå gjennom alle elementene i en matrise.
Eksempel: foreach kan skrive ut alle elementene.
<script>
bokstavmatrise = ["a", " b", " c", " d. "];
// Viser alle elementer i matrisen.
bokstavmatrise.forEach( function(x) {document.write(x);} );
</script>
Eksempel: foreach kan slette alle elementene.
<script>
bokstavmatrise = ["a", " b", " c", " d. "];
// Sletter alle elementene i matrisen.
function slettElement() {bokstavmatrise[nr] = "";}
bokstavmatrise.forEach(slettElement());
document.write(bokstavmatrise);
</script>
Eksempel: Tekstnøkler (assosiativ matrise).
Tekstnøkler (assosiativ matrise) støttes ikke i Javascript.
Eksempel: Todimensjonal matrise
<script> var brett = []; brett[7] = ["a","b","c","d","e","f","g","h"]; brett[6] = ["a","b","c","d","e","f","g","h"]; brett[5] = ["a","b","c","d","e","f","g","h"]; brett[4] = ["a","b","c","d","e","f","g","h"]; brett[3] = ["a","b","c","d","e","f","g","h"]; brett[2] = ["a","b","c","d","e","f","g","h"]; brett[1] = ["a","b","c","d","e","f","g","h"]; brett[0] = ["a","b","c","d","e","f","g","h"]; </script>
Følgende kode skriver ut elementene av brettet i en tabell.
<script>
document.write("<style>");
document.write("table {");
document.write("border:1px solid blue;");
document.write("border-collapse:collapse;");
document.write("}");
document.write("td{border:1px solid blue; padding: 15px;} ");
document.write("</style>");
//var antlinjer = count(brett); // Lengden av en matrise.
//var antrader = count(brett['1']);
var antlinjer = 7;
var antrader = 7;
var felt;
document.write("<p><b>Brett:</b></p>");
document.write("<table>");
for (var linje = antlinjer; linje >= 1; linje--)
{
//document.write("<tr><td>linje</td>");
for (var rad = 0; rad < antrader; rad ++)
{
//document.write("<td>" + brett[linje][rad] + "</tdc");
document.write("<td>");
felt = brett[linje][rad];
document.write(felt);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
Her er et skjema som viser en tekst:
HTML-koden ser slik ut:
<form class="kode" style="width:20em;" > Hva heter du: <input type="text" name="feltNavn"> <input type="button" value="Vis navn" onclick="alert(form.feltNavn.value)"> </form>
Når brukeren klikker Vis navn vises innholdet i feltet i en dialogboks.
HTML-koden ser slik ut:
<form> Skriv inn noen heltall, adskilt med plusstegn: <br> <input id="Tall" type="text" value="1 + 2 + 3 + 4"> <input type="button" value="Summer" onclick="summer();" </form>
Javascript-koden ser slik ut:
<script>
function summer()
{
var i; var x; var sum=0; // Deklarasjoner.
var vListe = document.getElementById('Tall').value;
vListe = vListe.split("+"); // Konvererer til et array.
for (i = 0; i < vListe.length; i++)
{
x = vListe[i];
x = parseInt(x); // Konverterer til heltall.
sum += x;
}
alert("Summen er " + sum + ".");
return sum;
}
</script>
Javascript har tidligere hatt begrensede muligheter for skrive til disk, pga. sikkerhet.
Skriving har vært begrenset til infokapsler.
Etterhvert er det kommet flere muligheter med local storage og indexedDB.
Lesing fra disk har tidligere ikke vært mulig.
HTML5 introduserer readfile API
som kan lese innholdet i filer på brukerens disk.
readfile kan lese tekstfiler, bilder og lage fil-URLer.
Lag først et HTML skjema som gjør at brukeren kan velge en fil på sin egen maskin og laste den opp til et midlertidig sted på tjener-maskinen:
HTML-koden ser slik ut:
<form method="POST" action="filopplastning.php" enctype= "multipart/form-data" > <!-- Spesifiserer hvordan filen skal kodes ved overføring til tjener. enctype= "multipart/form-data" må brukes når skjemaer inneholder <input type="file"> elementer. --> <input type="hidden" name="MAX_FILE_SIZE" value="20000"> <!-- Dette er et skjult felt som angir maksimal filstørrelse i antall byte. 20000 byte = 20kB. Passende størrelse kan f.eks. være 1MB for bilder og 10MB for video. Direktivet må komme før input-feltet. Verdien av MAX_FILE_SIZE sendes til max_file_size variabelen i PHP. Hensikten er å stoppe store filer før de lastes opp. Det handler om brukervennlighet og ikke om sikkerhet fordi det er lett å omgå denne sperren. Direktivet kan godt utelates fordi den virkelige sjekken må skje i PHP-koden eller i PHP.ini. --> Velg fil som skal lastes opp:<br> <input name="filref" type="file" > <!-- filref er referansen til filen. Navnet filref går til filnavnet i variabelen $_FILES['filref']['name']. --> <input type="submit" value ="Last opp fil." > <!-- Når brukeren trykker på knappen lastes filen opp til et midlertidig lager. Referansen lagres den globale variabelen $_FILES. --> <!-- Deretter blir skjemaet sendt til filen spesifisert i action, som i dette tilfelle er filopplastning.php. --> </form>
Dato er et forhåndsdefinert objekt.
var dto = new Date(); // dto tilordnes dagens dato.
Først må det opprettes en variabel som tilordnes dagens dato. I koden over tilordnes nåværende dato i langt format til variabelen dto.
<script>
function dato()
{
var dto = new Date();
// Dagens dato i utvidet format.
var dag = dto.getDate();
// Plukker ut dagnummeret.
var mnd = dto.getMonth();
// Plukker ut månedsnummeret.
mnd++; // Legger til for å kompensere for nullindeksen.
var aar = dto.getFullYear();
// Plukker årstallet.
if(dag < 10) {dag ='0'+ dag}
// Legger til eventuelle nuller foran.
if(mnd <10) {mnd ='0'+ mnd}
// Legger til eventuelle nuller foran.
dto = dag + "." + mnd + "." + aar ;
alert("Dagens dato er: " + dto + ".");
// Viser datoen på riktig format: dag.mnd.åååå.
}
</script>
Funksjoner gjør det lettere å modulere koden i mindre oppgaver.
Funksjoner starter med kodeordet function.
Deretter følger navnet på funksjonen.
Eksempel:
<script>
function funksjonsnavn1()
{
document.write("Hei, her er kode fra funksjonen.");
}
funksjonsnavn1(); //Funksjonskall.
</script>
Funksjonen inneholder kommandoer inne i { krøllparentesene }. Den siste krøllparentesen avslutter funksjonen.
Funksjoner aktiveres med et funksjonskall.
Funksjoner kan lagres i variabler:
<script>
var funksjonsnavn1 = function()
{ document.write("Hei, her er kode fra funksjonen."); }
funksjonsnavn1(); //Funksjonskall.
</script>
Funksjoner kan også lagres i array og i objekter.
Funksjoner kan ha parametre.
Funksjoner har ofte parametre inne i parentesen.
Er det ingen parametre er parentesen tom.
<script> // Funksjoner kan ha parametre.
function funksjonsnavn2(p1,p2,p3)
{
document.write(p1, p2, p3);
}
var p1 = "Hei, ";
var p2 = "her er kode fra funksjonen, ";
var p3 = "med tre parametre. ";
funksjonsnavn2(p1,p2,p3);
</script>
Funksjoner kan bruke globale variable.
<script> // Funksjoner kan bruke globale variable.
function funksjonsnavn3()
{
document.write(p1, p2, p3);
}
var p1 = "Hei, ";
var p2 = "her er kode fra funksjonen, ";
var p3 = "med globale parametre. ";
funksjonsnavn3(); // Ingen parametre.
</script>
Her er p1, p2 og p3 globale variable, som også blir kjent på innsiden av funksjonen.
Funksjoner kan ha returverdi.
<script> // Funksjoner kan ha en returverdi.
function summer(x,y)
{
sum = x + y;
return sum;
}
document.write("Summen av 1 + 2 = " + summer(1,2) + ".");
</script>
Referanse-parametre.
Referanseparametre er peker til den opprinnelige variabelen. En endring i funksjonen endrer også på den originale variabelen.
Javascript funksjoner har ikke referanse-parametre.
Funksjoner med mange parametre.
<script> // Funksjoner med mange parametre.
function funksjonsnavn4()
{
// En innebygd funksjon returnerer
// alle parametrene i en matrise.
parametre = arguments;
for (i = 0; i < parametre.length; i++) {
document.write(parametre[i]);
}
}
p1 = "Hei, ";
p2 = "her er kode fra funksjonen, ";
p3 = "med flere parametre. ";
funksjonsnavn4(p1,p2,p3);
</script>
Objekter er datatyper som kan inneholde data i form av variable og funksjoner.
Les mer om objekter: ☞ Objekter.html
Validering: jslint.com.
i = i + 1;