Bienvenue dans cette vidéo où nous allons réaliser trois exercices corrigés de HTML, CSS et JavaScript. J'espère que tu es bien concentré. On est parti tout de suite avec le premier exercice corrigé.
Alors mon petit Novel, tu n'as pas réussi cette première question, mais pas de souci, on va reprendre ça ensemble tranquillement. En fait, comme on l'a vu dans le cours, dans la vidéo précédente, le onClick permet de lier le clic sur un élément à une fonction JavaScript. C'est-à-dire qu'on va relier un élément à...
HTML à une fonction JavaScript, c'est ce qu'on a vu ici dans le bas du cours. On définissait un bouton qui comportait le onClick, que je te demandais dans la question, et le onClick permettait de relier le fait de cliquer sur le bouton à une fonction JavaScript. Cette fonction JavaScript ici, je l'avais appelée clic sur bouton et cette fonction ici, clic sur bouton eh bien elle permettait de créer une pop-up, une alerte avec écrit tu as cliqué sur le bouton tout simplement. Donc en fait, le onClick, comme on peut le voir ici sur la page HTML qui est juste ici, lorsque je clique sur le bouton avec le onClick, ça déclenche la fonction JavaScript qui va déclencher l'ouverture d'une fenêtre avec écrit tu as cliqué sur le bouton tout simplement. Donc le onClick permet de lier un élément HTML à une fonction JavaScript, tout simplement.
Merci. Alors les trois langages qu'on a vu dans ce cours, c'était juste pour voir si tu avais suivi la vidéo de cours sérieusement. Le premier langage, on l'a ici entre les balises style, c'est le langage CSS, tout simplement, qui permet de définir le design d'une page web.
En bas de la page ici, entre les balises script... on a le langage JavaScript qui permet de définir des fonctions, et tout le reste, donc tout ce qu'on a ici dans le body, tout le reste tout simplement, c'est le HTML qui permet de structurer notre page Internet, d'en écrire finalement le squelette, les informations principales, les textes, comme tu peux le voir ici, d'interagir avec l'utilisateur, avec par exemple un input, un select, enfin voilà, on a ici donc le HTML, le JavaScript en bas, et en haut, le CSS qui est juste ici. Alors mon petit novel, cette question était plus complète que les précédentes. Voilà la correction, j'espère que tu avais à peu près réussi à faire ça. L'idée c'était de créer du texte en HTML qui serait mis en vert grâce à du CSS.
Donc là j'ai mis énormément de choses parce que j'ai gardé le squelette du code que... je t'ai mis sur novelclass.com pour t'aider à coder plus facilement. Mais il y a plein de choses ici qui ne vont pas être utiles. Par exemple, on n'a pas besoin de la balise script, car on ne va pas faire de JavaScript dans cet exercice. On a besoin simplement de la balise style pour mettre du CSS, et de la balise body.
pour mettre du html tout simplement donc en html comme tu peux le voir j'ai créé un texte donc ici j'ai mis un titre mais ça aurait pu être n'importe quoi par exemple un paragraphe tout simplement avec la balise p ici du coup j'ai du texte en html que je vais venir mettre en vert grâce au css et pour mettre en vert grâce au css je vais appeler mon élément qui est ici non plus un h1 mais un p un paragraphe et je vais dire que sa couleur et bien je veux qu'elle soit verte tout simplement donc c'est des choses qu'on avait vu dans le le cours, qu'on a vu dans les exercices précédents, également quand je te montrais mon code, pour mettre une couleur sur un élément en CSS, on va appeler cet élément qui est ici du coup le paragraphe P, et on va définir sa couleur comme étant green, c'est-à-dire comme étant verte. Et si j'exécute cette page, donc je vais l'enregistrer ici, et si je vais la voir en direct sur mon navigateur web, et bien j'ai bien mon texte qui est mis en vert grâce au CSS. Alors ici j'ai fait une modification, comme tu l'as vu j'avais un H1 à la base que j'ai converti en P, en P paragraphe. Donc si j'enregistre cette nouvelle version de mon fichier et que je l'affiche sur un navigateur en rafraîchissant la page, tu peux le voir, mon texte n'est plus un titre mais un paragraphe comme tu peux le voir ici. Ici, si je reconvertis ceci en titre c'est-à-dire en H1, je vais donc redéfinir ma balise H1 et ici appeler le H1 dans mon CSS et bien j'enregistre ici ce code, je réexécute la page et tu peux le voir c'est redevenu un titre.
Donc là vraiment ces corrections un petit peu imagées un petit peu en direct sur mon ordinateur, c'est pour qu'on prenne le temps de voir un petit peu ensemble comment ça marche. Je vais même aller plus loin que l'exercice, je vais te montrer un autre exemple. Si ici j'écris un titre H2 par exemple, donc un sous-titre, que je vais appeler sous-titre comme ceci, et que je veux le mettre en rouge, ce sous-titre, et bien je vais aller dans mon CSS, donc dans ma balise style, je vais appeler H2 et comme je te l'ai dit, je voudrais le mettre en rouge, je vais donc dire que mon H2 doit avoir une color qui est red, tout simplement rouge en anglais. J'enregistre ça, et si je reviens sur mon navigateur et que je rafraîchis ma page, j'ai effectivement mon titre qui est en vert et mon sous-titre qui est en rouge.
Je peux aussi inverser les couleurs, tout simplement. Cette fois, je veux que mon H2 soit en vert et que mon H1 soit en rouge. J'enregistre. Et si je retourne sur mon navigateur, tu vas le constater tout de suite, les couleurs sont inversées. Donc voilà vraiment le lien qui existe entre du HTML et du CSS.
Je crée un élément HTML dans dans mon body et dans mon style, je l'appelle en CSS et je lui donne une propriété, celle que je veux. En l'occurrence, dans cet exercice, c'était la couleur, tout simplement. Et bien mon petit novel, cet exercice était cette fois bien plus compliqué. On ne va pas du tout utiliser de style ici, car il n'est pas question de CSS.
Il est question de changer la couleur de notre texte grâce à des boutons qui sont reliés à des fonctions JavaScript. Donc la première chose, c'est de créer le HTML. Je crée donc un titre, ici comme ceci, et je crée des boutons.
Des boutons que je vais relier à des fonctions JavaScript grâce au onClick, comme on l'a vu dans le cours. Donc c'est ça. C'est-à-dire que lorsque je vais cliquer sur ce bouton, je vais appeler cette fonction qui va faire ce que je lui demande. Ici, le but, c'était de créer un premier bouton qui va mettre en rouge mon texte et un deuxième bouton qui va le mettre en bleu. Je vais donc relier mes deux boutons à la même fonction JavaScript, car il s'agit à chaque fois de changer la couleur de mon bouton.
Ma fonction JavaScript que j'ai appelée couleur, avec comme argument red, c'est-à-dire la couleur rouge, et comme argument blue, c'est-à-dire la couleur bleue. Maintenant, il me reste à coder la fonction JavaScript. Je le fais donc dans ma balise script, comme on l'a vu dans le cours et dans les exercices précédents.
Je vais donc définir une fonction, fonction, qui s'appelle donc couleur, car je l'ai appelée couleur ici dans mon onClick, avec comme argument couleur. Et en fait, cet argument ici, c'est l'argument que je mets dans ma fonction JavaScript, qu'on retrouve juste au-dessus, dans l'appel de ma fonction. C'est-à-dire que là, en fait, j'ai le squelette de ma fonction JavaScript, et je vais rentrer comme argument de cette fonction JavaScript, l'argument que je définis ici dans mon code HTML. C'est-à-dire qu'ici, je définis une fonction couleur qui prend en argument une couleur. Et cette couleur, c'est le rouge dans le cas de mon bouton rouge.
Et c'est le bleu dans le cas de mon bouton bleu, tout simplement. Cette fonction JavaScript, elle va venir chercher un élément dans mon document HTML. Et cet élément, je l'ai appelé titre, comme ceci.
Cette fonction est très importante en JavaScript. Essaye de vraiment bien la retenir. On a une fonction ici qui va, dans l'élément éléments, aller chercher dans mon document.
l'élément qui a pour identifiant titre. Ici j'ai donc dans mon document je veux get c'est à dire obtenir l'élément par identifiant c'est à dire l'élément qui a pour identifiant comme tu peux le voir ici titre et l'identifiant titre c'est mon titre tout simplement c'est le texte h1 que j'ai appelé ceci est mon titre. Donc j'espère que ces notions ont décortique les choses tout doucement ensemble pour que tu comprennes bien comment ça marche.
On a donc une fonction qui prend en argument une couleur qui va aller chercher un élément dans mon document HTML et qui va l'appeler élément Ça va donc devenir une variable qui s'appelle élément Et cette variable élément je vais changer sa couleur en appelant element.style c'est-à-dire le style de mon élément et plus précisément sa couleur doit être égale à la couleur. Et la couleur, c'est donc l'argument de ma fonction JavaScript, qui est donc soit rouge, soit bleu. Donc je te conseille de vraiment mettre en pause cette explication, car ça reprend les notions les plus complexes que tu pourras...
pourrais trouver dans ce chapitre sur les pages HTML en HTML, CSS et JavaScript. Ici, comme tu peux le voir, on a vraiment l'exemple le plus complexe, c'est-à-dire qu'on va définir des éléments en HTML, des boutons, qui vont venir modifier la couleur d'un titre, et ce titre, je vais l'introduire dans une fonction JavaScript avec le getElementById titre, car ici, mon identifiant, c'est titre, et je vais modifier sa couleur en modifiant le style, et plus précisément la couleur de mon élément HTML, qui est donc element ici. en changeant donc sa couleur.
Sa couleur, c'est l'argument de ma fonction JavaScript, et cet argument, c'est soit red, soit blue, en fonction de comment je l'appelle dans mon HTML. Donc si tu veux plus de vidéos corrigées sur ce type d'exercice, pour bien comprendre comment ça marche, je t'invite à me le dire tout de suite dans les commentaires, et je ferai directement plus de vidéos avec un petit peu des exemples comme ça. Donc maintenant, je te propose d'aller voir sur mon navigateur ce que donne ce code. Ici, j'ai donc ma page avec mon titre, et lorsque je clique sur mettre en rouge, le titre... devient rouge et sur mettre en bleu le titre devient bleu tout simplement donc ça marche très très bien ce qu'il fallait faire c'était donc définir les éléments en html avec le on clic relié à une fonction javascript et cette fonction javascript elle vient récupérer l'élément texte dans mon html et elle vient modifier sa couleur grâce aux arguments que je vais mettre ici dans mon code html tout simplement donc encore une fois fait un fait une pause fait un screen de cette de cet exemple de code imprime le mais c'est vraiment Vraiment un code très simple et qui te permet de bien comprendre comment fonctionne la liaison entre le HTML, le JavaScript et tout ce qu'il est possible de faire.
Donc on a ici ma page HTML avec mon titre qui devient soit rouge, soit bleu. Tout simplement. Et voilà mon petit Novel, j'espère que cette vidéo t'a permis de vraiment comprendre comment fonctionnent HTML, CSS et JavaScript.
Si tu as encore des questions, n'hésite pas à utiliser les forums de discussion de novelclass.com. Si tu as des remarques à me faire, n'hésite pas à utiliser Messenger, Facebook, le mail. tous les moyens de contact possible et imaginable de Novel Classe.
Tu as tous les liens en bas de page. Et moi, je te dis à tout de suite dans la prochaine vidéo où nous allons parler de PHP. A tout de suite !