Programmeer basics
Programmeer basics
- na ca. 3 weken 'rekenen'
1 / 13
volgende
Slide 1: Tekstslide
RekenenSoftware DeveloperMBOStudiejaar 1
In deze les zitten 13 slides, met tekstslides.
Lesduur is: 30 minOnderdelen in deze les
Programmeer basics
- na ca. 3 weken 'rekenen'
Slide 1 - Tekstslide
Wat is een variabele?
Een variabele is een 'containertje' waar je iets in op kunt slaan.
Dat 'iets' is van een bepaalde soort:
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
JavaScript 3
- we hebben een eenvoudige while-loop leren kennen
uit te voeren code zolang aan de voorw. is voldaan
}
Slide 11 - Tekstslide
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 - Tekstslide
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!
