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.
Case sensitivt, skiller på små og store bokstave (jeg bruker alltid bare små)
Variable.
Arrayer
Kontrollstrukturene som if-else, repeat, for, while.
Unntaksprogrammering, try-catch-finally.
Hver kodelinje avsluttes med ; (valgfritt, men anbefales som god praksis)

Plassering av JavaScript-kode

Vi kan i prinsipp plassere javaScript-kode hvor vi vil på en HTML-side.

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

Deklarering av variabler

Variabler er "bokser" som kan inneholde noe: tall, bilde, tekst...
var myNumber;

var Alder=5; 
var navn="Hans Elg";
var bilde="bilder/elg1"

Programeksempel: js4.html, kode4.js

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.

Eventer

Med JavaScript kan man lage dynamiske websider. Eventer er handlinger som kan oppdages av JavaScript. Et hvert element på en webside har eventer som kan trigge JavaScript-funksjoner.

Oversikt over eventer

Event	Intreffer når......	Brukes sammen med
onabort	Når lasting av et et bilde blir avbrudt	<img>
onblur	Et element mister fokus	<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
onchange	Brukeren endrer innholdet av et felt	<input type="text">, <select>, <textarea>
onclick	Musen klikkes på et objekt	<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
ondblclick	Musen dobbelklikkes på et objekt
onerror	En feil intreffer når et bilde lastes.	<img>, <object>, <style>
onfocus	Et element får fokus	<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
onkeydown	En tast på tasttaturet trykkes	<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
onkeypress	En tast på tasttaturet trykkes og holdes nede
onkeyup	En tast på tasttaturet slippes
onload	En side eller et bilde blir lastet	<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
onmousedown	En museknapp er trykket	<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
onmousemove	Musen er flyttet
onmouseout	Musen er flyttet ut av et element
onmouseover	Musen er over et element
onmouseup	En museknapp slippes
onreset	Reset knappen er trykket	<form>
onresize	Et vindu eller en ramme har endret størrelse	<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>
onselect	Tekst er valgt	<input type="text">, <textarea>
onsubmit	Submit knappen er trykket	<form>
onunload	Brukeren forlatetr en side	<body>, <frameset>

onclick genereres når en museknapp trykkes inn: klikk.html, kodeklikk.js

Knapp

<input type="button" value="Klikk" id="knapp1" onclick="handling()" />

knapp.html, kodeknapp.js

DOM

HTML Document Object Model (HTML DOM) definerer en standard for å aksessere og manipulere HTML dokumenter. Velformede XML-dokumenter lar seg beskrive i en trestruktur

Viktig DOM metode

document.getElementById(id)

Brukes til å "gripe" et html-element.

document.getElementById(id).innerHTML

Refererer til innholdet av elementet (det som er mellom taggene)

Eksempler:

Henter verdien til et element: dom1.html

Viser id, type og value til et element: dom3.html

Kalkulator: kalkulator.html