JavascriptIntroductie

Mediatechnologie Blok 8

Wat is Javascript ?

Programmeer/scripttaal t.b.v. webomgevingen

Geen compiler nodig / browser verwerkt script

In html of als extern bestand !

Body of Headerscript !

Waar wordt het voor gebruikt?

• Active user interfaces !• Valideren van forms en input• HTML pagina’s custom made !• Cookies / standaard datum etc.• Controle over browser

Content / Styling / Behavior

Html - CSS - Javascript

Waar ook voor?

• Belevenis op maat maken• Roll-overs• Menu • Validering• Pop-ups

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 !

Opdracht Javascript ‘1’

Opdracht 1.

Maak een webpagina met daarin een aantal variabelen die er voor zorgen dat

Dat je naam, klas, opdrachtnummer na het laden van de body worden geplaats op

deze pagina. Je hebt hier een functie en variabelen nodig.

Tevens moet op de pagina een lijstje komen met supermarkt artikelen waarvan de

prijzen d.m.v. variabelen geplaatst worden.

Er moet ook een totaal bedrag voor deze artikelen komen d.m.v. het

optellen van deze variabelen.

Upload deze pagina (zip-file) naar natschool in de map JS opdracht 1.

De opdracht moet voor het eind van de les geplaatst zijn.