Your SlideShare is downloading. ×
Herhaling blok 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Herhaling blok 8

572
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
572
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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