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

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

Cicli
Abbiamo bisogno di costrutti semplici per poter accedere
in maniera veloce a tutti gli elementi dell'array.
Senza sapere a priori qual'è la sua lunghezza.

var divs=document.getElementsByTagName("div");
for(var k=0;k<divs.length;k++){
alert(divs[k].innerHTML);
divs[k].innerHTML = 'pippo'+k;
}

Ciclo for

for (var num=1; num<=100; num++) {
document.write('Number ' + num + '<br>');
}

• Ciclo che permette di ripetere una operazione n
volte.
• Gestisce da solo la condizione e il contatore

Ciclo While

while (condition) {
// javascript to repeat
}

volte.
• Lascia a noi la gestione di un eventuale contatore

While [2]

document.write('Number 1 <br>');
var num = 1;
while (num <= 5) {
num += 1;
}

Do While

do {
// javascript to repeat
} while (condition) ;

volte.
• Lascia a noi la gestione di un eventuale contatore
• A differenza del while la prima volta il codice
viene sempre eseguito

Do While [2]

var num = 1;
do {
num += 1;
}while (num <= 1);

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

Javascript - 4 | WebMaster & WebDesigner

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (8)

Similaire à Javascript - 4 | WebMaster & WebDesigner

Similaire à Javascript - 4 | WebMaster & WebDesigner (20)

Plus de Matteo Magni

Plus de Matteo Magni (20)

Javascript - 4 | WebMaster & WebDesigner