---

27/12/2002 - Corretto un piccolo bug nella funzione estrai(), conteneva un riferimento alle cartelle UserScripts di JsDir che ora non è più necessario eliminare manualmente.

---

      Se il vostro sito è realizzato in puro HTML, cioè non avete la possibilità di fare scripting lato server e dunque di gestire dei database "veri" ai quali fare riferimento, l'inserimento della possibilità di ricerca dei contenuti del sito è cosa pressoché impossibile. L'unica alternativa in questo caso è affidarvi ad uno dei tanti siti che indicizzano i vostri contenuti e vi forniscono la possibilità di fare delle ricerche sulla base dei dati che sono stati letti. Naturalmente il primo svantaggio è che dovete istruire il "motore" perché rifaccia l'indexing del sito quando voi lo aggiornate.
      JavaScript può venirci in aiuto per realizzare un piccolo motore di ricerca, che non sarà potente e flessibile come le vere ricerche in un database, ma consente comunque di raggiungere il risultato di presentare al nostro utente un elenco di pagine.
      Questo primo script è molto spartano (cerca esattamente il testo indicato) e serve solo per dare un'idea di come procedere, nei prossimi giorni conto di metterne a punto di più sofisticati, per esempio la possibilità di cercare più parole, ed eventualmente di usare anche operatori logici (AND e OR).

      Cominciamo con il nostro database. È una semplice tabella di "n" righe per "m" colonne. Per chi non abbia dimestichezza con un database e la sua struttura è sufficiente pensare ad un foglio di Excel in cui le righe sono i "record" e le colonne sono i "campi" dei nostri record. Il "foglio" lo creiamo con l'istruzione var db=new Array(). Poi creiamo i record (righe) del nostro database con l'istruzione: db[cnt++]=new Array("....","....","....").
      E qui cominciamo ad entrare nel vivo. Inziamo dalla struttura: il mio database di esempio è costituito da alcuni dati tratti dal database (del sito) relativo agli UserScripts, dal quale ho estratto il titolo dello script, la descrizione ed il numero. Com'è intuitivo userò il titolo per identificare l'elemento trovato ed il numero per creare il link. Sulla descrizione effettuiamo la nostra ricerca e la riutilizziamo per creare il link HTML alla pagina. Il nostro database avrà dunque "n" righe (nel mio caso 64) e tre colonne come si vede in questa immagine:

      in cui l'elemento zero degli array corrisponde al titolo, l'elemento uno alla descrizione e l'elemento due al link.
      È importante non lasciare mai vuoti questi tre elementi, e sopratutto fare attenzione ai doppi apici: qui li ho usati come delimitatori di stringa, quindi se ne avete bisogno per i vostri dati usate invece la notazione \" oppure due apici singoli consecutivi.

      Per facilitare l'operazione di inserimento ed eliminazione di record, ho preferito usare un contatore invece di numerare direttamente gli array. Ecco perché invece del consueto db[1]... db[4]... db[xx]... troviamo solo la notazione db[cnt++]. La variabile cnt infatti inizia con il valore zero all'inizio dell'array e viene incrementata automaticamente ad ogni riga. Così se si rendesse necessario eliminare una riga centrale (perché la pagina del sito non esiste più ad esempio) non dovrete preoccuparvi di rinumerare tutto il resto dell'array.
      Per velocità di realizzazione dell'esempio io ho utilizzato la descrizione dello script come campo in cui cercare, voi invece userete delle parole chiave esattamente come se doveste scrivere le keywords nei META tag, questo vi consentirà tra l'altro di raggruppare delle pagine, cioè farle uscire alla richiesta di una particolare parola.

      Finito con l'array veniamo allo script vero e proprio.
      Dato che la soluzione più classica e facile per un sito statico prevede l'uso di frames, nello script di esempio uso appunto due frames orizzontali: in quello di sopra è contenuto il nostro database con lo script di ricerca. I risultati vengono presentati nel frame in basso, che nel vostro caso potrebbe corrispondere al frame principale in cui visualizzate i contenuti.

      Dato che nel frame di sotto scriveremo i risultati con un document.write() all'inzio del file .js ci sono due variabili che contengono il codice HTML "standard" per l'inizio e la fine della schermata. A questo segue l'array e la nostra funzione di estrazione dei dati.
      Alla variabile testo assegnamo la stringa digitata dal visitatore, ed iniziamo la ricerca controllando che la lunghezza della parola sia maggiore di due caratteri. In caso affermativo prepariamo due variabili: "datiestratti" e "contadati". Nella prima andremo a scrivere man mano il codice HTML della pagina di risultato, la seconda la incrementeremo di 1 ogni volta che troveremo una coincidenza.
      Segue il ciclo di estrazione vero e proprio. for (n in db) ci consente di analizzare il nostro array riga per riga (la notazione ha lo stesso effetto della più classica for (n=0;n<db.length;n++) ). Il controllo lo facciamo, l'avrete già notato quando abbiamo valorizzato "testo", usando i caratteri minuscoli, in modo da essere indipendenti dal modo in cui il visitatore chiederà la ricerca. Quel che facciamo è semplicemente controllare con il solito indexOf() se la stringa "testo" è contenuta nel secondo elemento (di indice 1 perché la numerazione comincia da zero) per ogni "n" riga dell'array/database. Se indexOf() restituisce un numero diverso da -1 allora la stringa è presente quindi incrementiamo il contatore ed aggiorniamo la variabile datiestratti scrivendoci dentro il necessario codice HTML che si riduce alle istruzioni necessarie per scrivere tre righe di una tabella: nella prima inseriamo il titolo evidenziato dal tag <B>...</B>, nella seconda inseriamo il link HTML e per testo del link usiamo i primi 100 caratteri della descrizione, la terza riga contiene solo uno spazio e serve solo a separare verticalmente le righe.

      Ovviamente questo è il modo in cui io ho scritto la tabella d'esempio, voi la personalizzerete con colori ed altri testi come più vi aggrada. Tanto per cominciare il link sarà diverso nel vostro caso (nel mio ricalca la URL "standard" degli UserScripts), inoltre io uso il campo "descrizione" sia per la ricerca che per il risultato, voi potreste usare un quarto campo nell'array (aggiungendo una colonna) in cui inserirete le keywords, e farete li dentro la ricerca, riservando la descrizione (secondo campo) solo per il risultato.

      Dopo il ciclo troviamo un controllo che serve a sapere se la ricerca ha avuto esito positivo. Ci basta controllare che la variabile contadati abbia valore maggiore di zero (cioè è stata incrementata nel ciclo), se è così terminiamo la costruzione della pagina: usiamo un'ultima variabile (risultato) in cui concateniamo la stringa "inizio", una riga di tabella (sarà la prima riga) in cui scriviamo il numero di coincidenze trovate, poi aggiungiamo la variabile datiestratti che abbiamo costruito nel ciclo di ricerca, ed infine la "fine" che chude la pagina HTML.
      Se la ricerca ha avuto esito negativo, nella variabile risultato scriviamo semplicemente un messaggio di "Nessun elemento trovato".
      Ed abbiamo praticamente finito. L'else che troviamo subito dopo si riferisce al primo controllo (sul numero di caratteri inseriti per la ricerca) e serve appunto per avvisare il visitatore.

      Le ultime righe dello script non fanno altro che aprire il frame, e scriverci dentro il risultato.



      Buone ricerche! ^_^