[DOM/Javscript: come manipolare object?]

**zeferino.siani** · 02-10-2008, 19:59

Egregi Utenti di HTML.it forum > Lato client > JavaScript.

Su W3Schools ho trovato questo codice:

Codice PHP:


<html>

<body>



<form id="myForm">

Firstname: <input id="fname" type="text" value="Mickey" />

Lastname: <input id="lname" type="text" value="Mouse" />

<input id="sub" type="button" value="Submit" />

</form>





Get the value of all the elements in the form:


<script type="text/javascript">

var x=document.getElementById("myForm");

for (var i=0;i<x.length;i++)

{

document.write(x.elements[i].value);

document.write("
");

}

</script>

</p>



</body>

</html>

e questo output:

Codice PHP:


Firstname: Mickey Lastname:  Mouse 

Get the value of all the elements in the form:

Mickey

Mouse

Submit

Ho personalizzato (a scopo di esercitazione) il codice in questo modo:

Codice PHP:


<html>

<body>



<form id="myForm">

Firstname: <input id="fname" type="text" value="Mickey" />

Lastname: <input id="lname" type="text" value="Mouse" />

<input id="sub" type="button" value="Submit" />

</form>





Get x in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x);

</script></p>





Get first element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[0].value);

</script></p>





Get second element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[1].value);

</script></p>





Get third element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[2].value);

document.write("
");

</script></p>





Get all elements in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

for (var i=0;i<x.length;i++)

{

document.write(x.elements[i].value);

document.write("
");

}

</script></p>

</body>

</html>

ed ho ottenuto questo output:

Codice PHP:


Firstname:Mickey  Lastname: Mouse  

Get x in the form: 

[object] 



Get first element in the form: 

Mickey



Get second element in the form: 

Mouse



Get third element in the form: 

Submit



Get all elements in the form: 

Mickey

Mouse

Submit

La mia domanda è questa: come posso manipolare ulteriormente [object]?

Grazie.

Cordiali saluti

icerone80

**zeferino.siani** · 02-10-2008, 20:39

Egregi Utenti di HTML.it forum > Lato client > JavaScript.

Nel post precedente chiedevo:

La mia domanda è questa: come posso manipolare ulteriormente [object]?

Rileggendo il post, ho rilevato che la domanda è troppo generica. Pertanto, aggiungo alla domanda alcuni dettagli.

In base alla teoria del linguaggio DOM, una pagina web viene rappresentata come una struttura gerarchica ad albero, formata dai vari elementi, detti nodi.
Ora, [obiect] che cosa rappresenterebbe? L'intero form (nodi elementi e nodi stringhe), oppure solo l'insieme dei valori delle stringhe? O qualcosa altro?
Ho provato ad applicare la sintassi del tipo document.object. ecc1.ecc2... ma non mi viene visualizzato nulla. Ho anche pensato che [object] non è direttamente scompattabile, manipolabile.
Come stanno esattamente le cose?

Grazie.
Cordiali saluti.
Cicerone80

**cavicchiandrea** · 02-10-2008, 20:52

Dal quel che sono io object e l'oggetto del document Es: form, input, select, img, etc.... documentati http://javascript.html.it/guide/lezi...4/gli-oggetti/

**fcaldera** · 02-10-2008, 21:24

se vuoi sapere a cosa corrisponde il primo output [object]
basta vedere che assegnazione hai fatto

codice:

var x=document.getElementById("myForm"); 
...
document.write(x);

x è il riferimento al nodo il cui id è uguale a "myForm"
per esserne sicuro prova a stampare in output altre proprietà ad es.

codice:

var x=document.getElementById("myForm"); 
...
document.write(x); 
document.write(x.id);  // restituisce "myForm" 
document.write(x.tagName);  // restituisce "FORM" 
document.write(x.parentNode.tagName);  // restituisce "BODY"

**zeferino.siani** · 03-10-2008, 16:24

Egr. fcaldera,

lei mi precisava:

x è il riferimento al nodo il cui id è uguale a "myForm"
per esserne sicuro prova a stampare in output altre proprietà ad es.

,
e poi suggeriva, tenendo conto del fatto che x è il riferimento al nodo il cui id è uguale a "myForm", di provare a stampare in output altre proprietà ad es.:
codice:

var x=document.getElementById("myForm");
...
document.write(x);
document.write(x.id); // restituisce "myForm"
document.write(x.tagName); // restituisce "FORM"
document.write(x.parentNode.tagName); // restituisce "BODY"

Ho seguito i suoi suggerimenti, ed è bingo!
Questo il codice:

Codice PHP:


<html>

<body>



<form id="myForm" action="http://www.google.com" method="POST">

Firstname: <input id="fname" type="text" value="Mickey" />

Lastname: <input id="lname" type="text" value="Mouse" />

<input id="sub" type="button" value="Submit" />

</form>





Get x in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x);

var x1=document.getElementsByTagName("myForm");

document.write("
");

document.write(x1);

var x=document.getElementById("myForm").tagName;

document.write("
");

document.write(x);

var x=document.getElementById("myForm").parentNode.tagName;

document.write("
");

document.write(x);

var x=document.getElementById("myForm").lenght;

document.write("
");

document.write(x);

var x=document.getElementById("myForm").method;

document.write("
");

document.write(x);

var x=document.getElementById("myForm").name;

document.write("
");

document.write(x);

var x=document.getElementById("myForm").action;

document.write("
");

document.write(x);





</script></p>





Get first element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[0].value);

</script></p>





Get second element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[1].value);

</script></p>





Get third element in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

document.write(x.elements[2].value);

document.write("
");

</script></p>





Get all elements in the form: 

<script type="text/javascript">

var x=document.getElementById("myForm");

document.write("
");

for (var i=0;i<x.length;i++)

{

document.write(x.elements[i].value);

document.write("
");

}

</script></p>

</body>

</html>

[/i]

e questo è l'output:

Codice PHP:

Firstname: Mickey Lastname: Mouse Get x in the form: [object] [object] FORM BODY undefined post [url]http://www.google.com[/url] Get first element in the form: Mickey Get second element in the form: Mouse Get third element in the form: Submit Get all elements in the form: Mickey Mouse Submit

La ringrazio per avermi dato lo spunto per approfondire alcuni aspetti del DOM che reputo fondamentale, e cioè:

DOM (Document Object Model), modello che descrive come sono interconnessi i diversi oggetti di una pagina.
Si accede al DOM con Javascript.
Abbiamo a disposizione un insieme di funzioni, metodi e proprietà che fanno un grosso lavoro per noi.

P.S.N°1 MI SCUSI L'IGNORANZA, MA COME SI FA UNO SNAPSHOT (... e dire che lo sapevo fare, ma ora me lo sono scordato!). A ME INTERESSA VISUALIZZARE ANCHE LE IMMAGINI DELL'OUTPUT DI UN CODICE. LAVORO CON WINDOWS XP E I.E.

grazie.grazie. GRAZIE!

P.S.N°2: approfitto del fatto che lei è un [I]moderatore per chiederle: posso postare in HTML.it forum > Lato client > JavaScript > [DOM/Javscript: come manipolare object?] anche problemi relativi ad Ajax? Il fatto è che non ho trovato una sezione specifica su HTML.it forum , e ... in base all'acronimo, questo SAREBBE IL POSTO GIUSTO. Alternativa possibile:XML! Ma, onestamente, se fosse possibile ed in linea di cortesia, vorrei postare quì alcuni dubbi e problemi su AJAX.

Cordiali saluti
Cicerone80

**zeferino.siani** · 03-10-2008, 16:50

Egr. cavicchiandrea.

Ottimo il suo indirizzo: Gli Oggetti.

HTML.it è veramente un'ottima fonte di documentazione.

Le definizioni, chiarissime!
... e a tratti anche divertente: ora so di quante lettere è formata la parola 'paradiclorobenzolo', e non solo... ma anche 'antrapurpurinsolfonico' (acido, - e di mia iniziativa), e 'precipitevolissimevolmente' (di mia iniziativa)!

P.S. ...non chiedo anche a lei quanto ho chiesto al moderatore fcaldera per non incorrere in ultrapalese spam! ... e poi, farlo proprio con un moderatore, sarebbe da fucilazione...!

GRAZIE.
Cordiali saluti
Cicerone80.

**fcaldera** · 03-10-2008, 16:54

in javascript vengono postati spesso quesiti relativi ad ajax
ovviamente sempre relativi a problemi sull'oggetto xmlhttprequest e sui metodi per inviare la richiesta e leggere la risposta (che è puro codice javascript).

I problemi legati invece alla costruzione dell'output ed il suo invio, da parte del server, vanno di norma indirizzati sul forum relativo al linguaggio lato server utilizzato

(Per lo snapshot: [alt+stamp] dalla finestra corrente, oppure puoi usare "screen grab" un plugin specifico per firefox)

**zeferino.siani** · 04-10-2008, 20:47

Salve fcaldera,

cito la tua risposta:

in javascript vengono postati spesso quesiti relativi ad ajax
ovviamente sempre relativi a problemi sull'oggetto xmlhttprequest e sui metodi per inviare la richiesta e leggere la risposta (che è puro codice javascript).

I problemi legati invece alla costruzione dell'output ed il suo invio, da parte del server, vanno di norma indirizzati sul forum relativo al linguaggio lato server utilizzato

Grazie.
Sto alle prime battute con l'oggetto xmlhttprequest.
Testando del codice fatto da esperti, mi sono imbattutto in un messaggio in cui mi si dice che l'oggetto xmlhttprequest non è definito. Ho pensato che ciò dipende dal fatto che lavoro con un server locale (ho installato e configurato Apache 2.0 + MySQL 5.0 + PHP 5); il mio browser è Internet Explorer 7.
In tal caso, avrei bisogno di sapere qual'è un buon Web Hosting. Su WordPress ho già un mio blog, mentre su Libero ho un sito personale, a pagine statiche (d'altra parte, Libero non mette a disposizione degli utenti le estensioni php!). Non ho visto su WordPress dei siti veri e propri. Ovviamente, free è meglio, ma sarei disposto a spendere qualcosa, purchè il web hosting offra servizi almeno dignitosi.

Di seguito il codice:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, [url]www.pspad.com[/url]">

  <title></title>

<script type="text/javascript">

 var myRequest = null;



function CreateXmlHttpReq(handler) {

  var xmlhttp = null;

  xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = handler;

  return xmlhttp;

}



function myHandler() {

    if (myRequest.readyState == 4 && myRequest.status == 200) {

        alert(myRequest.responseText);

    }

}



function esempio3() {

    myRequest = CreateXmlHttpReq(myHandler);

    myRequest.open("GET","primo.php");

    myRequest.send(null);

}

</script>

</head>

  <body>

<input type="button" value="Clicca per lanciare la richiesta" onClick="esempio3()" />

<?

echo("Questi dati vengono dal PHP");

?>



  </body>

</html>

Testando lo script, nella finestra di Microsoft Visual Studio Debugger esce il messaggio:

Errore di run-time di Microsoft Script: 'XMLHttpRequest non è definito' - (riga 11)

Mi fermo alle cose concrete: Se volessi parlare di cose più astratte , non capisco come da una parte l'inventore di Ajax parla espressamente di XML (anzi, avrebbe coniato un acronimo breve ma suggestivo, lasciando fuori CSS e DOM), mentre l'autore del suddetto codice sostiene che XML non c'entra per nulla. Ho messo il termine 'astratte ' in corsivo, perchè, per quel poco che so, XML potrebbe essere in un prossimo futuro il vettore fondamentale e portante di tutto quell'insieme di tecniche che vanno sotto il nome di Ajax, in base al concetto che possono essere scambiati dati con il server in modo asincrono, senza aspettare cioè il ricaricamento della pagina, ma 'prendendo al volo' i dati che servono non appena il server ha terminato l'elaborazione (onreadystatuschange).

Non meravigliarti se ho preso una bella cantonata! All'inizio di ogni cosa ci sono sempre tanti lati oscuri. Importante è alla fine chiudere il cerchio.

Cordialmente.
Cicerone80

**zeferino.siani** · 04-10-2008, 23:01

Egr. fcaldera

Per favore, un pò di pazienza.

Ho fatto altre prove (tutte negative, anche utilizzando codice di esperti), e sono arrivato alla conclusione che sono possibili solo due alternative:
[list=1][*]configurare il mio server locale (Apache) in modo da poter utilizzare XMLHttpRequest in locale[*]appoggiarmi ad un buon Web Hosting, dove creare un sito dinamico e provare a utilizzare Ajax con scrip lato client (Javascript) e script lato server (PHP)[/list=1]

Però, siccome non sono ancora pronto per allocare un mio sito su un Web hosting, posso configurare il mio server in locale Apache 2 in modo da poter testare XMLHttpRequest con script Javascript e php?

Cordialmente
Cicerone80

**fcaldera** · 04-10-2008, 23:17

il fatto che l'interprete javascript segnali un errore sull'oggetto in questione non ha a che vedere in nessun modo con il server utilizzato, quindi entrambe le alternative non sortirebbero alcun effetto.

Inoltre non potrei darti suggerimenti migliori di quelli che sono nell'ottima guida ajax su javascript.html.it
Ti suggerisco di iniziare da lì, cercando di comprendere gli esempi e di metterli in pratica

Discussione: [DOM/Javscript: come manipolare object?]

Strumenti discussione

Ricerca discussione

Visualizza

[DOM/Javscript: come manipolare object?]

[DOM/Javascript: precisazione]

[DOM/Javascript: rispondo ad fcaldera]

[DOM/Javascript: rispondo a cavicchiandrea]

[DOM/Javascript: rispondo ad fcaldera]

[DOM/Javascript: dettagli per fcaldera]

Permessi di invio