Javascript<br />Introductie<br />Mediatechnologie Blok 8<br />
Wat is Javascript ?<br />Programmeer/scripttaal t.b.v. webomgevingen<br />Geen compiler nodig / browser verwerkt script<br...
Waar wordt het voor gebruikt?<br /><ul><li> Active user interfaces !
 Valideren van forms en input
 HTML pagina’s custom made !
 Cookies / standaard datum etc.
Controle over browser</li></ul>Content / Styling / Behavior <br />Html -      CSS   -  Javascript<br />
Waar ook voor?<br /><ul><li>Belevenis op maatmaken
 Roll-overs
 Menu
Validering
 Pop-ups </li></li></ul><li>Opbouw Javascript!<br /><ul><li>Objecten
Variabelen
Upcoming SlideShare
Loading in …5
×

Les 1 Javascript Intro

413 views

Published on

1e les javascript t.b.v. W2

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

  • Be the first to like this

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

No notes for slide

Les 1 Javascript Intro

  1. 1. Javascript<br />Introductie<br />Mediatechnologie Blok 8<br />
  2. 2. Wat is Javascript ?<br />Programmeer/scripttaal t.b.v. webomgevingen<br />Geen compiler nodig / browser verwerkt script<br />In html of als extern bestand !<br />Body of Headerscript !<br />
  3. 3. Waar wordt het voor gebruikt?<br /><ul><li> Active user interfaces !
  4. 4. Valideren van forms en input
  5. 5. HTML pagina’s custom made !
  6. 6. Cookies / standaard datum etc.
  7. 7. Controle over browser</li></ul>Content / Styling / Behavior <br />Html - CSS - Javascript<br />
  8. 8. Waar ook voor?<br /><ul><li>Belevenis op maatmaken
  9. 9. Roll-overs
  10. 10. Menu
  11. 11. Validering
  12. 12. Pop-ups </li></li></ul><li>Opbouw Javascript!<br /><ul><li>Objecten
  13. 13. Variabelen
  14. 14. Vergelijkingen
  15. 15. 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 />
  16. 16. 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 />
  17. 17. 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 />
  18. 18. 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 />
  19. 19. Vergelijkingen !<br />+<br />/<br />-<br />*<br /><<br />><br />++<br />--<br />
  20. 20. 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 />
  21. 21. Voorbeelden van<br />Eenvoudig Javascripts<br />
  22. 22. Opdracht Javascript‘1’<br />Opdracht 1.<br />Maakeenwebpagina met daarineenaantalvariabelen die ervoorzorgendat<br />Dat je naam, klas, opdrachtnummerna het laden van de body wordengeplaats op dezepagina. Je hebthiereenfunctie en variabelennodig.<br />Tevensmoet op de paginaeenlijstjekomen met supermarktartikelenwaarvan de prijzend.m.v. variabelengeplaatstworden.<br />Ermoetookeentotaalbedragvoordezeartikelenkomend.m.v. het<br />optellen van dezevariabelen.<br />Upload dezepagina (zip-file) naarnatschool in de map JS opdracht 1.De opdrachtmoetvoor het eind van de les geplaatstzijn.<br />

×