BBL Week 5

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 2

Kennismakingsronde

• Opfrissen css
  
• Introductie javascript

Doelen

Hoe zorg je er in css voor dat alleen het kopje 'Inleiding' de kleur blauw krijgt voor deze html-code?

Hoe zorg je er in css voor dat alleen de kopje 'Inleiding' en 'Hoofdstuk 1' de kleur blauw krijgen voor deze html?

Sleep de onderdelen vanuit de css naar de juiste definitie aan de rechterkant.

Selector

Property

Value

H1

.hs_blauw

#submit_knop

font-size

color

12pt

grey

Ga naar https://www.ponggame.org/ en start een game tegen de computer. Bekijk de pagina vervolgens. Waar wordt gebruikt van html en css.

Wat zorgt ervoor dat we op https://www.ponggame.org een game kunnen spelen?

Wat doet javascript eigenlijk op een webpagina als ponggame.org?

Kennismakingsronde

• Programmeertaal voor front-end ontwikkeling (browser)
• Instructies
• Variabelen
• Acties / functies
• Input en output
• Een manier om html en css aan te laten passen
  

Javascript

Kennismakingsronde

• <script> tag
  
• Extern bestand .js
  

Javascript in html

Kennismakingsronde

• css veranderen
• html veranderen

Voorbeelden

Kennismakingsronde

• maak een map 'js' aan in jouw werkmap
  
• Download css_veranderen.html en html_veranderen.html html_veranderen.html
• zet twee willekeurige plaatjes in jouw map
• voeg plaatje 1 toe aan html_veranderen.html
• voeg javascript toe om plaatje 2 te tonen als je
  op de button klikt.
  

Oefening

Kennismakingsronde

• https://www.codecademy.com/learn/introduction-to-javascript

Verdiepen

Wat is het belangrijkste dat jij hebt geleerd over Javascript?

Kennismakingsronde

• Introductie javascript

Volgende week

• start Wordpress

Terug- en vooruitblik