DEVELOPPEMENT WEB - REMARQUES

Conseils et astuces

Point d'entrée de l'application

En principe, une application web comporte toujours une page d'accueil. C'est celle qui sera chargée par défaut, si le nom du fichier n'est pas précisé. Cette page se nomme "index.html", ou "index.php" si le code est interprété par le serveur.

Cas du JavaScript désactivé

De nos jours, il est rare qu'un navigateur ait le JavaScript désactivé. Si tel est malgré tout le cas :

Il est possible d'éviter que le code en JavaScript ne s'affiche.
L'utilisateur peut être prévenu de plusieurs manières, à l'aide des balises <noscript> et </noscript>, dont le contenu n'est actif que dans le cas du JavaScript désactivé.

Cacher le code en JavaScript

Le code est placé en commentaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      <!--
      ...
      -->
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Afficher un message par dessus la page

Le message informant l'utilisateur est affiché en plein écran, par dessus tout le reste, en le plaçant juste avant la balise </body>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      ...
      noscript {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: #ddd;
      }
    </style>
    <script>
      ...
    </script>
  </head>
  <body>
    ...
    <noscript>
      Activez l'option JavaScript du navigateur.
    </noscript>
  </body>
</html>

Afficher le message et cacher la page

Une autre stratégie consiste à afficher le message et à cacher tout le reste.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      ...
    </script>
  </head>
  <body>
    <noscript>
      Activez l'option JavaScript du navigateur.
      <style>
        #page { display: none; }
      </style>
    </noscript>
    <div id="page">
      ...
    </div>
  </body>
</html>

Afficher le message dans une page à part

L'utilisateur est redirigé vers une autre page si le JavaScript est désactivé.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <noscript>
      <meta http-equiv="refresh" content="0; URL=JS_desactive.html">
    </noscript>
    <script>
      ...
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Des informations sur la page

En informatique, un fichier s'identifie avec un nom, une extension, des métadonnées, un emplacement dans l'arborescence des dossiers. Les métadonnées sont des renseignements sur le fichier, contenus dans celui-ci. Concernant le HTML, les balises <meta>, avec les attributs adéquats, permettent d'insérer les métadonnées. Une solution plus simple, peut-être, consiste à placer ces renseignements en commentaire, au début du document.

<!DOCTYPE html>
<!--
Tous les renseignements utiles : Auteur, licence...
-->
<html>
  ...
  ...
</html>

Rechargement de la page

Il arrive parfois que l'utilisateur choisisse de recharger la page, en cliquant sur l'icône prévu à cet effet ou en appuyant sur la touche F5 du clavier. Prenons un exemple. En ouvrant la page avec n'importe lequel des deux codes ci-dessous, le résultat est le même : La première case est cochée. Par contre, en cochant la deuxième case et en rechargeant la page :

Avec le premier code la deuxième case reste cochée.
Avec le deuxième code, la première case redevient cochée.

Premier code :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="radio" name="o" checked>Rouge<br>
    <input type="radio" name="o">Vert<br>
    <input type="radio" name="o">Bleu<br>
  </body>
</html>

Deuxième code :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="radio" name="o">Rouge<br>
    <input type="radio" name="o">Vert<br>
    <input type="radio" name="o">Bleu<br>
    <script>document.getElementsByTagName("input")[0].checked=true;</script>
  </body>
</html>

Un appui sur la touche F5 du clavier ou un clic sur l'icône "recharger la page" recharge la page, mais en tenant compte de données enregistrées temporairement dans le navigateur. La page est donc partiellement rechargée. Elle est complètement rechargée en associant les touches Ctrl et F5 du clavier. Le programmeur peut choisir ce qui se doit produire quand on recharge une page web, en particulier lorsque celle-ci comporte des éléments de formulaire.

Transmettre des données

L'objectif, ici, est de transmettre des données à une autre page en HTML et JavaScript, autrement dit une page ne comportant aucun code en PHP interprété par le serveur. Une solution consiste à sauvegarder les données sur le client, par exemple dans un cookie. La deuxième page ira lire les données dans le cookie. Une autre solution consiste à faire passer les données dans l'URL, en utilisant la méthode GET.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form method="GET" action="page2.html">
      <p>Nom d'utilisateur : <input type="text" name="identifiant"></p>
      <p>Mot de passe : <input type="text" name="clef"></p>
      <p><input type="submit" value="Envoi des données"></p>
    </form>
  </body>
</html>

Le fichier "page2.html" :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function receptionner() {
        var parametres = location.search.substring(1).split("&");
        var identifiant = parametres[0].split("=");
        var clef = parametres[1].split("=");
        document.getElementById("identifiant").innerHTML = identifiant[1];
        document.getElementById("clef").innerHTML = clef[1];
      }
    </script>
  </head>
  <body onload="receptionner();">
    <h3>Réception des données :</h3>
    <p>Nom d'utilisateur : <span id="identifiant" ></span></p>
    <p>Mot de passe : <span id="clef"></span></p>
  </body>
</html>

Numéroter automatiquement les titres

Quand on insère un nouveau titre numéroté au sein d'une page, il faut refaire la numérotation des titres suivants... à moins que celle-ci ne soit automatique. Elle peut être programmée en JavaScript ou en CSS. Les deux exemples ci-dessous donnent le même résultat. Ils utilisent les chiffres romains et arabes.

En JavaScript

Fichier numeroter.js :

function numeroter() {
  var i, id, num_niv1=num_niv2=0,
  romain=function (nb) {
    if (nb==1) return "I";
    else if (nb==2) return "II";
    else if (nb==3) return "III";
    else if (nb==4) return "IV";
    else if (nb==5) return "V";
    else if (nb==6) return "VI";
    else if (nb==7) return "VII";
    else if (nb==8) return "VIII";
    else return "IX";
  };
  for (i=0; i<document.body.childNodes.length; i++) {
    if (document.body.childNodes[i].nodeName=="H2") {
      num_niv1++;
      num_niv2=0;
      id=romain(num_niv1)+". ";
      document.body.childNodes[i].innerHTML=id+document.body.childNodes[i].innerHTML;
    }
    if (document.body.childNodes[i].nodeName=="H3") {
      num_niv2++;
      id=romain(num_niv1)+"."+num_niv2+". ";
      document.body.childNodes[i].innerHTML=id+document.body.childNodes[i].innerHTML;
    }
  }
}
onload=function() { numeroter(); };

Début de la page :

<!doctype html>
  <html>
    <head>
      <meta charset ='utf-8'>
      <script src="numeroter.js"></script>
    </head>
    <body>
      ...

En CSS

Fichier numeroter.css :

body { counter-reset : niveau1 ; }
h2 {
  counter-reset : niveau2 ;
  counter-increment: niveau1;
}
h3 { counter-increment: niveau2 ; }
h2::before { content: counter(niveau1, upper-roman) ". "; }
h3::before { content: counter(niveau1, upper-roman) "." counter(niveau2) ". "; }

Début de la page :

<!doctype html>
  <html>
    <head>
      <meta charset ='utf-8'>
      <link rel="stylesheet" href="numeroter.css">
    </head>
    <body>
      ...

Faire apparaître une petite fenêtre

Les boîtes de dialogue

Une boîte de dialogue est une petite fenêtre qui s'affiche au premier plan, suite à un événement. Elle permet :

D'avertir l'utilisateur.
De le confronter à un choix.
De lui demander de compléter un champ.

Les méthodes alert(), confirm() et prompt() appartiennent à l'objet window. On peut écrire window.alert() ou alert() indifféremment. Ces boîtes de dialogue sont faciles à programmer, mais elles ne sont pas personnalisables.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function changer() {
        if (confirm("Voulez-vous changer la couleur de fond de page ?")) {
          document.bgColor="pink";
        }
        else alert("Pas de changement...");
      }
      function saisir() {
        saisie = prompt("Saisissez votre texte :", "Texte par défaut")
        alert("Vous avez écrit : "+saisie);
      }
    </script>
  </head>
  <body>
    <input type="button" value="Colorer le fond" onclick="changer();">
    <input type="button" value="Saisir un texte" onclick="saisir();">
  </body>
</html>

Les fenêtres secondaires

Créer une nouvelle fenêtre

La méthode open() de l'objet window permet de créer une nouvelle fenêtre de navigation secondaire. La page qui crée la nouvelle fenêtre est la page mère, la fenêtre nouvellement crée est la page fille, pouvant contenir :

Une page HTML extérieure.
Une page gérée par la fenêtre parente.

Elle prend trois paramètres optionnels :

L'URL à charger dans la fenêtre nouvellement créée.
L'identifiant de la nouvelle fenêtre.
Une chaîne listant les propriétés de la nouvelle fenêtre.

Propriétés	Effets	Valeurs possibles
directories	Affichage de la barre de liens	yes \| no
menubar	Affichage de la barre de menu	yes \| no
status	Affichage de la barre de statut	yes \| no
location	Affichage de la zone d'adresse	yes \| no
scrollbars	Affichage des barres de scrolling	yes \| no \| auto
resizable	Autorise le redimensionnement du popup	yes \| no
height	Hauteur en pixels	nombre entier
width	Largeur en pixels	nombre entier
left	Position horizontale en pixels sur l'écran	nombre entier
top	Position verticale en pixels sur l'écran	nombre entier
fullscreen	Popup en plein écran (version 5 et +)	yes \| no

Exemple de code (prévoir une page "exemple.html") :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function ouvrir_fenetre() {
        URL="exemple.html";
        largeur="500";
        hauteur="300";
        pos_x=(screen.width-largeur)/2;
        pos_y=(screen.height-hauteur)/2.5;
        parametres='width='+largeur+',height='+hauteur+',left='+pos_x+',top='+pos_y;
        parametres+=',menubar=no,toolbar=no,directories=no,location=no,status=no,scrollbars=yes';
        ma_fenetre=window.open(URL, "identifiant", parametres);
      }
      function fermer_fenetre() {
        ma_fenetre.close();
      }
    </script>
  </head>
  <body>
    <input type="button" value="Ouvrir une fenêtre" onClick="ouvrir_fenetre();">
    <input type="button" value="Fermer la fenêtre" onClick="fermer_fenetre();">
  </body>
</html>

Remarques

Les dimensions screen.width et screen.height représentent celles de l'écran. Les dimensions window.innerWidth et window.innerHeight correspondent à celles de la fenêtre du navigateur. Les paramètres left et top définissent la position par rapport aux bords de l'écran.
Le choix d’autoriser ou non la fenêtre à s'ouvrir appartient à l’utilisateur. Il dépend de la configuration du navigateur. En cas de blocage, window.open() retourne null.
La fonction window.open() permet d'obtenir facilement une fenêtre secondaire redimensionnable et repositionnable. Il y a quelques années, la possibilité de cacher la barre d'adresse a été supprimée sur la plupart des navigateurs.
Ces problèmes de blocage et cette impossibilité de cacher la barre d'adresse conduisent les développeurs à privilégier d'autres solutions... souvent volumineuses en lignes de code.

Ouvrir un nouvel onglet

Il est possible d'ouvrir un nouvel onglet au lieu d'afficher une fenêtre :

<a onclick="window.open('page.html','_blank');">Cliquez sur ce lien.</a>

Ou, plus simplement :

<a href="page.html" target="_blank">Cliquez sur ce lien.</a>

Gestion depuis la page fille

Exécuter une fonction sur la fenêtre mère :

opener.maFonction();

Vérifier l'existence de la page mère :

if (self.opener) {
  // instructions
}

Fermer la fenêtre :

<button type="button" onclick="self.close();">QUITTER</button>

Blocs cachés ou visualisés

Un bloc peut être caché au chargement de la page, puis montré au moment désiré. Le grand avantage de cette solution est que les fenêtres ainsi créées sont personnalisables. L'exemple ci-dessous (prévoir une page "exemple.html") montre tout ce qu'il y a de plus basique.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function ouvrir_fenetre1() {
        document.getElementById("fenetre1").style.display="block";
      }
      function fermer_fenetre1() {
        document.getElementById("fenetre1").style.display="none";
      }
      function ouvrir_fenetre2() {
        document.getElementById("fenetre2").style.display="block";
      }
      function fermer_fenetre2() {
        document.getElementById("fenetre2").style.display="none";
      }
    </script>
  </head>
  <body>
    <div>
      <input type="button" value="Ouvrir la fenêtre 1" onClick="ouvrir_fenetre1();">
      <input type="button" value="Fermer la fenêtre 1" onClick="fermer_fenetre1();">
      <input type="button" value="Ouvrir la fenêtre 2" onClick="ouvrir_fenetre2();">
      <input type="button" value="Fermer la fenêtre 2" onClick="fermer_fenetre2();">
    </div>
    <div id="fenetre1">Fenêtre 1...</div>
    <iframe id="fenetre2" src="exemple.html"></iframe>
  </body>
</html>

On utilise souvent le mot lightbox pour désigner un bloc qui s'affiche au premier plan, alors que le reste de la page s'assombrit. Le code ci-dessous en présente une solution, avec l'assombrissement en dégradé, un bouton en haut à droite pour fermer la fenêtre.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <script>
      function ouvrir() {
        document.getElementById('fenetre').style.display='block';
      }
      function fermer() {
        document.getElementById('fenetre').style.display='none';
      }
    </script>
    <style>
      #fenetre {
        display: none;
        position: absolute;
        top: 200px;
        right: 400px;
        left: 400px;
        box-shadow: 0px 0px 3000px 300px #444;
        border-radius: 15px;
        padding: 30px;
      }
      #fermer {
        position: absolute;
        top: -10px;
        right: -10px;
      }
    </style>
  </head>
  <body>
    Cliquez sur le bouton :
    <input type="button" value="OK" onclick="alert('Bien!');">
    <br><br>
    Cliquez sur le bouton :
    <input type="button" value="OK" onclick="ouvrir();"> 
    <div id="fenetre">
      Bien!
      <input id="fermer" type="button" value="X" onclick="fermer();">
    </div>
  </body>
</html>

Dans l'exemple précédent, le premier bouton reste accessible même lorsque la fenêtre apparaît. Dans certains cas, ce peut être un problème, corrigé ci-dessous.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function ouvrir() {
        document.getElementById('masque').style.display='block';
      }
      function fermer() {
        document.getElementById('masque').style.display='none';
      }
    </script>
    <style>
      #masque {
        display: none;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        text-align: center;
      }
      #fenetre {
        display: inline-block;
        margin-top: 150px;
      }
      section {
        background-color: #fff;
        padding: 30px 60px 30px 60px;
      }
      nav {
        text-align: right;
        background-color: #eee;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    Cliquez sur le bouton :
    <input type="button" value="OK" onclick="alert('Bien!');">
    <br><br>
    Cliquez sur le bouton :
    <input type="button" value="OK" onclick="ouvrir();">
    <div id="masque">
      <div id="fenetre">
        <section>Bien!</section>
        <nav>
          <input type="button" value="OK" onclick="fermer();">
        </nav>
      </div>
    </div>
  </body>
</html>

Les infobulles

Une infobulle est une petite fenêtre, donnant une information sur un élément lorsque le curseur de la souris reste positionnée sur cet élément quelques instants. Elle peut être créée facilement à l'aide de de l'attribut title.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p title="Deux couleurs">Le ciel est bleu et l'herbe verte.</p>
  </body>
</html>

Remarque

Les infobulles générées avec title sont faciles à programmer, mais elles ne sont pas personnalisables. Exemple de solution :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .infobulle { position: relative; }
      .infobulle span {
        display: none;
        background-color: #ddd;
        padding: 5px;
        position: absolute;
        top: 30px;
        left: 160px;
      }
      .infobulle:hover span { display: block; }
    </style>
  </head>
  <body>
    <p class="infobulle">Le ciel est bleu et l'herbe verte.<span>Deux couleurs</span></p>
  </body>
</html>

Evénements liés à la souris

Avec CSS

Il est possible de changer l'apparence d'un élément de page HTML, lors d'événements liés à la souris. Ces événement sont définis avec des pseudo-formats intégrés dans la feuille de styles. Les pseudo-formats peuvent être :

hover : Le survol de l'élément.
active : Un clic sur l'élément.
focus : La sélection de l'élément.
visited : La consultation d'un lien.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div a:hover { color: red; }
      div a:active { background-color: orange; }
      div p { display:none; }
      div:hover p { display:block; }
    </style>
  </head>
  <body>
    <div>
      <a href="">Un lien...</a>
      <p>Un paragraphe...</p>
    </div>
  </body>
</html>

Avec JavaScript

Avec JavaScript, la gestion d'événements liés à la souris offre de nombreuses possibilités. En effet, n'importe quelle fonction peut être appelée. Les événements liés à la souris peuvent être :

onclick : Un utilisateur clique sur l’élément.
onmouseover : Le curseur de la souris entre dans l’élément.
onmouseout : Le curseur de la souris sort de l’élément.
onmousemove : Le curseur de la souris se déplace dans l’élément.
ondblclick : Un utilisateur double-clique sur l’élément.
onmousedown : Un bouton de la souris est enfoncé sur l’élément.
onmouseup : Un utilisateur relâche un bouton de la souris dans l’élément.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function cliquer() {
        alert("Vous avez cliqué sur le bouton 1");
      }
      function survoler() {
        alert("Vous avez survolé le bouton 2");
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="Bouton 1" onclick="cliquer();">
      <input type="button" value="Bouton 2" onmouseover="survoler();">
    </form>
  </body>
</html>

Evénements liés au clavier

Trois événements liés au clavier sont possibles en JavaScript :

onkeypress : Lorsqu'une touche est activée.
onkeydown : Lorsqu'une touche est enfoncée.
onkeyup : Lorsqu'une touche est relevée.

L'objet "event" en Javascript regroupe les principales informations du clavier et de la souris. La propriété "keycode" de l'objet "event" renvoie :

La valeur Unicode de toute touche non caractère dans un évènement keypress.
La valeur Unicode de toute touche dans les autres types d'évènement clavier.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body onkeydown="alert(event.keyCode);">
    <p>La page...</p>
  </body>
</html>

Autre exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
    function afficher() {
      alert("Vous avez validé!");
    }
    </script>
  </head>
  <body onkeypress="if (event.keyCode == 13) afficher();">
    <p>La page...</p>
  </body>
</html>