狠狠撸

DOM

Il Document Object Model, letteralmente
modello a oggetti del documento, 猫 una
forma di rappresentazione dei documenti
strutturati come modello orientato agli
oggetti. (wikipedia)

Javascript - 4 | WebMaster & WebDesigner

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)

Attributi
Attributi:
rappresentano i dati
dell鈥檕ggetto, ovvero le
informazioni che
caratterizzano un
oggetto.
Es: oggetto array ha come
propriet脿 la sua lunghezza.
days听=听new听Array();
alert(days.length);

Metodi
Metodi:
Sono le funzionalit脿,
le azioni che un
oggetto pu貌
compiere.
Es: oggetto document
ha come metodo write
document.write('pippo'
);

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);

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.

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

Esempio - Document
<!颅颅听My听document听颅颅>
<html>
<head>
听听<title>My听Document</title>
</head>
<body>
听听<h1>Header</h1>
听听<p>
听听听听Paragraph
听听</p> => wikipedia
</body>
</html>

Attributi Document
<!doctype听html>
<html>
听听听听<head>
听听听听听听听听<meta听charset="UTF颅8">
听听听听听听听听<title>My听Web听Page</title>
听听听听听听听听<script>
听听听听听听听听alert(document.title);
听听听听听听听听alert(document.URL);
听听听听听听听听alert(document.location);
听听听听听听听听alert(document.domain);
听听听听听听听听alert(document.refererr);
听听听听听听听听</script>
听听听听</head>
听听听听<body>
听听听听听听听听Pippo
听听听听</body>
</html>

getElementById()

E' il metodo che permette di recuperare l鈥檈lemento
caratterizzato univocamente dal valore del proprio
attributo ID.
Restituisce un riferimento all'elemento in questione.

Pippo听=听document.getElementById('pippo');
alert(Pippo.innerHTML);

A volte quando seleziono un oggetto del
DOM lo script non fa nulla?

Esempio: Non va?!?!?!?
<!doctype听html>
<html>
听听听听<head>
听听听听听听听听听听var听x=document.getElementById("myHeader");
听听听听听听听听听听听听alert(x.innerHTML);
听听听听</head>
听听听听<body>
听听听听听听听听<h1听id="myHeader">Click听me!</h1>
听听听听</body>
</html>

Perch猫 non va?

Ma l'oggetto c'猫?!?!?

Quando lo script viene eseguito l'elemento di
id myHeader non 猫 ancora stato inserito nel
DOM.

Eseguire quando?
<!doctype听html>
<html>
听听听听<head>
听听听听听听听听听听听听//qui听non听funziona
听听听听</head>
听听听听<body>
听听听听听听听听<h1听id="myHeader">Click听me!</h1>
听听听听<script>
听听听听</body>
</html>

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.

window.onload [2]

Window.onload viene eseguito quando tutto il
contenuto della pagina, tutte i js, tutte le
immagini sono caricate.

Eseguire quando?
听听听听<head>
听听听听听听听听<meta听charset="UTF颅8">
听听听听听听听听window.onload听=听function听()听{
听听听听听听听听听听听听var听x=document.getElementById("myHeader");
听听听听听听听听}
听听听听</head>
听听听听<body>
听听听听听听听听<h1听id="myHeader">Pippo</h1>
听听听听听听听听<img听
src=/slideshow/04-javascript/18252661/"http:/images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thu
mb颅3648x2736.jpg"/>
听听听听</body>

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">
听

getElementsByTagName()

Questo metodo permette di selezionare l鈥檌nsieme degli
elementi caratterizzati dallo stesso tag.
Ritorna un array di tutti gli elementi con quel tag, nell鈥檕rdine
in cui compaiono nella pagina.

pElements=document.getElementsByTagName('p');
//pElements听猫听un听array

Domande?

狠狠撸:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me

狠狠撸

Javascript - 4 | WebMaster & WebDesigner

Recommended

More Related Content

What's hot (6)

Similar to Javascript - 4 | WebMaster & WebDesigner (20)

More from Matteo Magni (20)

Javascript - 4 | WebMaster & WebDesigner