Plusieurs versions de l'histoire

Retour sur l'exemple du dernier atelier

  • Une page WEB moderne utilise plusieurs normes et langages :
    • HTML — HyperText Markup Language 5 — un langage balisé (son ancêtre est le SGML ) (son frère est le XML ), la version courante est HTML 5. HTML structure la page et son contenu.
    • CSS — Cascading Style Sheets — décrit les modalités de présentation des différents éléments visuels de la page.
    • JavaScript — spécifie les traitements permettant de traiter dynamiquement les données d'une page et la communication avec des serveurs distants.
    • DOM — Document Object Model — permettant de représenter le contenu de la page WEB sous forme d'un arbre et d'en manipuler les différents éléments dynamiquement.
  • Une page WEB moderne sépare clairement ses différents éléments (HTML, CSS, JavaSCript) pour en faciliter la maintenance et permettre à des spécialistes de différents domaines (graphisme, programmeur, expert de contenu) de pouvoir collaborer ensemble sans se nuire.
  • Un structure typique pour organiser les pages web est :
    • Un répertoire contenant les pages HTML
    • Un sous répertoire contenant les fichiers CSS associés aux pages du répertoire parent (ex. de nom : css)
    • Un sous répertoire contenant les fichiers JavaScript associés aux pages du répertoire parent (ex. de nom : js)
    • Un sous répertoire contenant les images associés aux pages du répertoire parent (ex. de nom : images)
  • Les références aux ressources utilisées par une page HTML sont habituellement relatives à son répertoire permettant ainsi un déplacement complet de l'arborescence sans briser aucun lien.

Exemples de la phrase cachée


Fichier HTML contenant le code JavaScript vu en atelier ce matin (ce code est inspiré de celui de Pascal Chouinard présenté à l'atelier du 20 octobre 2012)

<!DOCTYPE html>
<html lang="fr-CA">
    <head>
        <meta charset="utf-8">
<!--
  Votre nom
  Code permanent
-->
        <title>Liste d'invités interactive</title>
        <style>
            /* styles CSS pour cette page */
            h1 {
                font-family: Arial, Helvetica;
                font-size: 110%;
            }
 
            input[type=button] {
                font-size: 14px;
                font-weight: bold;
                color: blue;
            }
 
            input[type=button].supprimer {
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <h1>Liste d'invités interactive</h1>
 
        <ul id="liste">
        </ul>
 
        <p id="nombreinvites"></p>
 
        <p><input type="button" id="boutonAjouter" value="Ajouter un invité"></p>
 
        <script>
            // ne rien faire avant que le document soit complètement chargé
            window.onload = function() {
                "use strict";
                var nombre = 0;
                ajusterNombreInvites( 0 )
                document.getElementById( "boutonAjouter" ).onclick = ajouterEntree;
 
                function ajouterEntree() {
                    var nom = prompt( "Entrez le nom de la personne :" );
                    if ( nom ) {
                        document.getElementById( "liste" ).appendChild( creerEntree( nom ) );
                        ajusterNombreInvites( 1 );
                    } else {
                        alert( "L'ajout a été annulé" );
                    }
                }
 
                function creerEntree( nom ) {
                    var entree = document.createElement( "li" );
                    entree.innerHTML = '<img class="supprimer" src="images/supprimer_16x16.gif" alt="Supprimer" title="Supprimer '
                        + nom + '" />&nbsp;&nbsp;&nbsp;' + nom;
 
                    //obtenir une reference à l'icône supprimer pour l'entree
                    var iconeSupprimer = entree.getElementsByClassName( "supprimer" )[ 0 ];
                    iconeSupprimer.onclick = genererFonctionSupprimer( nom );
 
                    return entree;
                }
 
                function genererFonctionSupprimer( nom ) {
                    return function( event ) {
                        if ( confirm( "Êtes-vous sûr de vouloir supprimer '" + nom + "' ?" ) ) {
                            //ici la variable 'this' fait référence à l'objet sur lequel l'action 'click' a été déclenchée
                            this.parentNode.parentNode.removeChild( this.parentNode );
                            ajusterNombreInvites( -1 );
                        }
                    };
                }
 
                function ajusterNombreInvites( increment ) {
                    nombre += increment;
                    var texte;
                    if ( nombre === 0 ) {
                        texte = "Il n'y a aucun invité";
                    } else if ( nombre === 1) {
                        texte = "Il y a un invité";
                    } else {
                        texte = "Il y a " + nombre + " invités";
                    }
                    document.getElementById( "nombreinvites" ).innerHTML = texte;
                }
            };
        </script>
    </body>
</html>

Icône

supprimer_16x16.gif