Console en Elementen
De tekenteller uit de vorige les draait in de browser. De terminal ziet er niets van, dus als hij hapert heb je een andere plek nodig om te kijken. Die zit in de ontwikkelaarstools die je bij Kijken wat de browser doet opende: het tabblad Console voor je JavaScript, en het tabblad Elementen voor de pagina zoals de browser hem nu heeft.
De Console
Druk op F12 en kies Console. Zet in static/js/app.js een regel in de functie van de teller, zodat het bovenste deel van het bestand er zo uitziet. Staat er onderaan een reset-functie uit de vorige les, laat die staan:
const veld = document.querySelector("#bericht-veld");
const teller = document.querySelector("#teller");
veld.addEventListener("input", function () {
const over = 80 - veld.value.length;
console.log("nog", over, "tekens");
teller.textContent = over + " tekens over";
});
Herlaad en typ een paar letters. Bij elke toetsaanslag komt er een regel bij, met rechts het bestand en het regelnummer waar de console.log staat:
Fouten staan er in het rood, met dezelfde verwijzing. Dit is wat je ziet als defer ontbreekt in je script-tag: het script draait voordat het formulier bestaat, veld is dan null, en de teller doet niets meer.
Klik op app.js:4 en de browser opent het bestand op die regel: de regel met addEventListener, want daar ging het mis.
Je kunt in de Console ook zelf typen. Onderin staat een prompt. Typ dit en druk op Enter:
document.querySelector("#teller").textContent = "Hoi"
De tekst op de pagina verandert meteen.
Typ de regel over. Plak je hem, dan houdt Chrome dat de eerste keer tegen met een waarschuwing: "Plak geen code in de DevTools-console die je niet begrijpt …". Plakken in de Console is een bekende truc om mensen iets te laten uitvoeren wat ze niet snappen. Wil je toch plakken, typ dan plakken toestaan en druk op Enter; daarna mag het. Chrome in het Engels vraagt om allow pasting.
De Console is een plek waar je JavaScript regel voor regel kunt proberen, op de pagina die open staat.
Elementen
Klik met de rechtermuisknop op de teller en kies Inspecteren. De ontwikkelaarstools openen nu op Elementen, met <p id="teller"> geselecteerd. Wat je daar ziet is de HTML zoals de browser hem op dit moment heeft, dus mét de tekst die je JavaScript erin zette. Typ een paar letters en kijk mee: de tekst in Elementen verandert live.
Dubbelklik op een tekst of een attribuut en je kunt hem aanpassen. Verander 80 tekens over in iets anders: de pagina volgt direct. Herlaad daarna. Alles is terug zoals de server het stuurde. Elementen verandert alleen wat er in jouw browser staat, nooit iets op de server.
Testen
- Zet de
console.login je teller en zie de regels verschijnen bij het typen - Typ de
textContent-regel in de Console en zie de pagina veranderen - Open Elementen op de teller, pas de tekst aan, en herlaad
Blijft de Console leeg terwijl je typt? Kijk of je het bestand hebt opgeslagen en herlaad zonder cache (zie Als je wijziging niet doorkomt). Staat er een rode regel, klik dan op de bestandsnaam rechts: die brengt je naar de regel die de fout maakt. Meer oplossingen staan op Er gaat iets mis.
Opdrachten
Opdracht 1: Predict - Blijft het staan?
Je verandert in Elementen de kop van je gastenboekformulier in "Mijn gastenboek" en herlaadt de pagina.
Opdracht 2: Run
Zet de console.log in je teller en typ een woord. Controleer dat er per letter één regel bijkomt, en klik op de verwijzing rechts.
Opdracht 3: Investigate - Broncode of Elementen
Druk op Ctrl+U: je ziet de broncode van de pagina, precies zoals de server hem stuurde. Vergelijk de regel met id="teller" daar met dezelfde regel in Elementen nadat je iets hebt getypt.
Antwoord
In de broncode staat 80 tekens over, want zo staat het in gastenboek_form.html. In Elementen staat het aantal dat je JavaScript erin zette. De server heeft die tekst nooit gezien. Elementen toont de pagina van nu, de broncode de pagina van het moment van laden.
Opdracht 4: Modify - De limiet
Zoek in Elementen het <input> van het bericht op. Daar staat maxlength="80". Verander het in 800 en typ een lang bericht.
Antwoord
Het veld laat nu 800 tekens toe, en je teller telt door onder nul: "-21 tekens over". Je script rekent nog steeds met 80, want app.js heb je niet veranderd. Wat er gebeurt als je dat bericht verstuurt, en waarom dat een probleem is, is de vraag van de volgende les: Server of browser?.