Médiaforma

All posts tagged javascript

Avec l’intérêt toujours croissant porté au HTML dynamique, les frameworks JavaScript n’ont cessé de proliférer depuis quelques années. Certains sont dédiés à un ensemble de tâches spécifiques. D’autres sont plus universels. C’est le cas de jQuery, qui couvre la quasi-totalité des besoins du programmeur Web. Aujourd’hui, plus d’un site sur deux utilise jQuery, aussi bien à titre personnel, dans les petites entreprises ou dans les grandes entreprises.

JavaScript est né en 1995. Son implantation dans les navigateurs s’est faite d’une façon anarchique et très dépendante de chaque navigateur. Une même instruction JavaScript peut être interprétée dans un navigateur et ignorée dans un autre. jQuery est une surcouche de JavaScript. Ce langage limite les différences et uniformise les comportements.

Présentation de jQuery

jQuery est une bibliothèque JavaScript libre qui simplifie la manipulation du code JavaScript côté client. Dans cette formation, vous allez découvrir les multiples aspects de jQuery. Vous saurez notamment :

  • Mettre en forme des contenus en manipulant les propriétés CSS des objets concernés.
  • Définir des effets visuels et des animations.
  • Mettre en place des menus sophistiqués.
  • Réagir aux événements du clavier et de la souris
  • Parcourir, filtrer et manipuler le DOM
  • Etablir des échanges avec un serveur Web via AJAX
  • Traiter les données entrées dans des formulaires
  • Utiliser des plugins

Pourquoi utiliser jQuery ?

Les intérêts de jQuery sont multiples. Voici les principaux :

  • Dynamiser les pages Web afin d’améliorer l’IHM (Interface Home Machine) et rendre la navigation aussi agréable et naturelle que possible.
  • Uniformiser le rendu dans les différents navigateurs disponibles sur le marché.
  • Diminuer les temps de développement en utilisant les fonctionnalités avancées de jQuery
  • Faciliter la maintenance du code (le nombre d’instructions est bien plus limité qu’en JavaScript)
  • Manipuler des ensembles de données, rendant souvent inutile l’utilisation de boucles
  • Chaîner des méthodes pour effectuer plusieurs manipulations en une seule instruction

Dans une rubrique précédente, vous avez appris à vérifier la validité d’une adresse e-mail en utilisant une expression régulière. Ici, nous allons utiliser une autre technique. Une adresse e-mail sera jugée correcte si elle contient un caractère “@” et un caractère “.“.

Le corps du document contient un formulaire nommé form1. Ce formulaire héberge une zone de texte nommée texte1 et un bouton qui exécute la fonction JavaScript verif() lorsqu’il est cliqué.

Examinons le code JavaScript.

La première instruction mémorise dans la variable t1 le contenu de la zone de texte.

La ligne 9 teste la présence des caractères “@” et “.” dans la chaîne. Pour cela, on utilise la fonction JavaScript indexOf(). Cette dernière renvoie la valeur -1 si la chaîne recherchée n’est pas trouvée. Elle renvoie la position de la chaîne si elle est trouvée. En testant si la valeur retournée par la première fonction est différente de -1, on s’assure que la chaine contenue dans la zone de texte contient le caractère “@“. D’une manière similaire, en testant si la valeur retournée par la deuxième fonction est différente de -1, on s’assure que la chaine contenue dans la zone de texte contient le caractère “.“. SI ces deux conditions sont réunies, une boîte de message indiquant que l’adresse e-mail semble correcte est affichée. Dans le cas contraire, une boîte de message indiquant que l’adresse e-mail est incorrecte est affichée.


Dans cette rubrique, vous allez découvrir ou redécouvrir quelques opérations sur les chaînes de caractères.

Le corps du document héberge un formulaire composé des éléments suivants :

  • Deux zones de texte de nom texte1 et texte2. La première zone de texte contient la chaîne “un petit chien” et la deuxième la chaîne “bleu sur un mur“.
  • Quatre boutons qui exécutent respectivement les fonctions JavaScript concat(), maj(), min() et troisprem() lorsqu’ils sont cliqués.

La fonction concat() commence par affecter le contenu des deux zones de texte aux variables t1 et t2. Document.forms[“form1”] donne accès au formulaire, elements[“texte1”] à la première zone de texte et value à la valeur affichée dans la première zone de texte.

Pour concaténer le contenu des deux zones de texte et ajouter un espace entre elles, il suffit d’utiliser l’opérateur “+” et d’affecter le résultat à la propriété value de la première zone de texte.

La fonction maj() mémorise le contenu de la première zone de texte dans la variable t1. Elle lui applique la fonction toUpperCase() et affecte le résultat obtenu à la propriété value de la première zone de texte.

La fonction min() est très similaire à la fonction maj() si ce n’est qu’elle utilise la fonction toLowerCase().

Enfin, la fonction troisprem() lit le contenu de la première zone de texte et le mémorise dans la variable t1. Pour isoler les trois premiers caractères de la chaîne obtenue, il suffit alors d’utiliser la fonction substring(). Le premier caractère correspond à l’index du premier caractère de l’extraction et le deuxième à la longueur de l’extraction.


Cette rubrique va vous montrer comment accéder et modifier l’élément sélectionné dans une liste déroulante.

Le corps du document contient un formulaire nommé form1. Ce formulaire contient :

  • une liste déroulante nommée liste qui héberge quatre éléments : Paris, Tokyo, New York et Madrid ;
  • un bouton qui exécute la fonction modifie_liste() lorsqu’il est cliqué par l’utilisateur.

Examinons le code JavaScript.

La première instruction de la fonction modifie_liste() définit la variable liste et y mémorise l’index de la valeur sélectionnée dans la liste. Pour cela, on utilise la propriété selectedIndex de la liste déroulante. La syntaxe utilisée est similaire à celle rencontrée dans les deux rubriques précédentes :

  • document.forms[“form1”] donne accès au formulaire ;
  • elements[“liste”] donne accès à l’élément de nom liste, c’est-à-dire à la liste déroulante ;
  • selectedIndex donne accès à la propriété selectedIndex de la liste déroulante, c’est-à-dire à l’index de l’élément sélectionné, entre 0 et le nombre d’éléments moins un. Dans cet exemple, entre 0 et 3.

Si l’index de l’élément est inférieur à 3, il est augmenté d’un, ce qui provoque la sélection de l’élément suivant. Par contre, si l’index est égal à 3, il est mis à 0, ce qui provoque la sélection du premier élément.

Voyons comment est interprété ce code dans un navigateur :

A titre d’information, vous pouvez également utiliser les propriétés JavaScript suivantes :

  • name : nom de la liste ;
  • length : nombre d’entrées dans la liste ,
  • value : valeur d’une entrée ;
  • text : libellé d’une entrée.

Cette rubrique va vous montrer comment cocher ou décocher une case en JavaScript.

Le corps du document contient un formulaire de nom form1, une case à cocher de nom rad1 et un bouton. Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript modifie_rad1() est exécutée.

Dans un premier temps, l’état (coché ou non coché) de la case est mémorisé dans la variable coche. Le formulaire est accédé avec document.forms[“form1”]. La case à cocher rad1 avec elements[“rad1”] et l’état de cette case à cocher avec checked. Lorsque cette instruction a été exécutée, la variable coche vaut true si la case est cochée, ou false si elle est décochée.

Les lignes suivantes inversent l’état de la case.

Si la case n’est pas cochée, la propriété checked est initialisée à true, ce qui provoque le cochage de la case. Au contraire, si la case est cochée, la propriété checked de la case est initialisée à false, ce qui provoque le décochage de la case.

Examinons le résultat le résultat de ce code dans un navigateur :


Cette rubrique va vous montrer comment modifier une zone de texte dans un formulaire en utilisant une instruction JavaScript.

Dans un premier temps, nous définissons un formulaire et nous donnons un nom à ce formulaire avec l’attribut name de la balise <form>.

Une zone de texte de nom zt1 est insérée dans le formulaire. Cette zone de texte est dimensionnée et un texte y est affiché pour inciter l’utilisateur à cliquer sur le bouton.

Le bouton est une simple balise <input> de type button. Le texte affiché dans le bouton est défini avec l’attribut value. Lorsque l’utilisateur clique sur le bouton, l’événement onClick est généré. Pour accéder au formulaire, on écrit document.forms et on fait suivre cette écriture par le nom du formulaire, entre guillemets et entre crochets. Pour accéder à la zone de texte, on utilise le terme elements suivi du nom de la zone de texte, entre guillemets et entre crochets. Enfin, pour accéder à la valeur affichée dans la zone de texte, il suffit d’utiliser le terme value.

La nouvelle valeur est affectée à cette expression avec un simple signe “=“.

Voici le résultat :


Le langage JavaScript permet de répéter l’exécution d’une fonction à intervalles réguliers. Pour cela, vous utiliserez le code suivant :

function bis(){
  //Une ou plusieurs instructions
}

setInterval(bis,période en ms);

 

Exercice

En utilisant la fonction setInterval(), définissez une horloge qui affiche l’heure au format HH:MM:SS dans un élément div.

Pour cela, vous devrez définir un objet Date et obtenir les heures, les minutes et les secondes en appliquant les fonctions getHours(), getMinutes() et getSeconds() à cet objet.

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Horloge élémentaire</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="heure"></div>
    <script>
    $(function() {
      function horloge(){
        var hms = new Date();
        var h, m, s;
        h = hms.getHours();
        if (h<10) h = "0" + h;
        m = hms.getMinutes();
        if (m<10) m = "0" + m;
        s = hms.getSeconds();
        if (s<10) s = "0" + s;
        $('#heure').html(h + ' : ' + m + ' : ' + s);
      }
      setInterval(horloge,1000);
    });
    </script>
  </body>
</html>

 

Voici le résultat :