Médiaforma

All posts tagged getelementbyid

La balise <canvas> est une des grandes nouveautés du langage HTML 5. Par son intermédiaire, et grâce à quelques instructions JavaScript, vous pourrez dessiner des formes simples ou complexes en 2D ou en 3D.

Pour définir une balise <canvas>, il n’y a rien de plus simple. Ici par exemple, l’identifiant monCanvas est affecté à la balise <canvas> et ses dimensions sont fixées à 300 pixels sur 300. Remarquez le texte entre les balises <canvas> et </canvas>. Il s’affichera si le navigateur utilisé n’est pas compatible avec la balise <canvas>. La propriété CSS background-color fixe la couleur d’arrière-plan.

Voici à quoi ressemble ce code lorsqu’il est interprété dans Internet Explorer 9 :

Pour pouvoir travailler avec la balise <canvas>, il va falloir utiliser quelques lignes de JavaScript. Le but de ces instructions : récupérer le “contexte” du canevas afin de pouvoir lui adresser des instructions. Voici le code utilisé :

Le contexte du canevas est récupéré par la fonction JavaScript initialisation(). Dans un premier temps, on définit la variable el et on lui affecte l’élément canvas mis en place dans le code HTML5. Cette affectation se fait via la fonction getElementById() à laquelle on transmet l’identifiant de l’élément : monCanvas.

La deuxième instruction récupère le contexte 2D du canvas et le stocke dans la variable ctxt. C’est par l’intermédiaire de cette variable que nous allons pouvoir dessiner dans le canevas. La prochaine vidéo vous montrera comment procéder.


Dans cette rubrique, je vous propose d’ajouter un peu d’interactivité au code de la rubrique précédente en permettant à l’utilisateur de choisir l’épaisseur des bordures gauche et droite et donc, la pente du trapèze. Pour cela, nous allons utiliser une balise <input> de type range. Pour le moment, seuls les navigateurs Safari 5 et supérieur, Chrome 8 et supérieur et Opera 11 et supérieur représentent cette balise en utilisant un curseur. Dans un autre navigateur, cette balise se comportera comme uns simple zone de texte. Voici le rendu dans Google Chrome :

Voici le code utilisé :

Le code HTML contient une balise <div> pour représenter le trapèze et une balise <input type=”range”> pour représenter le curseur. Les attributs min, max, value et step permettent de définir (respectivement) la valeur minimale, la valeur maximale, la valeur par défaut et le pas de progression du curseur.

Le code CSS est identique à celui de la rubrique précédente. Nous n’y reviendrons pas.

Le code JavaScript est exécuté lorsque le curseur est modifié. La valeur transmise est this.value, c’est-à-dire la valeur courante du curseur, entre 0 et 200. Cette valeur sera manipulée sous le nom largeur dans la fonction JavaScript. Pour accéder aux bordures gauche et droite de la balise <div>, nous utilisons les propriétés JavaScript borderLeft et borderRight appliquées à l’élément trapeze. La valeur affectée à ces deux propriétés est identique. Elle est égale à la largeur transmise par le curseur complétée par l’aspect solide et transparent de la bordure.

C’est aussi simple que cela !


Définissez un formulaire contenant deux zones de texte pour saisir un prénom et un nom et un bouton de commande input de type button. Mettez en place le code nécessaire pour afficher Bonjour nom prénom au clic sur le bouton.

Vous pouvez mettre la vidéo sur Pause et saisir le code dans votre éditeur de code. Poursuivez la vidéo lorsque tout le code aura été entré.

Solution

Le formulaire de saisie est définie dans le corps du document, entre les lignes 15 et 21.

Pour améliorer l’aspect visuel du formulaire, nous utilisons un tableau, comme dans l’exercice précédent.

Le prénom est saisi dans un champ input de type text et d’identifiant prenom. Quant au nom, il est saisi dans un champ input de type text et d’identifiant nom.

Le bouton a pour libellé “Action”. Lorsqu’il est cliqué, la fonction JavaScript disBonjour() s’exécute.

Remarquez la balise span d’identifiant résultat. Elle sera utilisée par le code JavaScript pour dire bonjour à l’utilisateur.

 

Nous allons maintenant nous intéresser au code JavaScript

Le code correspondant sera saisi entre les balises head et /head, encadré par les balises script et /script.

Le prénom et le nom sont récupérés parf la fonction getElementById().value et stockés dans les variables prenom et nom. Il ne reste plus qu’à afficher la valeur de ces deux variables dans le span d’identifiant resultat

Voyons si ce code fonctionne. Le menu Exécution permet d’exécuter le code dans un navigateur Web. Ici par exemple dans Firefox. Nous saisissons un prénom et nom, puis nous appuyons sur le bouton action. Le message de bienvenue est immédiatement affiché dans le span.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function disBonjour() {
        var prenom = document.getElementById('prenom').value;
        var nom = document.getElementById('nom').value;
        document.getElementById('resultat').innerHTML = 'Bonjour ' + prenom + ' ' + nom;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire">
      <table>
        <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
        <tr><td><input type="button" value="Action" onclick="disBonjour(); return false;"></td></tr>
      </table>
    </form>
    <br><br><span id="resultat"></span>
  </body>
</html>

Il est possible de capturer plusieurs types d’événements (clics souris, chargement d’une page ou d’une image, passage du pointeur au-dessus d’un élément, etc.) et de les traiter avec du code JavaScript.

  • Pour capturer un événement, insérez l’attribut correspondant (onfocus, onblur, onclick, onresize, onload, onkeypress, etc.) dans l’élément cible et précisez le nom de la procédure JavaScript à exécuter. Lorsque l’événement se produit, le code JavaScript correspondant est exécuté.
  • Pour obtenir le contenu d’un élément en dehors d’un formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété innerHTML.
  • Pour obtenir la valeur d’un élément de formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété value.

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

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


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

Dans la vidéo précédente, les zones de saisie n’étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux <div> et le bouton dans le tableau pour obtenir quelque chose comme ceci :

Examinons le code HTML.

Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d’affecter la valeur 2 à l’attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l’utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie.

<table>

<tr><td colspan=2><div id=”div1″></div></td></tr>

<tr><td>Rouge</td><td style=”text-align:left;”><input id=”rouge”> (0 à 255)</td></tr>

<tr><td>Vert</td><td style=”text-align:left;”><input id=”vert”> (0 à 255)</td></tr>

<tr><td>Bleu</td><td style=”text-align:left;”><input id=”bleu”> (0 à 255)</td></tr>

<tr><td colspan=2><div id=”hexa”>Définissez les composantes RVB et cliquez sur le bouton</div></td></tr>

<tr><td colspan=2><input type=”button” value=”Afficher la couleur correspondante”></td></tr>

</table>

Examinons le code CSS.

  • La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.
  • Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels.

Le code JavaScript est identique à celui de la rubrique précédente. N’hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.


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.