herhaling blok 8
TRANSCRIPT
![Page 1: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/1.jpg)
JavascriptTerugblik
Mediatechnologie Blok 9
![Page 2: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/2.jpg)
Opbouw Javascript!
• Objecten• Variabelen• Vergelijkingen• Events
![Page 3: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/3.jpg)
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 ()
![Page 4: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/4.jpg)
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)
![Page 5: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/5.jpg)
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)
![Page 6: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/6.jpg)
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
![Page 7: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/7.jpg)
Vergelijkingen !
+ /++
-*-- < >
![Page 8: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/8.jpg)
Events!De browser doet alleen iets als er iets gebeurt!
Keyboard-events !
Mouse click events!
Mouse move events !
Window-events !
Form en input events !
![Page 9: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/9.jpg)
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"); }
![Page 10: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/10.jpg)
IF - Else
![Page 11: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/11.jpg)
IF - Else
![Page 12: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/12.jpg)
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}
![Page 13: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/13.jpg)
Switch
![Page 14: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/14.jpg)
Pop-Upalert(“tekst");Alert
![Page 15: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/15.jpg)
Pop-UpConfirm
![Page 16: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/16.jpg)
Pop-UpPrompt prompt(“text","defaultvalue");
![Page 17: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/17.jpg)
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.
![Page 18: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/18.jpg)
FunctionsReturn
![Page 19: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/19.jpg)
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.
![Page 20: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/20.jpg)
De For Loop
Javascript Loops
for (var=startvalue;var<=endvalue;var=var+increment){code die uitgevoerd wordt}
Syntax
![Page 21: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/21.jpg)
De While Loop
Javascript Loops
while (var<=eindwaarde { code die uitgevoerd wordt }
Syntax
![Page 22: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/22.jpg)
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.
![Page 23: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/23.jpg)
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.
![Page 24: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/24.jpg)
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
![Page 25: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/25.jpg)
De continue StatementDe continue statement stopt de huidige loop en gaat verder de volgende waarde!
Javascript Loops
![Page 26: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/26.jpg)
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
![Page 27: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/27.jpg)
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
![Page 28: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/28.jpg)
onLoad en onUnloadJavascript Loops
Functie in de header voorbeeld1.html en voorbeeld2.html
![Page 29: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/29.jpg)
onFocus, onBlur en onChange
onFocus
onBlur
onChange
Voorbeeld3.html
![Page 30: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/30.jpg)
Code voorbeeld 3
In de header!
In de body
![Page 31: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/31.jpg)
onSubmitHet onSubmit event word gebruikt voor het valideren van alle velden van een formulier voordat het bevestigd (submit) wordt.
onsubmit
Activeert script
voorbeeld4.html
![Page 32: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/32.jpg)
onMouseOver en onMouseOutDeze events worden veel gebruikt voor animated buttons.
eifeltoren2.pngeifeltoren.png
voorbeeld5.html
![Page 33: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/33.jpg)
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!
![Page 34: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/34.jpg)
GetElementByIdMet document.getElementById(‘id’) kan je elke element op een html-pagina benaderen.Een id kan maar 1 maal voorkomen.
![Page 35: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/35.jpg)
JS en HTML5 - Cirkel<canvas> getContex t – beginPath – Arc - Fill
![Page 36: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/36.jpg)
JS en HTML5 - Vierkant<canvas> getContex t – beginPath – Arc - Fill
![Page 37: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/37.jpg)
JS en HTML5 – lijnen tekenen<canvas> getContex t – moveTo, lineTo, Stroke
![Page 38: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/38.jpg)
JS en HTML5 - <canvas>
![Page 39: Herhaling blok 8](https://reader034.vdocuments.net/reader034/viewer/2022052315/556455cdd8b42a682d8b54f1/html5/thumbnails/39.jpg)
HTML 5 - <article>