Médiaforma

All posts tagged onclick

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l’attribut CSS background-color d’une balise <div> :

Examinons le code HTML, entre les lignes 29 et 38.

  • La ligne 30 définit la balise <div> d’identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l’utilisateur.
  • Les lignes 32 à 34 définissent les zones de texte d’identifiant rouge, vert et bleu.
  • La ligne 35 définit une deuxième balise <div> d’identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l’utilisateur.
  • Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

Examinons le code CSS, entre les lignes 4 et 11. Ce code est identique à celui des rubriques précédentes. Il définit la couleur d’arrière-plan (ici noir) et les dimensions de la balise <div> d’identifiant div1.

Examinons le code de la fonction JavaScript couleur(), entre les lignes 13 et 25.

  • Les lignes 15 à 17 récupèrent les valeurs numériques décimales qui se trouvent dans les zones de texte rouge, vert et bleu et les stockent dans les variables r, v et b.
  • La ligne 19 utilise ces trois valeurs pour calculer le code la couleur. Ce code est obtenu en multipliant la composante Rouge par 256*256, en y ajoutant la composante Vert multipliée par 256 et en y ajoutant la composante Bleu. Si cette technique ne vous est pas familière, sachez qu’elle permet d’obtenir une valeur unique composée à partir de trois valeurs codées entre 0 et 255.
  • La ligne 20 affecte le code de la couleur à la propriété backgroundColor de la balise <div>. Remarquez l’utilisation de la fonction parseInt() qui fournit une valeur entière à la propriété backgroundColor. Sans cette fonction, la valeur passée serait interprétée comme une chaîne de caractères et la propriété backgroundColor ne serait pas bien initialisée.
  • Il ne reste plus qu’à modifier le contenu de la balise <div> d’identifiant hexa. La ligne 22 définit la variable h et la relie à la balise <div> d’identifiant hexa.
  • La ligne 23 affiche la valeur hexadécimale de la couleur dans la balise <div> d’identifiant hexa. La conversion en hexadécimal est obtenue avec la fonction toString(16) appliquée à la variable codeCouleur.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment afficher ou cacher une balise HTML en agissant sur une de ses propriétés CSS via du code JavaScript.

Examinons le code HTML. Le corps du document occupe les lignes 32 à 38. Très simple, il se contente d’afficher une balise <div> d’identifiant div1 et un bouton de commande d’identifiant afficheCache. La procédure événementielle bascule() est associée au clic sur ce bouton.

Examinons le code CSS, défini entre les lignes 4 et 11. Ce code a déjà été utilisé à plusieurs reprises dans les rubriques précédentes. Il définit la couleur d’arrière-plan et les dimensions de la balise <div>.

Vous l’aurez compris, le plus gros du traitement se fait dans la fonction JavaScript bascule(), entre les lignes 12 et 29.

  • La ligne 15 définit la variable etat et y stocke la valeur de la propriété CSS display de la balise <div> div1.
  • La ligne 16 définit la variable bouton et l’initialise avec la balise d’identifiant afficheCache, c’est-à-dire avec le bouton.

Si la variable etat vaut none, cela signifie que la balise <div> n’est pas affichée. Il faut donc l’afficher. C’est ce que fait la ligne 20, en affectant la valeur block à la propriété CSS display de la balise <div>. Par la même occasion, le texte affiché sur le bouton de commande est modifié en “Cacher la balise div” ligne 21.

Si la variable etat a une autre valeur que none, cela signifie que la balise <div> est affichée. Il faut donc la dissimuler. Cette opération est réalisée dans la ligne 25, en affectant la valeur none à la propriété CSS display de la balise <div>. Le texte affiché sur le bouton de commande est également modifié en “Afficher la balise div” ligne 26.

Il ne reste plus qu’à exécuter ce code dans un navigateur. Comme vous pouvez le constater, le bouton de commande est en mesure de cacher puis de réafficher la balise <div>.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D’autant plus qu’en JavaScript, c’est un vrai jeu d’enfant …

Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande.

Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :

  • La ligne 18 affiche un texte et une zone de saisie d’identifiant entree1.
  • La ligne 19 définit un bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 1” et met en place la fonction événementielle focus1() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.
  • La ligne 20 est semblable à la ligne 18. Si ce n’est que la zone de saisie mise en place a pour identifiant saisie2.
  • Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 2” et met en place la fonction événementielle focus2() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.

Passons au code JavaScript :

  • La fonction focus1() ne contient qu’une instruction, ligne 7. Après avoir récupéré l’élément d’identifiant entree1, c’est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l’apparition d’un point d’insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.
  • La fonction focus2() est en tout point identique à la fonction focus1(), si ce n’est qu’elle donne le focus à la deuxième zone de texte.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Le langage JavaScript met de la vie dans vos pages HTML. Il est en effet capable de réagir aux actions de l’utilisateur (clic, survol, frappe clavier, etc.) en exécutant du code côté client, c’est-à-dire sur l’ordinateur où s’affiche la page Web.

Dans cette rubrique, vous allez faire une première approche très light du langage HTML. Je vais vous montrer comment afficher une boîte de message lorsque l’utilisateur clique sur un bouton.

Entre les balises <head> et </head>, la balise <script> indique que les lignes qui vont suivre sont du code actif. L’attribut language précise qu’il s’agit de code JavaScript. La balise </script> délimite la fin du code JavaScript.

La ligne 5 définit la fonction popup(). Les instructions qui composent cette fonction se trouvent entre des accolades. Ici, la fonction popup() ne contient qu’une seule instruction, ligne 7.

Cette instruction affiche un texte dans une boîte de message en utilisant la fonction prédéfinie alert(). Le texte affiché se trouve à l’intérieur des parenthèses, encadré par des apostrophes.

Pour invoquer la fonction popup(), nous allons utiliser un événement lié à une balise HTML.

Le corps du document définit un formulaire (lignes 12 à 14). Ce formulaire contient un seul élément défini ligne 13. Ici, il s’agit d’un simple bouton. Le texte affiché dans le bouton est défini dans l’attribut value. Quant à l’attribut onClick, il fait référence à la fonction JavaScript popup(). Vous l’aurez compris, la fonction popup() sera exécutée lorsque l’utilisateur cliquera sur le bouton.

Exécutez ce code dans un navigateur. Le code JavaScript est détecté par Internet Explorer et un message d’avertissement apparaît dans la partie inférieure de la fenêtre. Confirmez que vous voulez exécuter ce code en cliquant sur Autoriser le contenu bloqué.

Remarque

Ce message d’alerte s’affiche parce que le code JavaScript est exécuté localement. Si vous placez le fichier HTML sur un serveur Web, aucun message d’alerte ne sera affiché.

Cliquez sur le bouton Cliquez ici. Une fenêtre de message contenant le message spécifié dans la fonction popup() est affiché :


Etape 4 – Ajout de l’interactivité

Dans cette étape, nous allons permettre à l’utilisateur de retourner les cartes en cliquant dessus.

Pour cela, nous allons ajouter la prise en compte de l’événement onclick dans la fonction affiche_image() :

img.onclick = function() {

document.getElementById(id).src = name;

setTimeout(function() {document.getElementById(id).src = ‘dos.jpg’; } , 1000);

}

Lorsqu’une image est cliquée, la fonction affectée à img.onclick est exécutée.

La première instruction affecte le contenu de l’attribut name à l’attribut src de l’image. Rappelez-vous, l’attribut name contient une chaîne du type 1.jpg, 2.jpg, etc. qui donne le nom de la figure représentée sur la carte. En affectant cette valeur à l’attribut source de la carte, la carte apparaît sur l’écran.

La deuxième instruction retourne la carte au bout d’une seconde. Pour cela, un timer est mis en place avec la fonction setTimeout(). Cette fonction admet deux paramètres :

  • Les instructions à exécuter ;
  • Le délai en millisecondes au bout duquel ces instructions sont exécutées.

Comme vous le voyez, l’instruction exécutée au bout de 1000 millisecondes, c’est-à-dire au bout d’une seconde, cache la carte qui a été cliquée en affichant son dos.