Médiaforma

All posts tagged javascript

Dans cette rubrique, vous allez apprendre à créer un nuancier en agissant sur les composantes Rouge, Verte et Bleue d’une couleur. Pour cela, nous utiliserons trois curseurs <input>. Attention, 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.

Voici le code utilisé :

Commençons par examiner le code HTML.

Une balise <div> d’identifiant carre est utilisée pour représenter la couleur qui correspond aux trois composantes RVB.

Les instructions suivantes mettent en place trois balises <input> suivies de trois balises <span>. Les premières serviront à choisir la valeur à affecter à chaque composante et les dernières à afficher la valeur courante de chaque composante, entre 0 et 255.

Examinons le code CSS.

Le style #carre définit lers caractéristiques de la balise <div> d’identifiant carre. Ses dimensions sont fixées à 200 pixels sur 200 et sa couleur d’arrière-plan est rouge à l’ouverture de la page.

Examinons le code JavaScript.

La fonction modifie est exécutée chaque fois qu’un curseur est modifié par l’utilisateur.

Les trois premières instructions lisent la valeur des curseurs sliderR, sliderV et sliderB et les stockent dans les variables r, v et b.

L’instruction suivante affecte ces trois composantes à la propriété backgroundColor de la balise <div> en utilisant la fonction rgb().

Enfin, les trois dernières instructions affichent la valeur courante des trois curseurs dans les balises <span> correspondantes.


Pour alléger une page Web, il peut être utile de dissimuler certaines parties non essentielles tout en laissant le loisir aux internautes de révéler ces parties s’ils le souhaitent en cliquant sur un contrôle quelconque : un bouton ou un lien hypertexte par exemple. En mêlant quelques lignes de HTML, de CSS et de JavaScript, il est très simple de réaliser cet effet.

Le code HTML contient trois paragraphes délimités par les balises <p> et </p>. Le deuxième paragraphe est de classe cache et il est précédé d’un bouton d’identifiant bouton qui permettra de l’afficher ou de le dissimuler.

Le code CSS définit les caractéristiques de la balise d’identifiant cache. Par défaut, cette balise n’est pas affichée. Lorsqu’elle sera affichée, elle aura une bordure continue épaisse de 1 pixel et de couleur silver et une couleur d’arrière-plan jaune.

Lorsque le bouton est cliqué, la fonction JavaScript affiche() est exécutée. Examinons les instructions utilisées dans cette fonction. La première ligne s’intéresse au texte affiché dans le bouton. S’il est égal à “Montrer“, cela signifie que le paragraphe n’est pas affiché. Le texte du bouton se transforme en “Cacher” et la propriété display de la balise <p> est initialisée à block, ce qui a pour effet d’afficher le paragraphe.

Si le texte affiché dans le bouton n’est pas “Montrer“, cela signifie que le paragraphe est affiché. Dans ce cas, le texte du bouton se transforme en “Montrer” et la propriété display de la balise <p> est initialisée à none, ce qui a pour effet de dissimuler le paragraphe.

Voyons comment se comporte ce code dans un navigateur :


Si vous écrivez des pages Web de plus d’une centaine de lignes, il peut être intéressant d’insérer des commentaires dans le code afin de préciser la fonction de tel ou tel bloc d’instructions, la spécificité d’une instruction ou la légitimité de tel ou tel attribut.

Pour cela, vous utiliserez une balise un peu particulière, en la faisant commencer par <!—et finir par —>. Si nécessaire, cette balise peut occuper plusieurs lignes. Par exemple :

<!-- Une ou plusieurs
lignes de commentaires peuvent être insérées
n’importe où dans le code -->

Le code CSS peut également être commenté. Délimitez le commentaire par les caractères /* (au début) et */ (à la fin). Tout comme en HTML, le commentaire peut s’étirer sur plusieurs lignes. Par exemple :

/*Ce commentaire
occupe deux lignes */

Enfin, vous pouvez insérer des commentaires dans du code JavaScript. Si un commentaire tient sur une ligne, il suffit de le faire précéder par deux slash :

// Ceci est un commentaire sur une ligne

Si le commentaire occupe plusieurs lignes, délimitez-le par les caractères /* (au début) et */ (à la fin). Par exemple :

/*Ce commentaire JavaScript
occupe deux lignes */

Depuis l’apparition du Web, les pages affichées dans les navigateurs sont écrites en HTML. Petit à petit, ce langage a montré ses faiblesses et plusieurs autres langages sont venus lui prêter main forte :

  • CSS pour la mise en page et la mise en forme des éléments affichés sur l’écran.
  • JavaScript pour l’exécution de scripts côté client.
  • PHP pour l’exécution de scripts côté serveur.
  • MySQL pour l’interfaçage de bases de données côté serveur.

Bien souvent, ces langages ont été améliorés par des bibliothèques pour faciliter et rendre plus rapide l’écriture du code. C’est ainsi que sont apparus :

  • les bibliothèques JavaScript : jQuery, Dojo Toolkit, Mootools, Script.aculou.us, etc.
  • les frameworks pour PHP : Zend Framework, CakePHP, Symphony, Jelix, etc.

Dans cette formation, vous trouverez :

  • Des rappels sur les langages HTML et JavaScript
  • Une base de travail sur les langages PHP et MySQL
  • Une approche de la programmation objet en PHP
  • Des informations sur la programmation structurée selon une architecture MVC.

La programmation HTML, CSS et JavaScript se fait côté client.

La programmation PHP et MySQL se fait côté serveur.

Dans cette formation, nous allons nous intéresser à la programmation en PHP et en MySQL, côté serveur.

Les sites écrits en PHP et MySQL peuvent être statiques ou dynamiques.

Sur un site statique, le client demande une page au serveur. Cette page est lue dans les mémoires du serveur et retournée au client.

Sur un site dynamique, le client demande une page au serveur. Cette page est fabriquée par le serveur en consultant une base de données MySQL et retournée au client sous la forme d’une page HTML.

La page sollicitée par le client est une page PHP.

Le code PHP fabrique une page HTML/CSS, éventuellement en consultant une base de données et la retourne au client en réponse à sa requête.


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.