| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
L’oggetto finestra JavaScript si trova in cima alla gerarchia degli Oggetti JavaScript e rappresenta la finestra del browser (o windows se si dispone di più di una finestra del browser aperta in qualsiasi momento). Fino a questo capitolo ci siamo concentrati sugli interni e sulla sintassi di JavaScript. In questo capitolo inizieremo a far accadere le cose sullo schermo (che, dopo tutto, è uno degli scopi principali di JavaScript). L’oggetto window consente agli sviluppatori di eseguire attività come l’apertura e la chiusura di finestre del browser, la visualizzazione di finestre di dialogo di avviso e prompt e l’impostazione dei timeout (specificando un’azione da eseguire dopo un determinato periodo di tempo). Sebbene i timeout siano una caratteristica dell’oggetto window, li tratteremo nel capitolo Timeout JavaScript, piuttosto che in questo capitolo.
Riferimento JavaScript Oggetto window
Come descritto in Oggetto JavaScript Nozioni di base di solito è necessario utilizzare la notazione a punto quando si accede alle proprietà o metodi di un oggetto. Ad esempio, il seguente frammento di script accede al metodo write() dell’oggetto document:
document.write("Hello");
L’oggetto window è l’oggetto di primo livello della gerarchia degli oggetti. Pertanto, ogni volta che un metodo o una proprietà oggetto viene referenziato in uno script senza il nome dell’oggetto e il prefisso punto, JavaScript assume che sia un membro dell’oggetto window. Ciò significa, ad esempio, che quando si chiama il metodo window alert() per visualizzare una finestra di dialogo di avviso la finestra. il prefisso non è obbligatorio. Pertanto le seguenti chiamate di metodo ottengono la stessa cosa:
window.alert();alert()
segnala questo annuncio JavaScript Oggetto finestra Proprietà
JavaScript oggetto della finestra contiene un certo numero di proprietà che possono essere consultati e utilizzati in uno script:
- finestra.chiuso-Utilizzato quando si gestiscono più finestre, questa proprietà indica se una finestra è stata chiusa o meno.
- finestra.defaultstatus / finestra.status-defaultstatus specifica il messaggio predefinito visualizzato nella barra di stato del browser. status specifica un messaggio temporaneo da visualizzare nella barra di stato del browser al posto di quello predefinito. Disabilitato in molti browser.
- finestra.frame-Se la finestra contiene frame, questo array contiene l’array di oggetti frame(vedere i dettagli degli array JavaScript sull’accesso agli array).
- window.name -Finestre aperte da uno script deve essere dato un nome. Questa proprietà contiene il nome dell’oggetto finestra corrispondente.
- finestra.opener-Quando una finestra è stata aperta in uno script contenuto in un’altra finestra, questa proprietà della finestra figlio contiene una finestra di riferimento che l’ha aperta.
- finestra.genitore-Quando si lavora con cornici in una finestra questa proprietà contiene un riferimento all’oggetto finestra che contiene la cornice.
- finestra.screen-Un oggetto che contiene informazioni sullo schermo su cui viene visualizzata la finestra (proprietà contenute in questo oggetto includono altezza, larghezza, availHeight, availWidth e colorDepth).
- finestra.self-Un riferimento alla finestra corrente.
- finestra.top-Un riferimento alla finestra di livello superiore quando si lavora con i frame.
Apertura delle finestre del browser utilizzando JavaScript
Una nuova finestra del browser può essere aperta da uno script JavaScript utilizzando il metodo open() dell’oggetto window. La sintassi per aprire una nuova finestra è la seguente:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
Quanto segue fornisce una spiegazione degli argomenti passati al metodo open ():
- URL – Specifica l’URL della pagina web da caricare nella nuova finestra. Se non viene specificato alcun URL, viene caricata una finestra vuota.
- WindowName – Specifica il nome della finestra e viene utilizzato per fare riferimento alla finestra.
- caratteristiche-Un elenco separato da virgole di caratteristiche che consentono di personalizzare l’aspetto della finestra. Le opzioni sono:
| Regolazione | Descrizione |
|---|---|
| larghezza | consente di Specificare la larghezza iniziale del browser, la finestra del client (vedere innerWidth per la dimensione dell’area di contenuto) |
| altezza | consente di Specificare l’altezza iniziale del browser client (vedere finestra innerHeight per la dimensione dell’area di contenuto) |
| innerWidth | consente di Specificare la larghezza iniziale del contenuto della finestra zona |
| innerHeight | consente di Specificare l’altezza iniziale del contenuto della finestra zona |
| outerWidth | consente di Specificare la larghezza iniziale della finestra di navigazione |
| outerHeight | consente di Specificare l’altezza iniziale della finestra di navigazione |
| barra degli strumenti | consente di Specificare se la finestra deve contenere la barra degli strumenti del browser o non |
| stato | consente di Specificare se la finestra deve contenere la barra di stato del browser o non |
| dipendenti | consente di Specificare se la finestra deve chiudere in unisono con la sua finestra principale |
| menu | consente di Specificare se la finestra deve contenere la barra dei menu del browser |
| posizione | consente di Specificare se la finestra deve contenere il percorso del browser/URL box |
| barre di scorrimento | Nasconde/Mostra browser orizzontale/verticale barre di scorrimento |
| ridimensionabile | Consente di specificare se l’utente ha il diritto di ridimensionare la finestra dopo che viene visualizzato. |
| directory | Specifica se la finestra deve contenere la barra degli strumenti personale del browser. |
| copyHistory | consente di Specificare se la nuova finestra dovrebbe contenere una copia dell’URL storia della invocando finestra |
| sinistra | Specificato il numero di pixel dal lato sinistro dello schermo per la nuova finestra |
| top | Specificato il numero di pixel dalla parte superiore dello schermo per la nuova finestra |
| alwaysLowered | Crea una nuova finestra che è sempre posizionato sotto le altre finestre del browser. Spesso usato per quelle fastidiose pubblicità pop-under. |
| alwaysRaised | Crea una nuova finestra che è sempre posizionato sopra la parte superiore delle altre finestre del browser sullo schermo. |
| z-lock | Blocca il livello in cui il browser appare in relazione ad altre finestre del browser. |
Le funzioni di altezza, larghezza e posizione sono impostate utilizzando i numeri. Le opzioni di funzionalità rimanenti possono essere impostate utilizzando valori true o false (anche sì, no e 1 e 0 possono essere utilizzati al posto di true e false). Un attributo assente è considerato falso. L’esempio seguente crea una nuova finestra con una barra dei menu, una dimensione specifica e nessuna barra degli strumenti:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
Chiudere le finestre del browser usando JavaScript
Una finestra può essere chiusa usando il metodo close() dell’oggetto window. Il nome della finestra (specificato nel metodo open ()) deve essere referenziato quando si esegue una chiusura in modo da essere certi di chiudere la finestra corretta. Ad esempio il seguente codice crea una nuova finestra e crea un pulsante che, se cliccato, chiude la nuova finestra:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
È anche possibile chiudere la finestra che ha aperto la finestra corrente utilizzando la proprietà opener dell’oggetto finestra corrente:
window.opener.close()
Questo chiuderà la finestra che ha aperto la finestra in cui viene eseguito lo script sopra.
Spostamento e ridimensionamento delle finestre
Una finestra può essere spostata su coordinate specifiche sullo schermo utilizzando il metodo moveTo() dell’oggetto window che prende le coordinate x e y come argomenti. L’esempio seguente sposta una nuova finestra nella posizione 100, 200 sullo schermo quando viene premuto il pulsante” Sposta finestra”:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
Oltre a spostare una finestra in una nuova posizione specifica è anche possibile spostare una finestra relativa alla sua posizione corrente sullo schermo utilizzando il metodo moveBy() dell’oggetto finestra JavaScript. Ancora una volta il metodo prende i valori x e y che vengono aggiunti alle coordinate x e y correnti della finestra specificata. I valori negativi possono essere utilizzati per cambiare la direzione del movimento:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
I metodi window resizeTo() e resizeBy() funzionano in modo simile in quanto consentono di modificare la dimensione di una finestra in una dimensione specifica o in una nuova dimensione relativa alla dimensione corrente.
Modifica della messa a fuoco della finestra
Quando una finestra è la finestra attualmente selezionata sullo schermo, si dice che abbia messa a fuoco. In genere, facendo clic con il puntatore del mouse in una finestra dà quella finestra di messa a fuoco. Con JavaScript è possibile modificare a livello di codice la messa a fuoco di una finestra utilizzando i metodi focus() e blur (). Nell’esempio seguente viene visualizzata una nuova finestra, sfuma in modo che l’apertura della finestra ancora attivo e fornisce un pulsante per passare alla nuova finestra:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
la Visualizzazione di un Messaggio di Casella di Finestre di dialogo
Il JavaScript window oggetto fornisce metodi per la visualizzazione di tre tipi di finestre di dialogo dei messaggi, l’avviso di conferma e le finestre di richiesta:
- avviso, ha inteso mostrare un messaggio all’utente. Contiene un’area di messaggio in cui deve essere visualizzato il messaggio di avviso e un pulsante “OK” che l’utente può fare clic per chiudere la finestra di dialogo. Il metodo alert () accetta un singolo argomento che rappresenta il messaggio da visualizzare nella finestra di dialogo. Il seguente frammento di pagina Web visualizza una finestra di avviso con il messaggio “Non si dispone di una password valida” quando si fa clic sul pulsante “Mostra avviso”:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- conferma – utilizzato quando è necessario ottenere una risposta sì o no dall’utente. Questo tipo di dialogo viene visualizzato con un messaggio e i pulsanti” OK “e” Annulla”. Il metodo confirm () accetta il messaggio da visualizzare all’utente come argomento e restituisce true o false a seconda che l’utente abbia premuto “OK” o “Annulla”:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- prompt – progettato per consentire all’utente di ottenere informazioni. La finestra di dialogo consiste in un messaggio per l’utente, un campo di input di testo per l’immissione dei dati e pulsanti OK e Annulla. Il metodo prompt() accetta il messaggio da visualizzare come argomento e restituisce il valore immesso dall’utente:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |