Le DOM, la phase intéressante du JavaScript !

dome simpsons film

Aujourd’hui, parlons DOM. Je ne parle pas de celui du film des Simpson ou encore de la série Under The Dome

Mais plutôt du DOM en JavaScript !

L’interaction parfaite entre votre HTML/CSS et le JS 🙂

Commençons par la partie ennuyeuse qui est … roulements de tambours …

homme surprise

Qu’est-ce que le DOM en JavaScript ?


“ Le Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts

d’examiner et de modifier le contenu du navigateur web. Par le DOM, la composition d’un document HTML est représentée sous forme d’un jeu d’objets

Cours – Jean-Baptiste Lavisse

A présent que vous cernez le sujet de cet article, laissez moi vous montrer un cas concret. 

Voici un exercice que j’ai dû réaliser dans le cadre de ma formation, je vous présente …
Le générateur de phrases de Chuck Norris !!

“ C’est de toute beauté hein ? ”

Je vous propose que nous soulevons le capot, afin de voir comment ce magnifique générateur fonctionne.

Fonctionnement du générateur !

code generator js

Avant qu’on nous n’allions plus loin, je préfère vous mettre au parfum. Je suis en phase d’apprentissage, il est donc possible que ce code ne soit pas de grande qualité pour un développeur expérimenté.

Maintenant que vous êtes au courant de mon niveau en JS, laissez moi vous expliquer comment fonctionne le code.

Étape #1:


Il est important, dans le cadre d’un générateur de phrases, d’entrer toutes les phrases qui vont être générées.

C’est bête mais il faut le savoir !

Il faut donc commencer par déclarer une variable dans laquelle nous allons lui assigner un tableau.

code array js

Etape #2:


On va partir du principe que vous avez vous même essayé mon magnifique générateur, si ce n’est pas le cas, je vous invite à le faire.

Tout le monde est au même niveau ? 

Bon, vous avez sûrement remarqué le changement de couleur qui s’effectue de manière aléatoire ?

Parfait !

Voici le code en question. Il permet de faire ce magnifique changement de couleur digne des plus grands effets spéciaux d’HollyWood !

code randomColor

Vous remarquerez que cette fonction nous retourne un code couleur en HEXADÉCIMALE.

Pour ne rien vous cacher, ce bout de code à été trouvé sur le net…

Au départ, nous devions obtenir une fonction qui nous retournait une couleur en RGB mais malheureusement, je n’ai pas réussi à faire cette partie seul. J’ai donc fini par poser la question à un ami de longue date qui est “DuckDuckGo” !!

Etape #3:


Nous avons donc notre couleur aléatoire, grâce à la fonction getRandomColor().

Parfait !

Maintenant, créons une nouvelle fonction qui va nous permettre de changer la couleur sur les éléments souhaités.

Appelons-la “changeColor()”, (pour être original..).

function changeColor

Dans cette fonction, on va déclarer une variable pour lui assigner notre fonction getRandomColor().

C’est grâce à cette variable que nous allons pouvoir appliquer la couleur aléatoire sur nos éléments.

variable qui récupère la fonction getRandomColor()

Ensuite, nous allons prendre nos trois variables du dessous pour cibler nos éléments HTML via leurs class, id ou attributs.

trois variables qui ciblent nos éléments

Comme vous le voyez, il possible de styliser nos éléments directement en JS.

Bien évidemment, on va récupérer notre variable myColor pour faire cette manipulation.

styliser nos éléments en JS

Stockons à présent notre élément “button” dans une variable.

Nous voulons qu’au clic sur ce bouton, la couleur du body, du texte ainsi que du bouton change !

Pour se faire, je vous propose d’utiliser :

changement de couleur au clic du bouton

Etape #4:


Dernière étape !

Jusqu’à présent, nous avons su comment modifier la couleur de nos divers éléments.

Mais pour que notre programme soit réellement un générateur de phrases, il faut bien évidemment, que celui-ci nous génère des phrases aléatoires, non ?

Alors on y va !

Créons notre dernière fonction qui va donner vie à notre fameux générateur.

Attention function original …. … tadadada …

changeText()

Dans cette fonction, initions une variable qui va récupérer notre élément “text”.

function changetext()

Dans ce bout de code, Math.floor(Math.random() * 10), va nous permettre de générer un nombre aléatoire compris entre 0 et 10 non inclus, ce qui va correspondre à notre tableau avec nos citations.

Pour finir, il suffit de récupérer dans une variable l’élément text, afin qu’au clic, grâce à notre function “changeText”, le texte stocké dans notre élément soit remplacé part les citations de notre tableau.

Et bien-sûr cette action s’effectue à partir de clics sur notre bouton !

Voilà, c’est fini !

Si vous le souhaitez, en cliquant ici, vous retrouverez le code source de ce projet avec les fichiers HTML/CSS/JS.

Merci d’avoir lu cet article.

N’oubliez pas que je suis également présent sur YouTube, alors n’hésitez pas à venir jeter un coup d’oeil.

Bon, il est temps pour moi de retourner étudier !

Des gros bisous et à bientôt pour de nouvelles aventures !

Bye

🙋‍♂️

2 réflexions au sujet de “Le DOM, la phase intéressante du JavaScript !”

Laisser un commentaire