Herhaling blok 8

662 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
662
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Herhaling blok 8

  1. 1. Javascript<br />Terugblik<br />Mediatechnologie Blok 9<br />
  2. 2. Opbouw Javascript!<br /><ul><li>Objecten
  3. 3. Variabelen
  4. 4. Vergelijkingen
  5. 5. Events</li></li></ul><li>Objecten !<br />fiets<br />(object)<br /> - wiel<br /> (propertie van fiets)<br />fiets.wiel.voor (notatiewijze)<br />Voorpropertie van wiel en wiel is propertie van fiets<br />Real javascript code: document.title<br />Methods<br />button.click ()<br />window.open ()<br />
  6. 6. Variabelen !<br />Variabelenzijnzelfgemaaktobjecten !<br />vardePagina; (eenvariabele met de naamdePagina is gemaakt) <br />varmijnKat=“Daisy”; (de waarde van mijnKat is Daisy) <br />varmijnTeller=1 (de waarde van mijnTeller is 1) <br />
  7. 7. Variabelen !<br />Nummers en strings !<br />1 “1” “melk”<br />varmijnTeller = 1 + 1 (de waarde van mijnTeller is 2) <br />varmijnTeller = 1 + “1” (de waarde van mijnTeller is 11)<br />varmijnTeller = “1” + “1” (de waarde van mijnTeller is 11)<br />varmijnTeller = 1 * “1” (syntaxfout)<br />varmijnTeller = 1 / “1” (syntaxfout)<br />varmijnTeller = 1 - “1” (syntaxfout)<br />
  8. 8. Variabelen !<br />Nummers en strings 2 !<br />varmijnTeller = mijnTeller + 1<br />De variabeleMijnTellerwordt met 1 opgehoogd<br />varmijnTeller = mijnTeller ++<br />De variabeleMijnTellerwordt met 1 opgehoogd<br />varmijnTeller = mijnTeller - 1<br />De variabeleMijnTellerwordt met 1 verlaagd<br />varmijnTeller = mijnTeller --<br />De variabeleMijnTellerwordt met 1 verlaagd<br />
  9. 9. Vergelijkingen !<br />+<br />/<br />-<br />*<br /><<br />><br />++<br />--<br />
  10. 10. Events!<br />De browser doet alleen iets als er iets gebeurt!<br />Keyboard-events !<br />Mouse click events!<br />Mouse move events !<br />Window-events !<br />Form en input events !<br />
  11. 11. IF - Else<br /><ul><li>if statement- use this statement to execute some code only if a specified condition is true
  12. 12. if...else statement- use this statement to execute some code if the condition is true and another code if the condition is false
  13. 13. if...else if....else statement- use this statement to select one of many blocks of code to be executed</li></ul>if (time < 12)<br /> {<br />document.write("Goede Morgen");<br /> }<br />else<br /> {<br />document.write("Goede Middag");<br /> }<br />
  14. 14. IF - Else<br />
  15. 15. IF - Else<br />
  16. 16. Switch<br />switch(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}<br />
  17. 17. Switch<br />
  18. 18. Pop-Up<br />Alert<br />alert(“tekst");<br />
  19. 19. Pop-Up<br />Confirm<br />
  20. 20. Pop-Up<br />Prompt<br />prompt(“text","defaultvalue");<br />
  21. 21. Functions<br />functionfunctionname(var1,var2,...,varX){some code}<br />The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.<br />Note: A function with no parameters must include the parentheses () after the function name.<br />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.<br />
  22. 22. Functions<br />Return<br />
  23. 23. Javascript Loops<br />In javascript zijn er 2 soorten loops:<br />For Doorloopt een blok code een vooraf bepaalt aantal maalWhileDoorloopt een blok code net zolang totdat een een conditie op true komt. <br />
  24. 24. Javascript Loops<br />De For Loop<br />Syntax<br />for (var=startvalue;var<=endvalue;var=var+increment){code die uitgevoerd wordt}<br />
  25. 25. Javascript Loops<br />De While Loop<br />Syntax<br />while (var<=eindwaarde  {   code die uitgevoerd wordt   }<br />
  26. 26. Javascript Loops<br />De Do .. While Loop<br />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.<br />Syntax<br />do  {  code die uitgevoerd wordt   }while (var<=eindwaard);<br />
  27. 27. Javascript Loops<br />De Do .. While Loop<br />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.<br />
  28. 28. Javascript Loops<br />De break Statement<br />De break statement stopt de loop en gaat verder met de code die na de loop komt. (of stopt wanneer er geen code volgt.<br />
  29. 29. Javascript Loops<br />De continue Statement<br />De continue statement stopt de huidige loop en gaat verder de volgende waarde!<br />
  30. 30. Javascript Loops<br />De For .. In Statement<br />De For .. In statement doorloopt een loop van elementen binnen een ‘array’ of de properties van een ‘object’. <br />Syntax<br />for (variable in object)  {   uittevoeren code  }<br />
  31. 31. Javascriptevents<br />Alle 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 htmltags.<br />Voorbeeldenhiervanzijn:<br /><ul><li>Eenmuis-klik
  32. 32. Eenwebpagina of fotolader
  33. 33. Een input veld van eenformulier
  34. 34. Submitten van eenformulier</li></li></ul><li>Javascript Loops<br />onLoad en onUnload<br />Functie in de header<br />voorbeeld1.html<br /> en voorbeeld2.html<br />
  35. 35. onFocus, onBlur en onChange<br />Voorbeeld3.html<br />onFocus<br />onBlur<br />onChange<br />
  36. 36. Code voorbeeld 3<br />In de header!<br />In de body<br />
  37. 37. onSubmit<br />Het onSubmit event word gebruiktvoor het valideren van allevelden van eenformuliervoordat het bevestigd (submit) wordt.<br />voorbeeld4.html<br />onsubmit<br />Activeert script<br />
  38. 38. onMouseOver en onMouseOut<br />Deze events wordenveelgebruiktvoor animated buttons.<br />voorbeeld5.html<br />eifeltoren.png<br />eifeltoren2.png<br />
  39. 39. GetElementByName<br />Werkt 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!<br />
  40. 40. GetElementById<br />Met document.getElementById(‘id’) kan je elke element op een html-pagina benaderen.Een id kan maar 1 maal voorkomen.<br />
  41. 41. JS en HTML5 - Cirkel<br />getContex t – beginPath – Arc - Fill<br /><canvas><br />
  42. 42. JS en HTML5 - Vierkant<br />getContex t – beginPath – Arc - Fill<br /><canvas><br />
  43. 43. JS en HTML5 – lijnentekenen<br />getContex t – moveTo, lineTo, Stroke<br /><canvas><br />
  44. 44. JS en HTML5 - <canvas> <br />
  45. 45. HTML 5 - <article><br />

×