In questo articolo ci occuperemo di una piccola funzionalità JavaScript molto semplice da utilizzare e da imparare ma utile per chiunque voglia inserire nel proprio sito un modulo di ricerca sui maggiori motori del Web.
Un motore di ricerca vero e proprio necessita di una struttura in grado di contenere i dati relativi ai termini da ricercare, ad una descrizione degli elementi trovati ed ai link associati, ovvero un database.
Il database deve essere interrogato con l'ausilio di un linguaggio di scripting server-side, ad esempio Asp, Php, Jsc, Cgi, oppure altri, ed il programma dedicato alla ricerca deve essere elaborato con lo stesso tipo di linguaggio.
Mi aspetto che il lettore a questo punto si ponga una domanda: "Cosa c'entra tutto questo con JavaScript?". In fin dei conti nulla; il fine di questa premessa verte sulla praticità e sulla versatilità di JavaScript che, con semplici routine associate ad un minimo di fantasia da parte dello sviluppatore, è in grado di agirare questo problema e di "sfruttare" il tipo di tecnologia a cui ho precedentemente accennato per eseguire un'analoga ricerca su un determinato motore.
Insomma, non faremo altro che copiare l'intera QueryString generata da un motore all'eseguimento di una ricerca.
I meno avvezzi, soprattutto in tema di linguaggi, tecnologie e terminologie riguardanti la programmazione Web server-side, potrebbero non comprendere a pieno cos'è una QueryString. Accenniamo in breve a questo argomento.
Cenni sulle QueryString
In pratica una QueryString è l'indirizzo che possiamo leggere nella barra degli indirizzi dopo aver eseguito la ricerca su un qualsiasi motore. È composto da una serie di simboli che non vengono normalmente utilizzati né in un dominio né nei nomi dei file, come ad esempio il punto interrogativo (?) e la 'È commerciale (&).
Questa qui sotto potrebbe essere un esempio di QueryString risultante dalla ricerca con il termine javascript effettuata su di un sito che sfrutta tecnologie server-side:
http://www.server.it/ricerca.asp?cerca=javascript
Perché ho ritenuto importante accennare a questo argomento che nulla ha a che vedere col JavaScript? Perché per realizzare il motore di ricerca che ci siamo riproposti è necessario, come già detto, copiare la QueryString generata da un motore all'atto della ricerca e modificarne alcuni aspetti.
Concettualizzazione del problema
Per creare un semplice esempio, che potrà essere sfruttato sia in quanto tale sia con un riadattamento ad hoc, utilizzeremo la QueryString generata dal motore di HTML.it all'atto dell'esecuzione di una ricerca interna al sito.
La QueryString generata con la ricerca per il termine javascript è questa:
<strong>http://cerca.html.it/cgi-bin/cerca.cgi?gr=off&q=<span style="color:#ba1b0a"><strong>javascript</strong></span></strong>
Ho isolato in rosso la posizione in cui appare il termine che abbiamo deciso di ricercare, si tratta dell'unica parte della QueryString che non tratteremo come stringa ma come una variabile da associare al testo inserito nel modulo di ricerca.
Costruzione del modulo per la ricerca
Nulla di più di un semplice modulo Html con una textbox ed un bottone di ricerca, vediamo il codice:
<div align="center">
<form name="ricerca">
<b>Cerca su HTML.it</b>
<input type="text" name="cerca" size="30">
<input type="button" value="Cerca" onClick="Ricerca()">
</form>
</div>
La funzione Ricerca() associata all'evento onClick del bottone di ricerca, richiama la routine la cui funzionalità è stata in precedenza descritta, andiamo ora ad analizzarla.
Script per l'esecuzione della ricerca
Dopo tanto parlare siamo arrivati al punto clou, lo script per l'esecuzione della ricerca, analizziamo il codice:
<script language="JavaScript">
<!--
function Ricerca() {
var termine = document.ricerca.cerca.value;
location.href = "http://cerca.html.it/cgi-bin/cerca.cgi?gr=off&q=" + <strong>termine</strong>;
}
//-->
</script>
Abbiamo inserito la variabile termine nella posizione in cui viene posizionata la parola chiave per la ricerca. Per aprire la pagina con i risultati in un'altra finestra del browser, sarà sufficiente sostituire la proprietà location.href col metodo window.open().
Vediamo ora come complicare lo script aggiungendo tutti i motori che desideriamo.
Complichiamoci la vita...
... ma rendiamo più funzionale questo tool!!!
Offriamo la possibilità all'utente di scegliere il motore su cui effettuare la ricerca, per rimanere in tema, ipotizziamo di voler aggiungere il motore utilizzato nell'area download di HTML.it e da PRO, effettuando una ricerca per il termine lukeonweb (oui, c'est moi? :-) ) ecco le QueryString:
Download
https://download.html.it/engine.asp?stringa=lukeonweb
PRO
http://pro.html.it/search_articolo.asp?key=lukeonweb
Ovviamente la ricerca non ha prodotto alcun risultato :-)
Per offrire la possibilità di scegliere quale motore utilizzare possiamo utilizzare sia gli option button che una selectbox. In questo articolo affronteremo il secondo caso. Implementiamo il modulo HTML proposto in precedenza con questo codice:
<select name="su">
<option value="html">HTML.it</option>
<option value="download">Download</option>
<option value="pro">PRO</option>
</select>
Per chiarezza ecco il codice completo del modulo risultante dall'implementazione della selectbox:
<div align="center">
<form name="ricerca">
<b>Cerca su </b>
<select name="su">
<option value="html">HTML.it</option>
<option value="download">Download</option>
<option value="pro">PRO</option>
</select>
<b>il termine</b>
<input type="text" name="cerca" size="30">
<input type="button" value="Cerca" onClick="Ricerca()">
</form>
</div>
Modifichiamo di conseguenza il codice JavaScript aggiungendo una serie di istruzioni condizionali if che impostano la ricerca su di un motore più tosto che su un altro in base alla scelta effettuata:
<script language="JavaScript">
<!--
function Ricerca() {
var termine = document.ricerca.cerca.value;
var su = document.ricerca.su.value;
//Effettua la ricerca su HTML.it
if (su == "html") {
location.href = "http://cerca.html.it/cgi-bin/cerca.cgi?gr=off&q=" + termine;
}
//Effettua la ricerca nell'area download di HTML.it
if (su == "download") {
location.href = "https://download.html.it/engine.asp?stringa=" + termine;
}
//Effettua la ricerca su PRO
if (su == "pro") {
location.href = "http://pro.html.it/search_articolo.asp?key=" + termine;
}
}
//-->
</script>
Ricerca sul Web
La versatilità di questo tool in questo modo pensato si evince dalla semplicità con cui possibile riadattare il tutto ed effettuare ricerche su tutti i motori desiderati, costruiti con una qualsivoglia tecnologia server-side, a chi fosse interessato, metto a disposizione le QueryString dei più rinomati ed efficienti motori di ricerca presenti sul Web, effettuando una ricerca per il termine esempio:
Google
http://www.google.it/search?q=esempio&ie=ISO-8859-1&hl=it&lr=
Yahoo
http://it.search.yahoo.com/search/it?p=esempio
MSN
http://search.msn.com/results.asp?RS=CHECKED&FORM=MSNH&v=1&q=esempio
Altavista
http://it.altavista.com/q?pg=q&q=esempio&kl=XX&what=it
Arianna
http://arianna.libero.it/search/abin/search?query=esempio
Virgilio
http://search.virgilio.it/search/cgi/search.cgi?vrs=0&db=v&op=and&qs=esempio&l=XX
Il Trovatore
http://search.iltrovatore.it/cgi-esempio&cs=iso-8859-1
Molti di questi mettono già a disposizione dei Webmaster la possibilità di effettuare ricerche sul proprio motore, offrendo degli script, sarà comunque il caso di chiedere autorizzazione ai vari amministratori, evvisandoli dell'intenzione di servirsi di un programma diverso.
