Javascript: un motore di ricerca


Ora vediamo un semplice motore di ricerca. Puoi costruire un motore di ricerca per le tue pagine web!

Digita una parola da ricercare (questo e' un esempio, percio' devi digitare 'javascript'):

E questa e' la pagina HTML:

<html><head><title> JavaScript search engine</title>
<SCRIPT language="JavaScript">

<!-- // Please, feel free to copy, paste and use this script...
// This script was written by Wowarea: <http://www.wowarea.com>
// Begin the script!

// variables

var items_found=0;
var rowsdb=2; // numero di righe (DATABASE)
var colsdb=3; // numero di colonne (DATABASE)
var rowsres=100; // numero di righe (RESULT)
var colsres=2; // numero di colonne (RESULT)
var numkeys=1; // numero massimo di parole per ricerca

// costruisce un oggetto Array inizializzato a spazi
// (questa array e' il tuo DATABASE)

celldb=new Array(rowsdb)
for (i=0; i<=rowsdb; i++){celldb[i]=new Array(colsdb)
for (j=0;j<=colsdb; j++) {celldb[i][j]=" "}

}

// costruisce un oggetto Array inizializzato a spazi
// (questa array conterra' le voci trovate; RESULT)

cellres=new Array(rowsres);
for (i=0; i<=rowsres; i++){cellres[i]=new Array(colsres);
for (j=0;j<=colsres; j++) {cellres[i][j]=" "}
}

//------------------- *** D A T A B A S E (inizio)*** ---------------------


celldb[0][0]="javascript";
celldb[0][1]="Javascript course";
celldb[0][2]="javasc.htm";

celldb[1][0]="any keyword";
celldb[1][1]="title of page";
celldb[1][2]="url of page";


//------------------- *** D A T A B A S E (fine)*** -----------------------

// visualizza i risultati

function display_result(items_found) {
mywindow=window.open("","help","toolbar=0,location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=1,copyhistory=0,width=500,height=255,screenX=200,screenY=100");
mywindow.document.write("<HTML><HEAD>");
mywindow.document.write("<TITLE>Help</TITLE>");
mywindow.document.write('</HEAD><BODY BGCOLOR=000000 TEXT=54FF9F link="#F0F0F0">');
mywindow.document.write("<center>Items found: " + items_found + "</center><br><hr>");
items_found--;
for (i=0;i<=rowsres;i++){
mywindow.document.write('Title: ' + '<a href=' + '"' + cellres[i][1] +'"' + '>'+
cellres[i][0] + "</a><br>");
if (i==items_found){i=rowsres;i++};
};
mywindow.document.write("<hr><center><FORM><INPUT TYPE='button' VALUE='Close' onClick='window.close()'></FORM>");
mywindow.document.write("</CENTER>");
mywindow.document.write("</BODY></HTML>");
}
//search the DATABASE array

function search_db(key1)
{key1=key1.toLowerCase();
var items_found=0;
for (i=0;i<rowsdb;i++)
{if (celldb[i][0]==key1)
{cellres[items_found][0]=celldb[i][1];
cellres[items_found][1]=celldb[i][2];
items_found++;}
}
if (items_found==0)
{alert("Spiacente, nessuna voce soddisfa la ricerca...")}
else
{display_result(items_found)};
}

// End -->
</SCRIPT>
</head>
<body>Digita la parola che vuoi ricercare:
<form>
<input type="text" name="text1" value"" size=30>
<input type="button" value="Cerca"onClick=" search_db(text1.value)" >
</form>
</body>
</html>

Come funziona?

Bene:

// e' un commento.

Var significa variabile: var items_found=0; per esempio, definisce una variabile di nome 'items_found', ed assegna a questa variabile il valore '0'.

celldb=new Array(rowsdb)
for (i=0; i<=rowsdb; i++){celldb[i]=new Array(colsdb)
for (j=0;j<=colsdb; j++) {celldb[i][j]=" "}

Tramite le istruzioni qui sopra, stai definendo un oggetto di tipo Array. Infatti, c' e' un nuovo oggetto Array chiamato celldb, che e' lungo rowsdb (in questo esempio il valore di rowsdb e' '2'). Ogni riga di questa Array contiene un altro oggetto Array:

celldb[i] = new Array(colsdb). In altre parole questa e' una tabella a 2 dimensioni. Tramite il loop for definisci l' array e la inizializzi a spazi. Comunque se non capisci bene queste istruzioni, potresti scrivere la stessa cosa in questo modo:

celldb=new Array(2)
celldb[0]=new Array(3)
celldb[1]=new Array(3)

Cosi' definisci l' array. Ora devi inizializzarla. Cosi':

celldb[0][0]=" ";
celldb[0][1]=" ";
celldb[0][2]=" ";
celldb[1][0]=" ";
celldb[1][1]=" ";
celldb[1][2]=" ";

Infatti stai definendo un oggetto Array chiamato celldb che e' lungo 2 caratteri: "12". Poi stabilisci che il primo elemento dell' array (celldb[0]) e' un oggetto Array a sua volta, lungo 3 caratteri; infatti: celldb[0]= new Array(3). Infine stabilisci che il secondo elemento dell' array (celldb[1]) e' un' array lunga 3 caratteri: celldb[1]= new Array(3).

Le ultime istruzioni sono utili per inizializzare l' array a 2 dimensioni. Nota come il primo elemento dell' array sia: element[0] e non element[1] (che e' infatti il secondo elemento).

key1=key1.toLowerCase()

toLowerCase() e' una funzione per le stringhe: trasforma qualsiasi carattere contenuto in una stringa nello stesso carattere, ma se e' maiuscolo, lo trasforma in minuscolo. Percio', nell' istruzione sopra, stai dicendo: trasforma qualsiasi carattere della stringa 'key1' nello stesso carattere minuscolo, poi metti la stringa all' interno di una variabile. Come puoi notare, non e' necessario definire una variabile: ogni volta che usi una variabile, Javascript la definisce automaticamente e dinamicamente in base al suo contenuto.

cellres[items_found][0]=celldb[i][1];

Tramite l' istruzione sopra, salvi l' url della pagina in un' altra array. Poi leggerai l' array e mostrerai gli elementi (i risultati della ricerca) all' interno di una finestra.

Beh, non ho spiegato tutto lo script, perche' penso sia piu' facile provare che cercare di capire...Percio', provalo e cambia qualcosa qui e li'...Buona fortuna!


 

      Home  Pag. prec.         Chi siamo?  Scrivici!

Copyright © 1998-2005 Wowarea