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;