JavaScript Ti Permette di Crearle...
Dove Vuoi Tu, Delle Dimensioni che Vuoi Tu, e con i Bottoni del Browser che Scegli Tu...
Nella lezione 25, abbiamo imparato come aggiungere un'opzione TARGET ad un link in modo che con un mouse click si possa caricare in una nuova finestra del browser. Se hai notato, questa seconda finestra si apre con gli stessi bottoni del web browser e gli stessi campi della finestra originale, ed e' solitamente delle stessa dimensione di questa prima finestra.
Con JavaScript possiamo scrivere un codice che crea una nuova window di dimensione arbitraria, e le possiamo impartire l'ordine di non visualizzare il campo dell'URL field oppure i bottoni di navigazione del browser. In piu', per i web browser versione 4.0, possiamo anche dire loro come dovrebbero apparire a schermo.
Perche' dovremmo volere una cosa come questa? Se stiamo facendo una cosa tipo caricare una immagine in una nuova finestra del web browser, non c'e' una reale necessita' di tutti i bottoni e i campi del browser, che occupano un sacco di posto utile. In piu', ci permette di creare una piccola web browser windows che puo' funzionare da "tool palettes", da porta-accessori, in altri programmi del computer.
Perche' non provarci? Dai un'occhiata a questa foto di un cratere in Messico che si apre in una lunga, sottile finestra o questa di una montagna vulcanica in Arizona che si apre in una finestra adattata all'immagine. In fine, prova a guardare la nostra bottiglia rosa di JavaScript in una piccola finestra che visualizzi i bottoni del browser.
L'approccio generale JavaScript per la scrittura di questo codice e' sulla falsa riga di quanto segue:
<A HREF="#dummy_anchor" onClick="window.open('URL', 'window_name', 'window_options')">testo del link</a>
Come abbiamo visto nella lezione 27a abbiamo sostituito l'URL nell'attributo href con un link ad alcune named anchor all'interno di questo documento. L'abbiamo dovuto fare perche' il browser vorra' saltare ad una qualsiasi allocazione; questo metodo ci mantiene nella stessa pagina. Tipicamente, noi mettiamo queste ancore appena prima del codice HTML che contiene questo JavaScript perche' il browser scorrera' alla posizione di questa ancora fittizia.
L'evento onClick JavaScript inizializza l'azione; una comando chiamato window.open() poi dialoga con il web browser e gli dice di aprire una nuova finestra. La finestra viene riempita con il contenuto specificato dall'URL nel primo parametro, che nell'esempio precedente era un file grafico, ma puo' essere anche un file HTML locale od un URL remoto. Il secondo parametro fornisce un "nome" per questa finestra, nel caso si debba riutilizzarla come target per un link (vedi lezione 25).
Il terzo parametro e' dove elenchiamo tutte le opzioni che indicano come apparira' la finestra. Questi elementi sono tutti in una stringa di testo racchiusa tra apici:
Se vuoi puoi dare un'occhiata veloce alla <A HREF="#a" onClick="window.open('myimage.gif', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no, width=300, height=200')">mia immagine</a>.creera' un link per aprire un file d'immagine myimage.gif in una finestra chiamata "myWin", che non mostra nessun bottone del browser, ed e' soprattutto una finestra a dimensioni fisse; non si puo' ridimensionare e neppure scorrere.
D'altra parte, possiamo collegarci ad un URL in una nuova finestra:
Che ne pensate di provare il miglior <A HREF="#a" onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/', 'myWin', 'toolbar=yes, directories=no, location=no, status=yes, menubar=no, resizable=yes, scrollbars=yes, width=500, height=400')">web page tutorial dell'universo</a> senza pagare!Questo fornisce i bottoni di navigazione del browser ed il campo per la visualizzazione dell'URL. All'apertura la finestra misura 500 pixels in larghezza e 400 in altezza, e si ermette al visualizzatore di ridimensionarla e la finestra avra' le barre di scorrimento attivate.
Puoi scrivere queste opzioni in modo piu' compatto semplicemente elencando quelle che tu vuoi siano attivate; il browser assume che quelle non menzionate siano "spente". Per esempio, ecco il modo alternativo con cui scrivere i due esempi precedenti:
Se vuoi puoi dare un'occhiata veloce alla <A HREF="#a" onClick="window.open('myimage.gif', 'myWin', 'status, width=300, height=200')">mia immagine</a>.Con le versioni 4.0 di NetScape ed Internet Explorer, possiamo anche, attraverso JavaScript, specificare la posizione sullo schermo su cui si apre la finestra. Queste dimensioni sono date in pixel, misurate orizzontalmente e verticalmente dall'alto verso il basso dall'angolo in alto a sinistra dello schermo. I browser piu' vecchi ignoreranno queste opzioni.Che ne pensate di provare il miglior <A HREF="#a" onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/', 'myWin', 'toolbar, status, resizable, scrollbars, width=500, height=400')">web page tutorial nell'universo</a> senza pagare!
Sfortunatamente, NetScape ed Internet Explorer usano nomi diversi per queste opzioni! E quindi per farle funzionare su entrambe le piattaforme, devi specificare i settaggi due volte:
Aggiunto al primo esempio, questo codice impartira' ai web browser versione 4.0 l'ordine di posizionare la finestra 100 pixel a lato e 75 pixel sotto l'angolo di sinistra dello schermo del visitatore:
Se vuoi puoi dare un'occhiata veloce alla <A HREF="#a" onClick="window.open('myimage.gif', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no, width=300, height=200, screenX=100,screenY=75,left=100,top=75')">mia immagine</a>.
Una posizione tipica per le funzioni JavaScript e' quella parte non visualizzata del nostro documento all'interno dei tag <HEAD>...</HEAD>. In questo modo, possiamo caricare la "mente" del nostro JavaScript nei web browser, e quindi chiamarla al momento del bisogno dal nostro documento.
Per il nostro sito Volcano Web, andremo a modificare la pagina in cui si discute dei Vulcani negli USA. Abbiamo un link che parte da una piccola immagine di un sismometro che carica una versione piu' ampia della stessa in una finestra web separata (usando l'attributo TARGET dell'hyperlink tag). Aggiungeremo alcuni link a questo documento che visualizzino immagini de altre formazioni vulcaniche, e useremo JavaScript per caricare queste fotografie in una nuova finestra.
Ma piuttosto che caricare semplicemente una figura in una finestra vogliamo dire a JavaScript, "Ecco qui un file grafico, un titolo, una didascalia; carica per piacere una nuova finestra del web browser con l'immagine e qualche riga di testo come didascalia sul fondo della pagina". Useremo quindi JavaScript per creare la nuova finestra e scrivere il contenuto dinamico per questa finestra prendendolo da un modello. Vogliamo che questa "ability" sia scritta come funzione, in modo che si possa usare per 4 immagini diverse.
<head> <title>Luoghi Vulcanici negli USA</title>e
</head>aggiungi questa funzione JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!-- hide this script from old browsers
// This script opens a new browser window and writes
// HTML to display an image with a title and caption
function show_photo( pFileName, pTitle, pCaption) {
// specify window parameters
photoWin = window.open( "", "photo", "width=600,height=450,status,scrollbars,resizable,screenX=20,screenY=40,left=20,top=40");
// wrote content to window
photoWin.document.write('<html><head><title>' + pTitle + '</title></head>');
photoWin.document.write('<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>');
photoWin.document.write('<center>');
photoWin.document.write('<font size=+3 face="arial,helvetica"><b>' + pCaption + '</b></font><br>');
photoWin.document.write('<img src="' + pFileName + '"><p>');
photoWin.document.write('<font face="arial,helvetica">');
photoWin.document.write( '"' + pTitle + '" photo © Lorrie Lava<br>');
photoWin.document.write('<A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.edu</A><br>');
photoWin.document.write('Volcanic Studies, <A HREF="http://www.bigu.edu/">Big University</A>');
photoWin.document.write('<p></font></body></html>');
photoWin.document.close();
// If we are on NetScape, we can bring the window to the front
if (navigator.appName.substring(0,8) == "Netscape") photoWin.focus();
}
// done hiding from old browsers -->
</SCRIPT>
La nostra funzione si chiama show_photo; quando la usiamo nelle nostre pagine, gli invieremo 3 informazioni elencate come variabili FileName (l'URL per il file grafico), Title (una stringa di testo per il titolo della pagina web che creeremo JavaScript), e Caption (una breve didascalia da visualizzare sotto l'immagine). Questi tre elementi possono essere sempre diversi, tutte le volte che la usiamo, ma nella nostra funzione sono rappresentati dai nomi delle loro variabili.
Useremo poi la funzione window.open per creare una finestra che sia di 600x400 pixels; nota come, diversamente dai nostri primi esempi, il primo parametro per questa funzione, l'URL della finestra, sia vuoto. Questo accade perchè la pagina che riempira' la finestra coi suoi contenuti non esiste. In realta', noi useremo la funzione document.write nelle righe susseguenti per scrivere l'intero contenuto per questa pagina. Usando l'annotazione photoWin.document.write, stiamo dicendo al web browser di scrivere il contenuto per la nuova pagina usando il modello fornito. Nota che vicino alla fine, lasciamo che il browser sappia che abbiamo concluso le operazioni con il codice photoWin.document.close();
L'ultimo pezzettino e' un codice abbastanza speciale che permette alla nostra funzione di dire ai NetScape browser di portare questa finestra in primo piano rispetto a tutte le altre. (Questa funzione non e' ancora disponibile per gli Internet Explorer browser).
<a href="../pictures/seismo.jpg" target="photo">con questo nuovo codice:
<a href="#fotos" onClick="show_photo('../pictures/seismo.jpg', 'Sismometro da Campo', 'Volcanic Tableland, Long Valley, California')" onMouseOver="window.status='guarda da vicino un sismometro da campo'; return true">
NOTA: Usiamo l'evento onClick per generare una chiamata alla nostra funzione JavaScript. L'immagine da caricare nella nuova finestra e' seismo.jpg, il titolo per la nuova pagina e' Sismometro da Campo, e la didascalia che deve essere posizionata in fondo e' Volcanic Tableland, Long Valley, California. Se la nostra funzione fai il suo dovere, essa generera' una web page in una nuova finestra che contiene questa informazione con la formattazione specificata dalla nostra funzione.Noi usiamo anche l'evento onMouseOver per controllare cio' che appare sulla barra di stato quando il mouse si sposta sopra questo link (vedere lezione 27a)
<h2 align=center>Luoghi Vulcanici negli USA</h2>con
<a name="fotos"><h2 align=center>Luoghi Vulcanici negli USA</h2></a>
Ora ti dimostreremo l'utilita' della scrittura di funzioni JavaScript-- usando lo stesso codice per contenuti diversi. Nelle nostre versioni precedenti del documento a cui abbiamo lavorato, usa.html il link listato sotto Mount St Helens andava ad un'altra web page, msh.html, che aveva una sola frase ed un link ad un'immagine. Non useremo piu' questa seconda pagina, e, al suo posto, modificheremo la nostra prima pagina perche' visualizzi questa immagine in una una nuova finestra del browser.
<td valign=top>Il 18 Maggio 1980, dopo un lungo periodo di riposo, questa tranquilla montagna nella provincia di Washington, forni' <a href="msh.html">osservazioni dettagliate</a> sul meccanismo delle eruzioni altamente esplosive. </td>in:
<td valign=top>Il 18 Maggio 1980, dopo un lungo periodo di riposo, questa tranquilla montagna nella provincia di Washington, forni' osservazioni dettagliate sul meccanismo delle eruzioni altamente esplosive. I pini torreggianti di questa che era una tranquilla montagna furono <a href="#fotos" onClick="show_photo('../pictures/msh.gif', 'Alberi Sradicati', 'Mount St. Helens Blast Area')" onMouseOver="window.status='guarda una foto che mostra la potenza eruttiva'; return true">sradicati come giocattoli</a>. </td>
NOTA: Stiamo usando la stessa funzione JavaScript che abbiamo scritto per il link all'immagine del sismometro impostata in modo che visualizzi un titolo ed una didascalia diversa per la foto del monte St. Helens.
<tr>
<tr>
<td valign=top colspan=2>
<td><font size=+1><B>San Francisco Peaks</B></font></td>
<td colspan=2><font size=+1><B>MacDougal Crater</B></font></td>
</tr>
<td valign=top>Gli scienziati credono che l'eruzione vulcanica di diversi milioni di anni fa che suddivise <a href="#fotos" onClick="show_photo('../pictures/agassiz.jpg', 'Monte Agassiz', 'San Francisco Peaks, Arizona'); return true">questa montagna nel nord Arizona</a> fu molto simile a quella osservata a Mount St. Helens.
</td>
Quando il magma vulcanico incontra una massa di acqua sotterranea, queste eruzioni esplosive possono formare <a href="#fotos" onClick="show_photo('../pictures/macdougal.jpg', 'Cratere Macgougal', 'Regione vulcanica Pincate, Mexico'); return true">profondi crateri</a>visti solo nel sud Arizona, nella regione vulcanica Pincate del Messico.
</td>
</tr>
Quali sono gli scopi per cui potresti trovare interessante l'uso di una piccola finestra che si apre dal tuo sito? Puo' essere usata come controllo per la navigazione?
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML