Frame

See the Pen Les drie: Luisteraars by Frank Los (@franklosdus) on CodePen.

De eerste regels in de code gaan over het maken van het frame. Het frame is de lijst waarin je jouw digitale schilderij maakt.

 

Dit komt terecht op een HTML-pagina. Dat doet ZIM automatisch met deze regels code. HTML komt later in deze cursus aan de orde. Voorlopig kunnen we prima aan de slag met Codepen.

 

In een latere les vertel ik ook hoe je jouw eigen project kan maken in Codepen. We zijn nu nog aan het verkennen.

 

Frame: schaling

const scaling = "fit"; 

Je hebt verschillende manieren om het frame te schalen. "Fit" wil zeggen dat je frame zich altijd aanpast aan de maat van je scherm.

 

Fit staat tussen aanhalingstekens. Het is een stukje tekst: een string

const width = 1024;

const height = 768;

Width en height zijn de formaten van je frame. Dit is in pixels. Omdat we fit gebruiken kun je dit met een flinke korrel zout nemen. Als je frame zich aanpast aan jouw scherm zal de breedte maar in heel enkele gevallen 1024 pixels zijn.

 

Met "fit" schaalt het frame altijd mooi mee met je scherm. Maar het is niet echt responsive.  Je houdt vaak randen aan de zijkant over. In een latere les gaan we onze apps echt responsive maken.

 

Frame: kleur

const color = light; 

Color is de achtergrondkleur van je frame. Deze kleur grijs heeft Dan Zen voor ons bedacht onder de const light.

 

const outerColor = dark; 

Outercolor is de kleur om je frame heen.

 

const frame = new Frame(scaling, width, height, color, outerColor);

Hier geven we de computer de opdracht om een frame te maken. Tussen de haakjes vertellen we hoe het frame eruit moet zien.

 

Luisteraar

Je kunt je programma naar gebeurtenissen laten luisteren. Een gebeurtenis is bijvoorbeeld dat de gebruiker op een knop drukt. Je geeft de computer de opdracht om een stukje code uit te voeren als dat gebeurt. Zo'n stukje code heet een functie. Daar gaan we de volgende les verder op in.

 

frame.on("ready", () => {

}

 

Dit stukje code luistert naar je frame. Je frame geeft een signaal wanneer het klaar is. Dat duurt een aantal milliseconden. Maar je computer is sneller dan dat. Als de computer de code al gaat uitvoeren voordat het frame klaar is raakt hij in de war. Dan weet hij nog niet wat een frame is.

 

Als het frame klaar is wordt de code uitgevoerd die tussen de accolades staat: { en }

 

We gaan later dieper in op luisteraars en de functies die erbij horen. Het is nu genoeg om te weten dat je even moet wachten tot het frame klaar is. Daarom zet je jouw code tussen de accolades.

Stage

Binnen het frame heb je de stage

Alles wat je toevoegt komt op de stage.

 

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement