Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Interazione di JavaScript e HTML
Come JavaScript individuazione gli elementi HTML della pagina Proprietà JavaScript degli elementi HTML
2
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
3
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>
4
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.
5
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>
6
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)
7
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à.
8
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>
9
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>
10
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>
11
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>
Presentazioni simili
