Javascript - 4 | WebMaster & WebDesigner

DOM

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

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’oggetto, 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="UTF8">
        <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’elemento
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>
        <script>
          var x=document.getElementById("myHeader");
            alert(x.innerHTML);
        </script>
    </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>
        <script>
            //qui non funziona
            alert(x.innerHTML);
        </script>
    </head>
    <body>
        <h1 id="myHeader">Click me!</h1>
    <script>
            alert(x.innerHTML);
        </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="UTF8">
        <script>
        window.onload = function () {
            alert(x.innerHTML);
        }
        </script>
    </head>
    <body>
        <h1 id="myHeader">Pippo</h1>
        <img
src="http://images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thu
mb3648x2736.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’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

Domande?

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

Javascript - 4 | WebMaster & WebDesigner

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Javascript - 4 | WebMaster & WebDesigner

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

More from Matteo Magni

More from Matteo Magni (20)

Recently uploaded

Recently uploaded (6)

Javascript - 4 | WebMaster & WebDesigner