2. DOM
Il Document Object Model, letteralmente
modello a oggetti del documento, è una
forma di rappresentazione dei documenti
strutturati come modello orientato agli
oggetti. (wikipedia)
3.
4. Oggetti
La programmazione orientata agli oggetti
(OOP, Object Oriented Programming) è un
paradigma di programmazione che permette
di definire oggetti software in grado di
interagire gli uni con gli altri attraverso lo
scambio di messaggi. (wikipedia)
5. Attributi
Attributi:
rappresentano i dati
dell’oggetto, ovvero le
informazioni che
caratterizzano un
oggetto.
Es: oggetto array ha come
proprietà la sua lunghezza.
days = new Array();
alert(days.length);
6. Metodi
Metodi:
Sono le funzionalità,
le azioni che un
oggetto può
compiere.
Es: oggetto document
ha come metodo write
document.write('pippo'
);
7. Metodi [2]
• Un metodo può avere un valore di ritorno
• Può avere parametri che vengono passati
per permettere la sua esecuzione.
//passaggio di uno o più parametri
document.write('Hello World!');
//valore di ritorno
element=document.getElementById('pippo);
8. DOM e Js
Mentre Javascript è il linguaggio di programmazione che ti
permette di operare sugli oggetti DOM, il DOM ti fornisce
metodi e proprietà per recuperare, modificare, aggiornare ed
eliminare parti del documento su cui stai lavorando. Per
esempio, potresti recuperare il valore di un campo di testo e
metterlo in una variabile stringa con il DOM; a questo punto
puoi usare l'operatore Javascript di concatenazione + , per
unire quella stringa ad un'altra, in base a ciò che vuoi
ottenere. Potresti quindi usare il metodo alert() per mostrare
la stringa all'utente attraverso una finestra di dialogo.
9. DOM e Js [2]
In che senso "indipendente dal linguaggio"? Non è
javascript l'unico modo per accedere al DOM? No, ad
esempio Mozilla usa il DOM sia col C++ che col
Javascript per la sua interfaccia utente. Questi sono
alcuni dei linguaggi che hanno un'implementazione del
DOM: Perl, Java, ActiveX, Python; ciò è possibile grazie
all'indipendenza del DOM dal linguaggio di
programmazione.
https://developer.mozilla.org/it/docs/Il_DOM_e_JavaScript
12. getElementById()
E' il metodo che permette di recuperare l’elemento
caratterizzato univocamente dal valore del proprio
attributo ID.
Restituisce un riferimento all'elemento in questione.
Pippo = document.getElementById('pippo');
alert(Pippo.innerHTML);
13. A volte quando seleziono un oggetto del
DOM lo script non fa nulla?
18. window.onload
window.onload = Posso risolvere il
function () problema facendo
{ partire l'esecuzione
dello script
Javascript code
attraverso l'attributo
goes here
onload dell'oggetto
} window.
22. Leggere e Settare
<head> Posso andare a
<script>
modificare i valori
function changeLink()
degli attributi
{
document.getElementById('myAnchor').innerHTML="W3Schools";
dell'oggetto.
document.getElementById('myAnchor').href="http://www.w3school
s.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor"
href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change
link">
23. getElementsByTagName()
Questo metodo permette di selezionare l’insieme degli
elementi caratterizzati dallo stesso tag.
Ritorna un array di tutti gli elementi con quel tag, nell’ordine
in cui compaiono nella pagina.
pElements=document.getElementsByTagName('p');
//pElements è un array