Biblioscript.com : Comment créer et utiliser une base de données en JavaScript

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	JavaScript 1.3

Base de données

Base de données simple

	Fonction

		Le but de ce script est créer une petite base de données d'adresses de sites sans le moindre programme qui puisse permettre au visiteur d'effectuer une recherche simple à partir d'un mot-clé et de lui permettre ensuite de se rendre sur le site trouvé en cliquant sur la réponse.

	Principe

		Le JavaScript permet la création et la gestion de 'tableaux de données'. C'est en créant un tableau de ce type et en utilisant les possibilités de recherche du JavaScript que nous ferons cette base de données. Il faudra que vous alimentiez cette base à la main, en ajoutant des données dans le script. Pas très pratique pour une grosse base mais c'est déjà ça ;-))

	Le script

dans la partie <head>

// appel de la fonction principale et formatage de l'après réponse
function validate_form() {

txt = document.form.search.value;

jsi = new makeLinks(linksize);

searchLinks(jsi, txt);

document.write("<hr>");

document.write("<a href='nom_du_fichier_lui_meme.html'>Retour</a> à la recherche.<br><br> ");

}

function makeEntry (){

this.Name="";

this.URL = "";

this.Desc = "";

this.Category = "";

this.Target = "";

return this;

}

function makeArray(n) {

this.length = n;

for (var k = 1; k <= n; k++) {

this[k] = "";

}

return this;

}

// Création du tableau de la base
function makeLinks(size) {

this.length = size;

for (var r=1; r<= size; r++) {

this[r] = new makeEntry();

this[r].Name = namesArray[r];

this[r].URL = urlsArray[r];

this[r].Desc = descArray[r];

this[r].Category = categoryArray[r];

this[r].Target = targetArray[r];

}

return this;

}

// Description et indexation du tableau de la base
var linksize=0
datesArray = new makeArray(linksize);
namesArray = new makeArray(linksize);
urlsArray = new makeArray(linksize);
descArray = new makeArray(linksize);
categoryArray = new makeArray(linksize);
targetArray = new makeArray(linksize);

// Initialisation de la base
var arraycount=0

// Début des données
arraycount +=1
urlsArray[arraycount] = "http://www.club-internet.fr"
namesArray[arraycount] = "Club Internet"
descArray[arraycount] = "provider fai isp fournisseur"
categoryArray[arraycount] = "vendeur"
targetArray[arraycount] = "target=_top"

arraycount +=1
urlsArray[arraycount] = "http://www.wanadoo.fr"
namesArray[arraycount] = "Wanadoo"
descArray[arraycount] = "provider fai isp fournisseur france telecom"
categoryArray[arraycount] = ""
targetArray[arraycount] = "target=_top"

// Taille du tableau
linksize = arraycount;

// La fonction de recherche elle-même
function searchLinks(links, keyword){

// la ligne d'en-tête de la réponse à la base de données

document.write("<u>Résultat de la recherche sur <strong>" + keyword + "</strong> :</u><br><br>");

for (var q=1; q<=links.length; q++) {

// Pour chercher sur un élément du tableau, il faut créer un paragraphe comme suit avec le nom de l'élément, ici : URL, ensuite : Desc...

if (links[q].URL.toLowerCase().indexOf(keyword) != -1){

document.write("<a href=" + links[q].URL +" " + links[q].Target + ">" + links[q].Name + "</a> ");

document.write( links[q].Category + "<br><br>");

continue;

}

if (links[q].Desc.toLowerCase().indexOf(keyword) != -1) {

document.write("<a href=" + links[q].URL +" " + links[q].Target + ">" + links[q].Name + "</a> ");

document.write( links[q].Category + "

");

continue;

}

if (links[q].Name.toLowerCase().indexOf(keyword) != -1) {

document.write("<a href=" + links[q].URL +" " + links[q].Target + ">" + links[q].Name + "</a> ");

document.write( links[q].Category + "
");

continue;

}

}
</script>

dans la partie <body>

<form name="form">
Entrez l'élément recherché...
<input type="text" size="20" name="search">
<input type="button" name="submit" value="Rechercher" onClick="validate_form()">
</form>

	Démonstration


	Voir la démonstration

	Téléchargement

Ce script est disponible en deux versions :

le script est intégré à la page où il agit,

le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.

Script intégré :

base_base.zip
2 Ko

Script séparé :

base_base2.zip
2 Ko


	Recherche


	CSS 2


	DHTML


	HTML 4


	Références


	Aide générale


	statistiques