Interazione di JavaScript e HTML
Come JavaScript individuazione gli elementi
HTML della pagina
Proprietà JavaScript degli elementi HTML
L’ HTML
• HTML (HyperText Markup Language) è il linguaggio
con il quale si definisce una pagina web.
• Il browser (es. Explorer) legge queste istruzioni
(contenute in un file .htm) e riproduce la pagina
nella finestra seguendo tali istruzioni
• Vi sono elementi HTML per il testo, le immagini, i
link ecc.
• HTML non è un linguaggio di programmazione
Esempio
Le seguenti istruzioni HTML costruiscono una pagina web,
all’interno della quale vi è un testo in un paragrafo e una immagine
Per vedere la pagina
<html>
<head>
<title>Sephiroth</title>
</head>
<body>
<p><img src="Sephiroth.jpg" align=left>Sephiroth è un
personaggio immaginario, antagonista principale di Final
Fantasy VII ed uno dei più popolari personaggi della
saga di Final Fantasy.</p>
</body>
</html>
JavaScript
• JavaScript è un linguaggio di programmazione che opera
all’interno delle pagine web
• Il browser è in grado di leggere le istruzioni, elaborarle ed
eseguirle
• Come linguaggio di programmazione, uno script JavaScript è
un insieme di istruzioni organizzate con strutture di controllo
(esempio: selezione if, ciclo for) che operano su dei dati (di
tipo numero, stringa, booleano) per fornire azioni o risultati.
Esempio
• Le seguenti istruzioni JavaScript chiedono all’utente
un numero intero e ne scrivono i divisori sulla pagina
Per vedere lo script funzionare
<script>
x=prompt("inserisci un numero intero","");
for (i=1;i<=x;i++)
if (x%i==0)
document.write(i +"<br>");
</script>
Interazione JavaScript - HTML
• JavaScript è stato creato per permettere ad un linguaggio
di programmazione di interagire sugli elementi della
pagina HTML
• JavaScript può accedere a tutte le proprietà di un
elemento (posizione, dimensione, colore, ecc.) e
modificarle dinamicamente, reagendo anche a eventi che
l’utente produce con il mouse sulla pagina
• HTML, JavaScript, Stylesheets (CSS) e DOM (Document
Object Model - Modello del Documento a Oggetti)
formano una tecnologia che va sotto il nome di DHTML
(HTML dinamico)
Come JS individua un elemento HTML
• Nell’HTML identifichiamo un elemento attribuendogli un
identificatore (un nome) mediante l’attributo ID
Ad esempio, nell’HTML inseriamo una immagine
<img src="Sephiroth.jpg" id="myimg">
• Nello script JavaScript utilizziamo la funzione
document.getElementById("identificatore");
per ottenere un riferimento all’elemento HTML della pagina
che ha ID l’identificatore scritto tra le parentesi
• Nell’esempio
x=document.getElementById("myimg");
• Da questa istruzione in poi, per JavaScript la variabile x
rappresenta l’immagine e quindi siamo in grado di combiare
con le istruzioni le sue proprietà.
Come JavaScript accede alle proprietà di
un elemento HTML
• Una volta individuato l’elemento con la funzione
getElementById JavaScripot accede alle proprietà
dell’elemento con la sintassi
x.nomeproprietà
x.style.nomeproprietà
(se è una proprietà CSS)
dove x è il riferimento all’elemento
• Esempio (comunica le dimensioni delle immagini)
<img src="Sephiroth.jpg" id="myimg">
<script>
x=document.getElementById("myimg");
alert(x.width);
alert(x.height);
</script>
Esempio 1
• Nell’esempio lo script mostra le dimensioni dell’immagine
nelle finestre di alert e poi le raddoppia
<img src="Sephiroth.jpg" id="myimg">
<script>
x=document.getElementById("myimg");
w=x.width;
h=x.height;
alert(w);
alert(h);
x.width = 2 * w;
</script>
Esempio 2
• Nell’esempio mostra il colore del testo del paragrafo nella
finestra di alert e poi lo modifica
<p id="mytext" style="color:#000000">PROVA</p>
<script>
x=document.getElementById("mytext");
c=x.style.color;
alert(c);
x.style.color = "#0000ff";
</script>
Esempio 3
• Nell’esempio mostra la stringa di testo del paragrafo nella
finestra di alert e poi la modifica
<p id="mytext">VECCHIO TESTO</p>
<script>
x=document.getElementById("mytext");
c=x.innerText;
alert(c);
x.innerText = "NUOVO TESTO";
</script>
