javascript - 4 | webmaster & webdesigner
DESCRIPTION
Quarta lezione del modulo Javascript del corso per 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 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>
</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);
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
Cicli
var divs=document.getElementsByTagName("div");
for(var k=0;k<divs.length;k++){
alert(divs[k].innerHTML);
divs[k].innerHTML = 'pippo'+k;
}
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.
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
}
• Ciclo che permette di ripetere una operazione n volte.
• Lascia a noi la gestione di un eventuale contatore
While [2]
document.write('Number 1 <br>');
document.write('Number 2 <br>');
document.write('Number 3 <br>');
document.write('Number 4 <br>');
document.write('Number 5 <br>');
var num = 1;
while (num <= 5) {
document.write('Number ' + num + '<br>');
num += 1;
}
Do While
do {
// javascript to repeat
} while (condition) ;
• Ciclo che permette di ripetere una operazione n 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 {
document.write('Number ' + num + '<br>');
num += 1;
}while (num <= 1);
Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: