JavaScript
 

JavaScript is de meest populaire programmeertaal in de wereld.

JavaScript wordt gebruikt in html waar het

  de inhoud kan veranderen

          HTML Styles kan veranderen

 checken als data geldig is

Het is toch essentieel dat u tenminste basis HTML kent alvorens te beginnen met deze tutorial. U kunt een html tutorial vinden op Webdesign met HTML

Javascript code moet geplaatst worden tussen de script tags. <script>hier komt de JavaScriptcode</script>

Een Javascript function is een block Javascriptcode die uitgevoerd kan worden wanneer erom gevraagd wordt.

Dit kan zijn bij een opdracht, maar ook bij het voorkomen van een bijzondere omstandigheid genaamd ‘event’

Javascript kan voorkomen in de head en/of in de body van html documenten.

Hieronder zien we javascriptcode in de head

<!DOCTYPE html>

<html>

<head>

<script>

function MijnFunctie()

{document.getElementById("demo").innerHTML = "Paragraph changed.";}

</script>

</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="MijnFunctie()">Try it</button>

</body>

</html>

In de head kan ook verwezen worden naar een javascript file die elders is opgeslagen.

De javascript kan geschreven worden in Notepad maar de file moet worden opgeslagen in all files als  ‘fileNaam.js’

De .js extensie zorgt ervoor dat html het herkend als javascript.

<!Doctype html>

<html>

<head>

<script src="iemsabi.js"></script>

</head>

Zo ook kan het gewoon in de body van het html document geplaatst worden.

 

En nu de code:

In onderstaande text heb ik hier en daar lijsten gecopieerd uit engelstalige text,

Zonder de moeite te nemen om het te vertalen. Mijn verontschuldiging hiervoor.

 

getElementByid()

getElementById() zoekt en vindt een html element a.d.h. van zijn id en verandert de inhoud.

document.getElementById("demo").innerHTML ="Hello JavaScript"

 

Bij de onderstaande voorbeelden wordt onclick met het klikken van een html element met getElementByID a.d.h. van zijn id gevonden en dan aangepast.

 

<!DOCTYPE html>

<html>

<body>

<h1>Wat kan JavaScript doen?</h1>

<p id="demo"> JavaScript kan HTML inhoud veranderen. </p>

<button type="button"

onclick= "document.getElementById('demo').innerHTML = 'Hello JavaScript!'" >

Click Me!</button>

</body>

</html>

 

De script verandert de inhoud van een source element de pic in een andere pic.

Onclick wordt de script uitgevoerd

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>

function changeImage()

    {var image = document.getElementById('myImage');

    if (image.src.match("bulbon"))  {image.src = "pic_bulboff.gif";}

    else                                                       {image.src = "pic_bulbon.gif";}}

</script>

</body>

</html>

 

Onderstaande functie verandert de style van het HTML element

De function staat in de script. Onclick wordt de function uitgevoerd

<!DOCTYPE html>

<html>

<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo"> JavaScript can change the style of an HTML element. </p>

<script>

function MijnFunctie() {

    var x = document.getElementById("demo");

    x.style.fontSize = "25px";          

    x.style.color = "red"; }

</script>

<button type="button" onclick="MijnFunctie()">Click Me!</button>

</body>

</html>

 

Je kan ook input valideren.

Onderstaande textbox neemt een input en checkt als het tussen 0 en 10 is.

Is het zo dan verschijnt er text, is het niet zo verschijnt er andere text.

<!DOCTYPE html>

<html>

<body>

<h1>(Titel)Javascript kan input valideren</h1>

<p>(Text voor gebruiker) Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="MijnFunctie()">Submit</button>

<p id="demo"></p>

<script>

function MijnFunctie()

{var x, text;

    // Get the value of the input field with id="numb"

x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10){ text = "Input not valid";}

else                                                        { text = "Input OK";}

document.getElementById("demo").innerHTML = text;}

</script>

</body>

</html>

 

Javascript moet geplaatst worden tussen scrip tags.

<script>

document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

Het mag geplaatst worden zowel in de body als in de head.

Het is een block code die uitgevoerd wordt wanneer erom gevraagd wordt.

Het kan bijvoorbeeld worden uitgevoerd als een een event plaatsvindt, zoals het klikken van een button

Het kan ook in een externe file zitten en worden opgeroepen in de head of body in html.

Om het op te roepen plaats je de naam van het java document in de source tag.

 

<!DOCTYPE html>

<html>

<body>

<h1>External JavaScript</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="MijnFunctie()">Try it</button>

<p><strong>Note:</strong> MijnFunctie is stored in an external file called "myScript.js".</p>

<script src="myScript.js"></script>

</body>

</html>

 

JavaScript kan data tonen op verschillende manieren:

Tonen in een alert box, met window.alert().

Tonen in de HTML output met document.write().

Tonen in een HTML element, met innerHTML.

Tonen in de browser console, met console.log().

 

Javascript bestaat uit statements die onder elkaar geplaatst worden

Elke statement wordt afgesloten met een semicolon;

Een statement kan bestaan uit

Values, Operators, Expressions, Keywords and Comments

Values

Er zijn twee type values m.n. literals en variables

literals zijn numbers, strings,

variables zijn containers voor het opslaan van een data value

Operators

operators zijn + - * / om waarden te berekenen

Expressions

Expressions zijn een combinatie van values, variables en operators

x=56

x+45 is een expression en de returnvalue = 101

"John"+""+"Sno" is ook een expression en de returnvalue = John Sno

keywords worden gebruikt om een actie de identificeren

var x= 5 + 6; var is een keyword die aangeeft dat een variabele wordt gecreerd

 

//comments worden met een dubbele schuine streep aangekondigd en de text doet niet mee als script/ code

Comments worden gebruikt om de script toe te lichten. Het zijn reminders aan jezelf of iemand die de code zal lezen.

Alle vormen van comments zijn

//Comment op een enkele regel

/* comment op

Meerdere regels*/

Deze comments mogen op dezelfde regel als de code worden geplaatst.

 

identifiers zijn namen gebruikt om variabelen, keywords, functions en labels te benoemen

JavaScript is case sensitive

Keywords geven aan welke actie uitgevoerd gaat worden

Keyword              Description

break                    Beeindigd een switch of een loop

continue              Springt uit een loop en begint helemaal bij het begin

debugger            Stopt de executie van JavaScript, en roept een debugging functie op (als aanwezig)

do ... while          Voert een block statements uit en herhaald de block zolang de conditie true is

for                          Markeert een block statements die uitgevoerd moeten worden, zolang de conditie waar is

function               Declareert een function

if ... else               Markeert een block statements die uitgevoerd moeten worden, afhankelijk van de conditie

return                   Exits a function

switch                   Markeert een block statements die uitgevoerd moeten worden, afhankelijk van verschillende situaties

try ... catch          Implementeert error handling voor een block of statements

var                          Declareert een variable

 

 

Operators

Operator             Description

+                             Addition

-                              Subtraction

*                             Multiplication

/                              Division

%                            Modulus

++                           Increment

--                             Decrement

 

Assignment operators assign values to JavaScript variables.

Operator             Example               Same As

=                             x = y                       x = y

+=                           x += y                    x = x + y

-=                            x -= y                     x = x - y

*=                           x *= y                    x = x * y

/=                           x /= y                     x = x / y

%=                          x %= y                   x = x % y

 

JavaScript Comparison and Logical Operators

Operator             Description

==                           equal to

===                        equal value and equal type

!=                            not equal

!==                         not equal value or not equal type

>                             greater than

<                             less than

>=                           greater than or equal to

<=                           less than or equal to

 

Een function is een block code die een taak moet uitvoeren als het door een gebruiker of programma wordt ingeroepen

function MijnFunctie(p1, p2) { return p1 * p2;}

Onderstaand toegepast

 

<!DOCTYPE html>

<html>

<body>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>

function MijnFunctie(a, b) {return a * b;}

document.getElementById("demo").innerHTML = MijnFunctie(4, 3);

</script>

</body>

</html>

 

Datatypen zijn

var length = 16;                                                                 // Number

var lastName = "Johnson";                                          // String

var cars = ["Saab", "Volvo", "BMW"];                      // Array

var x = {firstName:"John", lastName:"Doe"};      // Object

true, false                                                                           // Boolean

 

Values zijn variabels en literals

var person = undefined; betekent dat de waarde en datatype niet vooraf bepaald is

var person; betekent hetzelfde

var person =""; betekent dat de waarde een lege string is

var person = null; betekent een object met de waarde nul

 

Arrays bestaan uit array items

Elke item heeft een waarde

items staan tussen [] en zijn gescheiden door commas

var cars = ["Saab", "Volvo", "BMW"];

item cars[0] = Saab

item cars[1] = Volvo

item cars[2] = BMW

Ze kunnen uit verschillende datatypen bestaan

 

Object bestaat uit properties en methods

Elke property heeft een naam en een waarde

properties staan tusssen {} accollades en zijn gescheiden door een comma

object x {firstname}= John

De properties kunnen uit verschillende lettertypen bestaan

 

Objects hebben properties en methods

Voorbeeld object auto

object auto heeft properties

properties komen voor als naam= waarde

auto.naam = Fiat

auto.model= 500

auto.gewicht = 850kg

auto.kleur = wit

var car = {name:"Fiat", model:500, gewicht:"850kg",kleur:"wit" }

object auto heeft methodes

Methods zijn acties die kunnen worden uitgevoerd op objecten

Zoals methods voor auto's

auto.start()

auto.rijdt()

auto.rem()

auto.stop()

 

Methods worden in de properties opgeslagen als function definitions

bijvoorbeeld

var person = {firstName:"John", lastName:"Sno", age:51, eyeColor:"brown"}

fullName function(){return this.firstName+""+this.lastName}

vb van een object

<!DOCTYPE html>

<html>

<body>

<p>Dit object bestaat uit properties en een method</p>

<p id="demo"></p>

<script>

var person = {    firstName: "John",    lastName : "Doe",    id       : 5566,

                                fullName : function() {return this.firstName + " " + this.lastName; }          };

//bovenstaande statement toont de volledige naam van de variabele person.

</script>

</body>

</html>

 

new wordt gebruikt om een variabele als object te declareren.

var x = "John";              // x is a string

var y = new String("John");  // y is an object

 

HTML event kan iets zijn dat de browser of user doet

HTML web pagina is geladen

HTML input field is veranderd

HTML button is geklikt

 

Event handler attributes, kunnen met JavaScript Code toegevoegd worden aan HTML events

< element event='JavaScript'>

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

<button onclick="displayDate()">The time is?</button>

Bovenin wordt de event opgeroepen door de attribute

 

Onderstaand een lijst van veel voorkomende HTML events:

Event                    Description

onchange            Een HTML element is veranderd

onclick                  De gebruiker klikt een HTML element

onmouseover   De gebruiker schuift de muis over een HTML element

onmouseout      De gebruiker schuift de muis weg van een HTML element

onkeydown        De gebruiker drukt een keyboardtoets in

onload                  The browser is net klaar met het laden van een pagina

 

Escape character is bedoelt om een character toe te voegen tot een string

 

Code     Outputs

\'             single quote       aanhalingsteken

\"            double quote    dubbele aanhalingstekens

\\            backslash             backslash

\n           new line               begint een nieuwe regel

\r            carriage return  als een entertoets

\t            tab                         tabular space

\b           backspace           voor het uitvegen

\f            form feed           voor het inserten van informative

 

Strings kunnen op verschillende manieren opgebroken worden, zonder de waarde te veranderen.

+             document.getElementById("demo").innerHTML = "Hello" + 
"Dolly!";

\              document.getElementById("demo").innerHTML = "Hello \
Dolly!"
;

Door achter de operator op te breken.

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

Je kan ze niet combineren. Gebruik slechts een method.

String variabele kan een object zijn: var firstName = new String("John")

 

Onderstaand een lijst van string properties en methods

String Properties

Property              Description

constructor         Returns the function that created the String object's prototype

length                   Returns the length of a string

prototype           Allows you to add properties and methods to an object

 

String Methods

Method               Description

charAt()               Returns the character at the specified index (position)

charCodeAt()     Returns the Unicode of the character at the specified index

concat()               Joins two or more strings, and returns a copy of the joined strings

fromCharCode()               Converts Unicode values to characters

indexOf()            Returns the position of the first found occurrence of a specified value in a string

lastIndexOf()     Returns the position of the last found occurrence of a specified value in a string

localeCompare()              Compares two strings in the current locale

match()                                Searches a string for a match against a regular expression, and returns the matches

replace()              Searches a string for a value and returns a new string with the value replaced

search()                               Searches a string for a value and returns the position of the match

slice()                    Extracts a part of a string and returns a new string

split()                    Splits a string into an array of substrings

substr()                                Extracts a part of a string from a start position through a number of characters

substring()          Extracts a part of a string between two specified positions

toLocaleLowerCase()     Converts a string to lowercase letters, according to the host's locale

toLocaleUpperCase()     Converts a string to uppercase letters, according to the host's locale

toLowerCase()  Converts a string to lowercase letters

toString()             Returns the value of a String object

toUpperCase()  Converts a string to uppercase letters

trim()                    Removes whitespace from both ends of a string

valueOf()             Returns the primitive value of a String object

 

NaN - Not a Number

Cijfers kunnen properties en methods hebben.

 

Number Properties

Property                              Description

MAX_VALUE                      Returns the largest number possible in JavaScript

MIN_VALUE                       Returns the smallest number possible in JavaScript

NEGATIVE_INFINITY       Represents negative infinity (returned on overflow)

NaN                                       Represents a "Not-a-Number" value

POSITIVE_INFINITY         Represents infinity (returned on overflow)

 

Method               Description

Number()            Returns a number, converted from its argument.

parseFloat()       Parses its argument and returns a floating point number

parseInt()            Parses its argument and returns an integer

 

Number Methods

JavaScript number methods are methods that can be used on numbers:

 

Method               Description

toString()             Returns a number as a string

toExponential() Returns a string, with a number rounded and written using exponential notation.

toFixed()             Returns a string, with a number rounded and written with a specified number of decimals.

toPrecision()      Returns a string, with a number written with a specified length

valueOf()             Returns a number as a number

 

Dates kunnen als nummer of als string geschreven worden

Nummer bv 1440791791123 geeft het aantal milliseconds vanaf 1 jan 1970

String bv Fri Aug 28 2015 12:56:31 GMT-0700 (Pacific Daylight Time)

Je kan een string gebruiken om een string in een element weer te geven

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = Date();

</script>

Natuurlijk kan het ook als Date object

<script>

var d = new Date();

document.getElementById("demo").innerHTML = d;

</script>

toDateString() is een method die de datum in een beter leesbare format plaatst

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

 

The ISO 8601 syntax (YYYY-MM-DD) is the newest (and preferred) JavaScript date format:

Je kan de datum ook korter schrijven bv de maand en het jaar of het jaar alleen.

var d = new Date("2015-03-25");               var d = new Date("2015-03");     var d = new Date("2015");

Javascript slaat de datum op in full javascript format

var d = new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");

 

Date Get Methodes

Method               Description

getDate()            Get the day as a number (1-31)

getDay()              Get the weekday as a number (0-6)

getFullYear()      Get the four digit year (yyyy)

getHours()          Get the hour (0-23)

getMilliseconds()             Get the milliseconds (0-999)

getMinutes()     Get the minutes (0-59)

getMonth()        Get the month (0-11)

getSeconds()     Get the seconds (0-59)

getTime()            Get the time (milliseconds since January 1, 1970)

 

getTime() returns the number of milliseconds since 01.01.1970:

<script>

var d = new Date();

document.getElementById("demo").innerHTML = d.getTime();

</script>

 

Date Set Methods

Laten je de datum of een deel daarvan vastzetten.

Method                               Description

setDate()             Set the day as a number (1-31)

setFullYear()      Set the year (optionally month and day)

setHours()          Set the hour (0-23)

setMilliseconds()             Set the milliseconds (0-999)

setMinutes()     Set the minutes (0-59)

setMonth()        Set the month (0-11)

setSeconds()     Set the seconds (0-59)

setTime()            Set the time (milliseconds since January 1, 1970)

 

vb setDate()

<!DOCTYPE html>

<html>

<body>

<p>The setDate() method sets the date of a month.</p>

<p id="demo"></p>

<script>

var d = new Date();

d.setDate(15);

document.getElementById("demo").innerHTML = d;

</script>

</body>

</html>

 

Je kan data vergelijken

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var today, someday, text;

today = new Date();

someday = new Date();

someday.setFullYear(2100, 0, 14);

if (someday > today) {

    text = "Today is before January 14, 2100.";

} else {

    text = "Today is after January 14, 2100.";

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

 

Array

<p id="demo"></p>

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

De script vindt het element met id=demo en plaatst de array 'cars' er in.

 

<p id="demo"></p>

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars[0];

</script>

De script vindt het element met id=demo en plaatst de array item Saab er in.

 

var array-name = [item1, item2, ...];

var cars = ["Saab", "Volvo", "BMW"];

var cars = new Array("Saab", "Volvo", "BMW"); is een array object

variabelen kunnen objects zijn. Je kan verschillende variable typen in

dezelfde array hebben; je kan objects, functions en arrays hebben in een array.

Arrays gebruiken nummers om hun "leden" te accessen

var person =["John", "Doe", 46];

person[1] = Doe

Objects gebruiken namen om hun "leden" te accessen

var person = {firstName:"John", lastName:"Doe", age:46};

person["firstName"] = John

Array Properties

lenght toont het aantal items

person.length = 3

Je kan members toevoegen aan een array

person.push("Elpermeer 219") voegt een member toe aan person

person[3] = "Elpermeer219" doet hetzelfde

 

Met onderstaand voorbeeld wordt er gelooped door een array die is weergegeven als een unordered list

 

<p id="demo"></p>

<script>

function MijnFunctie() {

    var index;

    var text = "<ul>";

    var fruits = ["Banana", "Orange", "Apple", "Mango"];

    for (index = 0; index < fruits.length; index++) {

        text += "<li>" + fruits[index] + "</li>";    }

    text += "</ul>";

    document.getElementById("demo").innerHTML = text;}

</script>

 

Als je named indexen gebruikt zal javascript array methods niet de juiste werking hebben, aangezien javascript uitgaat van een object.

 

Array Properties

Property              Description

constructor         Returns the function that created the Array object's prototype

length   Sets or returns the number of elements in an array

prototype           Allows you to add properties and methods to an Array object

 

Array Methods

Method                               Description

concat()               Joins two or more arrays, and returns a copy of the joined arrays

indexOf()            Search the array for an element and returns its position

join()                     Joins all elements of an array into a string

lastIndexOf()     Search the array for an element, starting at the end, and returns its position

pop()                     Removes the last element of an array, and returns that element

push()                   Adds new elements to the end of an array, and returns the new length

reverse()             Reverses the order of the elements in an array

shift()                    Removes the first element of an array, and returns that element

slice()                    Selects a part of an array, and returns the new array

sort()                     Sorts the elements of an array

splice()                 Adds/Removes elements from an array

toString()             Converts an array to a string, and returns the result

unshift()              Adds new elements to the beginning of an array, and returns the new length

valueOf()             Returns the primitive value of an array

 

 

header banner width 1000 heigtht 300

header2

nav

section è <h1>class style 2

nav2

 

The try statement laat je een code block checken op errors.

The catch statement laat je de error behandelen.

The throw statement laat je een eigen aangepaste error formuleren.

The finally statement laat je de code uitvoeren, na try and catch, wat het resultaat ook was.

 

try             {    Block of code to try}

catch(err) {    Block of code to handle errors}

finally    {    Block of code to be executed regardless of the try / catch result}

 

vb

<!DOCTYPE html>

<html>

<body>

 

<p>Please input a number between 5 and 10:</p>

 

<input id="demo" type="text">

<button type="button" onclick="MijnFunctie()">Test Input</button>

 

<p id="message"></p>

 

<script>

function MijnFunctie() {

    var message, x;

    message = document.getElementById("message");

    message.innerHTML = "";

    x = document.getElementById("demo").value;

    try {

        if(x == "")  throw "is empty";

        if(isNaN(x)) throw "is not a number";

        x = Number(x);

        if(x > 10)   throw "is too high";

        if(x < 5)    throw "is too low";    }

    catch(err) {        message.innerHTML = "Input " + err;    }

    finally {        document.getElementById("demo").value = "";    }}

</script>

</body>

</html>

 

Click F12 en kies debugger om de debugger aan te zetten

In de grote browsers kan je het alsvolgt

Chrome

Open the browser.

From the menu, select tools.

From tools, choose developer tools.

Finally, select Console.

 

Firefox

Open the browser.

Go to the web page:

http://www.getfirebug.com

Follow the instructions how to:

install Firebug

 

Internet Explorer

Open the browser.

From the menu, select tools.

From tools, choose developer tools.

Finally, select Console.

 

<script src="myscript.js">

 

<script defer="true" src="myscript.js">  zodoende zal de code pas laden nadat de html page geladen is. Dit is een best practice. Locale javascript kan je onderin de page plaatsen voor hetzelfde resultaat.

 

Don't Use new Object()

Use {} instead of new Object()

Use "" instead of new String()

Use 0 instead of new Number()

Use false instead of new Boolean()

Use [] instead of new Array()

Use /()/ instead of new RegExp()

Use function (){} instead of new function()

Example

 

var x1 = {};           // new object

var x2 = "";           // new primitive string

var x3 = 0;            // new primitive number

var x4 = false;        // new primitive boolean

var x5 = [];           // new array object

var          x6 = /()/;         // new regexp object

var x7 = function(){}; // new function object

 

Elke statement in een loop, inclusief de ‘for statement’, wordt uitgevoerd voor elke herhaling van de loop.

Zoek naar de statements of bestemming die buiten de loop geplaatst kan worden.

Bad Code:

for (i = 0; i < arr.length; i++) {

pakt de length property van een array elke keer dat de loop herhaald wordt

Better Code:

l = arr.length;

for (i = 0; i < l; i++) {

pakt de length property buiten de loop slechts een keer waardoor de loop sneller loopt.

 

Onderstaande woorden kunnen niet als variabelen, labels en functies gebruikt worden

abstract                arguments          boolean               break                    byte

case                       catch                     char                       class*                    const

continue              debugger            default                 delete                   do

double                  else                        enum*                 eval                        export*

extends*             false                      final                       finally                    float

for                          function               goto                       if                             implements

import*                                in                            instanceof           int                           interface

let                           long                       native                   new                       null

package               private                  protected            public                    return

short                     static                     super*                  switch                   synchronized

this                         throw                    throws                  transient              true

try                          typeof                  var                          void                       volatile

while                     with                       yield                     

 

Ook deze moet je vermijden

Array                     Date                      eval                        function               hasOwnProperty

Infinity  isFinite  isNaN                    isPrototypeOf   length

Math                     NaN                       name                    Number               Object

prototype           String                    toString                undefined           valueOf

 

Ook hiermee mag je voorzichtig zijn

alert       all            anchor                  anchors                                area

assign    blur        button                  checkbox             clear                      Interval

clearTimeout     client                     Information        close                      closed                   confirm

constructor         crypto                   decodeURI         decodeURI         Component        defaultStatus

document           element                               elements             embed                 embeds

encodeURI         encodeURI         Component        escape                  event                    fileUpload

focus     form      forms                    frame                    innerHeight

innerWidth         layer                      layers                    link                         location

mimeTypes        navigate               navigator             frames                  frameRate

hidden                  history                  image                    images                  offscreen            Buffering

open                     opener                 option                   outerHeight       outerWidth

packages             pageXOffset      pageYOffset       parent                  parseFloat

parseInt               password            pkcs11                  plugin                    prompt

propertyIsEnum               radio                      reset                     screenX                                screenY

scroll      secure  select                    self                         set                          Interval

setTimeout         status                    submit                  taint                       text

textarea               top                         unescape            untaint                 window

 

Deze ook maar

onblur                   onclick                  onerror                onfocus

onkeydown        onkeypress        onkeyup              onmouseover

onload                  onmouseup       onmousedown onsubmit

 

Objects

 

Pseudo elements worden gebruikt om een deel van een element te stylen.

HTML pseudo elements

Attribute             Description

disabled               Specifies that the input element should be disabled

max                       Specifies the maximum value of an input element

min                        Specifies the minimum value of an input element

pattern                 Specifies the value pattern of an input element

required              Specifies that the input field requires a element

type                       Specifies the type of an input element

 

Pseudo class elements list

Selector               Example               Example description

:active                   a:active                Selects the active link

:checked              input:checked   Selects every checked <input> element

:disabled              input:disabled   Selects every disabled <input> element

:empty                 p:empty               Selects every <p> element that has no children

:enabled              input:enabled   Selects every enabled <input> element

:first-child            p:first-child         Selects every <p> elements that is the first child of its parent

:first-of-type      p:first-of-type   Selects every <p> element that is the first <p> element of its parent

:focus                    input:focus         Selects the <input> element that has focus

:hover                   a:hover                Selects links on mouse over

:in-range              input:in-range   Selects <input> elements with a value within a specified range

:invalid                  input:invalid       Selects all <input> elements with an invalid value

:lang(language) p:lang(it)              Selects every <p> element with a lang attribute value starting with "it"

:last-child             p:last-child          Selects every <p> elements that is the last child of its parent

:last-of-type       p:last-of-type    Selects every <p> element that is the last <p> element of its parent

:link                        a:link                     Selects all unvisited links

:not(selector)    :not(p)                  Selects every element that is not a <p> element

:nth-child(n)       p:nth-child(2)    Selects every <p> element that is the second child of its parent

:nth-last-child(n)              p:nth-last-child(2)            Selects every <p> element that is the second child of its parent,

                                                                                                counting from the last child

:nth-last-of-type(n)        p:nth-last-of-type(2)      Selects every <p> element that is the second <p> element of its parent,

counting from the last child

:nth-of-type(n) p:nth-of-type(2)              Selects every <p> element that is the second <p> element of its parent

:only-of-type     p:only-of-type                  Selects every <p> element that is the only <p> element of its parent

:only-child           p:only-child                        Selects every <p> element that is the only child of its parent

:optional              input:optional                   Selects <input> elements with no "required" attribute

:out-of-range    input:out-of-range          Selects <input> elements with a value outside a specified range

:read-only           input:read-only                Selects <input> elements with a "readonly" attribute specified

:read-write         input:read-write              Selects <input> elements with no "readonly" attribute

:required             input:required                  Selects <input> elements with a "required" attribute specified

:root                      root                                       Selects the document's root element

:target                  #news:target                     Selects the current active #news element (clicked on a URL containing that

anchor name)

:valid                     input:valid                           Selects all <input> elements with a valid value

:visited                 a:visited                               Selects all visited links

Pseudo elements in het rood zijn voor constraint validation.

 

All CSS Pseudo Elements

Selector               Example               Example description

::after                   p::after                 Insert content after every <p> element

::before               p             ::before                               Insert content before every <p> element

::first-letter        p::first-letter      Selects the first letter of every <p> element

::first-line            p::first-line          Selects the first line of every <p> element

::selection           p::selection        Selects the portion of an element that is selected by a user

 

Property                              Description

checkValidity()                  Returns true als een input element valide data bezit

setCustomValidity()        Toont een validationMessage waarde van een input element

 

<!DOCTYPE html>

<html>

<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300">

<button onclick="MijnFunctie()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>

function MijnFunctie() {

    var inpObj = document.getElementById("id1");

    if (inpObj.checkValidity() == false) {

        document.getElementById("demo").innerHTML = inpObj.validationMessage;

    } else { document.getElementById("demo").innerHTML = "Input OK"; } }

</script>

</body>

</html>

 

Constraint Validation DOM Properties

Property                              Description

validity                                  Contains boolean properties related to the validity of an input element.

validationMessage          Contains the message a browser will display when the validity is false.

willValidate                         Indicates if an input element will be validated.

 

The validity property of an input element contains a number of properties related to the validity of data:

Property              Description

customError       Set to true, if a custom validity message is set.

patternMismatch             Set to true, if an element's value does not match its pattern attribute.

rangeOverflow Set to true, if an element's value is greater than its max attribute.

rangeUnderflow              Set to true, if an element's value is less than its min attribute.

stepMismatch   Set to true, if an element's value is invalid per its step attribute.

tooLong               Set to true, if an element's value exceeds its maxLength attribute.

typeMismatch   Set to true, if an element's value is invalid per its type attribute.

valueMissing      Set to true, if an element (with a required attribute) has no value.

valid                       Set to true, if an element's value is valid.

 

<!DOCTYPE html><html><body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">

<button onclick="MijnFunctie()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>

function MijnFunctie() {

    var txt = "";

    if (document.getElementById("id1").validity.rangeUnderflow) {

        txt = "Value too small";  }

    else { txt = "Input OK";  }

    document.getElementById("demo").innerHTML = txt;}

</script></body></html>

 

Objects

Alle waarden behalve primitieve waarden zijn objects.

Objects zijn variabelen die variabelen bezitten

Objects bezitten meerdere waarden

Deze waarden worden geschreven als name : value combinaties; properties genaamd. Objects geschreven in name:value combinatie zijn vergelijkbaar met Associative arrays in PHP

Properties kunnen primitieve waarden, andere objects en functions zijn.

Object Methods zijn properties met een functions definition (acties die op properties kunnen worden uitgeoefend.)

Je kan objects op verschillende manieren maken

Object literal

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Met de keyword new

var person = new Object();

person.firstName = "John";

person.lastName = "Doe";

person.age = 50;

person.eyeColor = "blue";

met de object constructor

function person (first, last, age, eye) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eye;}

var myFather = new person("John", "Doe", 50, "blue");

var myMother = new person("Sally", "Rally", 48, "green");

Hierbij is this een keyword die het object voorstelt.  Gebruikt in een function dan is het de object waar de functie onderdeel van is. Zie voorbeeld

 

<!DOCTYPE html><html><body>

<p id="demo"></p>

<script>

function person(first, last, age, eye) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eye;}

var myFather = new person("John", "Doe", 50, "blue");

var myMother = new person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =

"My father is " + myFather.age + ". My mother is " + myMother.age;

</script></body></html

 

In een object

var x = y; betekent dat x en y hetzelfde zijn.

 

object properties display je op de volgende manier

objectName.property          // person.age

objectName["property"]       // person["age"]

objectName[expression]       // x = "age"; person[x]

 

bv

<!DOCTYPE html>

<html>

<body>

<p>There are two different ways to access an object property:</p>

<p>You can use .property or ["property"].</p>

<p id="demo"></p>

<script>

var person = {

    firstname:"John",

    lastname:"Doe",

    age:50,

    eyecolor:"blue"};

document.getElementById("demo").innerHTML =

person.firstname + " is " + person.age + " years old.";

</script></body></html>

 

Je kan nieuwe properties toevoegen door het te benoemen

Person.nationality = ”English”;

Je kan een property verwijderen door het te deleten.

Delete person.age;

Delete werkt alleen op properties, niet op variabelen en functions of op predefined object properties.

Behalvee een value, heeft de property ook andere attributes. Enumerable, configurable en writable.

 

Een object method creeer je met de volgende syntax

methodName : function() { code lines }

Je krijgt toegang tot de method met de volgende syntax

objectName.methodName()

zie voorbeeld:

<!DOCTYPE html><html><body>

<p>Creating and using an object method.</p>

<p>An object method is stored as a function definition,

in an object property.</p>

<p id="demo"></p>

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       : 5566,

    fullName : function() { return this.firstName + " " + this.lastName;    }};

document.getElementById("demo").innerHTML = person.fullName();

</script></body></html>

 

objectName.methodName         toont de functiedefinitie. Let wel ik heb geen haakjes gebruikt.

 

Onderstaand een vb waarbij text in hoofdletters wordt veranderd

var message = "Hello world!";

var x = message.toUpperCase();

 

<!DOCTYPE html><html><body>

<p id="demo"></p>

<script>

function person(firstName,lastName,age,eyeColor) {

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

    this.eyeColor = eyeColor;

    this.changeName = function (name) { this.lastName = name;    }}

var myMother = new person("Sally","Rally",48,"green");

myMother.changeName("Doe");

document.getElementById("demo").innerHTML ="My mother's last name is " + myMother.lastName;

</script></body></html>

 

Een object prototype wordt gemaakt met een object constructor definitie

function person(first, last, age, eye) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eye;}

Hieruit kunnen objects gemaakt worden.

var myFather = new person("John", "Doe", 50, "blue");

var myMother = new person("Sally", "Rally", 48, "green");

Je kan properties toevoegen aan de objects

MyFather.nationality = “English”;

Deze propterty wordt toegevoegd aan MyFather, niet aan myMother of enkel ander person.object

Ook een method kan je toevoegen

myFather.name = function {return this.firstName + “ ” + this.lastName}

De methode wordt alleen tot myFather toegevoegd.

Als je een property of method wilt toevoegen tot de prototype, moet je terug naar de constructor function en het daar toevoegen of je kan het met de prototype property of method function toevoegen

Of je kan de prototype function gebruiken om het toe te voegen.

function person(first, last, age, eyecolor) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eyecolor;}

person.prototype.nationality = "English";

function person(first, last, age, eyecolor) {

    this.firstName = first;

    this.lastName = last;

    this.age = age;

    this.eyeColor = eyecolor;}

person.prototype.name = function() {return this.firstName + " " + this.lastName;};

 

Function definitions

function functionName(parameters) {  code to be executed}

Functies worden gedeclareerd en opgeslagen voor later gebruik

<p id="demo"></p>

<script>

function MijnFunctie(a, b) {

    return a * b;

}

document.getElementById("demo").innerHTML = MijnFunctie(4, 3);

</script>

Een function expression kan ook in een variabele worden opgeslagen

Var= function (a,b){return a*b};

Deze variabele kan dan gebruikt worden al seen functie

<p id="demo"></p>

<script>

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

document.getElementById("demo").innerHTML = x(4, 3);

</script>

Hoisting laat deze volgorde van declaratie toe:

MijnFunctie(5);
function MijnFunctie(y) {return y * y;}

Self-invoking functies starten automatisch zonder te zijn opgeroepen. Ze hebben () na de expression

(function(){var x=”Hello!”;})()

Functies kunnen als waarden gebruikt worden

function MijnFunctie(a, b) { return a * b;} var x = MijnFunctie(4, 3);

En als expressions

function MijnFunctie(a, b) {return a * b; } var x = MijnFunctie(4, 3) * 2;

Functions kunnen properties en methods hebben

function MijnFunctie(a, b) {return arguments.length;}

Een function designed als een property van een object wordt een method genoemd.

Een functie wordt gedeclareerd met parameters. Arguments zijn de daadwerkelijke waarde die voor deze parameter met de functie gebruikt wordt. Soms is het goed om een default argument te kiezen voor je parameters.

 

Als de argument object een array van arguments heeft kan je met onderstaande functie loopen door de array

x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
    
var i, sum = 0;
    
for (i = 0; i < arguments.length; i++) { sum += arguments[i]; }
    
return sum;}

keyword window refereert naar de functie die gedeclareerd is

function MijnFunctie(a, b) {return a * b;}
window.MijnFunctie(10, 2); is hetzelfde als MijnFunctie(10,2);

keyword this refereert naar de owner object van de functie die gedeclareerd is

<p id="demo"></p>

<script>

function MijnFunctie() { return this;}

document.getElementById("demo").innerHTML = MijnFunctie();

</script>

Een functie kan gedefinieerd worden als een methode:

var myObject = {
    firstName:
"John",
    lastName: 
"Doe",
   
fullName: function () {return this.firstName + " " + this.lastName;}}
myObject.fullName();  

In het bovenstaande geval refereert this naar myObject

De new keyword zorgt voor het creeren van een object:

function MijnFunctie(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;}
var x = new MijnFunctie("John","Doe");
x.firstName; 

call() en apply() zijn voorbepaalde JavaScript function methods. Call pakt de arguments apart en apply in een array

 

function MijnFunctie(a, b) {return a * b;}
myObject =
MijnFunctie.call(myObject, 10, 2);

function MijnFunctie(a, b) {return a * b;}
myArray = [
10, 2];
myObject = MijnFunctie.apply(myObject, myArray);

 

function MijnFunctie() { var a = 4return a * a;}

In de bovenstaande definitie is var a een local variable, gedeclareerd binnen de function. a kan alleen door de MijnFunctie gebruikt worden.

var a = 4; function MijnFunctie() {return a * a; }

In de bovenstaande definitie is var a een global variable, gedeclareerd buiten de functie. a kan door alle functions op de page gebruikt worden. Als a verandert verandert hij ook voor alle functions.

Variables zonder keyword var zijn altijd global variables ook al zijn ze in een functie gedeclareerd.

 

DOM Model

DOM HTML tree

DOM is een platform die programmas en scripts; content, structuur en style van een document laat updaten.

Het is het standard object model en programming interface voor HTML. Het definieert

HTML elements als objects

De properties van alle HTML elements

De methods van alle HTML elements

De events van alle HTML elements

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript kan al de  HTML elements op de page  veranderen
  • JavaScript kan al de  HTML attributes op de page  veranderen
  • JavaScript kan al de  CSS styles op de page  veranderen
  • JavaScript kan bestaande HTML elements and attributes verwijderen
  • JavaScript kan nieuwe HTML elements and attributes toevoegen
  • JavaScript kan reageren op alle bestaande HTML events op de page
  • JavaScript kan nieuwe HTML events op de page  creeeren

 

DOM is de standard voor het accessen, veranderen, toevoegen en deleten van HTML elements.

DOM methods zijn acties die je kan uitvoeren op HTML elements

DOM properties zijn waarden die je kan instellen en veranderen

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

getElementById is een method

innerHTML is een property, die gebruikt wordt voor het aanpassen van de inhoud van een element.

 

In de HTML DOM is de hele pagina het document

Je kan elementen accessen met de volgende methods

 

Method                                                                               Description

document.getElementById()                      Find an element by element id (dus <div id=”idname”>)

document.getElementsByTagName()    Find elements by tag name (dus <div>, <a> etc)

document.getElementsByClassName() Find elements by class name (dus <div class=”style1”>)

document.querySelectorAll();                   Vindt elements bij CSS selector (id, class name, type, attributes, attribute waarden etc)

vb

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>

<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>

var x = document.querySelectorAll("p.intro");

document.getElementById("demo").innerHTML =

'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;

</script>

 

Je kan de HTML elements veranderen met de volgende methods

Method                                                               Description

element.innerHTML=                                    Change the inner HTML of an element

element.attribute=                                         Change the attribute of an HTML element

element.setAttribute(attribute,value)   Change the attribute of an HTML element

element.style.property=                              Change the style of an HTML element

 

aanmaken en deleten van elements

Method                                               Description

document.createElement()        Create an HTML element

document.removeChild()            Remove an HTML element

document.appendChild()             Add an HTML element

document.replaceChild()             Replace an HTML element

document.write(text)                   Write into the HTML output stream

 

toevoegen van event handlers

Method                                                                                                               Description

document.getElementById(id).onclick=function(){code}               Adding event handler code to an onclick event

 

Onderstaand een lijst van HTML DOM objects

Property                                              Description                                                                                         DOM

document.anchors                          Returns all <a> elements that have a name attribute      1

document.applets                           Returns all <applet> elements (Deprecated in HTML5)   1

document.baseURI                         Returns the absolute base URI of the document                               3

document.body                                               Returns the <body> element                                                     1

document.cookie                            Returns the document's cookie                                                 1

document.doctype                         Returns the document's doctype                                             3

document.documentElement    Returns the <html> element                                                      3

document.documentMode        Returns the mode used by the browser                                                3

document.documentURI             Returns the URI of the document                                            3

document.domain                          Returns the domain name of the document server          1

document.domConfig                   Obsolete. Returns the DOM configuration                           3

document.embeds                         Returns all <embed> elements                                                 3

document.forms                              Returns all <form> elements                                                      1

document.head                                               Returns the <head> element                                                     3

document.images                           Returns all <img> elements                                                         1

document.implementation         Returns the DOM implementation                                           3

document.inputEncoding             Returns the document's encoding (character set)             3

document.lastModified                                Returns the date and time the document was updated 3

document.links                                 Returns all <area> and <a> elements that have a href attribute 1

document.readyState                   Returns the (loading) status of the document                    3

document.referrer                         Returns the URI of the referrer (the linking document)  1

document.scripts                             Returns all <script> elements                                                     3

document.strictErrorChecking   Returns if error checking is enforced                                       3

document.title                                  Returns the <title> element                                                       1

document.URL                                  Returns the complete URL of the document                       1

 

vb met document.forms

<form id="frm1" action="form_action.asp">

                First name: <input type="text" name="fname" value="Donald"><br>

                Last name: <input type="text" name="lname" value="Duck"><br><br>

  <input type="submit" value="Submit">

</form>

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="MijnFunctie()">Try it</button>

<p id="demo"></p>

<script>

function MijnFunctie() {

var x = document.forms["frm1"];

var text = "";

var i;

for (i = 0; i < x.length ;i++) {  text += x.elements[i].value + "<br>";   }

document.getElementById("demo").innerHTML = text;}

</script>

Met onderstaande script kan je de style van een element veranderen

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color = "blue";

document.getElementById("p2").style.fontFamily = "Arial";

document.getElementById("p2").style.fontSize = "larger";

</script>

Onderstaande script verandert de style van een heading bij het klikken van een button

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>

Onderstaande vb verandert de text van een heading

<!DOCTYPE html><html><body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>

function changeText(id) { id.innerHTML = "Ooops!"; }

</script></body></html>

Bij onderstaande vb verandert de text van een element

<!DOCTYPE html><html><body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>

function displayDate() {  document.getElementById("demo").innerHTML = Date();}

</script>

<p id="demo"></p>

</body></html>

Onderstaande functie verandert de input in uppercases

<!DOCTYPE html>

<html><head><script>

function MijnFunctie() {

    var x = document.getElementById("fname");

    x.value = x.value.toUpperCase();}

</script></head><body>

Enter your name: <input type="text" id="fname" onchange="MijnFunctie()">

</body></html>

 

De event listener voegt een event toe aan een element.

element.addEventListener(event, function, useCapture);

eerste parameter duidt op het type event bv mouseover, click etc

tweede parameter duidt op de functie die wordt toegepast

derde parameter geeft aan om event bubbeling of event capturing al dan niet te gebruiken

 

<!DOCTYPE html><html><body>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>

document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!");});

</script></body></html>

Onderstaand wordt er gewerkt met de external named function

<!DOCTYPE html><html><body>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>

document.getElementById("myBtn").addEventListener("click", MijnFunctie);

function MijnFunctie() {    alert ("Hello World!");}

</script>

</body></html>