JavascriptTerugblik

Mediatechnologie Blok 9

Opbouw Javascript!

• Objecten• Variabelen• Vergelijkingen• Events

Objecten !fiets (object) - wiel (propertie van fiets)

fiets.wiel.voor (notatiewijze)Voor propertie van wiel en wiel is propertie van fiets

Real javascript code: document.title

Methodsbutton.click ()window.open ()

Variabelen !

Variabelen zijn zelfgemaakt objecten !

var dePagina; (een variabele met de naam dePagina is gemaakt)

var mijnKat=“Daisy”; (de waarde van mijnKat is Daisy)

var mijnTeller=1 (de waarde van mijnTeller is 1)

Nummers en strings !Variabelen !

1 “1” “melk”

var mijnTeller = 1 + 1 (de waarde van mijnTeller is 2)

var mijnTeller = 1 + “1” (de waarde van mijnTeller is 11)

var mijnTeller = “1” + “1” (de waarde van mijnTeller is 11)

var mijnTeller = 1 * “1” (syntaxfout)

var mijnTeller = 1 / “1” (syntaxfout)var mijnTeller = 1 - “1” (syntaxfout)

Nummers en strings 2 !Variabelen !

var mijnTeller = mijnTeller + 1De variabele MijnTeller wordt met 1 opgehoogd

var mijnTeller = mijnTeller ++De variabele MijnTeller wordt met 1 opgehoogd

var mijnTeller = mijnTeller - 1De variabele MijnTeller wordt met 1 verlaagd

var mijnTeller = mijnTeller --De variabele MijnTeller wordt met 1 verlaagd

Vergelijkingen !

+ /++

-*-- < >

Events!De browser doet alleen iets als er iets gebeurt!

Keyboard-events !

Mouse click events!

Mouse move events !

Window-events !

Form en input events !

IF - Else• if statement - use this statement to execute some code only if a specified condition is true

• if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false

• if...else if....else statement - use this statement to select one of many blocks of code to be executed

if (time < 12) { document.write("Goede Morgen"); }else { document.write("Goede Middag"); }

IF - Else

IF - Else

Switchswitch(n){case 1: execute code block 1 break;case 2: execute code block 2 break;default: code to be executed if n is different from case 1 and 2}

Switch

Pop-Upalert(“tekst");Alert

Pop-UpConfirm

Pop-UpPrompt prompt(“text","defaultvalue");

Functions function functionname(var1,var2,...,varX){some code}

The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.Note: A function with no parameters must include the parentheses () after the function name.

Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name.

FunctionsReturn

Javascript Loops

In javascript zijn er 2 soorten loops:

For

Doorloopt een blok code een vooraf bepaalt aantal maal

While

Doorloopt een blok code net zolang totdat een een conditie op true komt.

De For Loop

Javascript Loops

for (var=startvalue;var<=endvalue;var=var+increment){code die uitgevoerd wordt}

Syntax

De While Loop

Javascript Loops

while (var<=eindwaarde { code die uitgevoerd wordt }

Syntax

De Do .. While Loop

Javascript Loops

do { code die uitgevoerd wordt }while (var<=eindwaard);

Syntax

De do .. while loop is een variant op de while loop. De code wordt eenmaal uitgevoerd en herhaalt de loop tot de conditie op waar staat.

De Do .. While Loop

Javascript Loops

De do .. while loop is een variant op de while loop. De code wordt eenmaal uitgevoerd en herhaalt de loop tot de conditie op waar staat.

De break StatementDe break statement stopt de loop en gaat verder met de code die na de loop komt. (of stopt wanneer er geen code volgt.

Javascript Loops

De continue StatementDe continue statement stopt de huidige loop en gaat verder de volgende waarde!

Javascript Loops

De For .. In StatementDe For .. In statement doorloopt een loop van elementen binnen een ‘array’ of de properties van een ‘object’.

Javascript Loops

for (variable in object) { uit te voeren code }

Syntax

Javascript eventsAlle elementen binnen een webpagina hebben gebeurtenissen (events) die een javascript kunnen laten activeren! Bijvoorbeeld de ‘onCLick’ event van een knop nadat de gebruiker deze heeft aangeklikt. We definieren deze events in de html tags.

Voorbeelden hiervan zijn:• Een muis-klik• Een webpagina of foto lader• Een input veld van een formulier• Submitten van een formulier

onLoad en onUnloadJavascript Loops

Functie in de header voorbeeld1.html en voorbeeld2.html

onFocus, onBlur en onChange

onFocus

onBlur

onChange

Voorbeeld3.html

Code voorbeeld 3

In de header!

In de body

onSubmitHet onSubmit event word gebruikt voor het valideren van alle velden van een formulier voordat het bevestigd (submit) wordt.

onsubmit

Activeert script

voorbeeld4.html

onMouseOver en onMouseOutDeze events worden veel gebruikt voor animated buttons.

eifeltoren2.pngeifeltoren.png

voorbeeld5.html

GetElementByNameWerkt hetzelfde als document.getElementById, het verschil is dat id uniek is slechts 1 element. En bij Name zijn er meerdere elementen met deze naam mogelijk!

GetElementByIdMet document.getElementById(‘id’) kan je elke element op een html-pagina benaderen.Een id kan maar 1 maal voorkomen.

JS en HTML5 - Cirkel<canvas> getContex t – beginPath – Arc - Fill

JS en HTML5 - Vierkant<canvas> getContex t – beginPath – Arc - Fill

JS en HTML5 – lijnen tekenen<canvas> getContex t – moveTo, lineTo, Stroke

JS en HTML5 - <canvas>

HTML 5 - <article>