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>