Initiation au Javascript - Bouton mode nuit, 2/2

Si tout s'est bien passé pour vous et que vous avez réussi le petit exercice que je vous avais proposé en fin d'article, vous devriez avoir produit le code suivant :

function appliqueNuit() {
	document.body.style.color = "rgb(255, 255, 255)";
	document.body.style.backgroundColor = "rgb(30, 30, 30)";
}

function appliqueJour() {
	document.body.style.color = "rgb(0, 0, 0)";
	document.body.style.backgroundColor = "rgb(255, 255, 255)";
}

Et votre projet devrait ressembler à ça :

Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

C'est bien joli, mais ce n'est pas exactement le choix le plus ergonomique qui puisse exister. Le mieux ce serait quand même d'avoir un seul bouton qui fonctionnerait comme un interrupteur ! Mais c'est quoi au juste un interrupteur ? Ça vous parait évident ? Voyons cela.

Des limites de l'informatique

Imaginez un petit instant que je vous tende un interrupteur relié au plafonnier de mon grenier et que je vous demande gentiment de vous assurer qu'il est éteint. Passée votre perplexité bien légitime face à une requête aussi étrange, vous réalisez qu'avant d'appuyer sur le bouton, vous devez d'abord vérifier que la lumière du grenier n'est pas déjà éteinte ! Et vos certitudes sur la nature profonde de l'interrupteur s'écroulent comme un château de cartes ! L'ordinateur est un peu toujours comme ça : On lui demande toujours de faire des trucs qu'il est incapable de vérifier immédiatement. Alors il faut tout lui expliquer.

L'interrupteur donc.

Maintenant que vous avez réalisé que le travail d'un ordinateur c'est pas évident, on va essayer de traduire notre interrupteur en langage logique, et accrochez-vous bien, vous n'allez pas en croire vos yeux. Un interrupteur c'est un objet qui est soit ouvert, soit fermé, et qui change d'état quand on l'actionne. Il est donc grand temps de faire appel au if statement. Un if statement est une fonction informatique qui permet d'exécuter du code si une condition est remplie. En langage humain on dirait Si cette condition est vraie alors tu fais ça, sinon tu fais plutôt ça. En JavaScript on l'écrit :

if (condition) {
	// code à exécuter
} else {
	// autre code à exécuter sinon
}

La condition est un booléen, c'est à dire qu'elle est soit vraie (true) soit fausse (false). Notre interrupteur peut se résumer ainsi :

var estOuvert = false;

function interrupteur() {
	if (estOuvert) {
		estOuvert = false;
	} else {
		estOuvert = true;
	}
}

Ce qui se traduit par : Si l'interrupteur est ouvert, je le ferme quand je l'actionne. Sinon je l'ouvre. Mais ce code est présentement aussi inutile qu'un interrupteur débranché. Pour le brancher à notre page web on va juste lui dire quoi faire quand l'interrupteur est ouvert et quand il est fermé. Et ça c'est facile : quand il est ouvert j'éteins la lumière et quand il est fermé je l'allume (les électriciens sont méchants). Autrement dit : Quand j'actionne mon bouton Mode Nuit, s'il est déjà actif j'exécute appliqueJour(), sinon j'exécute appliqueNuit().

var modeNuitActif = false;

function modeNuit() {
	if (modeNuitActif) {
		appliqueJour();
		modeNuitActif = false;
	} else {
		appliqueNuit();
		modeNuitActif = true;
	}
}

Et le résultat :

Initiation au Javascript - Bouton mode nuit, 2/2

Par Matthieu

Publié le 1 avril 2018

Des limites de l'informatique

L'interrupteur donc.

Crédit image : electricien-paris-express.com