javascript - 4 | webmaster & webdesigner
DESCRIPTION
Quarta lezione del modulo Javascript per il corso di WebMaster & WebDesignerTRANSCRIPT
Javascript [4]Matteo Magni
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 writedocument.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>
</body>
</html>
=> wikipedia
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>
<title>My Web Page</title>
<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>
<title>My Web Page</title>
<script>
//qui non funziona
var x=document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</head>
<body>
<h1 id="myHeader">Click me!</h1>
<script>
var x=document.getElementById("myHeader");
alert(x.innerHTML);
</script>
</body>
</html>
window.onload
window.onload = function ()
{
Javascript code goes here
}
Posso risolvere il problema facendo partire l'esecuzione dello script attraverso l'attributo 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">
<title>My Web Page</title>
<script>
window.onload = function () {
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader">Pippo</h1>
<img src="http://images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thumb3648x2736.jpg"/>
</body>
Aspetto che carichi tutto...
Leggere e Settare<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3Schools";
document.getElementById('myAnchor').href="http://www.w3schools.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">
Posso andare a modificare i valori degli attributi dell'oggetto.
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: