Les scripts du site

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 :

<SCRIPT LANGUAGE="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: :

<SCRIPT LANGUAGE="javascript">
<!--
nom_de_fonction(parametres_de_fonction);
//-->
</SCRIPT>

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...

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

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).

//js
//haut de page
function h(){
    var topPage='<a name="h"></a>';
    topPage+='<TABLE width="100%" height="40" border="0" cellpadding="0" cellspacing="0"><TR><td valign="top">'+affMh()+'</TD>';
    topPage+='<TD colspan="2"><DIV align="center"><H1>Chapitre '+globNumChap+': '+globIndChap[globNumChap]+'</H1></DIV></TD>';
    topPage+='<TD valign="top">'+dirPge_1()+'</TD></TR>';
    topPage+='<TR><TD width="25%"><DIV align="center">'+affpre('aph')+'</DIV></TD>';
    topPage+='<TD colspan="2"><DIV align="center"><H3>'+globNavPge[npge].titre+'</H3></DIV></TD>';
    topPage+='<TD width="25%"><DIV align="center">'+affsui('ash')+'</DIV></TD></TR>';
    topPage+='<TR><TD colspan="4">'+globHr1+globHr2;+'</TD></TR>';
    topPage+='</TABLE>';
 
    //document.write(topPage); 
}
 
//bouton page précédente
function affpre(affpre_in){
	var affprepge=' ';
	switch (globNavPge[npge].pre){
		//pas pge pre
		case -1:
			//mode gr (pas besoin else: si pas mode gr, pas affichage btn inactif!)
			if(Lit_Cookie("globgr")==oui){
				affprepge+='<img src ="'+globURL_ImgFond+'/nav/vide.gif" width="120" height="31" alt="Ce bouton est inactif.">';
			}
			break;
		case -2://pre == history-1
			if(Lit_Cookie("globgr")==oui){
				affprepge+='<a onClick="retour();" onMouseOut="remetimg()" onMouseOver="changeimg("'+affpre_in+'","","';
				affprepge+=globURL_ImgFond+'/nav/pre_s.gif",1)">';
				affprepge+='<img border ="0" name="'+affpre_in+'" src="'+globURL_ImgFond+'/nav/pre.gif" width="120" height="31">';
				affprepge+='</a>';
			}else{
				affprepge+='Page précédente:<br><a href="javascript:retour()">Page précédente</a>';
			} 
			break;
		default:
			if(Lit_Cookie("globgr")==non){
				affprepge+='Page précédente:<br>';
			}
			affprepge+='<script language="JavaScript">';
			affprepge+='BtnActif("'+affpre_in+'",2,globNavPge[npge].pre,-1,-1,globNavPge[npge].desc)';
			affprepge+='</script>';
			break;
	}
	return(affprepge);
}
 
//bouton page suivante
function affsui(affsui_in){
	var affsuipge='';
	if (globNavPge[npge].sui == -1){
		affsuipge+='<img src ="'+globURL_ImgFond+'/nav/vide.gif" width="120" height="31" alt="Ce bouton est inactif.">';
	}else{
		if (Lit_Cookie('globgr')==non) {
			affsuipge+='Page suivante:<br>';
		}
		affsuipge+='<script language="JavaScript">';
		affsuipge+='BtnActif("'+affsui_in+'",3,globNavPge[npge].sui,-1,-1,globNavPge[npge].desc)';
		affsuipge+='</script>';
	}
	return(affsuipge);
}

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).

function bas(){
    var BasPge=Glob_Hr1+'<BR><BR><TABLE width="100%" border="0" cellpadding="0" cellspacing="0">';
    BasPge+='<TR>';
    BasPge+='<TD width="31%" valign="top"><DIV align="center">'+affpre("apb")+'</DIV></TD>';
    BasPge+='<TD width="38%"><DIV align="center"><script language="JavaScript">BtnActif("hb",1,-1,"h",-1,"Haut de la page.")</script></DIV></TD>';
    BasPge+='<TD width="31%" valign="bottom"><DIV align="center">'+affsui("asb")+'</DIV></TD>';
    BasPge+='</TR></TABLE>';
 
    document.write(BasPge);
 
    statx();
}

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...

//gestion de boutons
/*
BtAId=Identifiant pour changer l'image avec onMouseOver.
BtnAIndImg=Index dans le tableau des images.
BtnAIndPge=Index de la page à joindre dans le tableau des pages.-1 si inactif.
BtnADsPge=Balise à joindre sur la page.-1 si inactif.
BtnAAct=Action à entreprendre, ou dest sur la page.-1 si inactif.
BtnAInfo=Balise alt si image, affichage txt si mode rapide. Si (BtnAIndPge!=-1)&&BtnAInfo=='t', target=top
*/
function BtnActif(BtAId,BtnAIndImg,BtnAIndPge,BtnADsPge,BtnAAct,BtnAInfo)
{
/*if (Lit_Cookie("Glob_nv")==oui){var BtnA_Target='_pge';} else {*/var BtnA_Target='_self';//}
if (Lit_Cookie("Glob_gr")==oui)//mode normal, boutons img 
	{	
	if (BtnAAct!=-1)
		{
		if (BtnAAct=='t')//pas de javascript, seulement changement de frameset
			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="_top"');}
		else//javascript
			{document.writeln('<a onClick="'+BtnAAct+'" onMouseOver="music(5);" target="'+BtnA_Target+'"');}
		}
	else//bouton lien traditionnel
		{
		if (btnaindpge==-1)//ancre sur la page en cours
			{document.writeln('<a href="#'+BtnADsPge+'" target="'+BtnA_Target+'"');}
		else//pointe vers ancre d"une autre page
			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="'+BtnA_Target+'"');}
		}
	document.writeln('onMouseOver="music(5);changeimg("img'+BtAId+'","","'+Glob_Img[BtnAIndImg].s+'",1)" onMouseOut="remetimg()">');
	document.writeln('<img name="img'+BtAId+'" border="0" src="'+Glob_Img[BtnAIndImg].n+'" width="'+Glob_Img[BtnAIndImg].l+'" height="'+Glob_Img[BtnAIndImg].h+'"');
 
	if ((btnaact!='t')&&(btnaindpge!=-1))
		{document.writeln(' alt="'+Glob_NavPge[BtnAIndPge].desc+'"></a>');}
	else//desc javascript
		{document.writeln(' alt="'+BtnAInfo+'"></a>');}
	}
else //mode rapide, boutons style
	{
	if (BtnAAct!=-1)
		{
		if (BtnAAct=='t')//pas de javascript, seulement changement de frameset
			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].rep+Glob_NavPge[BtnAIndPge].nom+'" target="_top">'+Glob_NavPge[BtnAIndPge].titre+'</a><br>');}
		else//javascript
			//{document.writeln('<a href="javascript:'+BtnAAct+'">'+BtnAInfo+'</a><br>');}
			{document.writeln('<a href="#" onClick='+BtnAAct+'>'+BtnAInfo+'</a><br>');}
			//<a onClick='+BtnAAct+' target="_self"');
		}
	else//pointe vers page
		if (btnaindpge==-1)//ancre sur la page en cours
			{document.writeln('<a href="#'+BtnADsPge+'" target="'+BtnA_Target+'">-&lt;]'+BtnAInfo+'[&gt;-</a><br>');}
		else
			{document.writeln('<a href="'+Glob_NavPge[BtnAIndPge].adr+'">'+Glob_NavPge[BtnAIndPge].titre+'</a><br>');}
	}
}
//fin btnactif

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.

var Glob_Moteur_ResNbRes=new Number(0);//nbre de pages trouvées
 
function motphp()
{
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.")
else 
	document.forms["FormCh"].submit();
}
 
function moteur()
{
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.")
else 
	{
	MoteurTab = new Array();//prépare tableau pour la future chaîne de mots clés à chercher
	MoteurPge = "";
	Moteur_prepare();
	}
}
 
function Moteur_prepare()
{
//début garniture
Moteur_prepCh = new String();//prépare tableau pour les mots à chercher
MoteurTab = document.FormCh.saisie.value.split("+");//les mots saisis dans le formulaire sont classés dans le tableau
for(Moteur_prepK=0;Moteur_prepK<MoteurTab.length;Moteur_prepK++)//tableau.length renvoit le nbre de mots introduits dans le tableau
	{
	if (MoteurTab[Moteur_prepK].length > 1)//si le mot à plus d'une lettre
		{
		//toLowerCase() pour forcer les majuscules en minuscules
		Moteur_prepCh = MoteurTab[Moteur_prepK].toLowerCase(); //la var Moteur_prepCh recupère le mot clé de l'index i
		Moteur_Cmp(Moteur_prepCh); //le mot clé est soumis à la fonction Moteur_Cmp()
		}
	}
//fin garniture
Moteur_c&oelig;ur();//recherche proprement dite et affichage
}
 
function Moteur_Cmp(Moteur_ChchMot)//récupération d'un mot clé
{
for (Moteur_ChchK=1;Moteur_ChchK<Glob_nmaxPge;Moteur_ChchK++)//passe toutes les pges
	{
 
	document.FormCh.resultat.value = "";
	document.FormCh.resultat.value = Glob_NomCle[Moteur_ChchK];//mots clés de la pge
	Moteur_ChchTab = document.FormCh.resultat.value.split("+");//tableau des mots de la pge
	document.FormCh.resultat.value = "";
	for (m=0;m<Moteur_ChchTab.length;m++)//évaluation du premier mot au dernier
		{
		Moteur_ChchTemp = Moteur_ChchTab[m]; //le mot est stocké dans la var Moteur_ChchTemp
		if ((Moteur_ChchMot == Moteur_ChchTemp.toLowerCase())||
				(Moteur_ChchMot == (Moteur_ChchTemp.toLowerCase()+"s")))//mot trouvé ok
			{
			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)
			}	
		}
	}
}
function Moteur_c&oelig;ur()
{
Moteur_ResNmaxOcc = 0;
var MoteurPge="<br>";		
for (Moteur_ResK1=1;Moteur_ResK1<Glob_nmaxPge;Moteur_ResK1++)//passe pges
	{
	//Moteur_ResNmaxOcc = index de la pge qui a le > nbre d'occurences
	if (Glob_OccurCle[Moteur_ResK1]>Moteur_ResNmaxOcc) {Moteur_ResNmaxOcc = Glob_OccurCle[Moteur_ResK1];}
	}
 
for (Moteur_ResNmaxOcc;Moteur_ResNmaxOcc>0;Moteur_ResNmaxOcc--)//du > nbre occurences au <
	{
	for (Moteur_ResK2=1;Moteur_ResK2<Glob_nmaxPge;Moteur_ResK2++)
		{
		//passe pges du > nbre occurences au <
		if (Glob_OccurCle[Moteur_ResK2] == Moteur_ResNmaxOcc)
			{
			Glob_Moteur_ResNbRes++;
			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>";
			MoteurPge+="<TR><TD>"+Moteur_ResNmaxOcc;
			if(Moteur_ResNmaxOcc>1){MoteurPge+=" mots cl&eacute;s";}else {MoteurPge+=" mot cl&eacute;";}MoteurPge+=" pour la page.";
			MoteurPge+="<p><i>"+Glob_NavPge[Moteur_ResK2].desc+"</i></p>";
			MoteurPge+="<p align='right'>Date de création : "+Glob_NavPge[Moteur_ResK2].D_Crea+"</p>";
			MoteurPge+="</TD></TR><TR><TD>"+Glob_NavPge[Moteur_ResK2].rep+Glob_NavPge[Moteur_ResK2].nom;
			MoteurPge+="</TD></TR></TABLE><BR><BR>";
			}
		}
	}
AffichPge = "";
IfSimple=1;
//création du début de la page
AffichPge += "<HTML>\n\n<HEAD>\n\t<TITLE>R&eacute;sultat de la recherche</TITLE>\n\t";
AffichPge += "<script language='javascript' src='"+Glob_URL_Scr+"gs_p.js'>var recherche=true;</script>";
AffichPge += "</HEAD>\n\n<BODY onload='f1();clic();' onunload='f2()' topmargin='0' leftmargin='0' rightmargin='0'>";
AffichPge +=if1()+if3()+if4();
 
AffichPge +="Recherche de \"<b>"+ MoteurTab+"</b>\"<BR>sur base d'un index.</TD><TD class='table' align='right'><DIV align='right'>";
if (MoteurPge.length >> 0)
{
	AffichPge +="Affichage d"; 
	if(MoteurPge.length >> 1)
		{
		AffichPge +="es résultats <b>1 - "+Glob_Moteur_ResNbRes+" </b>sur un total de <b>"+Glob_Moteur_ResNbRes+"</b>"; 
		}
	else AffichPge +="u résultat ";
}
else AffichPge +="Aucun résultat.";
AffichPge +="<BR>Recherche effectuée dans <b>"+Glob_nmaxPge+"</b> pages.";
AffichPge +="</DIV></TD></TR></TABLE><br>";
 
if (MoteurPge.length == 0)
	{
	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>";
	}
else AffichPge +=MoteurPge;
 
/*AffichPge +="\n<DIV align='center'><H6>"+Glob_Hr1+"<br><br><font size='+1'><b>R&eacute;sultats de la recherche</b></font><br>"+Glob_Hr2+"<br><br><br><font size='-2'>mot(s) clé(s): " + MoteurTab;
AffichPge +="<br><br>"+Glob_nmaxPge+" pages évaluées.<br>"+Glob_Moteur_ResNbRes+" pages trouvées.</font><br><br><br>"+Glob_Hr1+"</H6></DIV>";
//si au moins une page a été trouvée, page des résultats, puis présentation des résultats.
if (MoteurPge.length >> 0)
	{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>";}
//si rien trouvé, page pas de résultats
else if (MoteurPge.length == 0)
	{AffichPge = AffichPge + "\n<br><br>Aucun r&eacute;sultat pour cette recherche, veuillez r&eacute;essayer avec d'autres mots clés.<br><br><form><input type='button' onclick='history.go(-1)' value='Nouvelle Recherche...'></form>"}
*/
document.write(AffichPge);
 
ifc();ifb();
document.write("\n</BODY>\n</HTML>");
}

<- Insérer un script Exécution ->

Réseaux sociaux

|Plus d'options...

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

Nuage de mots clés

8 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

Notes

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

Historique et modifications de la page

Samedi 03 Juillet 2010, 12:30 : Passage vers la nouvelle interface du site.
Ajout d'un avertissement en début de page.

Structure du document

Les scripts du site
Réseaux sociaux
Nuage de mots clés
- Avertissement :
Notes
Historique et modifications de la page

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html

Aucun commentaire pour cette page

tection. Enregistrement IDDN n° 5329-187
Document créé le 19/03/02 00:00, dernière modification le Vendredi 17 Juin 2011, 11:12
Source du document imprimé : http://www.gaudry.be/javascript-infobrol.html Document affiché 9 fois ce mois de Février.
St.Gaudry©07.01.02