Les scripts du site

Contents

A propos de ces extraits de codes...

J'ai commencé la réalisation de ce site dans le but de lier entre elles différentes notes que je possédais sur certaines notions comme les télécommunications A l'époque je n'avais aucune expérience dans le domaine du Web (rares étaient les sites Web personnels, et la consultation de documents sur Internet était assez onéreux), ni aucune expérience en programmation. La première version était donc entièrement statique et ne comportait pas de JavaScript (chaque lien était directement codé dans la page).

J'ai par la suite loué à la bibliothèque un livre sur le JavaScript pendant mes vacances, et je me suis lancé. Ces scripts comportent des commentaires en français (et parfois pas de commentaire du tout), aucune convention d'écriture n'est respectée (nous avons des noms de variables ou de fonctions qui débutent par des majuscules ou des minuscules, qui ne sont pas explicites, etc.), des indentations qui varient, etc.

De plus, ces fichiers ne sont plus utilisés à ce jour, une part importante du traitement étant effectué côté serveur, et les données stockées dans une base de données.

J'avais réalisé cette page quelques années plus tard au moment où les différentes pages ont été stockées sur Internet et non plus en local, et je ne l'ai toujours pas supprimée car elle peut servir de point de départ ou donner des idées à ceux qui désirent utiliser un système similaire.

Scripts externes

Lorsque nous avons besoin d'exécuter un même script dans de nombreuses pages, il devient fastidieux de le recopier sur chaque page. Nous pouvons grouper les scripts les plus utilisés dans un fichier externe. Cette technique présente en plus l'avantage de ne pas devoir charger pour chaque page le code de ces scripts, car les navigateurs modernes placent généralement le fichier en cache.

Nous pouvons donc créer un simple fichier texte (avec vi ou gedit sous Linux, notepad sous Windows, ...) dans lequel les différentes fonctions seront écrites, puis sauver ce fichier avec l'extension .js (pour JavaScript).

Chaque page qui fait appel à une fonction du fichier y fait référence dans la partie <head>. La référence se fait de la manière suivante : 

  1. <script type="text/javascript" src="adresse_du_fichier/nom_du_fichier.js"></script>

Dans la partie <body> du document HTML, l'appel d'une fonction située sur le fichier externe se fait simplement de cette manière: : 

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. nom_de_fonction(parametres_de_fonction);
  4. //]]>
  5. </script>

Contents Haut

L'objet BrolPage

Afin de gérer la navigation, le moteur de recherche, la recherche des dernières pages créées, etc. nous pouvons créer un objet BrolPage, qui comporte une série de propriétés telles que :

  • son identité
    • son adresse
    • son nom
    • une description
  • la navigation
    • la page précédente
    • la page suivante
    • son appartenance à un chapitre
    • la nécessité de figurer ou pas dans le menu de gauche
    • le texte qui doit apparaître dans un lien vers cette page
    • les mots clés pour indexer le moteur de recherche
  • etc.

Un tableau est créé, afin de gérer tous ces objets selon leur index, d'effectuer des recherches à l'aide de boucles for, et tout ce que l'imagination permet...

  1. function BrolPage(rep, nom, chap, titre, desc, pre, sui, men, dev, dCrea){
  2. 	this.path=GlobURL+rep;
  3. 	this.nom=nom;
  4. 	this.adr=this.path+nom;
  5. 	this.chap=chap;
  6. 	this.titre=titre;
  7. 	this.desc=(desc.length==0) ? titre:desc; 
  8. 	this.pre=pre;
  9. 	this.sui=sui;
  10. 	this.men=men;
  11. 		/*numéro de chapitre si la page est développée dans le menu de gauche mode cadre
  12. 		-2 si astuces win, sinon -1
  13. 		au delà de -100 : sous chapitres (100->200=info, 200->300=res, etc)
  14. 		-101=Excel
  15. 		-102=Outlook
  16. 		-103=Exchange
  17. 		*/
  18. 	this.dev=dev;
  19. 	this.dCrea=dCrea;
  20. }
  21.  
  22. /* EXEMPLE :
  23.  
  24. globNavPge[1]=new BrolPage("_pge", "js42",3,"Les coulisses","Les scripts utilisés sur ce site",23,2,3,0,"19 03 2002");
  25. globNomCle[1]="programmation+langage+c+ide+visual";
  26. */

Contents Haut

La navigation

Un script détermine le haut et le bas de chaque page, afin de faciliter la navigation.

Eléments générés par le script en haut de page :

  • Des boutons de navigation :
    • Bouton vers la page précédente.
    • Bouton vers la page suivante.
      Remarque: ces deux boutons permettent une navigation linéaire à la manière des pages d'un livre.
  • Le numéro et le titre du chapitre.
  • Le titre de la page.
  • Des boîtes de sélections qui permettent :
    • d'atteindre les différentes parties de la page.
    • d'atteindre les pages appartenant au même chapitre.

Une variable est déclarée sur la page, et contient l'index correspondant à un objet dans un tableau (voir plus haut).

  1. //js
  2. //haut de page
  3. function h(){
  4.     var topPage='<a name="h"></a>';
  5.     topPage+='<table width="100%" height="40" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top">'+affMh()+'</td>';
  6.     topPage+='<td colspan="2"><div align="center"><H1>Chapitre '+globNumChap+': '+globIndChap[globNumChap]+'</H1></div></td>';
  7.     topPage+='<td valign="top">'+dirPge_1()+'</td></tr>';
  8.     topPage+='<tr><td width="25%"><div align="center">'+affpre('aph')+'</div></td>';
  9.     topPage+='<td colspan="2"><div align="center"><H3>'+globNavPge[npge].titre+'</H3></div></td>';
  10.     topPage+='<td width="25%"><div align="center">'+affsui('ash')+'</div></td></tr>';
  11.     topPage+='<tr><td colspan="4">'+globHr1+globHr2;+'</td></tr>';
  12.     topPage+='</table>';
  13.  
  14.     //document.write(topPage); 
  15. }
  16.  
  17. //bouton page précédente
  18. function affpre(affpre_in){
  19. 	var affprepge=' ';
  20. 	switch (globNavPge[npge].pre){
  21. 		//pas pge pre
  22. 		case -1:
  23. 			//mode gr (pas besoin else: si pas mode gr, pas affichage btn inactif!)
  24. 			if(Lit_Cookie("globgr")==oui){
  25. 				affprepge+='<img src ="'+globURL_ImgFond+'/nav/vide.gif" width="120" height="31" alt="Ce bouton est inactif.">';
  26. 			}
  27. 			break;
  28. 		case -2://pre == history-1
  29. 			if(Lit_Cookie("globgr")==oui){
  30. 				affprepge+='<a onClick="retour();" onMouseOut="remetimg()" onMouseOver="changeimg("'+affpre_in+'","","';
  31. 				affprepge+=globURL_ImgFond+'/nav/pre_s.gif",1)">';
  32. 				affprepge+='<img border ="0" name="'+affpre_in+'" src="'+globURL_ImgFond+'/nav/pre.gif" width="120" height="31">';
  33. 				affprepge+='</a>';
  34. 			}else{
  35. 				affprepge+='Page précédente:<br /><a href="javascript:retour()">Page précédente</a>';
  36. 			} 
  37. 			break;
  38. 		default:
  39. 			if(Lit_Cookie("globgr")==non){
  40. 				affprepge+='Page précédente:<br />';
  41. 			}
  42. 			affprepge+='<script language="JavaScript">';
  43. 			affprepge+='BtnActif("'+affpre_in+'",2,globNavPge[npge].pre,-1,-1,globNavPge[npge].desc)';
  44. 			affprepge+='</script>';
  45. 			break;
  46. 	}
  47. 	return(affprepge);
  48. }
  49.  
  50. //bouton page suivante
  51. function affsui(affsui_in){
  52. 	var affsuipge='';
  53. 	if (globNavPge[npge].sui == -1){
  54. 		affsuipge+='<img src ="'+globURL_ImgFond+'/nav/vide.gif" width="120" height="31" alt="Ce bouton est inactif.">';
  55. 	}else{
  56. 		if (Lit_Cookie('globgr')==non) {
  57. 			affsuipge+='Page suivante:<br />';
  58. 		}
  59. 		affsuipge+='<script language="JavaScript">';
  60. 		affsuipge+='BtnActif("'+affsui_in+'",3,globNavPge[npge].sui,-1,-1,globNavPge[npge].desc)';
  61. 		affsuipge+='</script>';
  62. 	}
  63. 	return(affsuipge);
  64. }

Contents Haut

Pour le bas de la page, un script génère:

  • Des boutons :
    • Page précédente.
    • Haut de la page.
    • Page suivante.
  • Mon nom (afin de flater mon égo...)
  • La date de dernière modification du fichier (voir le script).
  1. function bas(){
  2.     var BasPge=Glob_Hr1+'<br /><br /><table width="100%" border="0" cellpadding="0" cellspacing="0">';
  3.     BasPge+='<tr>';
  4.     BasPge+='<td width="31%" valign="top"><div align="center">'+affpre("apb")+'</div></td>';
  5.     BasPge+='<td width="38%"><div align="center"><script language="JavaScript">BtnActif("hb",1,-1,"h",-1,"Haut de la page.")</script></div></td>';
  6.     BasPge+='<td width="31%" valign="bottom"><div align="center">'+affsui("asb")+'</div></td>';
  7.     BasPge+='</tr></table>';
  8.  
  9.     document.write(BasPge);
  10.  
  11.     statx();
  12. }

Un ensemble de fonctions déterminent les actions à prendre dans la gestion des boutons, qui ne sont en fait que le remplacement d'une image par une autre...

  1. //gestion de boutons
  2. /*
  3. BtAId=Identifiant pour changer l'image avec onMouseOver.
  4. BtnAIndImg=Index dans le tableau des images.
  5. BtnAIndPge=Index de la page à joindre dans le tableau des pages.-1 si inactif.
  6. BtnADsPge=Balise à joindre sur la page.-1 si inactif.
  7. BtnAAct=Action à entreprendre, ou dest sur la page.-1 si inactif.
  8. BtnAInfo=Balise alt si image, affichage txt si mode rapide. Si (BtnAIndPge!=-1)&&BtnAInfo=='t', target=top
  9. */
  10. function BtnActif(BtAId,BtnAIndImg,BtnAIndPge,BtnADsPge,BtnAAct,BtnAInfo)
  11. {
  12. /*if (Lit_Cookie("Glob_nv")==oui){var BtnA_Target='_pge';} else {*/var BtnA_Target='_self';//}
  13. if (Lit_Cookie("Glob_gr")==oui)//mode normal, boutons img 
  14. 	{	
  15. 	if (BtnAAct!=-1)
  16. 		{
  17. 		if (BtnAAct=='t')//pas de javascript, seulement changement de frameset
  18. 			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="_top"');}
  19. 		else//javascript
  20. 			{document.writeln('<a onClick="'+BtnAAct+'" onMouseOver="music(5);" target="'+BtnA_Target+'"');}
  21. 		}
  22. 	else//bouton lien traditionnel
  23. 		{
  24. 		if (btnaindpge==-1)//ancre sur la page en cours
  25. 			{document.writeln('<a href="#'+BtnADsPge+'" target="'+BtnA_Target+'"');}
  26. 		else//pointe vers ancre d"une autre page
  27. 			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="'+BtnA_Target+'"');}
  28. 		}
  29. 	document.writeln('onMouseOver="music(5);changeimg("img'+BtAId+'","","'+Glob_Img[BtnAIndImg].s+'",1)" onMouseOut="remetimg()">');
  30. 	document.writeln('<img name="img'+BtAId+'" border="0" src="'+Glob_Img[BtnAIndImg].n+'" width="'+Glob_Img[BtnAIndImg].l+'" height="'+Glob_Img[BtnAIndImg].h+'"');
  31.  
  32. 	if ((btnaact!='t')&&(btnaindpge!=-1))
  33. 		{document.writeln(' alt="'+Glob_NavPge[BtnAIndPge].desc+'"></a>');}
  34. 	else//desc javascript
  35. 		{document.writeln(' alt="'+BtnAInfo+'"></a>');}
  36. 	}
  37. else //mode rapide, boutons style
  38. 	{
  39. 	if (BtnAAct!=-1)
  40. 		{
  41. 		if (BtnAAct=='t')//pas de javascript, seulement changement de frameset
  42. 			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="_top">'+Glob_NavPge[BtnAIndPge].titre+'</a><br />');}
  43. 		else//javascript
  44. 			//{document.writeln('<a href="javascript:'+BtnAAct+'">'+BtnAInfo+'</a><br />');}
  45. 			{document.writeln('<a href="#" onClick='+BtnAAct+'>'+BtnAInfo+'</a><br />');}
  46. 			//<a onClick='+BtnAAct+' target="_self"');
  47. 		}
  48. 	else//pointe vers page
  49. 		if (btnaindpge==-1)//ancre sur la page en cours
  50. 			{document.writeln('<a href="#'+BtnADsPge+'" target="'+BtnA_Target+'">-&lt;]'+BtnAInfo+'[&gt;-</a><br />');}
  51. 		else
  52. 			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].adr+'">'+Glob_NavPge[BtnAIndPge].titre+'</a><br />');}
  53. 	}
  54. }
  55. //fin btnactif

Contents Haut

Le moteur de recherche JavaScript

Un moteur de recherche interne, une galère ?

Pas du tout, car toute page étant répertoriée sous forme d'objet dans un tableau, il suffit de déterminer comme propriété de cet objet un ensemble de chaînes de caractères qui constituent les mots clés qui référencent le contenu de cette page.

Ensuite, il suffit de saisir les mots clés, de parcourir le tableau des pages, et de vérifier pour chaque page si le mot clé figure dans sa propriété de référencement.

Nous pouvons donc afficher un lien vers chaque page en déterminant son nom, son adresse et sa description dans ses propriétés.

Petit plus, nous pouvons utiliser un compteur d'occurences afin de classer les pages selon le nombre de mots clés trouvés.

  1. var Glob_Moteur_ResNbRes=new Number(0);//nbre de pages trouvées
  2.  
  3. function motphp()
  4. {
  5. if ((!document.FormCh.saisie.value)||(document.FormCh.saisie.value=="Introduisez ici le mot à chercher")) alert("Vous devez introduire le mot à chercher\ndans le champ prévu à cet effet.")
  6. else 
  7. 	document.forms["FormCh"].submit();
  8. }
  9.  
  10. function moteur()
  11. {
  12. if ((!document.FormCh.saisie.value)||(document.FormCh.saisie.value=="Introduisez ici le mot à chercher")) alert("Vous devez introduire le mot à chercher\ndans le champ prévu à cet effet.")
  13. else 
  14. 	{
  15. 	MoteurTab = new Array();//prépare tableau pour la future chaîne de mots clés à chercher
  16. 	MoteurPge = "";
  17. 	Moteur_prepare();
  18. 	}
  19. }
  20.  
  21. function Moteur_prepare()
  22. {
  23. //début garniture
  24. Moteur_prepCh = new String();//prépare tableau pour les mots à chercher
  25. MoteurTab = document.FormCh.saisie.value.split("+");//les mots saisis dans le formulaire sont classés dans le tableau
  26. for(Moteur_prepK=0;Moteur_prepK<MoteurTab.length;Moteur_prepK++)//tableau.length renvoit le nbre de mots introduits dans le tableau
  27. 	{
  28. 	if (MoteurTab[Moteur_prepK].length > 1)//si le mot à plus d'une lettre
  29. 		{
  30. 		//toLowerCase() pour forcer les majuscules en minuscules
  31. 		Moteur_prepCh = MoteurTab[Moteur_prepK].toLowerCase(); //la var Moteur_prepCh recupère le mot clé de l'index i
  32. 		Moteur_Cmp(Moteur_prepCh); //le mot clé est soumis à la fonction Moteur_Cmp()
  33. 		}
  34. 	}
  35. //fin garniture
  36. Moteur_c&oelig;ur();//recherche proprement dite et affichage
  37. }
  38.  
  39. function Moteur_Cmp(Moteur_ChchMot)//récupération d'un mot clé
  40. {
  41. for (Moteur_ChchK=1;Moteur_ChchK<Glob_nmaxPge;Moteur_ChchK++)//passe toutes les pges
  42. 	{
  43.  
  44. 	document.FormCh.resultat.value = "";
  45. 	document.FormCh.resultat.value = Glob_NomCle[Moteur_ChchK];//mots clés de la pge
  46. 	Moteur_ChchTab = document.FormCh.resultat.value.split("+");//tableau des mots de la pge
  47. 	document.FormCh.resultat.value = "";
  48. 	for (m=0;m<Moteur_ChchTab.length;m++)//évaluation du premier mot au dernier
  49. 		{
  50. 		Moteur_ChchTemp = Moteur_ChchTab[m]; //le mot est stocké dans la var Moteur_ChchTemp
  51. 		if ((Moteur_ChchMot == Moteur_ChchTemp.toLowerCase())||
  52. 				(Moteur_ChchMot == (Moteur_ChchTemp.toLowerCase()+"s")))//mot trouvé ok
  53. 			{
  54. 			Glob_OccurCle[Moteur_ChchK]=Glob_OccurCle[Moteur_ChchK]+1;//incrémentation du compteur d'occurences (de nbre de mots cherchés présents dans les mots clés de la page)
  55. 			}	
  56. 		}
  57. 	}
  58. }
  59. function Moteur_c&oelig;ur()
  60. {
  61. Moteur_ResNmaxOcc = 0;
  62. var MoteurPge="<br />";		
  63. for (Moteur_ResK1=1;Moteur_ResK1<Glob_nmaxPge;Moteur_ResK1++)//passe pges
  64. 	{
  65. 	//Moteur_ResNmaxOcc = index de la pge qui a le > nbre d'occurences
  66. 	if (Glob_OccurCle[Moteur_ResK1]>Moteur_ResNmaxOcc) {Moteur_ResNmaxOcc = Glob_OccurCle[Moteur_ResK1];}
  67. 	}
  68.  
  69. for (Moteur_ResNmaxOcc;Moteur_ResNmaxOcc>0;Moteur_ResNmaxOcc--)//du > nbre occurences au <
  70. 	{
  71. 	for (Moteur_ResK2=1;Moteur_ResK2<Glob_nmaxPge;Moteur_ResK2++)
  72. 		{
  73. 		//passe pges du > nbre occurences au <
  74. 		if (Glob_OccurCle[Moteur_ResK2] == Moteur_ResNmaxOcc)
  75. 			{
  76. 			Glob_Moteur_ResNbRes++;
  77. 			MoteurPge+="<table class='td' width='100%'><tr><th>Résultat n°"+Glob_Moteur_ResNbRes+" : <a href='"+Glob_NavPge[Moteur_ResK2].rep+Glob_NavPge[Moteur_ResK2].nom+"' class='ind'>"+Glob_NavPge[Moteur_ResK2].titre+"</a></th></tr>";
  78. 			MoteurPge+="<tr><td>"+Moteur_ResNmaxOcc;
  79. 			if(Moteur_ResNmaxOcc>1){MoteurPge+=" mots clés";}else {MoteurPge+=" mot clé";}MoteurPge+=" pour la page.";
  80. 			MoteurPge+="<p><i>"+Glob_NavPge[Moteur_ResK2].desc+"</i></p>";
  81. 			MoteurPge+="<p align='right'>Date de création : "+Glob_NavPge[Moteur_ResK2].D_Crea+"</p>";
  82. 			MoteurPge+="</td></tr><tr><td>"+Glob_NavPge[Moteur_ResK2].rep+Glob_NavPge[Moteur_ResK2].nom;
  83. 			MoteurPge+="</td></tr></table><br /><br />";
  84. 			}
  85. 		}
  86. 	}
  87. AffichPge = "";
  88. IfSimple=1;
  89. //création du début de la page
  90. AffichPge += "<html>\n\n<head>\n\t<title>Résultat de la recherche</title>\n\t";
  91. AffichPge += "<script type='text/javascript' src='"+Glob_URL_Scr+"gs_p.js'>var recherche=true;</script>";
  92. AffichPge += "</head>\n\n<body onload='f1();clic();' onunload='f2()' topmargin='0' leftmargin='0' rightmargin='0'>";
  93. AffichPge +=if1()+if3()+if4();
  94.  
  95. AffichPge +="Recherche de \"<b>"+ MoteurTab+"</b>\"<br />sur base d'un index.</td><td class='table' align='right'><div align='right'>";
  96. if (MoteurPge.length >> 0)
  97. {
  98. 	AffichPge +="Affichage d"; 
  99. 	if(MoteurPge.length >> 1)
  100. 		{
  101. 		AffichPge +="es résultats <b>1 - "+Glob_Moteur_ResNbRes+" </b>sur un total de <b>"+Glob_Moteur_ResNbRes+"</b>"; 
  102. 		}
  103. 	else AffichPge +="u résultat ";
  104. }
  105. else AffichPge +="Aucun résultat.";
  106. AffichPge +="<br />Recherche effectuée dans <b>"+Glob_nmaxPge+"</b> pages.";
  107. AffichPge +="</div></td></tr></table><br />";
  108.  
  109. if (MoteurPge.length == 0)
  110. 	{
  111. 	AffichPge += "\n<p class='pgestyle'>Votre recherche ( "+ MoteurTab+" ) ne correspond à aucun résultat.<br /><br /><ul><li class='pgestyle'>Pensez à vérifier l'orthographe des mots.</li><li class='pgestyle'>Essayez de séparer les mots par le signe +.</li><li class='pgestyle'>Essayez d'utliser moins de mots.</li><li class='pgestyle'>Essayez d'utiliser des mots plus généraux.</li></ul><br /></p><form><input type='button' onclick='history.go(-1)' value='Nouvelle Recherche...'></form>";
  112. 	}
  113. else AffichPge +=MoteurPge;
  114.  
  115. /*AffichPge +="\n<div align='center'><h6>"+Glob_Hr1+"<br /><br /><font size='+1'><b>Résultats de la recherche</b></font><br />"+Glob_Hr2+"<br /><br /><br /><font size='-2'>mot(s) clé(s): " + MoteurTab;
  116. AffichPge +="<br /><br />"+Glob_nmaxPge+" pages évaluées.<br />"+Glob_Moteur_ResNbRes+" pages trouvées.</font><br /><br /><br />"+Glob_Hr1+"</h6></div>";
  117. //si au moins une page a été trouvée, page des résultats, puis présentation des résultats.
  118. if (MoteurPge.length >> 0)
  119. 	{AffichPge+="\n<br /><br />Si le nombre de reponses est trop grand, veuillez diminuer le nombre de mots clés.<br /><br /><form><input type='button' onclick='history.go(-1)' value='Nouvelle Recherche...'></form><br /><br />" + MoteurPge + "</center>";}
  120. //si rien trouvé, page pas de résultats
  121. else if (MoteurPge.length == 0)
  122. 	{AffichPge = AffichPge + "\n<br /><br />Aucun résultat pour cette recherche, veuillez réessayer avec d'autres mots clés.<br /><br /><form><input type='button' onclick='history.go(-1)' value='Nouvelle Recherche...'></form>"}
  123. */
  124. document.write(AffichPge);
  125.  
  126. ifc();ifb();
  127. document.write("\n</body>\n</html>");
  128. }

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 19/03/2002, last modified the 31/10/2018
Source of the printed document:https://www.gaudry.be/en/javascript-infobrol.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.

Notes
  1. ↑ HyperText Mark-Up Language : corresponds to « langage de balises hypertexte » en français

  2. ↑ HTML : “HyperText Mark-Up Language” (en français, « langage de balises hypertexte »)

Contents Haut