Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Nu heb je iets geleerd over de theorie van JavaScript en wat je ermee kunt doen, we geven je nu een spoedcursus in de basisfuncties van JavaScript via een volledig praktische zelfstudie. Hier bouw je stap voor stap een eenvoudig spel "Raad het nummer".

Voorwaarden: Elementaire computerkennis, een basiskennis van HTML en CSS, een goed begrip van wat JavaScript is.
Doelstelling: Om het eerste beetje ervaring te krijgen met het schrijven van JavaScript, en op zijn minst een basiskennis te verwerven van wat het schrijven van een JavaScript-programma inhoudt.

Er wordt van je niet verwacht dat je de code meteen volledig begrijpt. We willen je eerst kennis laten maken met de concepten op hoog niveau en je een idee geven van hoe JavaScript (en andere programmeertalen) werken. In volgende artikelen zal je al deze functies nog veel gedetailleerder gaan bekijken!

Opmerking: Veel van de codefuncties die je in JavaScript ziet, zijn hetzelfde als in andere programmeertaal - functies, loops, enz. De codesyntax ziet er anders uit, maar de concepten zijn nog steeds grotendeels hetzelfde.

Denken als een programmeur

Een van de moeilijkste dingen om te leren tijdens het programmeren, is niet de manier van opschrijven (syntax) die je moet leren, die je moet leren, maar hoe je deze kunt toepassen om problemen in de echte wereld op te lossen. Je moet gaan denken als een programmeur - meestal gaat het om beschrijvingen van wat je programma moet doen en uitzoeken welke codefuncties nodig zijn om die dingen te bereiken en hoe ze samen kunnen werken.

Dit vereist een combinatie van hard werken, ervaring met de syntax van de programmeertaal, oefenen - en een beetje creativiteit. Hoe meer je codeert, hoe beter je erin zult worden. We kunnen niet beloven dat je "programmeurshersenen" in 5 minuten zult ontwikkelen, maar we zullen je voldoende gelegenheid geven om tijdens de cursus te denken als een programmeur.

Laten we met dat in gedachten eens kijken naar het voorbeeld dat we in dit artikel gaan opbouwen, en het algemene proces bekijken om het te ontleden in tastbare taken.

Voorbeeld - Raad het nummerspel

In dit artikel laten we je zien hoe je het eenvoudige spel opbouwt dat je hieronder kunt zien:

Probeer het te spelen - maak jezelf vertrouwd met het spel voordat je verder gaat.

Stel je voor dat iemand je de volgende opdracht heeft gegeven voor het maken van dit spel:

Ik wil dat je een eenvoudig raad het nummer type spel maakt. Het moet een willekeurig getal tussen 1 en 100 kiezen en vervolgens de speler uitdagen om het getal in 10 beurten te raden. Na elke beurt moet aan de speler worden verteld of deze gelijk of ongelijk heeft, of de gok te laag of te hoog was. Het moet de speler ook vertellen welke nummers hij eerder geraden had. Het spel wordt beëindigd als de speler het cijfer correct raadt of als het aantal beurten op is. Wanneer het spel is afgelopen, moet de speler een optie krijgen om opnieuw te spelen.

Bij het bekijken van deze beschrijving is het eerste dat we kunnen doen is het beginnen met het opsplitsen in eenvoudige, bruikbare taken, in zo veel mogelijk programmeur-denkwijze als mogelijk:

  1. Genereer een willekeurig getal tussen 1 en 100.
  2. Noteer het gekozen waar de speler mee speelt. Start op 1.
  3. Geef de speler een manier om te raden wat het nummer is.
  4. Nadat een gok is ingediend, noteer je deze eerst ergens zodat de gebruiker zijn eerdere gerade gokbeurten kan zien.
  5. Controleer vervolgens of dit het juiste nummer is.
  6. Als het antwoord goed is:
    1. Toon gefeliciteerd bericht.
    2. Stop de mogelijkheid speler om meer getallen in te kunnen voeren (dit zou het spel in de war kunnen maken).
    3. Schermbediening waarmee de speler het spel opnieuw kan starten.
  7. Als het antwoord verkeerd is en de speler heeft nog beurten over:
    1. Vertel de speler dat deze ongelijk heeft.
    2. Laat ze een nieuwe gok in te voeren.
    3. Hoog het aantal gedane beurten op met 1.
  8. Als het antwoord verkeerd is en de speler geen beurten meer heeft:
    1. Vertel de speler dat het spel klaar is.
    2. Stop de speler om meer getallen in te kunnen voeren (dit zou het spel in de war maken).
    3. Schermbediening waarmee de speler het spel opnieuw kan starten.
  9. Nadat het spel opnieuw is gestart, controleer je of de spellogica en UI volledig opnieuw zijn gestart en gaat het aantal beurten terug naar 1.

Laten we nu verder gaan en bekijken hoe we deze stappen kunnen omzetten in code, het spel opbouwen en de JavaScript-functies gaandeweg verkennen.

Eerste opzet

Om deze beschrijving te beginnen, willen we graag dat je een lokale kopie maakt van het nummer-guessing-game-start.html bestand (zie het hier live). Open het in zowel je teksteditor als in je webbrowser. Op dit moment zie je een eenvoudige kop, alinea met instructies en een formulier voor het invoeren van een gok, maar het formulier zal op dit moment niets doen.

De plaats waar we al onze code zullen toevoegen, bevindt zich in het element <script> onder aan de HTML:

<script>

  // Your JavaScript goes here

</script>

Variabelen toevoegen om onze gegevens op te slaan

Laten we beginnen. Voeg eerst de volgende regels toe in het <script> element:

var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');

var guessCount = 1;
var resetButton;

Dit gedeelte van de code stelt de variabelen in die we nodig hebben om de gegevens op te slaan die ons programma zal gebruiken. Variabelen zijn in feite bakjes voor waarden (zoals getallen of tekenreeksen). Je maakt een variabele met het sleutelwoord var gevolgd door de naam van je variabele. Je kunt een waarde toewijzen aan je variabele met een gelijkteken (=) gevolgd door de waarde die je eraan wilt geven.

In ons voorbeeld:

  • De eerste variable — randomNumber — krijgt een willekeurig getal tussen 1 en 100 toegewezen, berekend met een wiskundig algoritme.
  • De volgende drie variabelen worden elk gemaakt om een verwijzing naar de resultatenparagrafen (resultaatonderdelen) in onze HTML op te slaan en worden gebruikt om waarden in de alinea's later in de code in te voegen:
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
  • De volgende twee variabelen slaan verwijzingen op naar de formuliertekstinvoer en verzendknop en worden gebruikt om het invoeren van de gok later in te stellen.
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
    <input type="submit" value="Submit guess" class="guessSubmit">
  • Onze laatste twee variabelen bevatten het aantal gokbeurten van 1 (gebruikt om bij te houden hoeveel gokbeurten de speler heeft gehad) en een verwijzing naar een resetknop (begin op nieuw knop) die nog niet bestaat (maar later zal verschijnen).

Opmerking: Je leert later veel meer over variabelen in de cursus, te beginnen met het volgende artikel.

Functies

Voeg vervolgens het onderstaande toe onder je vorige JavaScript:

function checkGuess() {
  alert('Ik ben een tijdelijke aanduiding');
}

Functies zijn herbruikbare blokken met code die je één keer kunt schrijven en die keer op keer kunt hergebruiken, zodat je de code niet steeds opnieuw hoeft te schrijven. Dit is echt handig. Er zijn een aantal manieren om functies te definiëren, maar voor nu concentreren we ons op één eenvoudig type. Hier hebben we een functie gedefinieerd door het trefwoord function te gebruiken, gevolgd door een naam, met haakjes erachter geplaatst. Daarna plaatsen we twee accolades ( {} ). En binnen de accolades wordt alle code weergegeven die we willen uitvoeren wanneer we de functie aanroepen.

De code wordt uitgevoerd door de naam van de functie in te typen gevolgd door de haakjes.

Probeer je code op te slaan en vernieuw je browservenster

Ga naar de "developer tools JavaScript console", en voer de volgende regel in:


checkGuess();

Je zou een waarschuwing moeten zien verschijnen die zegt: "Ik ben een tijdelijke aanduiding"; we hebben een functie in onze code aangemaakt die een waarschuwing creëert wanneer we deze noemen.

Opmerking: Je zult later in de cursus veel meer leren over functies.

Operators (bewerkers)

Met JavaScript-operators kunnen we testen uitvoeren, wiskunde doen, samen met andere strings en dergelijke dingen doen.

Laten we onze code opslaan en de pagina vernieuwen die wordt weergegeven in onze browser. Open de JavaScript-console voor ontwikkelaarstools als je deze nog niet hebt geopend, zodat je de onderstaande voorbeelden kunt typen - typ in elk van de "Voorbeeld" kolommen precies zoals getoond, druk op Return / Enter na elk, en zie welke resultaten ze teruggeven. Als je geen eenvoudige toegang hebt tot de browserontwikkelaarstools, dan kan je altijd onderstaande  eenvoudig ingebouwde console gebruiken:

Laten we eerst kijken naar rekenkundige operatoren, bijvoorbeeld:

Operator (bewerker) Naam Voorbeeld
+ Optelling 6 + 9
- Aftrekken 20 - 15
* Vermenigvuldigen 3 * 7
/ Delen 10 / 5

Je kunt ook de operator + gebruiken om tekstreeksen samen te voegen (concatenation in het programmeren). Probeer de volgende regels uit te voeren:


var naam = 'Bingo';
naam;
var hallo = ' zegt hallo!';
hallo;
var begroeting = naam + hallo;
begroeting;

Er zijn ook enkele shortcut-operators (kortere notatie) beschikbaar, augmented assignment-operatoren genaamd. Als je bijvoorbeeld eenvoudig een nieuwe tekstreeks aan een bestaande wilt toevoegen en het resultaat terug geeft, kan je dit doen:


naam += ' zegt hallo!';

This is equivalent to


naam = naam + ' zegt hallo!';

Wanneer we waar / niet waar testen uitvoeren (bijvoorbeeld binnen conditionals - zie below, gebruiken we vergelijkingsoperatoren, bijvoorbeeld:

Operator Naam Voorbeeld
=== Strikte gelijkheid (is het precies hetzelfde?) 5 === 2 + 4
!== Niet-gelijkheid (is het niet hetzelfde?) 'Chris' !== 'Ch' + 'ris'
< Minder dan 10 < 6
> Groter dan 10 > 20

Conditionals (condities)

Terug naar onze checkGuess() -functie, ik denk dat het veilig is om te zeggen dat we niet willen dat het alleen maar een plaatshouderbericht uitspuugt. We willen dat het controleert of de gok van een speler correct is of niet, en dat het op de juiste manier reageert.

Vervang nu de huidige functie checkGuess() door deze versie:


function checkGuess() {
  var userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Vorige gok: ';
  }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Fout!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Laatste gok was te laag!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Laatste gok was te hoog!';
    }
  }
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

Dit is veel code - pfff! Laten we door elke sectie gaan en uitleggen wat het doet.

  • De eerste regel (regel 2 hierboven) declareert een variabele met de naam userGuess en stelt de waarde in als huidige waarde die is ingevoerd in het tekstveld. We voeren deze waarde ook uit via de ingebouwde JavaScript methode Number(), om er zeker van te zijn dat de waarde absoluut een getal is.
  • Vervolgens komen we ons eerste voorwaardelijke codeblok tegen (regels 3-5 hierboven). Met een voorwaardelijk codeblok kan je code selectief uitvoeren, afhankelijk van of een bepaalde voorwaarde waar is of niet. Het lijkt een beetje op een functie, maar dat is het niet. De eenvoudigste vorm van voorwaardelijk blok begint met het sleutelwoord if (als), dan wat haakjes (), dan wat accolades {}. Binnen de haakjes nemen we een test op. Als de test true (waar) retourneert, voeren we de code binnen de accolades uit. Zo niet, dan doen we dat niet en gaan we verder met het volgende stukje code. In dit geval test de test of de variabele guessCount gelijk is aan 1 (dus of dit de eerste beurt van de speler is of niet):
    
    guessCount === 1
    Als dat zo is, maken we de tekstinhoud van de paragraaf gelijk aan "Vorige gok:". Zo niet, dan doen we dat niet.
  • Regel 6 voegt de huidige waarde van UserGuess aan het einde van de guesses-paragraaf toe plus een lege ruimte, zodat er elke keer een spatie tussen elke weergegeven gok verschijnt.
  • Het volgende blok (regels 8-24 hierboven) voeren een paar controles uit:
    • De eerste if(){} controleert of de gok van de gebruiker gelijk is aan het randomNumber zie is gezet bovenaan onze JavaScript-code. Als dat zo is, heeft de speler correct geraden en is het spel gewonnen, dus laten we de speler een gefeliciteerd bericht zien met een mooie groene kleur, daarna wissen we de inhoud van het Lage /Hoge gok vakje en voeren een functie uit met de naam setGameOver(), die we later zullen bespreken.
    • Nu hebben we een nieuwe test aan aan het einde van de laatste conditie vast gemaakt met behulp van een else if(){}-structuur. Dit stukje code controleerd of de gok van de laatste beurt ook van de gebruiker is. Als dat zo is, doet het programma hetzelfde als in het vorige blok, maar in plaats van het gefeliciteerd bericht, wordt er een game-over-bericht geplaatst.
    • Het laatste blok dat aan het einde van deze code is gekoppeld (het else {}) bevat code die alleen wordt uitgevoerd als geen van de twee andere tests true terug geven (dat wil zeggen dat de speler het niet goed heeft geraden, maar er zijn nog meer gokbeurten over). In dit geval vertellen we de speler dat deze ongelijk heeft. Vervolgens voeren we een andere voorwaardelijke test uit om te controleren of de gok hoger of lager was dan het antwoord. Afhankelijk van dit resultaat vertellen we in een bericht of de gok hoger of lager was.
  • De laatste drie regels in de functie (regel 26-28 hierboven) zorgen ervoor dat we klaar zijn voor de volgende gok. We voegen 1 toe aan de guessCount-variabele, zodat de speler zijn beurt opgebruikt (++ is een incrementatiebewerking - dus een toename met 1) en de waarde wordt leeggemaakt in het formuliertekstveld en opnieuw gefocusseerd (de cursor wordt er opnieuw ingezet), zodat de volgende gok kan worden ingevoerd .

Events

Op dit moment hebben we een goed geïmplementeerde checkGuess()-functie, maar die doet niets omdat we hem nog niet hebben aangeroepen. In het ideale geval willen we het aanroepen als de knop "Doe een gok" wordt ingedrukt, en om dit te doen, moeten we een event (gebeurtenis) gebruiken. Events zijn acties die plaatsvinden in de browser, zoals een knop waarop geklikt wordt, of een pagina die wordt geladen, of een video die wordt afgespeeld, in reactie daarop kunnen we blokken met code uitvoeren. De constructies die luisteren naar de gebeurtenis die plaatsvindt, worden event listeners genoemd en de blokken code die worden uitgevoerd als reactie op het vuren van een event worden event handlers genoemd

Voeg de volgende regel toe aan je checkGuess() functie:


guessSubmit.addEventListener('click', checkGuess);

Hier voegen we een event listener toe aan de guessSubmit-knop. Dit is een methode die twee invoerwaarden (argumenten genaamd) nodig heeft - het type event waarnaar we luisteren (in dit geval click (klik)) als een tekenreeks en de code die we willen uitvoeren wanneer de gebeurtenis plaatsvindt (in dit geval de checkGuess() functie - merk op dat we de haakjes niet hoeven te gebruiken bij het schrijven binnen addEventListener ()).

Probeer je code nu uit door op te slaan en te de browser te vernieuwen,  je uitwerking zou nu moeten werken, tot op zekere hoogte. Het enige probleem is nu, als je het juiste antwoord raadt of gokken mist, het spel stuk zal gaan, omdat we nog niet de functie setGameOver() hebben aangemaakt en die zou moeten draaien zodra het spel voorbij is. Laten we nu onze ontbrekende code toevoegen en de voorbeeldfunctionaliteit voltooien.

De spelfunctionaliteit afmaken

Laten we de functie setGameOver() aan de onderkant van onze code toevoegen en er vervolgens doorheen lopen. Voeg dit nu toe, onder de rest van je JavaScript:


function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start nieuw spel';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}
  • De eerste twee regels schakelen de formuliertekstinvoer en -knop uit door hun uitgeschakeleigenschap in te stellen op true. Dit is nodig, want als we dat niet deden, zou de gebruiker meer gokken kunnen doen nadat het spel voorbij is, wat de boel zou verpesten.
  • De volgende drie regels maken een nieuw <button> element, en zet de tekst op  "Start nieuw spel", en zet de knop onderaan ons al bestaande HTML.
  • De laatste regel zet een event listener op onze nieuwe knop zodat, als erop de geklikt wordt, de  functie genaamt resetGame() wordt uitgevoerd.

Nu moeten we de functie nog maken! Voeg de volgende code toe, nogmaals aan de onderkant van je JavaScript:


function resetGame() {
  guessCount = 1;

  var resetParas = document.querySelectorAll('.resultParas p');
  for (var i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}

Dit opnieuw een vrij lang blok code en stelt alles volledig opnieuw in zoals het was aan het begin van het spel, dus de speler kan nog een keer proberen.

Het:

  • Zet guessCount terug naar 1.
  • Leegt alle informatie paragraven.
  • Verwijderd de reset knop van de code.
  • Zet de formulier elementen aan, en leegt het tekstveld en zet de cursor erin, klaar zodat een nieuwe gok ingevoerd kan worden.
  • Verwijderd de achtergrondkleur van de lastResult paragraaf.
  • Maakt een nieuw willekeurig nummer, zodat je niet direct het nieuwe nummer kan raden!

Op dit punt zou je een volledig werkend (eenvoudig) spelletje moeten hebben - gefeliciteerd!

Het enige dat we nog moeten doen in dit artikel is praten over een paar andere belangrijke codefuncties die je al hebt gezien, hoewel je je dit misschien niet hebt gerealiseerd.

Loops

Een deel van de bovenstaande code die we beter moeten bekijken, is de for-lus. Loops zijn een heel belangrijk concept bij het programmeren,  waardoor je steeds een stuk code kunt blijven herhalen totdat aan een bepaalde voorwaarde is voldaan.

Om te beginnen, ga opnieuw terug naar je JavaScript-console voor ontwikkelaarstools, en voer het volgende in:


for (var i = 1 ; i < 21 ; i++) { console.log(i) }

Wat gebeurt er? De nummers 1 tot 20 zijn afgedrukt in je console. Dit komt door de loop. Een for loop heeft drie invoer waarden (argumenten):

  1. Een startwaarde: in dit geval beginnen we een telling op 1, maar dit kan elk nummer zijn dat je leuk vindt. Je kunt i vervangen door elke naam die je ook leuk vindt, maar i wordt gebruikt als een variabele, omdat deze kort en gemakkelijk te onthouden is.
  2. Een eindwaarde: Hier hebben we i <21 gespecificeerd - de lus zal doorgaan totdat i niet langer minder dan 21 is. Wanneer i 21 bereik, zal de lus niet langer lopen.
  3. Een incrementor (vermeerderaar): We hebben i++ opgegeven, wat "tel 1 op bij i" betekent. De lus wordt één keer uitgevoerd voor elke waarde van i, totdat i een waarde van 21 bereik (zoals hierboven besproken). In dit geval printen we eenvoudig de waarde van i naar de console op elke iteratie met behulp van console.log ().

Laten we nu kijken naar de lus in ons nummer gokspel - het volgende kan gevonden worden in de functie resetGame():


var resetParas = document.querySelectorAll('.resultParas p');
for (var i = 0 ; i < resetParas.length ; i++) {
  resetParas[i].textContent = '';
}

Deze code maakt een variabele die een lijst bevat van alle paragraven in <div class="resultParas"> door gebruik te maken van de querySelectorAll() methode, dan wordt het door elke keer herhaald, waarbij elke keer de tekstinhoud wordt verwijderd.

Een kleine discussie over objecten

Laten we nog een laatste verbetering toevoegen voordat we aan deze discussie beginnen. Voeg de volgende regel toe net onder de var resetButton; regel in de buurt van de bovenkant van je JavaScript en sla je bestand weer op:


guessField.focus();

Deze regel gebruikt de focus() methode om automatisch de text cursur (het knipperende streepje) in het <input> tekst veld te zetten zodra de pagina laad, met de bedoeling dat de gebruiker direct kan beginnen met het typen van de eerste gok, en niet eerst in het formulier veld hoeft te klikken. Het is een kleine toevoeging, maar het vergroot het gebruiksgemak — de gebruiker een goede visuele idee geven van wat ze moeten doen om het spel te spelen.

Laten we wat hier gebeurt iets meer op detail analyseren. In JavaScript is alles een object. Een object is een verzameling van functionaliteit die bij elkaar hoort in een groep. Je kunt je eigen objecten maken, maar dat is iets te geavanceerd voor dit moment, maar zullen er later in de cursus op terug komen.Voor nu zullen we alleen in gaan op de standaard ingebouwde objecten van je browser, die ervoor zorgen dat je een heel aantal nuttige dingen kunt doen.

In dit geval, maken we eerst een guessField variabele die een verwijzing bevat naar het tekstformulierveld in onze HTML  — de volgende regel vindt je bij onze variabelen aan de bovenkant van onze code: 


var guessField = document.querySelector('.guessField');

Om deze verwijzing te krijgen, maken we gebruik van het  querySelector() object. querySelector() neemt een stukje informatie — een CSS selector die selecteerd het element waarnaar je wilt verwijzen.

Omdat guessField nu een verwijzing bevat naar een <input> element op de pagina, heeft het toegang tot een heel aantal eigenschappen (in het programmeren noemen we dit properties en het zijn eigenlijk variabelen opgeslagen in de objecten, waarbij sommige de waarden niet aangepast kunnen worden, maar een statische inhoud bevatten) en methodes (eigenlijk functies opgeslagen in de objecten). Een van de beschikbare methoden bij input elementen is focus(), dus we kunnen nu deze gebruiken om de cursor te zetten in het tekst invoerveld:


guessField.focus();

Variabelen die geen verwijzing bevatten naar formulier elementen, die hebben geen focus() methode beschikbaar. Bijvoorbeeld de guesses variabele bevat een verwijzing naar een  <p> element, en guessCount bevat een nummer.

Spelen met browser objecten

Laten we een beetje gaan spelen met enkele browser objecten.

  1. Open eerst je JavaScript programma in een browser.
  2. Open vervolgens je browserontwikkelaarstools en zorg ervoor dat het JavaScript-console-tabblad geopend is. 
  3. Typ guessfield in en het console zal je laten zien dat de variabele een element <input> bevat. Je zult ook opmerken dat de console objectnamen die zich in de uitvoeringsomgeving bevinden automatisch toevoegt, inclusief je variabelen!
  4. Typ nu het volgende:
    
    guessField.value = 'Hallo';
    De eigenschap value vertegenwoordigt de huidige waarde die is ingevoerd in het tekstveld. Je zult zien dat er iets door het invoeren van deze opdracht is veranderd, weet je wat dat is?
  5. Probeer nu guesses in te typen en op Enter te drukken. De console zal je laten zien dat de variabele een element <p> bevat.
  6. Probeer nu de volgende regel in te voeren:
    
    guesses.value
    De browser geeft undefined terug, omdat deze waarde niet bestaat in paragrafen.
  7. Als je de tekst in een paragraaf (alinea) wilt wijzigen, heb je in de eigenschap textContent nodig. Probeer dit:
    
    guesses.textContent = 'Waar is mijn alinea?';
  8. Nu voor wat leuke dingen. Probeer de onderstaande regels één voor één in te voeren:
    
    guesses.style.backgroundColor = 'yellow';
    guesses.style.fontSize = '200%';
    guesses.style.padding = '10px';
    guesses.style.boxShadow = '3px 3px 6px black';
    Elk element op een pagina heeft een stijleigenschap, die zelf een object bevat waarvan de eigenschappen alle inline CSS-stijlen bevatten die op dat element zijn toegepast. Dit stelt ons in staat om dynamisch nieuwe CSS-stijlen in te stellen op elementen met behulp van JavaScript.

Klaar voor nu ...

Zo dus dit was het voor wat betreft het opbouwen van het voorbeeld - je hebt het einde bereikt, goed gedaan! Probeer je definitieve code uit, of speel met onze voltooide versie hier. Als je het voorbeeld niet werkend krijgt, vergelijk dan jouw code met die van onze broncode.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: peterruijter
 Laatst bijgewerkt door: peterruijter,