DEVELOPPEMENT WEB - REMARQUES

Quelques conseils

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é

Si une application web comporte du code en JavaScript, il est bon de prévoir le cas où le navigateur du client a son JavaScript désactivé. Le message entre les balises <noscript> et </noscript> ne s'affiche que dans ce cas. Si on souhaite que ce message apparaisse seul dans le cas du JavaScript désactivé, une solution consiste à l'afficher  :

Exemple de code :

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

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 :

Les méthodes alert(), confirm() et prompt() appartiennent à l'objet window. On peut écrire window.alert() ou alert() indifféremment.

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>
    <form>
      <input type="button" value="Colorer le fond" onclick="changer();">
      <br>
      <input type="button" value="Saisir un texte" onclick="saisir();">
    </form>
  </body>
</html>

Les fenêtres

La méthode open() de l'objet window permet de créer une nouvelle fenêtre de navigation secondaire. Elle y charge la ressource référencée.

Elle prend trois paramètres optionnels :

PropriétésEffetsValeurs possibles
directoriesAffichage de la barre de liensyes | no
menubarAffichage de la barre de menuyes | no
statusAffichage de la barre de statutyes | no
locationAffichage de la zone d'adresseyes | no
scrollbarsAffichage des barres de scrollingyes | no | auto
resizableAutorise le redimensionnement du popupyes | no
heightHauteur en pixelsnombre entier
widthLargeur en pixelsnombre entier
leftPosition horizontale en pixels sur l'écrannombre entier
topPosition verticale en pixels sur l'écrannombre entier
fullscreenPopup 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>
    <form>
      <input type="button" value="Ouvrir une fenêtre" onClick="ouvrir_fenetre();">
      <input type="button" value="Fermer la fenêtre" onClick="fermer_fenetre();">
    </form>
  </body>
</html>

Remarque

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>

Les blocs, cachés ou visualisés

Un bloc peut être caché au moment du chargement de la page, puis montré au moment désiré.

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

<!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>
    <form>
      <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();">
    </form>
    <div id="fenetre1">Fenêtre 1...</div>
    <iframe id="fenetre2" src="exemple.html"></iframe>
  </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>

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 :

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 :

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 :

L'objet "event" en Javascript regroupe les principales informations du clavier et de la souris.

La propriété "keycode" de l'objet "event" renvoie :

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>

Transmettre des données à une page

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="param.html">
      <p>Login : <input type="text" name="login"></p>
      <p>Mot de passe : <input type="text" name="password"></p>
      <p><input type="submit" value="Envoi des données"></p>
    </form>
  </body>
</html>

Le fichier "param.html" :

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