Console en dialogen

Console API

Het console (opens new window) object geeft toegang tot de debugging console van de browser (Firefox: Web Console, Chrome: Console tab in DevTools). Het console object kan overal binnen JavaScript aangesproken worden, omdat dit een globaal object is.

console.log('Greetings Earthlings! We \u{1F47e} come in peace.');

De bovenstaande code resulteert in de volgende output: Greetings Earthlings! We 👾 come in peace.

Het console object kan gebruikt worden in iedere JavaScript applicatie gebruikt worden, bijv.: Node.js, website …

Methoden

Een methode is een actie die we kunnen uitvoeren op één of meerdere eigenschappen van een object aan te passen. Met de methoden uit het console object kunnen we de output naar de console uit een browser manipuleren.

De meest gebruikte methode is de log() (opens new window) methode. Deze methode print een boodschap naar de browser console. De boodschap kan tekst of een object zijn. Om de output meer betekenis te geven kunnen we gebruik maken van de methoden info(), warning() en error(). Afhankelijk van het type webbrowser wordt de tekst in de console voorafgegaan door een icoon.

const person1 = {
	firstName: 'Philippes',
}
const person2 = {
	firstName: 'Evelien',
}
console.log('Person ', person1, ' will teach webpgm-1 and ', 'person ', person2, ' shall teach webdes.');

Meerdere objecten kunnen tegelijkertijd in de console getoond worden al dan niet in combinatie met tekst.

const msgInfo = 'This is just information!';
const msgWarning = 'Try not to use the var keyword!';
const msgError = 'Can\'t fetch data from the server!';
console.info(msgInfo);
console.warn(msgWarning);
console.error(msgError);

info, warn en error geven een visuele indicatie van het bericht.

console.error('[%s] Can\'t fetch the data from the server %c%s', new Date().toTimeString(), 'color: yellow; font-style: italic; background-color: blue;padding: 2px','http://data.gent.be');

Door middel van string substitutie kunnen we strings (%s) en objecten (%o of %O) injecteren in de boodschappen. Met %c kunnen we zelfs opmaak voorzien voor het bericht in de Console.

Dialogen

Alle dialoogvensters in JavaScript hebben het window object nodig om te kunnen functioneren of aangeroepen te worden. Dit betekent dat een HTML document steeds aanwezig moet zijn aangevuld met een <script> element met daarbinnen de JavaScript-code of via een gekoppeld JavaScript-bestand. Hierdoor kan het window object en de gerelateerde eigenschappen en methoden aangesproken worden.

Dialogen (Eng. dialog boxes) zijn modal windows. Dit betekent dat de gebruiker de toegang wordt ontzegd tot de onderliggende applicatie totdat het dialoogvenster wordt gesloten.

alert

Met de alert() (opens new window) methode uit het window object kunnen we een alert dialog implementeren met tekstuele inhoud en een OK knop. Het alert dialoogvenster wordt voornamelijk gebruikt wanneer de gebruiker een erkenning moet geven aan een bepaald bericht.

window.alert('Greetings earthlings!');
alert('Greetings Earthlings!');

Het bericht (Eng. message) is optioneel. Indien een object aanwezig is als parameter i.p.v. een string, zal (indien een toString() methode aanwezig is) de string representatie van het object weergegeven worden, of het object zelf.

const person = {
	firstName: 'Philippe',
	toString: function() {
		return this.firstName;
	}
}
alert(person);

prompt

Met de prompt() methode kunnen we een dialoogvenster weergeven met een input tekstveld en een optionele boodschap. De ingegeven tekst wordt teruggegeven (Eng. return) aan de JavaScript-code. Het resultaat is dus altijd een stringwaarde of een null waarde.

const height = prompt('What is your height?', 'ex.: 1.86');
console.log(height);

De tweede parameter van de prompt() methode geeft een standaard of default waarde aan het input tekstveld. Drukt de gebruiker op de knop “Annuleren” (Eng. cancel), dan zal een null waarde teruggegeven worden. Schrijven we niks in het veld resulteert dit in een lege string "" na het drukken op de “OK” knop.

Wensen we een numerieke waarde te bewaren in de variabele height, dan moeten we de string converteren naar een Number.

let height = prompt('What is your height?', 'ex.: 1.81');
height = Number(height);
console.log('Datatype of height is %s with the value %f', typeof height, height);

confirm

Met de confirm() methode kunnen we een dialoogvenster weergeven met twee knoppen “OK” en “Annuleren” en een optionele boodschap. Deze methode geeft true (“OK” knop) of false (“Annuleren” knop of sluiten van venster) terug.

if (confirm('Aanvaard je de cookie van onze website?')) {
	console.log('Cookie aanvaard!');
} else {
	console.log('Cookie verworpen!');
}