Oggetti

Il javascript è un linguaggio orientato agli oggetti, creati dal programmatore oppure quelli nativi del linguaggio. Un oggetto richiama una libreria e una proprietà o un metodo ne fa riferimento.

oggetto.metodo(parametri) oggetto.proprieta

Nel primo caso passiamo i parametri, mentre nel secondo caso restituiscono (GET) o settano (SET) dei valori propri dell’oggetto. Ecco alcuni esempi

document.write(‘Ciao Mondo’); … var pagine = location.here; /* GET */ … location.href = ‘http://www.sito.com/’; /* SET */

Elenco di alcuni oggetti nativi:

• window – finestra del browser;
  • location – URL corrente;
  • history – cronologia delle URL visitate;
• navigator – informazioni riguardo al browser;
• screen – risoluzione dello schermo;
• document – documento aperto nel browser, nodo radice a cui appartengono tutti gli oggetti corrispondenti a ciascun sottonodo del documento;

Una parola molto importante nella programmazione è this quando bisogna fare riferimento “a se stesso“, javascript non conosce il concetto di classe e quindi è problematico identificare il contesto al quale this fa riferimento.

/* this fa riferimento al tag */ <span onclick=”alert(this.tagName.toLowerCase());”>clicca qui</span>function faccioQualcosa() { alert(this.style.color); } … /*non associato a nessun oggetto, provoca un errore */ <script>FaccioQualcosa();</script> … /* uso corretto */ document.getElementById(‘mioDiv’).onclick = faccioQualcosa();

window è il principale oggetto di javascript ed ha numerose proprietà, le più utilizzate sono

• frames – un array con tutti i frames presenti nella pagina;
• innerHeight e innerWidth – altezza e larghezza interna della finestra del browser;
• lenght – numero dei frames presenti nella finestra;
• opener – riferimento alla madre che ha aperto la finestra corrente;
• outerHeight e outerWidth – restituisce l’altezza e la larghezza esterna della finestra del browser;
• pageXOffset e pageYOffset – valore in pixel dell’eventuale scroll sull’asse orizzontale e verticale;
• parent – riferimento alla finestra che contiene il frame corrente;
• self – riferimento alla finestra corrente;
• top – riferimento alla finestra principale ;

Metodi dell’oggetto window

• alert() – mostra finestra di avviso;
• close() – chiude la finestra corrente;
• confirm() – mostra una finestra di dialogo con messaggio di richiesta conferma;
• open() apre una nuova finestra;
• print() – stampa il contenuto della finestra corrente;
• prompt() – apre una finestra di dialogo dove l’utente è invitato a scrivere nel campo testo;scrollTo() – esegue uno scrolling del documento verso le coordinate specificate;
• setInterval() e clearInterval() – imposta/annulla una serie di istruzioni da seguire ad intervalli di tempo prestabiliti;
• setTimeout() e clearTimeout() – imposta/annulla una serie di istruzioni da eseguirsi una volta dopo un dato intervallo di tempo;

Per aprire una finestra usiamo il metodo open

window.open(url, nome della finestra, stile)

La variabile stile possiamo definire i seguenti parametri:

• top e left – la posizione in pixel della finestra;
• width e height – larghezza ed altezza in pixel;
• status – mostra/nasconde la barra di stato;
• menubar – mostra/nasconde la barra dei menu;
• toolbar – mostra/nasconde la barra degli strumenti;
• scrollbars – mostra/nasconde le barre di scorrimento;

Tramite il metodo alert è possibile creare delle finestre di avviso, all’interno possiamo inserire un messaggio e il pulsante ok per chiudere la finestra.

window.alert(‘messaggio…’);

Il metodo confirm permette di creare oltre al pulsante Ok (true) anche il pulsante Annulla (false).

var domanda = confirm(‘messaggio…’);

Il metodo prompt apre una finestra di dialogo con un campo di testo editabile dall’utente e il pulsante Ok, restituisce il valore inserito. Il primo campo è la descrizione e il secondo può avere un valore di default.

var risultato = prompt(‘messaggio…’, ‘risposta’);

L’oggetto screen contiene le informazioni relative allo schermo del device utilizzato dall’utente, le principali proprietà sono:

• availWidth e availHeight – restituisce le dimensioni dello schermo;
• colorDepth – restituisce la profondità del colore;
• pixelDepth – restituisce la risoluzione colore dello schermo;
• width – height – restituisce le dimensioni dello schermo;