JavaScript

Koden ligger inne i HTML siden.
Starter med <script> og slutter med </script>.
Kan ligge i hodet eller kroppen.
JavaScript kan manipulere alle deler av Document Object Modellen (DOM)
For å inkludere skript fra andre filer MÅ du ha med </script> taggen

Manipulere DOM elementer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>JavaScript</h1>
  <script>
    document.querySelector('h1').innerHTML += ' er fantastisk';
    document.querySelector('h1').style.color = "#00F";
  </script>
</body>
</html>

Manipulere DOM'en

JS Bin on jsbin.com

function init() {
  var body = document.querySelector('body');
  var heading = document.createElement ("H1");
  heading.innerHTML = "JavaScript ruler!";
  body.appendChild (heading);
  var paragraph = document.createElement ("P");
  var content = document.createTextNode ("Lorum ipsum");
  paragraph.appendChild (content);
  body.appendChild (paragraph);
  var para = document.createElement ("P");
  para.innerHTML = "Me first";
  body.insertBefore (para, paragraph);
}

Arrayer i JavaScript

Arrayer i JavaScript bruker nummeriske indekser.
var array = []; // Good
var array = new Array (); // Bad
- var array = new Array (20, 40); // Array med elementene 20 og 40
- var array = new Array (40); // Array med 40 udefinerte elementer
var cars = new Array("Saab", "Volvo", "BMW");
Du kan lagre hva som helst i en array
- var myArray[0] = Date.now;
- myArray[myArray.length] = myFunction;
- myArray.push (cars);

Array metoder

toString metoden returnerer innholdet som en kommadelt liste
join("*") metoden returnerer innholdet som en liste med "*" mellom elementene
pop returnerer og fjerner siste elementet
push legger et element til slutten
shift returnerer og fjerner det første elementet
unshift setter inn et element først og flytter de andre oppover
splice (hvor, antall, "nytt 1", "nytt 2"), fjerner og/eller setter inn elementer
- hvor: hvor skal elementer slettes, settes inn
- antall: hvor mange elementer skal fjernes
- "nytt 1"-"nytt x" : Nye elementer som skal settes inn

Flere array metoder

sort, sorterer elementene i arrayen
- sort metoden sorterer alfabetisk
- sort(function(a, b){return a>b}) vil sortere numerisk
reverse, snur arrayen
slice, nesten som splice men uten mulighet til å sette inn data. NB, slice returnerer resultatet, påvirker ikke opprinnelig array.

Prøv selv

JS Bin on jsbin.com

var body = document.querySelector ('body');
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

function sayHi () {
  alert ('hi');
}

var myArray = [fruits, sayHi, Date.now()];

//fruits.splice (2,0, "Pinapple");
//fruits = fruits.slice (3);

// body.innerHTML = fruits;
// body.innerHTML = myArray.join (" 
 ")

// myArray[1]();

Objekter i JavaScript

JS Bin on jsbin.com

var emne = {emnekode: 'IMT2291', emnenavn: 'WWW-teknologi'};

/*function Student (fornavn, etternavn) {
  this.fornavn = fornavn;
  this.etternavn = etternavn;
}*/

//var stud1 = new Student ('Kåre', 'Hansen');
//emne.studenter = [stud1];

//var stud2 = new Student ('Marit', 'Olsen');
//emne.studenter.push (stud2);

//var stud3 = stud1;
//stud1.fornavn = 'Odd';

console.log (emne);

JavaScript objekt egenskaper

JS Bin on jsbin.com

var emne = {emnekode: 'IMT2291', emnenavn: 'WWW-teknologi'};

console.log (emne.emnekode);
console.log (emne['emnenavn']);

var kode =  'emnekode';
console.log (emne[kode]);

/*for (x in emne) {
  console.log (x+":"+emne[x]);
}*/

//emne['studenter i emnet'] = [];
//console.log (emne);
//delete emne['studenter i emnet'];
//console.log (emne);

Objekt metoder

JS Bin on jsbin.com

var body = document.querySelector ('body');

var emne = {
  emnekode: 'IMT2291',
  emnenavn: 'WWW-teknologi',
  skrivUt: function () {
    body.innerHTML = this.emnekode+' '+this.emnenavn+'
'+'Studenter: '+
      this.studenter.join(', ');
  }
};

function Student (fornavn, etternavn) {
  this.fornavn = fornavn;
  this.etternavn = etternavn;
  this.toString = function () {
    return fornavn+' '+etternavn;
  };
}

var student = new Student ('Kåre', 'Hansen');
emne.studenter = [student];
student = new Student ('Kari', 'Olsen');
emne.studenter.push(student);

emne.skrivUt();

Nye egenskaper/metoder i eksisterende objekter

JS Bin on jsbin.com

function Student (fornavn, etternavn) {
  this.fornavn = fornavn;
  this.etternavn = etternavn;
}

var student = new Student ('Harry', 'Potter');
var student1 = new Student ('Jon', 'Doe');

student.egenskap = 'Trollmann';

console.log (student);
console.log (student1);

Student.prototype.nasjonalitet = 'Engelsk';

console.log (student);
console.log (student1);

Student.prototype.navn = function (tittel) {
  return tittel+' '+this.fornavn+' '+this.etternavn;
};

console.log (student.navn('Mr'));

Kjøre kode når dokumentet er lastet

JS Bin on jsbin.com

var body = document.querySelector('body');

window.onload = function () {
  body.innerHTML += 'This comes from the first onload handler';
};

window.onload = function () {
  body.innerHTML += 'This comes from the second onload handler';
};

window.addEventListener('load', function () {
  body.innerHTML += 'This comes from the third onload handler';
});

Mer om addEventListener