La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Interazione di JavaScript e HTML Come JavaScript individuazione gli elementi HTML della pagina Proprietà JavaScript degli elementi HTML.

Presentazioni simili


Presentazione sul tema: "Interazione di JavaScript e HTML Come JavaScript individuazione gli elementi HTML della pagina Proprietà JavaScript degli elementi HTML."— Transcript della presentazione:

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 Sephiroth Sephiroth è un personaggio immaginario, antagonista principale di Final Fantasy VII ed uno dei più popolari personaggi della saga di Final Fantasy. Le seguenti istruzioni HTML costruiscono una pagina web, allinterno della quale vi è un testo in un paragrafo e una immagine Per vedere la pagina

4 JavaScript JavaScript è un linguaggio di programmazione che opera allinterno 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 allutente un numero intero e ne scrivono i divisori sulla pagina Per vedere lo script funzionare Per vedere lo script funzionare x=prompt("inserisci un numero intero",""); for (i=1;i<=x;i++) if (x%i==0) document.write(i +" ");

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 lutente 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 NellHTML identifichiamo un elemento attribuendogli un identificatore (un nome) mediante lattributo ID Ad esempio, nellHTML inseriamo una immagine Nello script JavaScript utilizziamo la funzione document.getElementById("identificatore"); per ottenere un riferimento allelemento HTML della pagina che ha ID lidentificatore scritto tra le parentesi Nellesempio x=document.getElementById("myimg"); Da questa istruzione in poi, per JavaScript la variabile x rappresenta limmagine 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 lelemento con la funzione getElementById JavaScripot accede alle proprietà dellelemento con la sintassi x.nomeproprietà x.style.nomeproprietà(se è una proprietà CSS) dove x è il riferimento allelemento Esempio (comunica le dimensioni delle immagini) x=document.getElementById("myimg"); alert(x.width); alert(x.height);

9 Esempio 1 Nellesempio lo script mostra le dimensioni dellimmagine nelle finestre di alert e poi le raddoppia x=document.getElementById("myimg"); w=x.width; h=x.height; alert(w); alert(h); x.width = 2 * w;

10 Esempio 2 Nellesempio mostra il colore del testo del paragrafo nella finestra di alert e poi lo modifica PROVA x=document.getElementById("mytext"); c=x.style.color; alert(c); x.style.color = "#0000ff";


Scaricare ppt "Interazione di JavaScript e HTML Come JavaScript individuazione gli elementi HTML della pagina Proprietà JavaScript degli elementi HTML."

Presentazioni simili


Annunci Google