OMSCHRIJVING
De App Lab intro is een laagdrempelige inleiding naar een zeer krachtige tool met brede palet van functionaliteiten en mogelijkheden.
In deze Hour of Code leren we om knoppen, tekst, afbeeldingen, geluiden en schermen in JavaScript te maken en te besturen met behulp van blokken of tekst in JavaScript.
We kunnen het project afronden met het ontwerpen van onze eerste app!
Doel: Maak het scherm groen.
Sleep een setProperty() blok naar de werkplaats. Klik op de menu's pijltjes om de achtergrondkleur ("background-color") van het scherm ("screen1") naar groen ("green") te zetten.
Druk dan op "Start" om de code te testen. Als je tevreden bent met de resultaat klik op "Finish".
Doel: Maak de tekst groter en blauw.
Je hebt twee regels code nodig. Geef "label1" een lettergrootte ("font-size") van 80px en de tekstkleur ("text-color") blauw ("blue").
Druk dan op "Start" om de code te testen. Als je tevreden bent met de resultaat klik op "Finish".
Doel: Maak de knoppen rood en blauw. Verander daarna de tekst in het grote oranje veld.
Je kunt zweven boven de elementen om hun "id" te zien.
Zet de achtergrondkleur ("background-color") van de knoppen naar rood ("red") en blauw ("blue").
Verander de tekst ("text") eigenschap van het oranje tekst veld naar wat je maar wilt, zoals bijvoorbeeld "Welkom bij mijn app!".
Doel: Het scherm start blauw. Voeg code toe zodat het scherm groen wordt wanneer je op de "maak groen" ("Green-ify") knop drukt.
Voeg code toe binnen de functie van het onEvent() blok; Deze code moet de achtergrondkleur ("background-color") van het scherm in groen ("green") veranderen.
Doel: Maak de zaklamp app af.
De "On" knop maakt het scherm wit, jij moet nog code toevoegen om de "Off" knop het scherm weer zwart te kunnen maken.
Voeg code toe binnen het functie van het blok onEvent() zodat je de achtergrondkleur ("background-color") van het scherm zwart ("black") krijgt en de tekst kleur ("text-color")- wit ("white").
Doel: De geluiden app is bijna af! Voeg nog een plaatje, tekst en geluid toe aan de laatste knop.
Voeg een blok setProperty() om het plaatje van de vierde knop te veranderen, via de eigenschap "image". Verander ook de tekst van de knop ("text") in een andere blok.
Voeg daarna een blok onEvent() aan het programma toe. Zet het "id" veld naar "button4". Sleep de blok playSound() in dit onEvent() blok en kies een geluid uit de bibliotheek.
Doel: Voeg een tweede knop aan het scherm toe met de tekst "Right!" die heeft het "id"-"rightButton".
In de Design Mode moet je een nieuwe knop naar de app slepen. Geef het een goede plek en grootte.
Verander daarna de volgende waarden van de knop: "id", "text", "background color", en"font size".
Doel: Maak een nieuw scherm met de naam "rightScreen". Voeg een tekst label toe met de tekst "Je ging naar rechts!".
Als je in de Design Mode bent sleep een nieuw scherm-object naar de scherm. Verander de "id" naar "rightScreen". Sleep daarna een tekst label naar het scherm verander de tekst daarvan naar "Je ging naar rechts!".
Doel: Het scherm verandert naar "rightScreen" als de gebruiker op de "rightButton" klikt.
Voeg, in de Code Mode, een nieuwe onEvent() toe aan je programma, met een "id" van de "rightButton" knop. Daarin moet je een setScreen() blok binnen slepen zodat die schakelt naar het "rightScreen" scherm. Je kan ook een passende geluid toevoegen.
Doel: Bouw een eigen app door dit project uit te breiden. Deel het daarna met een vriend!
Bedenk eerst wat voor app wil je maken. Daarna ga je deze bouwen door schermen, knoppen, tekst, geluid en gebruiker interacties toe te voegen. Er zijn nog veel meer blokken in de toolbox waarmee je kunt experimenteren.
Als je klaar bent, druk op "Delen" om je ontwerp naar je klasgenoot of vriend door te sturen!