Revision 171352 of Importare applicazioni da Internet Explorer a Mozilla

  • Slug della versione: Importare_applicazioni_da_Internet_Explorer_a_Mozilla
  • Titolo della versione: Importare applicazioni da Internet Explorer a Mozilla
  • ID versione: 171352
  • Data di creazione
  • Autore: Roscati
  • Versione corrente? No
  • Commento /* Frammenti di documento */

Contenuto della versione

{{ Da_unire("Migrare applicazioni da Internet Explorer a Mozilla") }}

Introduzione

Quando Netscape diede vita al broswer Mozilla, fece la saggia decisione di supportare lo standard WC. Come risultato, Mozilla non è completamente retro compatibile con Netscape Navigator 4.x e Microsoft Internet Explorer; per esempio, Mozilla non supporta <layer>. I browsers, come Internet Explorer 4, che è stato costruito prima della concezione dello standard W3C ereditano qualche piccolo inconeniente.in questo articolo viene descritta la modalita quirk di Mozilla, che permette compatibilità retroattiva HTML con Internet Explorer e altri broswer.

Verranno inoltre discusse le tecnologie non standard come XMLHttpRequest e potenti editor testuali supportati da Mozilla poichè al tempo non c'era nulla di equivalente al W3C. Tra questi:

Trucchi generali per la stesura del codice fra broswer

Even though Web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform). Many browsers, such as Internet Explorer, also support pre-W3C APIs and have never added extensive support for the W3C-compliant ones.

Prima di addentrarci nelle differenze tra Mozilla e Internet Explorer, Diamo uno sguardo a delle tecniche di base con le quali si possono realizzare applicazioni Web aggiornabili per quanto riguarda la compatibilita' con i broswer


Partendo dal fatto che broswer diversi a volte utilizzano API diverse per la stessa funzionalita', possiamo trovare codice multiple if() else() blocchi nei quali il codice e' differente per ogni broswer. Il codice seguente mostra blocchi progettati per Internet Explorer:


. . . 

var elm; 

if (ns4) 
  elm = document.layers["myID"]; 
else if (ie4) 
  elm = document.all["myID"]

Il codice appena visto non e' estendibile, se vogliamo che sia supportato da un altro broswer, dobbiamo aggiornare il blocco dell'applicazione web.

Il modo piu' semplice per eliminare la riscrittura del codice per un nuovo broswer e' di astrarre le funzionalita'. Piuttosto che riscrivere piu' blocchi , si puo' incrementare l'efficenza astraendo le funzionalita' scrivendo il codice dell'applicazione solo una volta rendendolo oltretutto piu' leggibile e semplificandone l'aggiunta di nuovi componenti.

var elm = getElmById("myID"); 

function getElmById(aID){ 
  var element = null; 

  if (isMozilla || isIE5) 
    element = document.getElementById(aID);
  else if (isNetscape4) 
    element = document.layers[aID];
  else if (isIE4) 
    element = document.all[aID];

  return element; 
} 

Il codice riportato ha ancora il problema del "browser sniffing, ovvero deve determinare il broswer che l'user sta adottando. Questa tecnica di solito e' svolta dallo useragent:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 

Attraverso lo useragnet possiamo determinare quale broswer e' in uso e anche altre informazioni dettagliate, a volte si possono verificare degli errori quando ci troviamo nel caso di versioni appena uscite di un broswer, in questa situazione il codice cambia.

Se identificare il broswer non e' rilevante, puoi fare questo anche eseguendo un test in JavaScript sui requisiti delle funzionalita'.it is much better and more reliable to sniff by browser capability or object feature support.Per esempio, piuttosto che:

if (isMozilla || isIE5) 

Si potrebbe usare:

if (document.getElementById) 

Questo potrebbe permettere ad altri broswer che supportano W3C, come Opera o Safari, di lavorare senza cambiamenti.

Lo useragent, in ogni caso, makes sense when accuracy is important, come quando si verifica la compatibilita' tra un'applicazione web e il broswer o quando ci troviamo in presenza di un bug.

JavaScript permette anche regole condizionali, che aiutano la leggibilita' del codice:

var foo = (condition) ? conditionIsTrue : conditionIsFalse; 

Per esempio, per richiamare un elemento, si potrebbe utilizzare:

function getElement(aID){ 
  return (document.getElementById) ? document.getElementById(aID)
                                   : document.all[aID]);
} 

Un altro metodo e' quello di usare l'operatore <tt>||</tt> :

function getElement(aID){ 
  return (document.getElementById(aID)) || document.all[aID]);
}

Differenze tra Mozilla e Internet Explorer

Prima di tutto verrano discusse le differenze del comportamento di HTML tra Mozilla e Internet Explorer.

Tooltips

I broswer piu' antiquati introducono i tooltips in HTML mostrandoli sui links e usando alt attributi come requisiti dei tooltip. Le specifiche W3C HTML piu' recenti hanno dato vita agli attributi del tipo title, che rappresenta il contenuto della descrizione del link. I broswer moderni utilizzano l'attributo title per visualizzare tooltips, Mozilla supporta solamente l'attributo alt per la visualizzazione dei tooltips.

Entita'

L'HTML puo' contenere diverse entita', che sono definite in W3C web standards body. Si possono riferire entita' attraverso il carattere o il numero di riferimento. Per esempio, si puo' riferire il carattere spazio #160 con &#160; oppure con il suo carattere di riferimento equivalente &nbsp;.

Alcuni broswer meno recenti, come Internet Explorer, hanno qualche problema nella visualizzazione di ; :

&nbsp Foo 
&nbsp&nbsp Foo 

Mozilla visualizzera' il codice sopra &nbsp come spazi bianchi, anche se questo e' contro le specifiche W3C.Il broswer non analizzera' &nbsp se questo e' seguito da piu' caratteri, per esempio:

&nbsp12345 

Questo codice non ha effetto con Mozills, poiche' viola gli standard W3C. In ogni caso si puo' utilizzare (&nbsp;) per colmare discrepanze del broswer.

Differenze DOM

Il Document Object Model (DOM) e' la struttura ad albero che contiene gli elementi del documento. E' manipolabile attraverso le API JavaScript, standardizzate dal W3C. In ogni caso, prima dello standard W3C, Netscape 4 e Internet Explorer 4 implementavano le API in maniera simile. Solo Mozilla implementa le API piu antiquate se non sono state incluse nello standard W3C.

Accedere agli elementi

Per richiamare il riferimento a un elemento usando l'approccio cross-broswer, si puo' usare document.getElementById(aID), che funziona in Internet Explorer 5.0+, sui broswer basati su Mozilla, "altri broswer aderenti al W3C".

Mozilla non supporta l'accesso ad un elemento attraverso document.elementName oppure attraverso il nome dell'elemnto, Internet Explorer permette quest'ultimo(chiamato anche global namespace polluting). Mozilla non supporta nemmeno il metodo per Netscape 4 document.layers e quello per Internet Explorer document.all. Mentre document.getElementById richiama un elemento, si puo' usare anche document.layers e document.all per ottenere la lista di tutti gli elementi documento che hanno un certo tag, per richiamare tutti gli elementi <div>. Il metofo del livello 1 del DOM permette di ottenere i riferimenti a tutti gli elementi con lo stesso tag usando getElementsByTagName().Il metodo restituisce un array in JavaScript, e puo' essere richiamato sull'elemento document o altri nodi per cercare nei loro sotto-alberi.Per ottenere un array di tutti gli elementi nel albero DOM, si puo' utilizzare getElementsByTagName("*"). I metodi del DOM livello 1, come mostrato nella tabella 1, sono comunemente usati per spostare elementi da una posizione e settarne la visibilita'(per menu, o animazioni).Netscape 4 usa il tag <layer>, che non e' supportato da Mozilla, come un elemento HTML che puo' essere posizionato ovunque. In Mozilla, si puo posizionare ogni elemento usando il tag <div>, che Internet Explorer supporta ed e' documentata nelle specifiche HTML.

Tabella 1. Metodi usati per accedere agli elementi
Metodo Descrizione
document.getElementById( aId ) Restiruisce un riferimento all'elemento con l'ID specificato.
document.getElementsByTagName( aTagName ) Restituisce un array di elementi con il nome specificato nel documento.

Attraverso il DOM

Mozilla supporta le API W3C per attraversare l'albero DOM usando JavaScript (vedi Tabella 2). Le API permettono di spostarsi da un nodo all'altro navigando l'albero del documento in ogni direzione.Internet Explorer supporta le API sopracitate, ma supporta anche le API precedenti di navigazione del DOM, come la proprieta' children.

Tabella 2. Metodi usati per attraversare il DOM
Propieta'/Metodo Descrizione
childNodes Restituisce un array di tutti i nodi figli dell'elemento.
firstChild Restituisce il primo nodo figlio dell'elemento.
getAttribute( aAttributeName ) Restituisce il valore per l'attributo specificato.
hasAttribute( aAttributeName ) Restituisce un boolean che identifica se il nodo corrente ha un attributo definito con il nome specificato.
hasChildNodes() Restituisce un boolean che identifica se il nodo corrente ha qualche figlio.
lastChild Restituisce l'ultimo nodo figlio dell'elemento specificato.
nextSibling Restituisce il nodo immediatamente successivo a quello specificato.
nodeName Restituisce una stringa che identifica il nome del nodo corrente.
nodeType Restituisce il tipo del nodo corrente.
Valore Descrizione
1 Nodo Elemento
2 Nodo Attributo
3 Node Testo
4 Nodo Sezione CDATA
5 Nodo di Riferimento a un'Entita'
6 Nodo Entita'
7 Nodo di Instruzione di Processamento
8 Nodo Commento
9 Nodo Documento
10 Tipo del Nodo Documento
11 Nodo Frammento di Documento
12 Nodo di Notazione
nodeValue Restituisce il valore del nodo corrente. Per nodi che contengono testo,come i nodi di testo e i nodi di commento, restituira' la stringa relativa. Per nodi attributo viene restituito il valore. Per tutti gli altri nodi, viene restituito null.
ownerDocument Restituisce l'object document contenente il nodo corrente.
parentNode Restituisce il nodo padre del nodo corrente.
previousSibling Restituisce il nodo immediatamente precedente al quello attuale.
removeAttribute( aName ) Rimuove l'attributo specificato dal nodo corrente.
setAttribute( aName, aValue ) Imposta il valore dell'attributo specificato con il volore specificato.

Internet Explorer ha dei problemi che vanno oltre il normale, dove alcune API salteranno nodi testo con spazi bianchi. Mozilla non evitera' questi nodi pero' la differenza sara' visibile. Ogni nodo ha una proprieta' nodeType che specifica il tipo del nodo. Per esempio, un nodo elemento ha tipo 1, mentre un nodo testo ha tipo 3 e un nodo commento e' di tipo 8. Il modo migliore per processare solamente nodi elemento e' quello di iterare su tutti i nodi figli e considerare solo quelli che sono di tipo 1:

HTML: 
  <div id="foo">
    <span>Test</span>
  </div>

JavaScript: 
  var myDiv = document.getElementById("foo"); 
  var myChildren = myXMLDoc.childNodes; 
  for (var i = 0; i < myChildren.length; i++) { 
    if (myChildren[i].nodeType == 1){ 
      // element node
    };
  };

Generare e manipolare contenuti

Mozila supporta i metodi non piu' moderni per aggiungere dinamicamente contenuti nel DOM, come document.write, document.open e document.close. Mozilla supporta anche il metod di Internet Explorer innerHTML, con il quale si puo richiamare qualsiasi nodo. In ogni caso questo non supporta outerHTML e innerText(che imposta il valore del testo del nodo, and che si puo realizzare in Mozilla usando textContent).Internet Explorer ha diversi metodi di manipolazione dinamica dei contenuti che sono non-standard e che non sono supportati da Mozilla, incluso il poter richiamare il valore, inserendo del testo e inserendo elementi adiacenti al nodo, come getAdjacentElement e insertAdjacentHTML. La tabella 3 mostra come lo standard W3C e Mozilla manipolano i contenuti, ognuno di questi metodi e' un metodo di un nodo del DOM.

Tabella 3. Metodi usati da Mozilla per gestire i contenuti
Metodo Descrizione
appendChild( aNode ) Crea un nuovo nodo figlio e ne restituisce un riferimento.
cloneNode( aDeep ) Crea una copia del nodo, se aDeep e' vera, viene copiato l'intero sotto-albero a partire dal nodo attuale.
createElement( aTagName ) Crea e restituisce un nuovo nodo DOM senza padre del tipo specificato da aTagName.
createTextNode( aTextValue ) Crea e restituisce un nuovo nodo testo DOM senza padre con il valore data indicato da aTextValue.
insertBefore( aNewNode, aChildNode ) Inserisce aNewNode prima di aChildNode, che dovra' essere un figlio del nodo attuale.
removeChild( aChildNode ) Rimuove aChildNode e restituisce un riferimento ad esso.
replaceChild( aNewNode, aChildNode ) Sostituisce aChildNode with aNewNode and e restituisce un riferimento la nodo rimosso.

Frammenti di documento

<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Language" content="it">

<title>UilpensionatiTaranto</title> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta name="Microsoft Theme" content="none, default"> <meta name="Microsoft Border" content="tlb, default"> </head>

<body bgcolor="#339ACC" >

UILP TARANTO</td>

   <p align="center">LA NOSTRA STORIA</td>
 </tr>
   <p align="center">
<img border="0" src="peppe.jpg" width="120" height="143">
</td>
   <p align="center">
   </td>
 
   <p class="MsoNormal">L’Unione 
   Italiana Lavoratori Pensionati (Uilp) è il sindacato di categoria che 
associa

gli anziani e i pensionati della Confederazione sindacale Unione italiana

del lavoro (Uil).

La Uilp di TARANTO conta oggi oltre 11.253 iscritti.

Ha sedi diffuse in tutta la Provincia, articolate in leghe comunali.

L’ultimo Congresso della Uilp di Taranto si è svolto a Massafra

presso l'Hotel Appia e ha rieletto Giuseppe VENTRUTI segretario generale

della Uilp di Taranto.

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="manifest" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" height="117" width="138">
     <param name="movie" value="manifest.swf">
     <param name="bgcolor" value="339ACC">
     <param name="quality" value="High">
     <param name="allowscriptaccess" value="sameDomain">
     <param name="_cx" value="4471">
     <param name="_cy" value="3254">
     <param name="FlashVars" value>
     <param name="Src" value="manifest.swf">
     <param name="WMode" value="Window">
     <param name="Play" value="0">
     <param name="Loop" value="-1">
     <param name="SAlign" value>
     <param name="Menu" value="-1">
     <param name="Base" value>
     <param name="Scale" value="ShowAll">
     <param name="DeviceFont" value="0">
     <param name="EmbedMovie" value="0">
     <param name="SWRemote" value>
     <param name="MovieData" value>
     <param name="SeamlessTabbing" value="1">
     <param name="Profile" value="0">
     <param name="ProfileAddress" value>
     <param name="ProfilePort" value="0">
     <param name="AllowNetworking" value="all">
     <param name="AllowFullScreen" value="false">
     <embed
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         name="manifest"
         width="169" height="123"
         src="manifest.swf"
         bgcolor="#339ACC"
         quality="high"
         swliveconnect="true"
         allowscriptaccess="samedomain"
       >
         <noembed>
         </noembed>
       </embed></object>
webbot bot="HitCounter" u-custom i-image="4" i-resetvalue="13311" PREVIEW="&lt;strong&gt;{{ mediawiki.external('contatore visite') }}&lt;/strong&gt;" i-digits="7" startspan<img src="_vti_bin/fpcount.exe/C:/Documents%20and%20Settings/rocco/Documenti/uilpensionatitaranto/?Page=index.htm|Image=4|Digits=7" alt="Contatore visite">webbot bot="HitCounter" i-checksum="24676" endspan

</body></html>

Sorgente della versione

<p>{{ Da_unire("Migrare applicazioni da Internet Explorer a Mozilla") }}
</p>
<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
<p>Quando Netscape diede vita al broswer Mozilla, fece la saggia decisione di supportare lo standard WC. Come risultato, Mozilla non è completamente retro compatibile con Netscape Navigator 4.x e Microsoft Internet Explorer; per esempio, Mozilla non supporta <code>&lt;layer&gt;</code>. I browsers, come Internet Explorer 4, che è stato costruito prima della concezione dello standard W3C ereditano qualche piccolo inconeniente.in questo articolo viene descritta la modalita quirk di Mozilla, che permette compatibilità retroattiva HTML con Internet Explorer e altri broswer.
</p><p>Verranno inoltre discusse le tecnologie non standard come XMLHttpRequest e potenti editor testuali supportati da Mozilla poichè al tempo non c'era nulla di equivalente al W3C. Tra questi: </p>
<ul><li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> and <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a>
</li><li>Cascade Style Sheets (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS Level 2.1</a> and parts of <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a>
</li><li>Document Object Model (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> and parts of <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a>
</li><li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a>
</li><li>Extensible Markup Language (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a>
</li><li>XSL Transformations: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a>
</li><li>XML Path Language: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a>
</li><li>Resource Description Framework: <a class="external" href="http://www.w3.org/RDF/">RDF</a>
</li><li>Simple Object Access Protocol: <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a>
</li><li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a>
</li></ul>
<h3 id="Trucchi_generali_per_la_stesura_del_codice_fra_broswer" name="Trucchi_generali_per_la_stesura_del_codice_fra_broswer">Trucchi generali per la stesura del codice fra broswer</h3>
<p>Even though Web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform). Many browsers, such as Internet Explorer, also support pre-W3C APIs and have never added extensive support for the W3C-compliant ones.
</p><p>Prima di addentrarci nelle differenze tra Mozilla e Internet Explorer, Diamo uno sguardo a delle tecniche di base con le quali si possono realizzare applicazioni Web aggiornabili per quanto riguarda la compatibilita' con i broswer
</p><p><br>
Partendo dal fatto che broswer diversi a volte utilizzano API diverse per la stessa funzionalita', possiamo trovare codice multiple <code>if() else()</code>
blocchi nei quali il codice e' differente per ogni broswer.
Il codice seguente mostra blocchi progettati per Internet Explorer:
</p><p><br>
</p>
<pre>. . . 

var elm; 

if (ns4) 
  elm = document.layers["myID"]; 
else if (ie4) 
  elm = document.all["myID"]
</pre>
<p>Il codice appena visto non e' estendibile, se vogliamo che sia supportato da un altro broswer, dobbiamo aggiornare il blocco dell'applicazione web.
</p><p>Il modo piu' semplice per eliminare la riscrittura del codice per un nuovo broswer e' di astrarre le funzionalita'. Piuttosto che riscrivere piu' blocchi , si puo' incrementare
l'efficenza astraendo le funzionalita' scrivendo il codice dell'applicazione solo una volta
rendendolo oltretutto piu' leggibile e semplificandone l'aggiunta di nuovi componenti.
</p>
<pre>var elm = getElmById("myID"); 

function getElmById(aID){ 
  var element = null; 

  if (isMozilla || isIE5) 
    element = document.getElementById(aID);
  else if (isNetscape4) 
    element = document.layers[aID];
  else if (isIE4) 
    element = document.all[aID];

  return element; 
} 
</pre>
<p>Il codice riportato ha ancora il problema del "browser sniffing<i>, ovvero deve determinare il broswer che l'user sta adottando. Questa tecnica di solito e' svolta dallo useragent:</i>
</p>
<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 
</pre> <p>Attraverso lo useragnet possiamo determinare quale broswer e' in uso e anche altre informazioni dettagliate, a volte si possono verificare degli errori quando ci troviamo nel caso di versioni appena uscite di un broswer,
in questa situazione il codice cambia.
</p><p>Se identificare il broswer non e' rilevante,
puoi fare questo anche eseguendo un test in JavaScript sui requisiti delle funzionalita'.<strong>it is much better and more reliable to sniff by browser capability or object feature support</strong>.Per esempio, piuttosto che:
</p>
<pre>if (isMozilla || isIE5) 
</pre>
<p>Si potrebbe usare:
</p>
<pre>if (document.getElementById) 
</pre> <p>Questo potrebbe permettere ad altri broswer che supportano W3C, come Opera o Safari, di lavorare senza cambiamenti.
</p><p>Lo useragent, in ogni caso, makes sense when accuracy is important, come quando si verifica la compatibilita' tra un'applicazione web e il broswer o quando ci troviamo in presenza di un bug.
</p><p>JavaScript permette anche regole condizionali, che aiutano la leggibilita' del codice:
</p>
<pre class="eval">var foo = (condition) ? conditionIsTrue : conditionIsFalse; 
</pre>
<p>Per esempio, per richiamare un elemento, si potrebbe utilizzare:
</p>
<pre class="eval">function getElement(aID){ 
  return (document.getElementById) ? document.getElementById(aID)
                                   : document.all[aID]);
} 
</pre>
<p>Un altro metodo e' quello di usare l'operatore <tt>||</tt> :
</p>
<pre class="eval">function getElement(aID){ 
  return (document.getElementById(aID)) || document.all[aID]);
}
</pre>
<h3 id="Differenze_tra_Mozilla_e_Internet_Explorer" name="Differenze_tra_Mozilla_e_Internet_Explorer">Differenze tra Mozilla e Internet Explorer</h3>
<p>Prima di tutto verrano discusse le differenze del comportamento di HTML tra Mozilla e Internet Explorer.
</p>
<h4 id="Tooltips" name="Tooltips">Tooltips</h4>
<p>I broswer piu' antiquati introducono i tooltips in HTML mostrandoli sui links e usando <code>alt</code> attributi come requisiti dei tooltip.
Le specifiche W3C HTML piu' recenti hanno dato vita agli attributi del tipo <code>title</code>, che rappresenta il contenuto della descrizione del link. I broswer moderni utilizzano l'attributo <code>title</code> per visualizzare tooltips, Mozilla supporta solamente l'attributo <code>alt</code> per la visualizzazione dei tooltips.
</p>
<h4 id="Entita.27" name="Entita.27">Entita'</h4>
<p>L'HTML puo' contenere diverse entita', che sono definite in <a class="external" href="http://www.w3.org/TR/REC-html40/sgml/entities.html">W3C web standards body</a>. Si possono riferire entita' attraverso il carattere o il numero di riferimento. Per esempio, si puo' riferire il carattere spazio #160 con <code>&amp;#160;</code> oppure con il suo carattere di riferimento equivalente <code>&amp;nbsp;</code>.
</p><p>Alcuni broswer meno recenti, come Internet Explorer, hanno qualche problema nella visualizzazione di <code>;</code> :
</p>
<pre>&amp;nbsp Foo 
&amp;nbsp&amp;nbsp Foo 
</pre>
<p>Mozilla visualizzera' il codice sopra <code>&amp;nbsp</code> come spazi bianchi, anche se questo e' contro le specifiche W3C.Il broswer non analizzera' <code>&amp;nbsp</code> se questo e' seguito da piu' caratteri, per esempio:
</p>
<pre>&amp;nbsp12345 
</pre>
<p>Questo codice non ha effetto con Mozills, poiche' viola gli standard W3C. In ogni caso si puo' utilizzare (<code>&amp;nbsp;</code>) per colmare discrepanze del broswer.
</p>
<h3 id="Differenze_DOM" name="Differenze_DOM">Differenze DOM</h3>
<p>Il Document Object Model (DOM) e' <b>la struttura ad albero che contiene gli elementi del documento</b>. E' manipolabile attraverso le API JavaScript, standardizzate dal W3C. In ogni caso, prima dello standard W3C, Netscape 4 e Internet Explorer 4 implementavano le API in maniera simile. Solo Mozilla implementa le API piu antiquate se non sono state incluse nello standard W3C.
</p>
<h4 id="Accedere_agli_elementi" name="Accedere_agli_elementi">Accedere agli elementi</h4>
<p>Per richiamare il riferimento a un elemento usando l'approccio cross-broswer, si puo' usare <code>document.getElementById(aID)</code>, che funziona in Internet Explorer 5.0+, sui broswer basati su Mozilla, "altri broswer aderenti al W3C".
</p><p>Mozilla non supporta l'accesso ad un elemento attraverso <code>document.elementName</code> oppure attraverso il nome dell'elemnto, Internet Explorer permette quest'ultimo(chiamato anche <em>global namespace polluting</em>).
Mozilla non supporta nemmeno il metodo per Netscape 4 <code>document.layers</code> e quello per Internet Explorer <code>document.all</code>.
Mentre <code>document.getElementById</code> richiama un elemento, si puo' usare anche <code>document.layers</code> e <code>document.all</code> per ottenere la lista di tutti gli elementi documento che hanno un certo tag, per richiamare tutti gli elementi <code>&lt;div&gt;</code>.
Il metofo del livello 1 del DOM permette di ottenere i riferimenti a tutti gli elementi con lo stesso tag usando <code>getElementsByTagName()</code>.Il metodo restituisce un array in JavaScript, e puo' essere richiamato sull'elemento <code>document</code> o altri nodi per cercare nei loro sotto-alberi.Per ottenere un array di tutti gli elementi nel albero DOM, si puo' utilizzare <code>getElementsByTagName("*")</code>.
I metodi del DOM livello 1, come mostrato nella tabella 1, sono comunemente usati per spostare elementi da una posizione e settarne la visibilita'(per menu, o animazioni).Netscape 4 usa il tag <code>&lt;layer&gt;</code>, che non e' supportato da Mozilla, come un elemento HTML che puo' essere posizionato ovunque. In Mozilla, si puo posizionare ogni elemento usando il tag <code>&lt;div&gt;</code>, che Internet Explorer supporta ed e' documentata nelle specifiche HTML.
</p>
<table class="standard-table">
<caption> Tabella 1. Metodi usati per accedere agli elementi
</caption><tbody><tr>
<th> Metodo </th><th> Descrizione
</th></tr>
<tr>
<td> document.getElementById( aId ) </td><td> Restiruisce un riferimento all'elemento con l'ID specificato.
</td></tr>
<tr>
<td> document.getElementsByTagName( aTagName ) </td><td> Restituisce un array di elementi con il nome specificato nel documento.
</td></tr></tbody></table>
<h4 id="Attraverso_il_DOM" name="Attraverso_il_DOM">Attraverso il DOM</h4>
<p>Mozilla supporta le API W3C per attraversare l'albero DOM usando JavaScript (vedi Tabella 2). Le API permettono di spostarsi da un nodo all'altro navigando l'albero del documento in ogni direzione.Internet Explorer supporta le API sopracitate, ma supporta anche le API precedenti di navigazione del DOM, come la proprieta' <code>children</code>.
</p>
<table class="standard-table">
<caption> Tabella 2. Metodi usati per attraversare il DOM
</caption><tbody><tr>
<th> Propieta'/Metodo </th><th> Descrizione
</th></tr>
<tr>
<td> childNodes </td><td> Restituisce un array di tutti i nodi figli dell'elemento.
</td></tr>
<tr>
<td> firstChild </td><td> Restituisce il primo nodo figlio dell'elemento.
</td></tr>
<tr>
<td> getAttribute( aAttributeName ) </td><td> Restituisce il valore per l'attributo specificato.
</td></tr>
<tr>
<td> hasAttribute( aAttributeName ) </td><td> Restituisce un boolean che identifica se il nodo corrente ha un attributo definito con il nome specificato.
</td></tr>
<tr>
<td> hasChildNodes() </td><td> Restituisce un boolean che identifica se il nodo corrente ha qualche figlio.
</td></tr>
<tr>
<td> lastChild </td><td> Restituisce l'ultimo nodo figlio dell'elemento specificato.
</td></tr>
<tr>
<td> nextSibling </td><td> Restituisce il nodo immediatamente successivo a quello specificato.
</td></tr>
<tr>
<td> nodeName </td><td> Restituisce una stringa che identifica il nome del nodo corrente.
</td></tr>
<tr>
<td> nodeType </td><td> Restituisce il tipo del nodo corrente.
<table>
<tbody><tr>
<th> Valore </th><th> Descrizione
</th></tr>
<tr>
<td> 1 </td><td> Nodo Elemento
</td></tr>
<tr>
<td> 2 </td><td> Nodo Attributo
</td></tr>
<tr>
<td> 3 </td><td> Node Testo
</td></tr>
<tr>
<td> 4 </td><td> Nodo Sezione CDATA
</td></tr>
<tr>
<td> 5 </td><td> Nodo di Riferimento a un'Entita'
</td></tr>
<tr>
<td> 6 </td><td> Nodo Entita'
</td></tr>
<tr>
<td> 7 </td><td> Nodo di Instruzione di Processamento
</td></tr>
<tr>
<td> 8 </td><td> Nodo Commento
</td></tr>
<tr>
<td> 9 </td><td> Nodo Documento
</td></tr>
<tr>
<td> 10 </td><td> Tipo del Nodo Documento
</td></tr>
<tr>
<td> 11 </td><td> Nodo Frammento di Documento
</td></tr>
<tr>
<td> 12 </td><td> Nodo di Notazione
</td></tr></tbody></table>
</td></tr>
<tr>
<td> nodeValue </td><td> Restituisce il valore del nodo corrente. Per nodi che contengono testo,come i nodi di testo e i nodi di commento, restituira' la stringa relativa. Per nodi attributo viene restituito il valore. Per tutti gli altri nodi, viene restituito <code>null</code>.
</td></tr>
<tr>
<td> ownerDocument </td><td> Restituisce l'object <code>document</code> contenente il nodo corrente.
</td></tr>
<tr>
<td> parentNode </td><td> Restituisce il nodo padre del nodo corrente.
</td></tr>
<tr>
<td> previousSibling </td><td> Restituisce il nodo immediatamente precedente al quello attuale.
</td></tr>
<tr>
<td> removeAttribute( aName ) </td><td> Rimuove l'attributo specificato dal nodo corrente.
</td></tr>
<tr>
<td> setAttribute( aName, aValue ) </td><td> Imposta il valore dell'attributo specificato con il volore specificato.
</td></tr></tbody></table>
<p>Internet Explorer ha dei problemi che vanno oltre il normale, dove alcune API salteranno nodi testo con spazi bianchi. Mozilla non evitera' questi nodi pero' la differenza sara' visibile. Ogni nodo ha una proprieta' <code>nodeType</code> che specifica il tipo del nodo. Per esempio, un nodo elemento ha tipo 1, mentre un nodo testo ha tipo 3 e un nodo commento e' di tipo 8. Il modo migliore per processare solamente nodi elemento e' quello di iterare su tutti i nodi figli e considerare solo quelli che sono di tipo 1:
</p>
<pre>HTML: 
  &lt;div id="foo"&gt;
    &lt;span&gt;Test&lt;/span&gt;
  &lt;/div&gt;

JavaScript: 
  var myDiv = document.getElementById("foo"); 
  var myChildren = myXMLDoc.childNodes; 
  for (var i = 0; i &lt; myChildren.length; i++) { 
    if (myChildren[i].nodeType == 1){ 
      // element node
    };
  };
</pre>
<h4 id="Generare_e_manipolare_contenuti" name="Generare_e_manipolare_contenuti">Generare e manipolare contenuti</h4>
<p>Mozila supporta i metodi non piu' moderni per aggiungere dinamicamente contenuti nel DOM, come <code>document.write</code>, <code>document.open</code> e <code>document.close</code>. Mozilla supporta anche il metod di Internet Explorer <code>innerHTML</code>, con il quale si puo richiamare qualsiasi nodo. In ogni caso questo non supporta <code>outerHTML</code> e <code>innerText</code>(che imposta il valore del testo del nodo, and che si puo realizzare in Mozilla usando <code>textContent</code>).Internet Explorer ha diversi metodi di manipolazione dinamica dei contenuti che sono non-standard e che non sono supportati da Mozilla, incluso il poter richiamare il valore, inserendo del testo e inserendo elementi adiacenti al nodo, come <code>getAdjacentElement</code> e <code>insertAdjacentHTML</code>. La tabella 3 mostra come lo standard W3C e Mozilla manipolano i contenuti, ognuno di questi metodi e' un metodo di un nodo del DOM.
</p>
<table class="standard-table">
<caption> Tabella 3. Metodi usati da Mozilla per gestire i contenuti
</caption><tbody><tr>
<th> Metodo </th><th> Descrizione
</th></tr>
<tr>
<td> appendChild( aNode ) </td><td> Crea un nuovo nodo figlio e ne restituisce un riferimento.
</td></tr>
<tr>
<td> cloneNode( aDeep ) </td><td> Crea una copia del nodo, se aDeep e' vera, viene copiato l'intero sotto-albero a partire dal nodo attuale.
</td></tr>
<tr>
<td> createElement( aTagName ) </td><td> Crea e restituisce un nuovo nodo DOM senza padre del tipo specificato da aTagName.
</td></tr>
<tr>
<td> createTextNode( aTextValue ) </td><td> Crea e restituisce un nuovo nodo testo DOM senza padre con il valore data indicato da aTextValue.
</td></tr>
<tr>
<td> insertBefore( aNewNode, aChildNode ) </td><td> Inserisce aNewNode prima di aChildNode, che dovra' essere un figlio del nodo attuale.
</td></tr>
<tr>
<td> removeChild( aChildNode ) </td><td> Rimuove aChildNode e restituisce un riferimento ad esso.
</td></tr>
<tr>
<td> replaceChild( aNewNode, aChildNode ) </td><td> Sostituisce aChildNode with aNewNode and e restituisce un riferimento la nodo rimosso.
</td></tr></tbody></table>
<h4 id="Frammenti_di_documento" name="Frammenti_di_documento">Frammenti di documento</h4>
<p>&lt;html&gt;
</p><p>&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
&lt;meta http-equiv="Content-Language" content="it"&gt;
</p><p>&lt;title&gt;UilpensionatiTaranto&lt;/title&gt;
&lt;meta name="GENERATOR" content="Microsoft FrontPage 5.0"&gt;
&lt;meta name="ProgId" content="FrontPage.Editor.Document"&gt;
&lt;meta name="Microsoft Theme" content="none, default"&gt;
&lt;meta name="Microsoft Border" content="tlb, default"&gt;
&lt;/head&gt;
</p><p>&lt;body bgcolor="#339ACC" &gt;
</p>
<table border="0" cellpadding="0" cellspacing="0" width="108%"> <tbody><tr> <td colspan="2" height="72" width="1%"> <p align="center"><b><font color="#FFFFFF" size="6">UILP TARANTO</font></b>&lt;/td&gt; </p></td><td height="72" valign="bottom" width="87%">
<pre class="eval">   &lt;p align="center"&gt;<b><font color="#FFFFFF" size="6">LA NOSTRA STORIA</font></b>&lt;/td&gt;
 &lt;/tr&gt;
</pre> </td></tr><tr> <td align="right" height="1" valign="top" width="19%">
<pre class="eval">   &lt;p align="center"&gt;<font size="2"><br>
   &lt;img border="0" src="peppe.jpg" width="120" height="143"&gt;</font>&lt;/td&gt;
</pre> </td><td height="1" rowspan="3" valign="top" width="2%">
<pre class="eval">   &lt;p align="center"&gt;
   &lt;/td&gt;
</pre> </td><td height="1" rowspan="3" valign="top" width="87%"> <pre> </pre>
<pre class="eval">   &lt;p class="MsoNormal"&gt;<span style="font-size:14.0pt;color:white">L’Unione 
   Italiana Lavoratori Pensionati (Uilp) è il sindacato di categoria che 
</span></pre> associa <p class="MsoNormal"><span style="font-size:14.0pt;color:white">gli anziani e i pensionati della Confederazione sindacale Unione italiana </span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">del lavoro (Uil). </span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">La Uilp di TARANTO conta oggi oltre 11.253 iscritti.</span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">Ha sedi diffuse in tutta la Provincia, articolate in leghe comunali. </span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">L’ultimo Congresso della Uilp di Taranto si è svolto a Massafra </span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">presso l'Hotel Appia e ha rieletto Giuseppe VENTRUTI segretario generale</span></p> <p class="MsoNormal"><span style="font-size:14.0pt;color:white">della Uilp di Taranto.</span></p> </td> </tr> <tr> <td align="right" height="5" valign="top" width="19%">
<pre class="eval">   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" height="117" id="manifest" width="138">
     &lt;param name="movie" value="manifest.swf"&gt;
     &lt;param name="bgcolor" value="339ACC"&gt;
     &lt;param name="quality" value="High"&gt;
     &lt;param name="allowscriptaccess" value="sameDomain"&gt;
     &lt;param name="_cx" value="4471"&gt;
     &lt;param name="_cy" value="3254"&gt;
     &lt;param name="FlashVars" value&gt;
     &lt;param name="Src" value="manifest.swf"&gt;
     &lt;param name="WMode" value="Window"&gt;
     &lt;param name="Play" value="0"&gt;
     &lt;param name="Loop" value="-1"&gt;
     &lt;param name="SAlign" value&gt;
     &lt;param name="Menu" value="-1"&gt;
     &lt;param name="Base" value&gt;
     &lt;param name="Scale" value="ShowAll"&gt;
     &lt;param name="DeviceFont" value="0"&gt;
     &lt;param name="EmbedMovie" value="0"&gt;
     &lt;param name="SWRemote" value&gt;
     &lt;param name="MovieData" value&gt;
     &lt;param name="SeamlessTabbing" value="1"&gt;
     &lt;param name="Profile" value="0"&gt;
     &lt;param name="ProfileAddress" value&gt;
     &lt;param name="ProfilePort" value="0"&gt;
     &lt;param name="AllowNetworking" value="all"&gt;
     &lt;param name="AllowFullScreen" value="false"&gt;
     &lt;embed
         type="application/x-shockwave-flash"
         pluginspage="<a class=" external" href="http://www.macromedia.com/go/getflashplayer" rel="freelink">http://www.macromedia.com/go/getflashplayer</a>"
         name="manifest"
         width="169" height="123"
         src="manifest.swf"
         bgcolor="#339ACC"
         quality="high"
         swliveconnect="true"
         allowscriptaccess="samedomain"
       &gt;
         &lt;noembed&gt;
         &lt;/noembed&gt;
       &lt;/embed&gt;</object>
</pre> </td> </tr> <tr> <td align="right" height="4" valign="top" width="19%"> </td> </tr> </tbody></table>
<table border="1" cellpadding="0" cellspacing="0" id="AutoNumber3" style="border-collapse: collapse; border-width: 0" width="97%"> <tbody><tr> <td height="1" style="border-style: none; border-width: medium" width="20%"> </td><td height="1" style="border-style: none; border-width: medium" width="1%"> </td><td height="1" style="border-style: none; border-width: medium" width="21%"> </td><td height="1" style="border-style: none; border-width: medium" width="27%"> <span class="comment">webbot bot="HitCounter" u-custom i-image="4" i-resetvalue="13311" PREVIEW="&amp;lt;strong&amp;gt;{{ mediawiki.external('contatore visite') }}&amp;lt;/strong&amp;gt;" i-digits="7" startspan</span>&lt;img src="_vti_bin/fpcount.exe/C:/Documents%20and%20Settings/rocco/Documenti/uilpensionatitaranto/?Page=index.htm|Image=4|Digits=7" alt="Contatore visite"&gt;<span class="comment">webbot bot="HitCounter" i-checksum="24676" endspan</span></td> <td height="1" style="border-style: none; border-width: medium" width="31%"> </td></tr>
</tbody></table>
<p>&lt;/body&gt;&lt;/html&gt;
</p>
Ripristina questa versione