Questo trucco funziona solo con MSIE. Dopo aver aperta una finestra di dialogo si immette una stringa nella casella di testo apposita: tutte le occorrenze della stringa, se presente nella pagina, appaiono evidenziate. Al termine viene visualizzato un messaggio con il numero di occorrenze trovato: tale numero può, naturalmente, essere anche nullo.
Se si effettua una nuova ricerca l'evidenziatore cambia colore. Abbiamo scelto cinque colori diversi che eventualmente si ripetono.
Il risultato dello script può essere provato cliccando sul bottone
| <script language=javascript>
Si introduce codice javascript function evidenzia () {
| Dichiarazione della funzione di nome evidenzia () if (document.all) {
| Se il browser è Internet Explorer finestra= window.open('ricerca1.htm','nome','width=400,height=200')
| Viene aperto in una finestra pop up di dimensioni 400 × 200 il file di nome "ricerca1.htm" finestra= window.focus
| La finestra viene aperta in primo piano: se ci sono altre finestre questa viene aperta sopra le altre. finestra.document.close()
| Si comunica al browser che le istruzioni relative all'apertura della finestra sono terminate }
| Parentesi di chiusura della selezione binaria (if) else window.alert('Il tuo browser non supporta questo metodo')
| Qualora il browser dell'utente non sia MSIE, si riceve il messaggio: "Il tuo browser non supporta questo metodo" }
| Parentesi di chiusura della funzione evidenzia() </script>
| Fine script |
Inserire il seguente codice per il bottone , fra i tags <BODY> e </BODY> :
<input type=button name=bo value="Cerca ed evidenzia" OnClick="javascript:evidenzia()">
| <script language=javascript>
Si introduce codice javascript var volte = 0;
| Si inizializza la variabile di nome volte che serve per memorizzare il numero di occorrenze della parola cercata nel documento. var conta = 0;
| Si inizializza la variabile di nome conta che serve per memorizzare il numero di ricerche diverse effettuate e quindi cambiare il colore dell'evidenziatore della stringa. var trovato = false;
| Si inizializza la variabile booleana di nome trovato che diventerà vera qualora la parola cercata si trovi nel documento. var colore= new Array('FF0000', 'FFFF00', '00FFFF','00FF00','FF00FF')
| Si introduce la variabile strutturata colore dove, ordinatamente,sono memorizzati i codici esadecimali dei colori che intendiamo usare per evidenziare le parole. APPROFONDIMENTO SUI COLORI var base='';
| Si inizializza la variabile di nome base che serve per memorizzare l'intervallo di testo per la ricerca. function inizia() { | conta=conta+1 base = opener.document.body.createTextRange(); } Si dichiara la funzione inizia() che crea un intervallo di testo (TextRange) coincidente con tutto il contenuto testuale del corpo del documento dal quale proveniamo (opener) e lo memorizza nella variabile base. La variabile conta, che serve per contare il numero di ricerche effettuato, viene incrementata di 1. function trova() {
| Si introduce la funzione trova if (document.MioForm.testo.value == '') { | alert('Nulla da cercare!'); return; } Se non è stata inserita alcuna stringa della casella di testo del form viene generato il messaggio: "Nulla da cercare!" if (volte==0) { | inizia() } Se volte=0, cioè se la funzione trova è stata attivata per la prima volta, si chiama la funzione inizia do {
| Ciclo a controllo in coda: le azioni contenute nella graffa vengono ripetute finché è vera la condizione posta dopo la parola riservata while APPROFONDIMENTO trovato=base.findText(document.MioForm.testo.value)
| Il metodo find.Text permette di ricercare la stringa chiusa in parentesi. Se questa stringa viene trovata la variabile trovato diventa vera, altrimenti resta falsa come la avevamo posta prima. if (trovato) {
| Se la variabile trovato è vera base.findText(document.MioForm.testo.value);
| Come spiegato prima, l'intervallo di testo viene ora ristretto alla stringa cercata. resto=conta % 5
| Nella variabile resto viene memorizzato il resto della divisione per 5: è questo il numero dei colori che abbiamo previsto. I resti della divisione per 5 variano da 0 a 4. Ricordiamo che il primo elemento di un array in javascript è il numero zero, il secondo il numero uno, e così via. base.pasteHTML('<font style="background-color: #' + colore[resto]+'">'+document.MioForm.testo.value +'</font>');
| Incolla il codice HTML in parentesi nell'intervallo di testo (textRange) di nome base, cioè, in pratica, al posto della stringa cercata. Tale stringa (document.MioForm.testo.value) viene di fatto scritta di nuovo, ma con uno stile diverso. Abbiamo previsto che questa risulti evidenziata, e che il colore di sfondo sia in base al numero di ricerca effettuato. Ad esempio, nel caso della prima ricerca:
volte++;
| la variabile volte viene incrementata di 1 base.moveStart("character", 1); | base.moveEnd("textedit"); L'inizio dell'intervallo di testo viene spostato avanti di un carattere, mentre il termine coincide con il termine dell'intervallo precedente. In questo modo il nuovo intervallo di ricerca varierà fra il carattere subito dopo la stringa trovata e la fine del documento. }
| Parentesi di chiusura della selezione binaria }
| Parentesi di chiusura delle istruzioni da ripetere in un singolo ciclo while (trovato)
| Condizione da verificare per ripetere il ciclo: esso verrà ripetuto fino a quando la variabile trovato sia vera, cioè fino a quando ci sarà stata un'occorrenza della stringa cercata nell'intervallo di testo. if (volte == '0'){ | alert('"' + document.MioForm.testo.value +'" non è stato trovato in questa pagina.'); conta = conta-1 } Se volte è ancora uguale a zero, si riceve l'avviso che la parola cercata non è stata trovata; la variabile conta viene decrementata perché, ai fini del colore per evidenziare le stringhe, è come se non fosse stata fatta alcuna ricerca. else{ | alert('"' + document.MioForm.testo.value+'" è stato trovato '+ volte+' volte in questa pagina.'); Questo else riguarda l'evento: "volte non è zero e trovato è falso". In questo caso viene visualizzato il messaggio che contiene il numero di volte in cui la stringa è stata trovata. volte=0;
| Si pone nuovamente volte uguale a zero per una nuova ricerca } | } Chiusura else; chiusura function </script>
| Fine script. |
©2005 www.webfract.it