 |
| Voici du texte HTML statique pour la page : 27b. JavaScript - Contenu Dynamique ! Cool, hein ? |
Augmentons la Dose...
créons du contenu dynamique dans une page...
différents messages pour différentes conditions...
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Nous vous avons rappelé auparavant qu'au fur et à mesure qu'un document HTML se charge dans un navigateur web, il est interprêté pendant son chargement. Pour du HTML, cela veut dire qu'aussitôt qu'un navigateur a suffisamment d'informations pour afficher quelque chose, il essaie, bien qu'il doive encore lire le reste du document.
Quand nous parlons de contenu dynamique que vous pouvez écrire en JavaScript, cela veut dire que le navigateur web peut faire bien plus que simplement "lire et afficher". Pendant qu'il lit du code JavaScript au milieu du HTML, le navigateur peut prendre des décisions suivant la manière dont le code est présenté, tester certaines fonctions et écrire un code HTML différent en fonction des instructions programmées. On peut même le paramétrer pour qu'il fasse des choses différentes à chaque fois que la page se charge.
Ca rend vos pages web un peu plus "intelligentes" que d'être simplement là et belles !
On peut utiliser le JavaScript pour écrire n'importe quelle sorte de contenu HTML en utilisant le format suivant :
document.write('xxxxxxxx xxxxxxxxxx');
document.write('xxxx xxxxxxx xxxxxxx xxxxx');
document.write('xx xx xxxxxxxxxxxx xx');
Chaque ligne de ce code écrit un morceau de HTML, affiché entre les guillemets. Cette série de commandes JavaScript :
document.write('<h1>Le Large Monde du Fromage</h1>')
document.write('<b><i>Personne n'aime le fromage');
document.write('autant que moi !</i></b><br> -- Colby Jack (1903)');
produira exactement le même affichage que ce morceau de HTML :
<h1>Le Large Monde du Fromage</h1> <b><i>Personne n'aime le fromage autant que moi !</i></b><br> -- Colby Jack (1903)
Mais si c'était tout ce qu'il y avait à savoir sur le JavaScript, nous n'essaierions même pas de vous l'apprendre ! JavaScript permet d'afficher d'autres informations non disponibles avec le HTML. Il y a des fonctions prédéfinies qui fournissent la date et l'heure courante, des informations sur le navigateur web de l'internaute et d'autres encore que nous verrons bientôt. Mais plus encore, nous pouvons définir des expressions logiques à tester afin de faire des choses comme :
Si aujourd'hui est un Mardi ou un Mercredi et qu'il est plus tard que minuit, affiche le message : "salutations du matin" ; mais si il est plus tard que midi, affiche un message différent pour l'après-midi. Et si nous sommes Vendredi à n'importe quelle heure, affiche encore un autre type de message. N'importe quel autre jour, à n'importe quelle heure, affiche un message standard : "Bonne journée".
Le code JavaScript nous donne la flexibilité pour créer du contenu dynamique se comportant différemment pour l'utilisateur.
La première chose que nous allons faire est d'écrire une série de commandes JavaScript qui vont créer les bas de page de tous nos documents -- mais, au contraire des précédents que nous avons écrits à la main, ce même bloc de HTML/JavaScript peut être copié et collé dans chaque document et affichera dynamiquement (les exemples pour cette page sont entre parenthèses) :
Les serveurs web ne fournissent pas tous des dates de modification exactes pour les documents, élément (c), et quand vous testez ces documents sur votre ordinateur, vous risquez de ne pas pouvoir obtenir cette information et de voir s'afficher une date comme Janvier 1900. Nous vous montrerons comment tester dans ces conditions. L'élément (d) est extrêmement utile car, si nous devions déplacer nos pages web sur différents serveurs web ou restructurer notre site, l'URL serait automatiquement modifié.
Le modèle "standard" pour le bas de page de notre site web Volcan ressemble au code ci-dessous. Nous allons le présenter d'abord section par section avec des explications. Il n'est pas vital que vous compreniez exactement comment ça marche car, pour l'incorporer dans vos pages, vous n'aurez qu'à effectuer une opération de copier/coller.
| Bas de Page JavaScript | |
|---|---|
| code HTML | explication |
<!-- début des bas de page standard du Web Volcan --> <SCRIPT LANGUAGE="JavaScript"> <!-- cacher les scripts pour les vieux navigateurs |
Marque le début de la zone de bas de page, avec les tags JavaScript appropriés |
document.write('<p><hr>
<FONT FACE="helvetica,arial" size=-1>
<i>Web Volcan :</i> <B>');
|
Règle horizontale, taille de police du texte de début et titre principal du site web |
document.write(document.title + '</B><BR>'); |
Ecrit le titre actuel du document |
document.write('créé par Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject='
+ document.title + '">');
document.write('lava@pele.bigu.edu</A><br>');
|
Contributions pour la page avec un lien email ajoutant automatiquement le titre de la page dans la ligne de sujet. |
document.write('Etudes Volcaniques,
<A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');</tt></font>
|
Encore du contenu statique. |
// rajoute une date de modification seulement
// si le serveur fournit une date valide
if (Date.parse(document.lastModified) > 0) {
document.write('<B>dernière modification : </B>'
+ document.lastModified + '<BR>');
}
|
Ca a l'air compliqué. Nous avons défini un test conditionnel sur la valeur renvoyée par la commande document.lastModified, et si elle est valide (une valeur différente de zéro renvoyée par une fonction appelée Date.parse), on écrit la date de modification. Si nous n'avons pas de date valide, le bloc complet est ignoré. |
document.write('<B>URL: </B>'
+ document.location.href + '</FONT><P>');
|
Ecrit l'URL du document actuel contenu dans la valeur retournée par la variable JavaScript document.location.href |
|
// fin de masquage pour les vieux navigateurs --> </SCRIPT> <!-- fin des bas de page standard du Web Volcan -->
Fin du bloc de code pour les bas de page. |
|
La plupart du contenu dynamique dans ces exemples vient des "propriétés" de différents "objets" JavaScript, dans ce cas l'objet document. Chaque document HTML contient des informations d'identification pré-programmées -- par exemple son titre, la date de dernière modification, l'URL, etc. On peut interroger l'objet document pour obtenir et utiliser ces informations.
Les informations statiques que nous écrivons dans la page en utilisant document.write (chaines de texte entre guillemets) et les informations contenues dans les variables JavaScript, comme document.title, sont concaténées avec le signe "+" :
'Voici du texte <b>HTML</b> statique pour la page :' + document.title + '! Cool, hein ?'
Le signe "+" accole le texte en une longue chaine. Pour cette leçon, nous verrions donc :
|
| Voici du texte HTML statique pour la page : 27b. JavaScript - Contenu Dynamique ! Cool, hein ? |
Notre bas de page JavaScript utilise aussi un test "conditionel" ("si ceci, alors fais cela") pour la date de modification, qui ressemble à :
si ( condition à tester ) {
commande JavaScript 1;
commande JavaScript 2;
:
:
commande JavaScript N;
}
ce qui signifie que, si le test de condition entre parenthèses dans la première ligne renvoie une valeur VRAIE, nous exécutons les étapes entre les crochets "{" et "}" ; si le test est FAUX, nous sautons ces commandes. Avec la puissance de JavaScript, nous pouvons construire des tests conditionnels très complexes mais, pour le moment, restons simples.
Voici ce que donnerait notre bas de page JavaScript si il était utilisé dans cette page :
|
Maintenant, nous allons insérer le bas de page dans les documents HTML de notre Web Volcan.
<HR> <ADDRESS><B>Web Volcan</B><br> créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.edu</A><p> Etudes Volcaniques, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>dernière mise à jour : 1er Avril 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/index.html</tt> <p>
<!-- début du bas de page standard du web volcan -->
<SCRIPT LANGUAGE="JavaScript">
<!-- début de masquage pour les vieux navigateurs
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Web Volcan :</i> <B>');
document.write(document.title + '</B><BR>');
document.write('créé par Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject='
+ document.title + '">');
document.write('lava@pele.bigu.edu</A><br>');
document.write('Etudes Volcaniques, <A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');
// ajoute une date de modification seulement si le serveur fournit une date valide
if (Date.parse(document.lastModified) > 0) {
document.write('<B>dernière modification : </B>' +
document.lastModified + '<BR>');
}
document.write('<B>URL: </B>' + document.location.href +
'</FONT><P>');
// fin de masquage pour les vieux navigateurs -->
</SCRIPT>
<!-- fin du bas de page standard du Web Volcan -->
NOTE : Il est crucial que toutes vos commandes JavaScript soient chacune sur une seule ligne, commençant par document.write('... et finissant par ');. Si vous avez des caractères RETOUR CHARIOT supplémentaires dans le code, ça ne marchera pas. Assurez-vous également que la structure du bloc if (...) { est exactement la même que ci-dessus.
JavaScript est encore plus sensible que le HTML pour ce qui est des fautes de frappe ! Et il y a plus de chances de se tromper à cause de l'utilisation des guillemets et apostrophes.
Nous n'avons pas encore mis à jour le bas de page faisant partie de la page project, que nous avons divisée en cadres dans la leçon 26. Vous pourriez penser que la seule chose à faire est de le coller dans le cadre de bas de page, proj_footer.html. Mais le problème est que la fonction JavaScript document.location.href n'affichera pas l'URL de la page de cadre, "...project.html" mais celui du document bas de page. De plus, certains navigateurs renvoient le nom de fichier plutôt que le titre de la page dans document.title dans une page web cadre. Nous nous retrouverions avec quelque chose comme :
|
Pour contourner le problème, nous pourrions nous contenter d'un bas de page HTML standard... ou utiliser du code JavaScript plus créatif (et plus complexe). On va prendre la seconde option, en utilisant le JavaScript pour "extraire" l'information que nous voulons afficher de l'objet document.
<!-- début du bas de page standard du web volcan -->
<SCRIPT LANGUAGE="JavaScript">
<!-- début de masquage pour les vieux navigateurs
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Web Volcan :</i> <B>');
document.write('Project</B><BR>');
document.write('créé par Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject=Project">');
document.write('lava@pele.bigu.edu</A><br>');
document.write('Etudes Volcaniques, <A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');
// ajoute une date de modification seulement si le serveur fournit une date valide
if (Date.parse(document.lastModified) > 0) {
document.write('<B>dernière modification : </B>'
+ document.lastModified + '<BR>');
}
// extrait le bon URL du nom de fichier, en supposant que le fichier
// s'appelle "proj_footer.html" ou "proj_footer.htm",
// et que le bon URL du cadre est "proj.html" ou "proj.htm"
myURL = document.location.href;
// récupère le suffixe du nom de fichier (tout ce qui se trouve après "_footer")
myExt = myURL.substring(myURL.indexOf("_footer") + 7, myURL.length)
// Prend la première partie de l'URL allant jusqu'à "proj"
myUrl = myURL.substring(0,myURL.indexOf("_footer"))
// Assemble la chaine de caractères
document.write('<B>URL: </B>' + myUrl + myExt + '</FONT><P>');
// fin de masquage pour les vieux navigateurs -->
</SCRIPT>
<!-- fin du bas de page standard du Web Volcan -->
Dans cet exemple, nous avons utilisé des fonctions JavaScript avancées pour faire des choses telles qu'extraire des portions de texte à l'intérieur d'une chaine de caractères, et trouver l'endroit exact d'un caractère particulier dans une chaine. Malheureusement, expliquer tout cela dépasse le cadre de ce didacticiel ; consultez, s'il vous plait, nos références pour plus d'informations ou de ressources.
Nous allons maintenant vous montrer encore plus de choses avec le JavaScript. Une autre des fonctionnalités incluses est la possibilité de récupérer la date et l'heure depuis l'ordinateur de l'internaute (en supposant qu'elle est à jour !). Nous pouvons utiliser cela pour "coller" un message de bienvenue sur la page d'accueil. On pourrait écrire "Bonjour !", "Bonsoir !", ou "N'est-il pas trop tard pour surfer ?" en fonction de l'heure que la fonction nous renvoie à travers JavaScript.
La première chose à faire est de créer un objet Date dans JavaScript :
var today = new Date();
Nous avons maintenant une variable appelée today dans laquelle nous pouvons récupérer la date et l'heure. JavaScript stocke cette information en interne en enregistrant le nombre de secondes depuis une date de référence comme le 1er Janvier 1900. Mais l'objet Date JavaScript permet également de récupérer le mois, le jour, l'année, l'heure, la minute, la seconde, etc.
Une des propriétés d'objet la plus facile à utiliser est Date.toLocaleString() qui affiche la date dans le format défini dans les préférences de l'ordinateur de l'internaute (il y a différentes conventions suivant les pays). Nous pourrions écrire le code suivant :
var today = new Date();
document.write('D'après ma montre JavaScript, il est exactement ' + today.toLocaleString() )'
ce qui afficherait :
|
Si vous rechargez la page de cette leçon, l'heure dans le cadre devrait changer. Notez que le format de la date dépend du type d'ordinateur.
JavaScript offre d'autres informations sur le navigateur web de l'internaute, via l'objet navigator. Nous pouvons donc savoir quel navigateur web le visiteur utilise (NetScape, Internet Explorer, etc), ainsi que la version. C'est très utile si, dans une page web, vous utilisez des fonctions nécessitant une certaine version de navigateur -- vous vous servez de JavaScript pour "tester" un affichage spécifique en fonction des différents navigateurs ou versions.
Nous allons maintenant utiliser les objets JavaScript Date et Navigator pour afficher un message personnalisé dans notre page d'accueil. Nous allons rajouter certaines choses afin que JavaScript affiche le jour de la semaine ("Lundi, Mardi", etc) et un message si le visiteur a une vieille version de navigateur. Ci-dessous, nous expliquons rapidement comment le code fonctionne mais, si vous voulez juste essayer, copiez simplement, collez et testez ceci dans votre navigateur.
Dans cette leÁon, vous vous servirez d'Internet pour rechercher de l'information sur les volcans et rédiger un rapport de vos résultats.et
<br clear=left> <hr> <p align=center>insérez le code JavaScript suivant :
<p>
<SCRIPT LANGUAGE="JavaScript">
<!-- début de masquage pour les vieux navigateurs
// récupère l'objet date
var today = new Date();
var days = new Array('Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi');
// Ecrit la date
document.write('Bonjour en ce beau <b>' + days[today.getDay()]);
document.write('</b>, ou plus exactement,<br>');
document.write('<font color="#FFFF33" size=+2><tt>');
document.write(today.toLocaleString() + '</tt></font>');
// Ecrit un message d'accueil en donnant la version de navigateur
document.write('<p>Nous espérons que vous profitez pleinement du web avec votre version de ');
document.write(navigator.appName + ' ' + parseFloat(navigator.appVersion));
// Envoie une alerte pour les vieux navigateurs web
if ( parseInt( navigator.appVersion) < 3 ) {
document.write('<font color=#FFFF33> Hmmm.. C\'est une bien vieille version de ');
document.write(navigator.appName + '! Il est temps de penser à une mise à jour, non ?</font>');
}
// fin de masquage -->
</SCRIPT>
NOTE : Dans la dernière section de de code, vous avez peut-être remarqué quelque chose de bizarre, un backslash \ dans le mot C'est. Ce n'est pas une erreur ! Vous en avez besoin pour que JavaScript interprète l'apostrophe comme tel et non comme la marque indiquant la fin d'une phrase JavaScript. Si vous retirez ce backslash, vous générez une erreur.
Dans ce script, nous créons d'abord l'objet Date et le mettons dans une variable que nous appelons today. Puis nous créons un "tableau", ou une liste de choses, appelée days contenant les noms des jours de la semaine.
Les tableaux sont des choses très pratiques car on peut utiliser les éléments qu'ils contiennent de la manière suivante :
days[2]
où le nombre entre crochets indique la position de l'élément que l'on cherche dans le tableau. Mais attention ! JavaScript commence à compter à partir de 0, donc days[2] renverra le troisième élément, donc "Mardi".
Notre code écrit un message d'accueil et utilise le tableau pour extraire le bon nom du jour. La fonction de l'objet Date today.getDay() renvoie un nombre de 0 à 6 correspondant au jour de la semaine. Nous pouvons donc combiner la fonction de l'objet Date avec notre tableau de noms pour écrire le bon jour de la semaine.
Puis nous utilisons le format fourni par today.toLocaleString() pour écrire la date entière.
La suite affiche le nom du navigateur ("NetScape", "Internet Explorer") suivi par la version renvoyée oar la fonction navigator.appVersion, qui, en réalité, renvoie une information bien plus détaillée. En passant cette information dans une fonction appelée parseFloat, on retire ou on "extrait" la partie de la chaine correspondant à un nombre entier. A titre d'exemple, regardez :
Cette dernière ligne nous donne l'information à afficher : le nom du navigateur et la version. Le code parseInt(navigator.appVersion) extrait le nombre entier de cette information. Si vous regardez la dernière portion du code ci-dessus, nous testons la valeur de parseInt et affichons l'alerte si cette valeur est inférieure à notre valeur test de 3. Pour voir la différence, changez le 3 en une valeur supérieure à la version actuelle de votre navigateur.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Souvenez-vous que le JavaScript est très sensible aux fautes de frappe -- un guillemet ou un point-virgule manquants peuvent détruire votre page !
Revoyons les grandes lignes de cette leçon :
Copiez le format de bas de page JavaScript de cette leçon dans vos propres documents et voyez si vous pouvez modifier le format HTML pour l'adapter à votre site.
Pouvez-vous trouver un moyen d'afficher un message d'accueil différent pour chaque heure du jour ? Astuce : créez un tableau pour stocker le texte de tous vos messages, et utilisez la fonction Date.getHours() pour déterminer l'heure courante.
Votre docteur JavaScript vous prépare la prochaine dose... des fonctions et du code pour ouvrir des fenêtres de navigateur de n'importe quelle taille ou configuration. Où vous les voulez et avec autant de boutons que vous voulez.
Ecrire le HTML : Leçon 27b : Une 'tite Dose de JavaScript : Contenu Dynamique
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut27b.html