innerHTML Javascript

matthew85 · 22-12-2005, 11:47

Ciao a tutti,

qualcuno mi potrebbe spiegare come fuziona la funzione di Javascript innerHTML?

andbin · 22-12-2005, 13:41

Quote:

Originariamente inviato da matthew85

Ciao a tutti,

qualcuno mi potrebbe spiegare come fuziona la funzione di Javascript innerHTML?

Ciao, intanto innerHTML non è una funzione di Javascript ma una proprietà di un elemento html a livello del DOM (Document Object Model).
Prova il seguente file html:

Codice:

<html>
<head>
<title>Prova innerHTML</title>
<script type="text/javascript">
<!--
function inserisci ()
{
     document.getElementById("prova_div").innerHTML = "<font color=\"red\">Ciao</font>, testo inserito nel <b>DIV</b> con innerHTML";
}
//-->
</script>
</head>
<body>

<div id="prova_div"></div>
<a href="#" onclick="inserisci(); return false">INSERISCI</a>

</body>
</html>

Aprilo con Internet Explorer e clicca sul link INSERISCI. Verrà inserito del codice html nel blocco div.

matthew85 · 23-12-2005, 09:48

Perfetto.

Ma me lo puoi spiegare meglio?

andbin · 23-12-2005, 11:14

Quote:

Originariamente inviato da matthew85

Perfetto.

Ma me lo puoi spiegare meglio?

Certo.
A livello di scripting è disponibile quello che viene chiamato DOM (Document Object Model) cioè un modello ad oggetti che è una grossa gerarchia di oggetti manipolabile via scripting.
In pratica il modello ad oggetti espone tutti gli elementi (tutti i tag che compongono la pagina più altri oggetti non visibili e non relativi ai tag) in modo che tramite le proprietà ed i metodi messi a disposizione dai vari oggetti sia (quasi) tutto alterabile e manipolabile dopo che la pagina è stata caricata dal browser.
Questo è quello che si chiama DHTML o Dynamic HTML.

innerHTML (come anche innerText) è una proprietà di ogni elemento della pagina che consente di leggerne e modificarne il contenuto. La proprietà è read/write per tutti gli elementi tranne che per alcuni oggetti per cui è read-only (ma non mi ricordo di preciso quali sono).

Un esempio pratico di cosa si possa fare con il DHTML è il classico orologio che si aggiorna in tempo reale.
Ecco il codice per un orologio minimale che ho buttato giù:

Codice:

<html>
<head>
<title>Orologio</title>
<script type="text/javascript">
<!--
var ore = -1;
var min = -1;
var sec = -1;

function pad (val)
{
    return val < 10 ? "0"+val : val;
}

function aggiorna ()
{
    var dt = new Date ();
    var new_ore = dt.getHours ();
    var new_min = dt.getMinutes ();
    var new_sec = dt.getSeconds ();

    if (new_ore != ore || new_min != min || new_sec != sec)
    {
        document.getElementById("orologio").innerHTML = pad (new_ore) + ":" + pad (new_min) + ":" + pad (new_sec);

        ore = new_ore;
        min = new_min;
        sec = new_sec;
    }

    window.setTimeout (aggiorna, 100);
}
//-->
</script>
<style type="text/css">
<!--
#orologio { font: bold 24px Arial,sans-serif; color: blue; }
-->
</style>
</head>
<body onload="aggiorna()">

<div id="orologio"></div>

</body>
</html>

Ma naturalmente si possono fare cose anche molto più complesse.

matthew85 · 23-12-2005, 13:07

Quello che non riesco a capire come codice è questo:

Codice HTML:

document.getElementById("prova_div").innerHTML = "<font color=\"red\">Ciao</font>, testo inserito nel <b>DIV</b> con innerHTML";

me lo potresti spiegare, perché ho provato a fare questo codice ma non mi uscivano le immagini.

andbin · 23-12-2005, 16:03

Quote:

Originariamente inviato da matthew85

Quello che non riesco a capire come codice è questo:

Codice HTML:

document.getElementById("prova_div").innerHTML = "<font color=\"red\">Ciao</font>, testo inserito nel <b>DIV</b> con innerHTML";

me lo potresti spiegare, perché ho provato a fare questo codice ma non mi uscivano le immagini.

getElementById è un metodo dell'oggetto document. Il suo scopo è quello di cercare ed ottenere un riferimento al primo oggetto che ha il ID specificato. Puoi quindi pensarlo come:

Codice:

// Ottengo il riferimento all'oggetto
var objdiv = document.getElementById("prova_div");

// Modifico la proprietà dell'oggetto
objdiv.innerHTML = "....";

matthew85 · 23-12-2005, 16:53

E invece su questa stringa di codice:

Codice HTML:

<a href="#" onclick="inserisci(); return false">INSERISCI</a>

?

andbin · 23-12-2005, 17:23

Quote:

Originariamente inviato da matthew85

E invece su questa stringa di codice:

Codice HTML:

<a href="#" onclick="inserisci(); return false">INSERISCI</a>

?

Questo link viene gestito con Javascript. Quindi il suo href è ininfluente. In genere lo si mette a "#" per indicare la pagina stessa (nel caso in cui eventualmente Javascript non fosse disponibile/abilitato).
onclick è l'evento che viene generato quando si fa il click sul link e, nota bene, è prioritario rispetto a href. Questo vuol dire che quando ci fai click la prima cosa che viene fatta è quella di eseguire il codice specificato per onclick (quindi chiamare inserisci() nel caso sopra). Il "return false" serve per evitare che l'evento "rimbalzi" e che il browser continui a fare quello che normalmente farebbe, cioè esaminare href e puntare a quel indirizzo.

Per capire meglio: prova a cambiare la riga con

Codice:

<a href="http://www.google.com" onclick="inserisci(); return true">INSERISCI</a>

Quando ci clicchi sopra vedrai che immediatamente viene inserito il testo ma poi, poco dopo, viene caricata la pagina di google.

matthew85 · 29-12-2005, 14:01

Ho capito, se ci saranno dei problemi vi manderò un altro messaggio per chiedervi delucidazioni.

matthew85 · 03-01-2006, 08:36

con innerHTML puoi anche mettere filmati video?

andbin · 03-01-2006, 10:16

Quote:

Originariamente inviato da matthew85

con innerHTML puoi anche mettere filmati video?

Certo, innerHTML permette di inserire dentro un tag tutto quello che si vuole, quindi anche, ad esempio, un tag <object>, una applet o altro.
Esempio (un filmato dell'intervista ad una delle mie attrici preferite

):
Nota: testato con IE.

Codice:

<html>
<head>
<title>Intervista a Julia Stinshoff</title>
<script type="text/javascript">
<!--
function start_filmato ()
{
    document.getElementById("div_filmato").innerHTML =
        "<object id=\"player\" type=\"video/x-ms-wmv\" codebase=\"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701\" standby=\"Loading Microsoft Windows Media Player components...\">" +
        "<param name=\"FileName\" value=\"mms://wms.e-tv.de/tvtotal/2004/10/14/0621-00-04-wm_midband.wmv\">" +
        "<param name=\"ShowControls\" value=\"true\">" +
        "<param name=\"AutoStart\" value=\"true\">" +
        "<param name=\"AnimationAtStart\" value=\"true\">" +
        "<param name=\"ShowStatusBar\" value=\"true\">" +
        "<param name=\"ShowAudioControls\" value=\"true\">" +
        "<param name=\"ShowPositionControls\" value=\"true\">" +
        "<param name=\"ShowTracker\" value=\"false\">" +
        "<param name=\"ShowGotoBar\" value=\"false\">" +
        "<param name=\"ShowCaptioning\" value=\"false\">" +
        "<param name=\"ShowDisplay\" value=\"false\">" +
        "</object>";
}
//-->
</script>
</head>
<body>

<a href="#" onclick="start_filmato(); return false">Intervista a Julia Stinshoff</a>
<div id="div_filmato"></div>

</body>
</html>

matthew85 · 03-01-2006, 10:32

Un'altra curiosità se io ho già inserito del codice, in questo caso Javascript, cioè in così:

Codice HTML:

<script language="Javascript"></script>

dove devo mettere la seconda parte del codice?

Cioè io faccio lo script dell'immagine e poi metto quello del video come devo fare?

andbin · 03-01-2006, 10:59

Quote:

Originariamente inviato da matthew85

Un'altra curiosità se io ho già inserito del codice, in questo caso Javascript, cioè in così:

Codice HTML:

<script language="Javascript"></script>

dove devo mettere la seconda parte del codice?

Cioè io faccio lo script dell'immagine e poi metto quello del video come devo fare?

Non mi è chiaro cosa intendi dire ... spiegati meglio.

matthew85 · 03-01-2006, 11:10

Nel senso che, facciamo un esempio, devo inserire il codice inerente all'orologio e nella stessa pagina HTML vorrei mettere il codice inerente all'immagine, come devo fare?

andbin · 03-01-2006, 11:35

Quote:

Originariamente inviato da matthew85

Nel senso che, facciamo un esempio, devo inserire il codice inerente all'orologio e nella stessa pagina HTML vorrei mettere il codice inerente all'immagine, come devo fare?

ah in quel senso.

Beh, si può fare in diversi modi. Intanto il blocco:

Codice:

<script type="text/javascript">
</script>

lo puoi mettere più volte dentro la pagina HTML. Non è che devi metterne per forza solo 1.
Oppure puoi mettere tutto il codice Javascript dentro 1 solo blocco di script. Oppure ancora puoi mettere i codici di Javascript in file .js separati e linkarli nel file html con:

Codice:

<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
ecc...

matthew85 · 03-01-2006, 12:01

Facendo quello che hai detto tu di metterli in file Javascript diversi dove li devo mettere, sopra?

Cioè così:

<head>
<script type="text/javascript" src="file1.js"></script>
</head>

giusto?

andbin · 03-01-2006, 12:03

Quote:

Originariamente inviato da matthew85

<head>
<script type="text/javascript" src="file1.js"></script>
</head>

giusto?

Esatto.

matthew85 · 03-01-2006, 14:07

Ma i file Javascript dove devono essere inseriti?

andbin · 03-01-2006, 14:14

Quote:

Originariamente inviato da matthew85

Ma i file Javascript dove devono essere inseriti?

Dove vuoi.

L'importante è che l'attributo src punti in modo giusto. Se metti src="file1.js" viene presupposta la presenza di file1.js nella stessa directory del file html. Puoi mettere anche path relativi o assoluti ("../file1.js" oppure "/prova/file1.js").

matthew85 · 04-01-2006, 08:38

Mi sorge un altro dubbio, che è questo:

ho notato che nel codice che hai scritto dell'orologio e delle immagini hai dato degli invii per caso devo lasciarli oppure è un fattore di aiuto per il programmatore?

22-12-2005, 11:47	#1
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	innerHTML Javascript Ciao a tutti, qualcuno mi potrebbe spiegare come fuziona la funzione di Javascript innerHTML?

23-12-2005, 13:07	#5
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Quello che non riesco a capire come codice è questo: Codice HTML: document.getElementById("prova_div").innerHTML = "<font color=\"red\">Ciao</font>, testo inserito nel <b>DIV</b> con innerHTML"; me lo potresti spiegare, perché ho provato a fare questo codice ma non mi uscivano le immagini.

23-12-2005, 16:53	#7
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	E invece su questa stringa di codice: Codice HTML: <a href="#" onclick="inserisci(); return false">INSERISCI</a> ?

03-01-2006, 10:32	#12
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Un'altra curiosità se io ho già inserito del codice, in questo caso Javascript, cioè in così: Codice HTML: <script language="Javascript"></script> dove devo mettere la seconda parte del codice? Cioè io faccio lo script dell'immagine e poi metto quello del video come devo fare?

23-12-2005, 09:48	#3
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Perfetto. Ma me lo puoi spiegare meglio?

29-12-2005, 14:01	#9
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Ho capito, se ci saranno dei problemi vi manderò un altro messaggio per chiedervi delucidazioni.

03-01-2006, 08:36	#10
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	con innerHTML puoi anche mettere filmati video?

03-01-2006, 11:10	#14
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Nel senso che, facciamo un esempio, devo inserire il codice inerente all'orologio e nella stessa pagina HTML vorrei mettere il codice inerente all'immagine, come devo fare?

03-01-2006, 12:01	#16
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Facendo quello che hai detto tu di metterli in file Javascript diversi dove li devo mettere, sopra? Cioè così: <head> <script type="text/javascript" src="file1.js"></script> </head> giusto?

03-01-2006, 14:07	#18
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Ma i file Javascript dove devono essere inseriti?

04-01-2006, 08:38	#20
matthew85 Senior Member Iscritto dal: Sep 2005 Città: Como Messaggi: 447	Mi sorge un altro dubbio, che è questo: ho notato che nel codice che hai scritto dell'orologio e delle immagini hai dato degli invii per caso devo lasciarli oppure è un fattore di aiuto per il programmatore?

Strumenti
Mostra una versione stampabile Invia questa pagina per email