Étape 7: Ajout de Javascript (Jquery)
Vous pouvez rendre votre site encore plus beau en rendant interactive. Nous allons faire cela en ajoutant Jquery. JQuery n’est pas une langue, mais c’est une bibliothèque écrite en Javascript. Vous pouvez visiter le site officiel de Jquery en cliquant sur le lien ci-dessous.
Vous n’avez pas à le télécharger parce que nous pouvons relier à l’aide de code.
Permet de démarrer en ajoutant un lien acript à jquery. Ajouter ceci sous la balise de lien nous avons utilisé la dernière étape.
Puis ajoutez des balises de script juste sous la chose que vous venez d’ajouter :
Nous allons ajouter notre script javascript à l’intérieur de ces balises. Il faut tout d’abord mettre à jour notre type d’entrée: « soumettre ». Il faut ajouter la classe: « inputMail ». Donc notre tag devrait ressembler à ceci :
Maintenant nous allons ajouter javascript à l’intérieur de la balise script. Nous commençons par ajouter ce code dans la balise script :
Autrement dit, qu'il s’exécutera la fonction lorsque le document est entièrement chargé. Le $(document) signifie il cherche ce qu’on appelle le document, puis utilise la fonction prête à vérifier si le document est prêt. À l’intérieur de ces supports, nous mettons tout notre prochain code de Jquery. Alors maintenant, nous ajoutons le code suivant à l’intérieur des parenthèses :
Copiez le code suivant recherche une classe nommée inputMail (le point signifie que c’est une classe où nous recherchons). Quand Jquery trouvé cet objet, il vérifiera si c’est qui est cliqué. Lorsque c’est qui est cliqué il exécute la fonction. Si à l’intérieur de cette fonction, nous pouvons laisser le bouton faire un petit truc. Donc pour l’astuce, nous allons ajouter ce code à l’intérieur de la fonction :
Maintenant il ressemble aussi à la classe inputMail et il fonctionne une animation personnalisée. Laisse ainsi vérifiez-le dehors ! Voilà comment toute votre balise script devrait ressembler à :
C’est elle ! Sympa ! Prochaine étape, que nous allons voir comment obtenir le fichier html.