Effetto marche cioè il testo vi si muove in automatico
e che sia cliccabbile
<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()"> ...</marquee>
script che ricerchi una parola nella pagina.htm che si sta leggendo senza usare il trova del lettore
PASSO UNO
Preparare il seguente codice javascript, a inserire fra i tags <HEAD> ed </HEAD> :
<script language=javascript> Si introduce codice javascript
function cerca () { Dichiarazione della funzione di nome cerca()
if (document.all) { Se il browser è Internet Explorer
finestra= window.open('ricerca.htm','nome','width=400,height=200') Viene aperto in una finestra pop up di dimensioni 400 à— 200 il file di nome "ricerca.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 if(document.getElementById) { Altrimenti se il browser è Netscape, Mozilla o FireFox
self.find() Viene attivato il metodo che apre la finestra di ricerca propria di questi browsers
} Parentesi di chiusura di else if
else window.alert('Il tuo browser non supporta questo metodo') Qualora il browser dell'utente non riconosca nessuno dei casi previsti, si riceve il messaggio: "Il tuo browser non supporta questo metodo"
} Parentesi di chiusura della funzione cerca()
</script> Fine script
PASSO DUE
Inserire il seguente codice per il bottone , fra i tags <BODY> e </BODY> :
<input type=button name=bo value="Cerca in questa pagina" OnClick="javascript:cerca()">
PASSO TRE
Preparare il file per trovare le parole e salvarlo con il nome ricerca.htm.
Fra i tags <HEAD> ed </HEAD> di questo file inserire il seguente codice:
<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 trovato = false; Si inizializza la variabile booleana di nome trovato che diventerà vera qualora la parola cercata si trovi nel documento.
var base=''; Si inizializza la variabile di nome base che serve per memorizzare l'intervallo di testo per la ricerca.
function inizia() {
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.
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
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.
Nel momento in cui si usa il metodo find.Text, l'intervallo di testo, che inizialmente avevamo esteso a tutto il documento, automaticamente si restringe alla sola stringa cercata.
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.
base.select(); La stringa appare selezionata
base.scrollIntoView(); La stringa trovata viene visualizzata all'inizio o alla base della pagina, e quindi il testo viene fatto scorrere. In parentesi puಠessere aggiunta una variabile booleana che se vera, visualizza la parola all'inizio della pagina, se falsa, alla base. Di default la parola viene visualizzata nella parte alta della pagina.
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
else { altrimenti (la variabile trovato è falsa)
if (volte == '0') alert('"' + document.MioForm.testo.value +'" non è stato trovato in questa pagina.'); Se volte è ancora uguale a zero, si riceve l'avviso che la parola cercata non è stata trovata
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 function
</script> Fine script.
PASSO QUATTRO
Sempre nel file ricerca.htm inserire il seguente codice, fra i tags <BODY> e </BODY> :
<form name="MioForm">
<input type="text" name="testo">
<input type="button" value="TROVA" onClick="trova()">
</form>
jukebox che funziona in una finestra pop up
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function suona(brano)
{
var lista='<embed src="http://www.webfract.it/GUIDA/' + brano + '" hidden=true loop=true autostart=true volume=70>';
if(document.all)
{
document.all('musica').innerHTML=lista;
}
else if(document.getElementById){
document.getElementById("musica").innerHTML = lista
}
else {
alert("il tuo browser non supporta questo metodo")
}
}
</script>
</head>
<body bgcolor="#f1f1a1"><span id="musica"></span><p align=center><table border=1 width=107>
<tr><td>
<img src="http://www.webfract.it/GUIDA/jukebox.jpg" width=107 height=63>
<tr><td><p align=center><b>SCEGLI<form name="mioForm"><select name="elenco" onChange="suona(window.document.mioForm.elenco.options[selectedIndex].value)">
<option selected value="none"> Muto
<option value="rock.mid"> Rock
<option value="GMASOCK.MID"> Gmasock
<option value="anno.mid"> Anno
<option value="jamesbond.mid"> Jamesbond
<option value="demo.mp3"> Demo.mp3
</select>
</form>
</table></p>
</body>
</html>
animazione in java in cui il testo compare come se scritto "a macchina"
Passo uno
Prepariamo il messaggio ed inseriamolo in uno span al quale dovremo dare obbligatoriamente un nome, mediante il seguente codice:
<span id="testo"> Semplice messaggio con effetto macchina da scrivere <br> Scritto da Eliana Argenti e Tommaso Bientinesi.... (scriviamo ciಠche vogliamo)...</span>
Noi identifichiamo lo span con "testo". E' molto importante ricordare il nome perchà© ad esso faremo riferimento nel codice del programma.
Uno Span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo nella posizione stabilita dagli attributi LEFT (distanza dal lato sinistro dello schermo) e TOP (distanza dal lato superiore). All'interno dei tags <span> e </span> puಠessere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
Poichà© Netscape non riconosce gli spans, ed usa invece i layers, noi non abbiamo inserito alcun attributo, ma abbiamo inserito lo span stesso all'interno di una tabella.
Passo due
Inserire, fra i tags <HEAD> ed </HEAD> il seguente codice javascript:
<script language="JavaScript"> Dichiarazione del fatto che si sta inserendo un codice JavaScript
var attesa = 120; Variabile dove memorizzare il tempo di pausa in millisecondi
var messaggio='Semplice messaggio con effetto macchina da scrivere.
Scritto da Eliana Argenti e Tommaso Bientinesi....'; Variabile dove memorizzare il testo da visualizzare con l'effetto macchina da scrivere. Notare che si tratta dello stesso messaggio che avevamo inserito nello span per fare in modo che, se per qualche motivo il codice non funzionasse, sia comunque possibile visualizzarlo interamente. NOTARE GLI APICI CHE RACCHIUDONO IL TESTO
var i=-1; Variabile che funge da contatore per i caratteri della stringa. Viene inizializzata uguale a -1 per il motivo che vedremo in seguito
var cchar =""; Variabile dove memorizzare il singolo carattere del testo
var visibile=""; Variabile dove memorizzare dinamicamente il contenuto del messaggio che si viene formando
function vai() { Dichiarazione della funzione che ci permette di ottenere il risultato.
if (i < messaggio.length){ Se i è minore della lunghezza del messaggio allora...
i++ La i viene incrementata di 1. Poichè il suo valore iniziale era stato posto a -1, nel primo passaggio assume il valore 0 che rappresenta, per JavaScript, la posizione del primo carattere di una stringa.
cchar = messaggio.substr(i, 1); Viene memorizzato nella variabile cchar il carattere che si trova nella posizione i
visibile = visibile + cchar; La stringa da visualizzare viene incrementata del carattere copiato nell'istruzione precedente
setTimeout("vai()", attesa); La funzione vai() viene richiamata ricorsivamente dopo una pausa dei millisecondi memorizzati nella variabile attesa (noi abbiamo scelto 120 millisecondi)
if(document.all.testo) document.all.testo.innerHTML = visibile; NOTA BENE: l'istruzione va tutta in una riga. Permette la visualizzazione sullo schermo del testo del messaggio senza tag (come ad esempio <br>). I tag saranno interpretati come codice e correttamente visualizzati. Notare poi come, per la visualizzazione, sia necessario fare riferimento a testo, che è il nome dello span.
} Parentesi di chiusura della selezione binaria (cioè è stata raggiunta la fine del messaggio)
else { Altrimenti (si danno qui le istruzioni da seguire quando il messaggio è terminato)
return false Termina la funzione
} Chiusura di else
} Fine funzione
</script> Fine script.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.
Passo tre
Ora non resta che cambiare così il tag <body>:
<body onload="vai();">
e che sia cliccabbile
<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()"> ...</marquee>
script che ricerchi una parola nella pagina.htm che si sta leggendo senza usare il trova del lettore
PASSO UNO
Preparare il seguente codice javascript, a inserire fra i tags <HEAD> ed </HEAD> :
<script language=javascript> Si introduce codice javascript
function cerca () { Dichiarazione della funzione di nome cerca()
if (document.all) { Se il browser è Internet Explorer
finestra= window.open('ricerca.htm','nome','width=400,height=200') Viene aperto in una finestra pop up di dimensioni 400 à— 200 il file di nome "ricerca.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 if(document.getElementById) { Altrimenti se il browser è Netscape, Mozilla o FireFox
self.find() Viene attivato il metodo che apre la finestra di ricerca propria di questi browsers
} Parentesi di chiusura di else if
else window.alert('Il tuo browser non supporta questo metodo') Qualora il browser dell'utente non riconosca nessuno dei casi previsti, si riceve il messaggio: "Il tuo browser non supporta questo metodo"
} Parentesi di chiusura della funzione cerca()
</script> Fine script
PASSO DUE
Inserire il seguente codice per il bottone , fra i tags <BODY> e </BODY> :
<input type=button name=bo value="Cerca in questa pagina" OnClick="javascript:cerca()">
PASSO TRE
Preparare il file per trovare le parole e salvarlo con il nome ricerca.htm.
Fra i tags <HEAD> ed </HEAD> di questo file inserire il seguente codice:
<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 trovato = false; Si inizializza la variabile booleana di nome trovato che diventerà vera qualora la parola cercata si trovi nel documento.
var base=''; Si inizializza la variabile di nome base che serve per memorizzare l'intervallo di testo per la ricerca.
function inizia() {
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.
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
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.
Nel momento in cui si usa il metodo find.Text, l'intervallo di testo, che inizialmente avevamo esteso a tutto il documento, automaticamente si restringe alla sola stringa cercata.
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.
base.select(); La stringa appare selezionata
base.scrollIntoView(); La stringa trovata viene visualizzata all'inizio o alla base della pagina, e quindi il testo viene fatto scorrere. In parentesi puಠessere aggiunta una variabile booleana che se vera, visualizza la parola all'inizio della pagina, se falsa, alla base. Di default la parola viene visualizzata nella parte alta della pagina.
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
else { altrimenti (la variabile trovato è falsa)
if (volte == '0') alert('"' + document.MioForm.testo.value +'" non è stato trovato in questa pagina.'); Se volte è ancora uguale a zero, si riceve l'avviso che la parola cercata non è stata trovata
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 function
</script> Fine script.
PASSO QUATTRO
Sempre nel file ricerca.htm inserire il seguente codice, fra i tags <BODY> e </BODY> :
<form name="MioForm">
<input type="text" name="testo">
<input type="button" value="TROVA" onClick="trova()">
</form>
jukebox che funziona in una finestra pop up
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function suona(brano)
{
var lista='<embed src="http://www.webfract.it/GUIDA/' + brano + '" hidden=true loop=true autostart=true volume=70>';
if(document.all)
{
document.all('musica').innerHTML=lista;
}
else if(document.getElementById){
document.getElementById("musica").innerHTML = lista
}
else {
alert("il tuo browser non supporta questo metodo")
}
}
</script>
</head>
<body bgcolor="#f1f1a1"><span id="musica"></span><p align=center><table border=1 width=107>
<tr><td>
<img src="http://www.webfract.it/GUIDA/jukebox.jpg" width=107 height=63>
<tr><td><p align=center><b>SCEGLI<form name="mioForm"><select name="elenco" onChange="suona(window.document.mioForm.elenco.options[selectedIndex].value)">
<option selected value="none"> Muto
<option value="rock.mid"> Rock
<option value="GMASOCK.MID"> Gmasock
<option value="anno.mid"> Anno
<option value="jamesbond.mid"> Jamesbond
<option value="demo.mp3"> Demo.mp3
</select>
</form>
</table></p>
</body>
</html>
animazione in java in cui il testo compare come se scritto "a macchina"
Passo uno
Prepariamo il messaggio ed inseriamolo in uno span al quale dovremo dare obbligatoriamente un nome, mediante il seguente codice:
<span id="testo"> Semplice messaggio con effetto macchina da scrivere <br> Scritto da Eliana Argenti e Tommaso Bientinesi.... (scriviamo ciಠche vogliamo)...</span>
Noi identifichiamo lo span con "testo". E' molto importante ricordare il nome perchà© ad esso faremo riferimento nel codice del programma.
Uno Span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo nella posizione stabilita dagli attributi LEFT (distanza dal lato sinistro dello schermo) e TOP (distanza dal lato superiore). All'interno dei tags <span> e </span> puಠessere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
Poichà© Netscape non riconosce gli spans, ed usa invece i layers, noi non abbiamo inserito alcun attributo, ma abbiamo inserito lo span stesso all'interno di una tabella.
Passo due
Inserire, fra i tags <HEAD> ed </HEAD> il seguente codice javascript:
<script language="JavaScript"> Dichiarazione del fatto che si sta inserendo un codice JavaScript
var attesa = 120; Variabile dove memorizzare il tempo di pausa in millisecondi
var messaggio='Semplice messaggio con effetto macchina da scrivere.
Scritto da Eliana Argenti e Tommaso Bientinesi....'; Variabile dove memorizzare il testo da visualizzare con l'effetto macchina da scrivere. Notare che si tratta dello stesso messaggio che avevamo inserito nello span per fare in modo che, se per qualche motivo il codice non funzionasse, sia comunque possibile visualizzarlo interamente. NOTARE GLI APICI CHE RACCHIUDONO IL TESTO
var i=-1; Variabile che funge da contatore per i caratteri della stringa. Viene inizializzata uguale a -1 per il motivo che vedremo in seguito
var cchar =""; Variabile dove memorizzare il singolo carattere del testo
var visibile=""; Variabile dove memorizzare dinamicamente il contenuto del messaggio che si viene formando
function vai() { Dichiarazione della funzione che ci permette di ottenere il risultato.
if (i < messaggio.length){ Se i è minore della lunghezza del messaggio allora...
i++ La i viene incrementata di 1. Poichè il suo valore iniziale era stato posto a -1, nel primo passaggio assume il valore 0 che rappresenta, per JavaScript, la posizione del primo carattere di una stringa.
cchar = messaggio.substr(i, 1); Viene memorizzato nella variabile cchar il carattere che si trova nella posizione i
visibile = visibile + cchar; La stringa da visualizzare viene incrementata del carattere copiato nell'istruzione precedente
setTimeout("vai()", attesa); La funzione vai() viene richiamata ricorsivamente dopo una pausa dei millisecondi memorizzati nella variabile attesa (noi abbiamo scelto 120 millisecondi)
if(document.all.testo) document.all.testo.innerHTML = visibile; NOTA BENE: l'istruzione va tutta in una riga. Permette la visualizzazione sullo schermo del testo del messaggio senza tag (come ad esempio <br>). I tag saranno interpretati come codice e correttamente visualizzati. Notare poi come, per la visualizzazione, sia necessario fare riferimento a testo, che è il nome dello span.
} Parentesi di chiusura della selezione binaria (cioè è stata raggiunta la fine del messaggio)
else { Altrimenti (si danno qui le istruzioni da seguire quando il messaggio è terminato)
return false Termina la funzione
} Chiusura di else
} Fine funzione
</script> Fine script.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.
Passo tre
Ora non resta che cambiare così il tag <body>:
<body onload="vai();">
