Nils Martin Aslaksen.

Javaskript

JavaScript er et åpent, plattformuavhengig, lisensfritt, høynivå, objekt-orientert skriptspråk (interpreterende programmeringsspråk).

Vevsider. JavaScript kan bl.a. brukes i vev-sider sammen med html og css-koder.
Koden lastes ned til nettleseren sammen med dokumentet.

Tilgjengelighet. Uten å installere eller konfigurere noe som helst, har alle som sitter foran en skjerm med nettleser tilgang til et kraftig verktøy rett framfor nesen sin.
JavaScript har en enorm og utbredelse. Alle nettlesere, mange mobiltelefoner, nettbrett og etterhvert også TVer, kan eksekvere JavaScript.
Selve koden distribueres sammen med html-dokumentet. Dvs. at man trenger ikke laste ned eller installere noe som helst. Programmet kjører direkte i nettleseren i en vanlig html-side.

Klient-orientering. Man kan også si at Javaskript er et klient-orientert språk.
– (Til forskjell fra tjener-orienterte språk som lager dynamiske vev-sider, som kjøres på tjeneren, og brukes til å sette sammen dokument-kodene, før de sendes til brukeren. Eks: SSI. CGI. Perl. PHP.)

Sikkerhet. Når man først har tillatt Javaskript å eksekvere i vev-leseren, har man ingen mulighet til å hindre det når dokumentet lastes ned til egen maskin.
I praksis er det allikevel liten fare for å bli utsatt for angrep fra JavaScript-kode.

Fordeler:
– At programkoden flyttes fra tjener og kjøres på brukerens datamaskin kan kan bety bedre ytelse og funksjonalitet.
F.eks. kan feilsjekking i et skjema utføres lokalt på brukerens maskin. Data kan tastes inn uten at tjeneren undersøker noe som helst.
– Syntaksen ligner på vanlige programmeringsspråk, slik som C, C++, Java, PHP, Perl, osv. Kan man slike språk er det relativt enkelt å gå over til Javaskript. Og visa versa; dersom man lærer Javascript kan en lett kjenne seg igjen i andre programmeringsspråk.
– HTML har mange elementer som kan justeres med Javascript.
– Er ikke OS begrenset.
– Trenger ingen installasjon.
– Er alltid oppdatert.
– Er tilgjengelige fra alle maskiner og dingser som man bruker.
Ulemper:
– Av sikkerhetshensyn har ikke Javascript tilgang til programmer eller filer lokalt på brukerens egen private maskin. (Unntak er infokapsler, Web Storage, mm.)
– Syntaksen er vanskelig for vanlige folk å forstå.

Knapper

Det finnes tre ferdiglagde pop-up bokser: alert, confirm og prompt.
– Alert-knappen gir en beskjed hvor brukeren må klikke OK for å fortsette.  Eksempel  alert.html.
– Confirm-knappen krever at brukeren klikker OK eller Avbryt for å fortsette.  Eksempel  confirm.html.
– Prompt-knappen gir et tekstfelt, sammen med OK og Avbryt.  Eksempel  prompt.html.

Variabler

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 der er.

Navnet kan tenkes på som en peker til variabelen.
x=1; Navnet ‹x› settes til å peke på en beholder som tildeles verdien 1. I praksis sier man bare at x er lik en.
abc=123; Variabelen abc settes til tallet etthundre og tjuetre.
x=abc; Her settes x til å være lik variabelen abc som er 123.
x="abc"; Her x settes til en tekststreng med teksten abc. For å skille mellom variabel og tekst brukes "fnutter" for å angi at det er en tekst.
Tilordning av variabler skjer vanligvis med bruk av = tegnet, som betyr «settes lik».
x=1;    Som over.
x++;    Kortform for x=x+1;
x--;    Kortform for x=x-1;
x+=2;    Kortform for x=x+2;
x-=2;   Kortform for x=x-2;  F.eks: x=3; x-=2; --> x=
x="abc";    Her er x lik tekststrengen «abc».
x=document.bgColor;    Her er variabelen bakgrunnsfargen i dokumentet.

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 defineres 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.

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;

Det anbefales å gi variabelen en utgangsverdi, men er ikke nødvendig. F.eks. var x; definerer variabelen, men uten en verdi.

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.

Legg merke til at tilordning av verdier til tekstvariabler bruker fnutter.
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.
document.write(x); kan brukes for å skrive ut variabelen i et html-dokument.

Legg også merke til at Javascript er case-sensitiv. Det vil si at f.eks. x og X er to forskjellige variabler.


Regne-eksempel

Denne koden har fire variable; a, b, c, d.
a, b, c opprettes (deklareres) og tilordnes verdier.
Variabel d deklareres og tilordnes en verdi som er summen av de tre andre.


<script>
var a;      		// Deklarerer en variabel a.
var b,c;      		// Deklarerer to variabler samtidig.
a=1;        		// Tilordner en verdi til a.
b=2;        		// Tilordner en verdi til b.
c=3;        		// Tilordner en verdi til c.
var d = a + b + c;	/* Deklarerer en variabel d 
                           og tilordner samtidig en verdi. */
document.write (a + " + " +  b + " + " +  c + " = " +  d);
</script>

Siste linje i koden skriver:   ,  til dokumentet.


Variabel konvertering

Ofte har man en variabel av type tekst som man vil ha som tall-type.


var x="2";  // x er en tekststreng.
x = x+x;   // To tekststrenger legges sammen.
document.write(x); // Og skrives ut, og blir: 
Et triks for å konvertere en tekst til et tall er å ved å trekke fra og legge til 0.
x-=0; x+=0;
Nå er variabelen et tall, og typeof(x) =
Og da vil to pluss to vil være fire; slik det alltid har vært.
Andre måter å konvertere variabler på er:
x=parseFloat(x);  // Konverterer til flyttall.
x=parseInt(x);   // Konverterer til heltall.
x=x.toString();  // Konverterer til tekst.

Tekst

x = "a"; 
y = "b"; 
z = x + " " + y; 
Setter variablene x og y til henholdsvis bokstaven a og b.
z setter dette sammen dette til teksten «a b» (med mellomrom).

var t="abcdef";

var start = 1;
var slutt = t.length;  // slutt = 6.
slutt = slutt-1;  // slutt = 5.

var tekst = t.substring(start,slutt);

document.write (tekst);


/* Resultatet blir «». */


charAt


var t="abcdef";

var tekst =
t.charAt(0) +
t.charAt(1) +
t.charAt(2); 

document.write (tekst);

/* Resultatet blir «». */

Her inneholder variabelen t tekststrengen «abcdef».
Deler av den skrives ut vha. funksjonen charAt():


Matematikk

x = 2*2; Multiplikasjon.
x = 2/2; Divisjon.
x = 2 + 2/2 - 1; Divisjon, addisjon, og subtraksjon.
x = (2 + 2 ) / (2 - 1); Divisjon, addisjon, og subtraksjon med bruk av parenteser.
x/=2; Kortform for x=x/2;
x*=2; Kortform for x=x*2;
<script>
var a = 1 + 2 + 3; 	// Addisjon. Summering. 
			// Legg sammen 1, 2 og 3 og lagre resultatet i variabelen a.

a++;      		// a økes med 1. (Ekvivalent med a = a + 1;)
a += 2;			// a = a + 2;

var b = 10 - 3;         // Subtraksjon.
b--;      		// b minkes med 1. (Ekvivalent med b = b - 1;)
b -= 2;			// b = b - 2;

var c = 2 * 3; 		// Multiplikasjon.
c *= 2;			// c = c * 2;

var d = 11 / 3; 	// Divisjon.
d /= 2;			// d = d / 2;


f = 11 % 3;      	// f er modulus, rest etter heltallsdivisjon, (f=2.)
f %= 2;			// f = f % 2;

const k = '123';   	// En konstant.

var g = math.sqrt(9); 		// g = √9.

var h = math.PI; 		// h = 3,1415....

</script>
Funksjoner som konverterer et tall til et heltall på litt ulike måter.
Math.floor(); // Runder av nedover.
Math.round(); // Runder av på normalt vis.
Math.ceil(); // Runder av oppover.

Logikk

a = true; Her er variabelen en boolsk verdi. Boolske verdier kan bare ha to verdier; true og false + pluss udefinert.
<script>

var a = 1 < 2;   		// a = true.
var b = 2 < 3;   		// b = true.

var c = a && b; 		//  c = a OG b. 

c = (1 < 2) && (2 < 3);  	// c = true.

var d = a || b; 		//  d = a ELLER b. 

var a = !b; 			//  a = IKKE-b. 

</script>

Dato

<script>

dto = document.lastModified;  // dto er når dokumentet ble oppdatert.
dto = new Date(dto);  // Transformerer lastModified til et datoobjekt. 
var dag = dto.getDate();  // Plukker ut dagnummeret.
var mnd = dto.getMonth();  // Plukker ut månedsnummeret.
var aar = dto.getFullYear();  // Plukker årstallet.
if(dag < 10) {dag ='0'+ dag}  // Legger til eventuelle nuller foran.
if(mnd < 10) {mnd ='0'+ mnd} 
dto = dag + "." + mnd + "." + aar + ".";

document.write (dto);  
// Skriver ut datoen på riktig format: 

</script>

JavaScript versus Java

Forskjeller:
– Java har ingenting med JavaScript å gjøre, med unntak av navnelikhet og likhet i syntaks.
– JavaScript er interpreterende skriptspråk. Java er et kompilert språk.
– JavaScript lager ikke applets eller selvstendige programmer.
– Javascript kan være vanskelig å teste og vedlikeholde.
– Java er trolig sikrere. JavaScript kan byttes ut uten at brukeren merker det (ingen kodesignering).
– Java er mer OO enn JS. JS mangler et klart klasse-begrep, som gjør at det ikke egner seg til OO-opplæring.
Likheter:
– Begge er OO-programmeringsspråk.
– Begge er plattformuavhengig. JS trenger i tillegg en nettleser eller en runtime for å kjøre selvstendig.

Historikk

Brendan Eich i Netscape utviklet Mocha.
1995. Mocha ble omdøpt til LiveScript.

September 1995. LiveScript ble sluppet i Netscape Navigator 2 beta.

04.12.1995. LiveScript ble omdøpt til JavaScript i Netscape 2.0.

1996. Microsoft utviklet JScript, som var en dialekt av JavaScript.

August 1996. JScript ble inkludert i Internet Explorer 3.0.

Juni 1997. Ecma publiserte første utgave av ECMA-262 spesifikasjonen.

Juni 1998. I andre versjon ble det gjort noen modifikajoner for å tilpasse spesifikasjonen til ISO/IEC-16262 standard.

Desember 1999. Tredje utgave av ECMA-262 ble publisert.

December 2009. Femte utgave. (Fjerde ble aldri ferdig.)

xxx xxx

xxx xxx

xxx xxx

xxx xxx

2010. Oracle kjøpte Sun Microsystems.

2010. Navnet JavaScript er et varemerke eid av Oracle.

Juni 2015. 6te utgave av ECMA-262.


Litteratur

«Object-Oriented JavaScript» av Stoyan Stefanov. Packt Publishing. 320 sider.
Grundig innføring og fin start for å lære JavaScript fra bunnen av.
Godt egnet hvis man kommer fra et annet objektorientert språk som f.eks JAVA.
«JavaScript: The Good Parts». Unearthing the Excellence in JavaScript av Douglas Crockford. 150 sider. Mai 2008.
JavaScript har gode og dårlige sider. Etter å ha lært det grunnleggende i språket, blir det viktigste å få oversikt over hva som er godt og dårlig. Essensiell kunnskap fra mannen som ‹oppfant› JSON.
«JavaScript: The Definitive Guide» av David Flanagan. Utgitt av O'Reilly & Associates, ISBN: 0-59600-048-0. Over 1000 sider.
Dette er en oppslagsverk og referanseguide til alt som har med JavaScript å gjøre.
«Javascript Patterns» av Stoyan Stefanov.
«Pro JavaScript Design Patterns». For viderekommende.
«High Performance JavaScript (Build Faster Web Application Interfaces)» av Nicholas C. Zakas.
«The JavaScript Bible» av Danny Goodman, utgitt av IDG Books, ISBN: 0-7645-3342-8.
«Dynamic HTML, The Definitive Reference» av Danny Goodman, utgitt av O'Reilly & Associates, ISBN: 1-56592-494-0.
«Speaking JavaScript: An In-Depth Guide for Programmers» av Dr. Axel Rauschmayer. Free.    speakingjs.com

Lenker

Validering:  jslint.com.


Ordliste

AJAX  –  Asynchronous JavaScript And XML, er en teknikk for å utvikle interaktive nettapplikasjoner.
CGI  –  Common Gateway Interface.
DHTML  –  Dynamisk HTML, er en samlebetegnelse hvor man med statisk HTML, CSS-skripting i kombinasjon med JavaScript og DOM lager interaktive og animerte websider.
DOM  –  Document Object Model, er en struktur som nettleseren lager etter å ha lest et HTML-dokument.
ECMA  –  European Computer Manufactures Association.
ECMAScript  –  er standarden som JavaScript er basert på.
Flash  –  bruker actionscript, som er en variant av ECMAScript, (som Javascript også er).
Heltallsdivisjon  –  x%y;
i++  –  betyr det samme som  i = i + 1;
Imidlertid er i++ litt raskere.
IDE  –  Integrated Development Environment.
Informasjonskapsel  –  Cookie.
Java  –  er et OO-programmeringsspråk utviklet av Sun Microsystems.
JavaScript  –  er et objektorientert interpreterende skriptspråk som for det meste brukes i html-dokumenter for å utvide funksjonaliteten til vev-sider.
JSON  –  JavaScript Object Notation er et tekstbasert datautvekslingsformat som er språk- og plattformuavhengig selv om den er basert på et subsett av JavaScript-syntaks.
jQuery  –  er et JavaScript bibliotek.
KLOC  –  Kilo LOC. Tusen kodelinjer.
Kommentarer  –  kan være:
// dobbelslash for enkelt linjer, eller
/* for kommetarer som går over flere linjer. */
LOC  –  Line Of Code. Kodelinjer.
NaN  –  Not a Number.
OO  –  Objekt-Orientert.
Plattformuavhengig  –  betyr at man kan utvikle og kompilere på en plattform. Når programmet er ferdig kan det kjøres på andre plattformer uten at en trenger å gjøre endringer.

 

 

 

 

 

© 2015. Nils Martin Aslaksen.    validator.w3.org    jigsaw.w3.org     validator.w3.org