Parfois, pour commencer à apprendre quelque chose d'énorme et de complexe, vous devez apprendre quelque chose de petit et de simple. JavaScript est énorme et complexe, mais vous pouvez y entrer en apprenant des choses petites et simples. Si vous êtes un concepteur de sites Web, je pense qu'il y a une chose en particulier que vous pouvez apprendre qui est extrêmement stimulante.
Voici ce que je veux que vous appreniez: lorsque vous cliquez sur un élément, changez une classe sur un élément.
Pour résumer cela à l'essentiel absolu, imaginez que nous ayons un bouton et un div:
Click Me I'm an element Le div peut avoir des styles de base et il peut avoir des styles quand il a une classe particulière:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Les astucieux CSS-Tricksters pourraient reconnaître cela comme une opportunité pour le piratage de la case à cocher, mais ce n'est pas ce sur quoi nous travaillons aujourd'hui.
Nous voulons attacher un «écouteur d'événements» au bouton: un peu de code pour «écouter», dans notre cas, les événements de clic, et lorsque cela se produit, exécuter plus de code.
Vous savez comment en CSS nous devons «sélectionner» des éléments pour les styliser? Nous devons également le faire en JavaScript pour attacher notre écouteur d'événements. Nous allons créer une «référence» au bouton, en tant que variable, comme ceci:
var button = document.querySelector("button");Maintenant que nous avons une référence au bouton, nous allons attacher cet écouteur d'événement:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Et que voulons-nous faire en cas de clic? Ajoutez un nom de classe à notre div! Mais tout comme nous avions besoin d'une référence pour le bouton afin de faire des choses avec lui, nous aurons également besoin d'une référence pour le div. Faisons les deux en même temps, voici l'intégralité du code:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));C'est tout ce que je voulais vous montrer. Avec un peu de CSS ajouté à cette classe "yay", nous pouvons faire un fondu entrant et sortant du div:
Voir la classe Pen Click Something / Change de Chris Coyier (@chriscoyier) sur CodePen.
Pourquoi cette seule chose?
Les possibilités de conception sont infinies lorsque vous contrôlez le CSS et l'état de n'importe quel élément (quels noms de classe il a). Cacher et révéler des choses est le pouvoir évident, mais cela pourrait vraiment être n'importe quoi.
Mise à niveau
N'oubliez pas que vous n'êtes pas limité à changer un nom de classe. Vous pouvez changer plusieurs classes sur un seul élément ou changer les classes sur plusieurs éléments.
Examinez davantage la propriété classList. «Toggle» n'est pas la seule option.
Tout comme HTML et CSS, JavaScript a différents niveaux de prise en charge du navigateur pour les choses. Regardez dans la prise en charge du navigateur pour classList et ajoutez addEventListener. Êtes-vous d'accord avec ces niveaux de soutien pour votre projet? Sinon, vous pouvez examiner les polyfills, ou même jQuery.
Nous avons utilisé l'événement «clic», mais il y en a beaucoup d'autres. Autres événements de souris, défilement, clavier, etc. Plusieurs centaines.
La méthode que nous avons utilisée pour la sélection était document.querySelector. Cela a été utile car il renvoie un seul élément avec lequel nous pouvons travailler. De plus, les sélecteurs que vous lui donnez sont comme les sélecteurs CSS. document.querySelector("#overlay .modal > h2");serait une sélection légitime. Ce n'est cependant pas la seule méthode de sélection, il en existe d'autres comme getElementById, querySelectorAll, getElementsByClassName, etc.
Voici un exemple où nous sélectionnons un groupe d'éléments de navigation et attachons un gestionnaire de clics à chacun d'entre eux à la fois:
Voir les classes de changement de stylo sur Stuff par Chris Coyier (@chriscoyier) sur CodePen.
Si le JavaScript que nous avons écrit dans notre petit exemple ne parvient pas à se charger pour une raison quelconque, nous aurions toujours un bouton qui dit "Cliquez sur moi". Mais cliquer dessus ne ferait pas grand-chose, n'est-ce pas? Peut-être pourrions-nous insérer ce bouton avec JavaScript, de sorte que le bouton n'est même pas là à moins que nous ne sachions qu'il fonctionnera? Bonne idée, hein? ;)