Upload
mvanginkel
View
614
Download
2
Embed Size (px)
Citation preview
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>