aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Un esempio riassuntivo

 

Cimentiamoci ora con un esercizio riassuntivo un po’ più complesso.
Supponiamo di voler creare una pagina web dalla quale si possa richiamare una nuova finestra. Tale finestra deve possedere attributi specifici: deve misurare 300 pixel in altezza e 300 in larghezza, deve mostrare la data attuale, visualizzare un testo, inserire un link HTML il cui testo può essere liberamente deciso a priori.

La nuova finestra, inoltre, deve risultare perfettamente centrata, qualsiasi risoluzione si stia impiegando.
L’esempio (05_riassuntivo.html) riassume gran parte dei concetti presentati sinora: il posizionamento degli script nella pagina HTML, l’interazione con i form HTML, l’utilizzo delle variabili, l’uso di metodi ed eventi.

Per prima cosa, inserite nella vostra pagina web il codice HTML che consenta la visualizzazione di un form costituito da un’unica casella di testo e da un pulsante.

 


Clicca per ingrandire

Passiamo ora allo sviluppo della funzione che dovrà aprire la nuova finestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>. Poiché la funzione deve ricevere in ingresso un valore stringa, ricorriamo all’utilizzo di una variabile messaggio.

 


Clicca per ingrandire

All’interno della funzione JavaScript, dobbiamo quindi inserire una serie di istruzioni che consentano di recuperare data ed ora attuali (nel formato utilizzato sul personal computer client), che definiscano il contenuto della nuova finestra e le proprietà della stessa (posizione e dimensioni).

Per quanto riguarda le informazioni relative a data ed ora impieghiamo il codice che segue:
now = new Date();
data_ora = now.toLocaleString();
La data/ora viene recuperata con il metodo Date() quindi memorizzata all’interno della variabile now, creata allo scopo. Il metodo toLocaleString(), applicato alla variabile now, permette di “trasformare” la data nel formato utilizzato sul personal computer locale (per esempio, mercoledì 12 febbraio 2003 12.23.17).

Definiamo ora il contenuto della nuova finestra. Nella variabile contenuto abbiamo deciso di memorizzare tutto il codice HTML che costituirà la nuova finestra. Osservate le concatenazioni tra stringhe che abbiamo utilizzato. In particolare, è possibile notare come il nome da attribuire al link <A> sia generato recuperando il valore assunto dalla variabile messaggio.
Successivamente, memorizziamo in due variabili distinte l’altezza e la larghezza che deve avere la finestra da creare quindi calcoliamo le coordinate della finestra (in pixel) affinché questa risulti centrata, qualunque risoluzione si stia utilizzando.

Per far questo, è necessario controllare il valore delle proprietà width (larghezza) e height (altezza) dell’oggetto screen (schermo). Sottraendo a tali valori, rispettivamente, la larghezza della nostra finestra e la sua altezza, dividendo per due otterremo le coordinate in pixel che permetteranno di centrare la finestra:
sinistra=(screen.width-larghezza)/2;
alto=(screen.height-larghezza)/2;

Se la nostra finestra deve essere alta e larga 300 pixel, alla risoluzione 800x600 pixel la variabile sinistra assumerà il valore 250, alto il valore 150; alla risoluzione 1024x768 pixel in sinistra verrà memorizzato il valore 362, nella variabile alto il valore 234. In ogni caso, comunque, la finestra risulterà perfettamente centrata. Potete provare ad effettuare qualche verifica modificando la risoluzione dello schermo di Windows (Pannello di controllo | Schermo).

titolo
**


Clicca per ingrandire

Le istruzioni successive permettono di creare la nuova finestra:
newwindow=window.open("","miafinestra",
"toolbar=0,status=0,
menubar=0,scrollbars=0,resizable=0,
width="+larghezza+",height="+altezza+",
top="+alto+",left="+sinistra);
newwindow.document.writeln(data_ora);
newwindow.document.write(contenuto);

L’oggetto “nuova finestra” è chiamato newwindow. La terza opzione permette di specificare tutte le caratteristiche della finestra.
Le successive istruzioni - document.writeln(data_ora) e document.write(contenuto) - inseriscono nella pagina web della nuova finestra, il contenuto della variabile data_ora e il codice HTML presente in contenuto.
L’esempio è consultabile su CD utilizzando il file 05_riassuntivo.html

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi
1. JavaScript e DHMTL
2. Programmazione orientata agli oggetti
3. Browser e script
4. Oggetti e proprietà
5. Eventi e funzioni
6. Variabili e stringhe
7. Operatori in JavaScript
  1. Esempio riassuntivo
8. Istruzioni condizionali
9. Strutture iterative
10. Interazione tra JavaScript
e form HTML
11. Interazione tra JavaScript
e frame
12. Linee guida programmazione
13. DHMTL

 Copyright© PC Open - 2002 - 2003

Credits