HTML - diflo
annuncio pubblicitario
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>
