Programmeer basics

Programmeer basics
  • na ca. 3 weken 'rekenen'
1 / 13
next
Slide 1: Slide
RekenenSoftware DeveloperMBOStudiejaar 1

This lesson contains 13 slides, with text slides.

time-iconLesson duration is: 30 min

Items in this lesson

Programmeer basics
  • na ca. 3 weken 'rekenen'

Slide 1 - Slide

Wat is een variabele?
Een variabele is een 'containertje' waar je iets in op kunt slaan.
Dat 'iets' is van een bepaalde soort:
  • heel getal                           integer
  • decimaal getal                 float / decimal / double
  • rij letters/leestekens    string
  • waar/niet waar                 boolean
De waarde van een variabele kun je steeds aanpassen / laten variëren, vandaar het woord 'variabele'.

Slide 2 - Slide

Variabele: waarde toekennen
Een variabele moet je in veel programmeertalen eerst 'initialiseren' oftewel:
'zeggen dat je met die variabele aan het werk gaat':
bijvoorbeeld:
  • let getal
  • let naam

Slide 3 - Slide

Variabele: waarde toekennen
Een variabele kan je een waarde geven m.b.v. een '=', bijv.:
  • getal = 5               (integer)
  • naam = "Ids"       (string)
  • pi = 3.14                 (double / decimal / float)
LET OP de aanhalingstekens bij het toekennen van een string
LET OP de 'punt' bij een decimaal getal

Slide 4 - Slide

Variabele: waarde vergelijken
In een if-statement wil je heel vaak de waarde van een variabele vergelijken met een andere waarde.
Bij het vergelijken moet je dan  '==' gebruiken:

if( getal == 2) is een juiste vergelijking,
if( getal = 2) is een verkeerde vergelijking

Slide 5 - Slide

HTML
Een HTML-pagina is opgebouwd uit allemaal tags: '< ... >'
De meeste tags hebben ook een afsluittag: '</... >'
Een HTML-pagina heeft sws de volgende tags:
  • <html></html>      absolute begin- en eindtag
  • <head></head>    bovenaan voor de meta-tags, links en titel
  • <body></body>    de inhoud van je pagina
  • KIJK altijd goed wat je binnen bepaalde tags plaatst

Slide 6 - Slide

HTML en CSS
De opmaak van je HTML kun je regelen met CSS. CSS kun je ter plekke verwerken binnen je HTML-code, maar mooier is om dat in een aparte CSS-file te doen: de stylesheet. Wat we hebben gezien (voornamelijk met Bootstrap, een gigagrote CSS-file):
  • de link naar je stylesheet plaats je in de <head>
  • met het attribuut 'class' binnen een HTML-tag verwijs je naar een class met opmaak in je stylesheet

Slide 7 - Slide

HTML en JavaScript
In je HTML-pagina kun je javascript aanroepen; met je (zelfgemaakte) javascript-scriptjes kun je allerlei interactie met de gebruiker van je HTML-pagina regelen.

Het aanroepen van javascript gebeurt vlak voor de body-sluit-tag (</body>)

Slide 8 - Slide

JavaScript 1
Tot nu toe hebben we geleerd:
  • hoe je op basis van een id in je HTML toegang krijgt tot HTML-elementen (document.getElementById)
  • hoe je een functie bij de onclick-event onder een knop kunt programmeren
  • hoe je attribuut-waarden van HTML-elementen kunt gebruiken en aanpassen

Slide 9 - Slide

JavaScript 2
  • het verschil tussen een lokale variabele (alleen binnen een functie beschikbaar) en een globale variabele (in je hele script beschikbaar)
  •  een functie heeft altijd twee gewone haakjes achter zijn naam staan: getNumbr()
  • het gebruik van de functies random() en floor() uit de Math-bibliotheek van JavaScript

Slide 10 - Slide

JavaScript 3
  • we hebben een eenvoudige while-loop leren kennen
             while (voorwaarde) {
                     uit te voeren code zolang aan de voorw. is voldaan
             }

Slide 11 - Slide

JavaScript 4
  • we hebben een eenvoudig if-/else-statement leren kennen
           if (voorwaarde ) {
                     uit te voeren code als aan de voorwaarde is voldaan
           } else {
                     uit te voeren code als NIET aan de voorw. is voldaan
           }
als de uit te voeren code slechts 1 opdracht is, hoeven { } niet

Slide 12 - Slide

Algemeen
  • het maakt verschrikkelijk veel uit dat je code syntactisch klopt
  • het maakt verschrikkelijk veel uit dat je verwijzingen naar andere elementen precies kloppen; bedenk daarbij dat verwijzingen heel vaak ook hoofdlettergevoelig zijn!
  • gebruik van de inspector / console van je browser
  • pas op met spaties in namen: gewoon niet doen!

Slide 13 - Slide