Newsgroup: it.comp.lang.javascript
Titolo: voglio imparare

scusate ma ho comprato manuali, ho fatto tentativi, ma 
javascript mi rimane ancora indigesto.
 
vi chiedo un aiuto per capire la logica di questo linguaggio 
 
partiamo da un esempio ho una tabella
<td id="td1"> link1</td><td id="td2">link2</td><td 
id="td3">link3</td>
 
vorrei che entrado nella pagina lo sfondo della prima cella
fosse celeste e gli altri bianchi.
 
cliccando sul link2 lo sfondo della prima cella divenga bianco
lo sfondo della seconda cella divenga celeste 
 
e così  via ...
 
da dove parto?
 
grazie
 

 ha scritto nel messaggio 
news:4e9a15ea$0$16651$5fc...@news.tiscali.it...

Per fare questo non basta javascipt, moltissime volte javascript lavora 
insieme ai css e secondo me questo è uno di quei casi.
Ti consiglieri anche di leggere di jquery che poi non è altro che javascript 
ma con certe funzionalità che lo migliorano.
Infatti id="td1" è css che puoi modificare con javascript/jquery id="td1", 
id="td2"...........ecc.
Saluti
Leonardo
 
 
 

 da dove parto?
 
Seguirei una logica del tipo:
 
a) var globale che indichi qual è la cella celeste
   var tdCeleste=document.getElementById("td1");
 
https://developer.mozilla.org/en/DOM/document.getElementById
 
 
b) onclick delle celle chiami una function, passando come parametro la 
cella stessa:
   <td id="xxx" onclick="colora(this)">
 
c) function colora(obj) {
     //coloro di bianco la vecchia cella
     tdCeleste.style.backgroundColor="white";
     //coloro di celeste la nuova cella
     obj.style.backgroundColor="aqua";
 
http://www.w3.org/TR/css3-color/#html4
 
     //mi salvo il riferimento della cella celeste
     tdCeleste=obj;
   }

    }
 
Questo non lo capisco 
 
in pratica alla 
2# gli dico di prendere le caratteristiche dall'elemento indicato da 
20# attivo la funzione "colora" su la riga 3#
 
seu la 4# gli dico che tutto quello che è stato definito nella riga 2# 
diventa "white"
5# definisco lo stile del colore 
 
6# ?  
 
 
 

 Leonardo
 
ti ringrazio per il consiglio, approfondirò sicuramente; anzi se hai dei 
link da suggerirmi a livello di manuale e apprendimento ti ringrazio.
 
però in questa fase voglio entrare dentro la logica, le basi del linguaggio; 
ho capito la logica di basic, c, c++, php, mysql, bash, ma sto cazzo di java 
script ogni qual volta lo prendo in mano più approfonditamente, che non sia 
l'adattamento caprone di un codice mi fa veniore il mal di testa.
 
 

 attivo la funzione "colora" su la riga 3#
 
no
 
la 2# è globale (viene eseguita 1 sola volta, all'esterno di function, 
serve solo per sapere l'elemento che all'apertura della pagina è colorato)
 
nella 6# salvi l'elemento che è ora colorato, altrimenti al prossimo 
click toglierà ancora il colore all'elemento colorato all'apertura della 
pagina e non a quello attualmente colorato (prova a fare il tutto senza 
la 6# e capirai meglio)


Quando uno ha imparato a programmare si puň paragonare ad un bambino che ha 
imparato parlare.
Se per esempio ha imparato l'italiano e vuole imparare un'altra lingua non 
deve piů imparare a parlare, ma solo memorizzare ed utilizzare nuove parole 
che hanno il significato di quelle italiane e regole grammaticali diverse ma 
che sempre sono regole grammaticali, per dire , in modo leggermente diverso 
quello che diceva in italiano.
Utilizzando al nuova lingua se ne impara sempre nuovi risvolti.
Cosě č anche il passare da un linguiaggui ad un'altro. Ma la logica č sempre 
la stessa.
Poi c'č che scrive romanzi, poesie eccelse e chi usa il saper leggere e 
scrivere per fare la lista della spesa.
E questo anche nello scrivere programmi.
Saluti
Leonardo
 
 

 Leonardo
 
 
si ma per esempio il francese l'ho studiato per tre anni; non parlo 
francese, non mi è mai entrato in testa.
 
l'inglese lo parlo lo leggo senza problemi;
 
lo spagnolo non l'ho mai studiato , ma lo pralo e lo leggo senza problemi 
 
perchè? boh?
 

 la 6# e capirai meglio)
 
ma non funziona ...
 
non cambia nulla
 
riassumo quello che ho scritto:
 
 
nel file stili.css
 
 
#td1{
		background-color: #BCCAE8;
 
	}
------
nella pagina della tabella 
 
<script LANGUAGE="JavaScript"><!--
 
 var tdCeleste=document.getElementById("td1");
 
function colora(obj) {    
     tdCeleste.style.backgroundColor="white";
          obj.style.backgroundColor="aqua";
        tdCeleste=obj;
   }
 
--></script>
------------
 
 

 e così  via ...
 
Anche questo lo puoi fare tramite CSS, specialmente perché i TD
contengono dei link, quindi puoi sfruttare le pseudo classi come :focus,
:active, etc.
 
Ovviamente, puoi sempre utilizzare JS come "backup", ma anche in questo
caso lo utilizzerei il meno possibile (tipo, solo per impostare ID o
classe CSS).
 
Ricorda, tendenzialmente si cerca di dare a JS meno lavoro possibile. Se
qualcosa può essere fatta in HTML e CSS, meglio. Bisogna ricordare
sempre che l'HTML serve per i contenuti, CSS per l'aspetto, e JavaScript
per la logica. Un codice che imposta un colore "hard coded", è nove
volte su dieci concettualmente sbagliato.
Al più, JavaScript può dire "date queste condizioni, il tale elemento è
da considerarsi selezionato". Il che, nel tuo caso, potrebbe tradursi
che la cella diventa celeste. Ma JS che diventa celeste non lo sa, non
lo deve sapere, e dovrebbe importargli di molto poco.

 l'adattamento caprone di un codice mi fa veniore il mal di testa.
 
Questo perché confondi il linguaggio JavaScript con l'host (Browser) in
cui lavora. JavaScript di suo ha le "stesse" regole di c, c++, php, etc.
Quindi puoi impararlo nello stesso modo.
Quello che di diverso c'è è l'ambiente in cui lavora, ovvero il browser.
Quindi non è JS di suo a darti problemi, secondo me, ma come JS deve
interagire con la natura del web e tutte le sue parti. È questo che lo
rende particolare rispetto a C, C++, PHP... Ci sono una serie di
problematiche che un applicazione canonica desktop non ha, rispetto a
una sviluppata su web.

 una sviluppata su web.
 
 
certo lo so; ma per farti un esempio lo stesso problema in php l'ho risolto 
lavorandoci un po'; solo ci son cose che non puoi farle in altra maniera.
 
per esempio quando il risultato del link va su  in iframe , la pagina 
principale se ne sbatte altamente delle variabilicontenute nel iframe.
 
a quel punto devo trovare una soluzione.

 lo deve sapere, e dovrebbe importargli di molto poco.
 
si ma mi dice quale cella è attiva, ritornando sopra.
 
 

 <script LANGUAGE="JavaScript"><!--
 
Basta <script>. Al più, puoi aggiungere il type:
 
    <script type="text/javascript">
 
Ma "language" è deprecated.
 
A questo punto, la via più semplice è avere "onclick" su ogni TD come ti
ha già suggerito Cristiano, perché non sappiamo cosa hai come contenuto
(ancora, come vedi JS non c'entra nulla, qui dipende da come il tuo HTML
è strutturato):
 
    <td onclick="selectItem(this)">link1</td>
    <td onclick="selectItem(this)">link2</td>
    <td onclick="selectItem(this)">link3</td>
 
Avendo a livello di script:
 
    function selectItem(item) {
        var id = "option-selected";
        var selected = document.getElementById(id);
 
        if (selected) 
selected.id
 = "";
 
 
item.id
 = id;
    }
 
Ad esempio, se sapessimo che i TD davvero contengono solo testo, invece
di avere il codice HTML sopra, potresti avere:
 
<table onclick="selectItem(event)">
    <tbody>
        <tr>
            <td>link1</td>
            <td>link2</td>
            <td>link3</td>
        </tr>
    </tbody>
</table>
 
Evitando di assegnare il listener ad ogni cella.
 
Ovviamente `selectItem` cambierebbe di conseguenza, dato che non passi
più un elemento HTML:
 
    function selectItem(event) {
        var item = event.target || event.srcElement;
 
        /** Il resto uguale **/
    }
 
Ovviamente se le celle contengono altri elementi HTML, questo non
funzionerebbe. E il "perché" non funzionerebbe non ha niente a che
vedere con JS, ma, ripeto, con il DOM e le DOM API.

 praticamente tutti i browser oggigiorno), e vedere un po' che ti dice.
 
 
come darti torto?
------------------
tdCeleste is null
     tdCeleste.style.backgroundColor="white";
 
------------
 
 
dopo do un occhio al resto ; grazie
 
 

 si ma mi dice quale cella è attiva, ritornando sopra.
 
Mi sa che non mi sono spiegato bene. In quel che ho spiegato in questo
quoting, fai praticamente tutto tramite JS – è JS che imposta la cella
attiva – a differenza di quanto detto in precedenza; questo è un altro
approccio esposto. Ma, anche se usi JS, devi sempre usarlo con
cognizione di causa ed evitare di mischiare cose di dominio di CSS, ad
esempio. In questo caso, i colori. Raramente hai bisogno in una web
application di impostare un colore da JS direttamente, di solito JS
imposta una classe o un id che ha un qualche significato. I colori sono
definiti in quella classe, o in quell'id, da CSS.

      tdCeleste.style.backgroundColor="white";
 
Immaginavo. Questo perché hai messo il tuo codice script prima che il
DOM fosse caricato, evidentemente. Quindi quando hai chiesto tramite le
DOM API di ottenere un riferimento all'elemento con id "td1", lui non lo
ha trovato (perché il document tree non ce l'aveva, non ancora).


probabilmente perché il francese ti interessa di meno
Leonardo
 
 

 ha scritto nel messaggio 
news:4e9c4f06$0$6822$5fc...@news.tiscali.it...

Dipende, se sono entrambi nel tuo sito non è così, dipende da cosa scrivi.
Per esempio puoi usare una querystring per passare i parametri da una pagina 
al'altr (contenitore-contenuto).
Ma è solo un esempio.
Leonardo
 
 

 Leonardo
 
 
ecco qui imparo qualcosa di nuovo;  php è lato server giusto? quindi avendo 
la pagina xxxx.php con un  iframe yyyy.php; mandandondo il link su yyyy.php, 
posso anche  cambiare xxxx.php senza ricaricare la pagina xxxx.php, quindi 
senza interazione lato server?
 
mi è nuova , spiega grazie
 

 ha trovato (perché il document tree non ce l'aveva, non ancora).
 
in teoria si la pagina è così composta
 
<html><head>
<?php
include ('config.php') 
// qui dentro c'è  tutto il foglio di stile 
?>
 
 
<script LANGUAGE="JavaScript"><!--
 
 var tdCeleste=document.getElementById("td1");
 
function colora(obj) {    
     tdCeleste.style.backgroundColor="white";
          obj.style.backgroundColor="aqua";
        tdCeleste=obj;
   }
 
--></script>
</head>
<body >
 
tabella 
 
 <td id="td1" onclick="colora(this)"></p></td>
   <td    onclick="colora(this)"></p></td>
 <td    onclick="colora(this)"></p></td>
 <td    onclick="colora(this)"></p></td>
 <td    onclick="colora(this)"></p></td>
 <td    onclick="colora(this)"></p></td>
 <td    onclick="colora(this)"></p></td>
 
ho provato anche a dare un id differente per ogni TD
 
Forse lo stile non lo devo scrivere in css ma i java script?


 
ok su firefox, opera, chromium, konqueror, 
 
non su internet explorer 

 non su internet explorer
 
Cosa? Codice? Errore?
 

 senza interazione lato server?
 
Non sono sicuro di aver capito cosa intendi, in quanto l'interazione
lato server la fai in ogni caso, solo non sulla pagina principale. Se
entrambe le pagine sono nello stesso dominio, come ti è stato detto,
puoi interagire. Ad esempio, metti caso che hai una pagina contenente un
solo iframe. Metti caso che questo iframe contenga:
 
    <script>
        var myVariable = "Foo";
    </script>
 
Dalla pagina principale, puoi fare:
 
    alert(window.frames[0].myVariable);
 
Puoi ovviamente accedere anche dall'iframe alla finestra principale:
 
    alert(parent.document.title);
 
Dove "parent" è un riferimento a un oggetto `window`, solo che invece di
essere quello corrente, è quello "genitore", appunto. Esiste anche
`top`, nel caso di frames nested, che identifica la finestra più "alta"
nella gerarchia (ovvero quella principale).
Nel caso descritto sopra, `parent` e `top` sono ovviamente equivalenti.

 Forse lo stile non lo devo scrivere in css ma i java script?
 
Assolutamente no, lo stile va benissimo in CSS. Prova il codice che ti
ho proposto io.


 
Dovremmo iniziare ad usare di più `DOMContentLoaded` di `window.onload`,
per quanto riguarda le versioni di IE che non lo supportano ci sono
diversi shims. Oppure, tramite librerie come jQuery, che implementano
tali hack internamente.


ok interessante, e me lo studio perchè può servire; ma è necessario in ogni 
caso uno java script o sbaglio?
 
 
 
 

 Cosa? Codice? Errore?
 
 
no scusate! mea cupla! ho testato lo script con IE istallato con Wine su 
Linux e non funziona; riprovandolo su windows XP  funziona con IE6 e IE7 
 
tutto ok!
 
grazie , adesso leggo un po' le cose che mi avete mandato, poi vi rompo con 
un'altra cosa.
 
siete stati utilissimi e chiari.

 caso uno java script o sbaglio?
 
Io stavo parlando di come far interagire due JavaScript context, quindi
ovviamente JS è un prerequisito. Come ti ho detto, non ho ben capito
cosa intendevi con la tua domanda, quindi magari ti ho detto tutt'altro
rispetto a quello che intendevi / volevi sapere tu.

 ho proposto io.
 
ok
 

inoltre supponevo che 
 
definito css td1
  var tdCeleste=document.getElementById("td1");
 
prendesse il valore direttamente dal css e  non dalla tabella.
 
 
 

 rispetto a quello che intendevi / volevi sapere tu.
 
visto il suggerimento di  leonardo, la domanda era se è possibile far 
receperie alla pagina xxxx.php una variabile che cambia nella pagina 
yyyyy.php , senza ricaricare la pagina xxxx.php e senza javascript; magari 
con  css dinamici, ma non credo.
 
php per recepire una variabile deve passare dal server.

 magari con  css dinamici, ma non credo.
 
No. Ogni pagina PHP e` un mondo a se` che nasce e muore prima che ne esca 
dell'HTML (o dell'output in genere).
 
L'unico modo per "condividere" variabili e` di salvarle sul server, in 
base allo scopo per cui ti servono, in sessione, sul database, su un 
file, in memcache, ecc. ecc.
 
Bye.

 php per recepire una variabile deve passare dal server.
 
Ovviamente, php è un linguaggio server side.

 e se ci vuole anche lo script precedente, come la richiam ala funzione?
 
Lo vedi l'HTML sopra? Ha un attributo onclick, a cui è associato
`selectItem`. È così che richiama la funzione.
Questo te l'ho scritto per semplicità, la cosa migliore sarebbe *non*
associare gli eventi tramite attributi in questo modo, ma bensì da
javascript. Ma non vorrei confonderti più di quanto tu sia già, per
questo ho evitato.

 questo ho evitato.
 
no no, tutto chiaro adesso grazie veramente. 
 
 
ora studio un po' :)
 

 
 
 
avedo definito che #td1 aveva quelle caratteristiche, mi sembrava semplice; 
ma evidentemente errato .
 
scusa
 

 Ovviamente, php è un linguaggio server side.
 
 
si si lo so perfettamente, la mia era una domana in funzione a quello che 
aveva scritto leonardoitit 
 
diciamo retorica più cher altro .
 
 
 

 ora studio un po' :)
 
Buono studio!

 scusa
 
Non devi scusarti, siamo tutti qui per imparare. :)
Ma uno dei modi migliori che conosco, è cercare di evitare supposizioni
e non pensare di sapere come le cose funzionino, se non si sanno
davvero. Quindi quando incontri del codice che "pensi" faccia qualcosa
ma non lo "sai" con certezza, studialo. Ovvero, vai nella reference
(tipo quella che ti ho mostrato per il metodo sopra descritto) e leggi
cosa fa.

 Bene :) Se hai dubbi, comunque, siamo qui.
 
non mancherò di stressarvi un po' :)
 
grazie
 

 Non vedo cosa di più semplice possa esserci, onestamente. :)
 
nel css avevo definito come doveva essere lo sfondo #td1
 
è per questo che ho chiesto se lo dovevo scrivere in css o javascript;
 
perchè definedo a monte una variabile non pensavo che javascript 
interrogasse la tabella;
 
un po' come se il barrista da il bicchiere con il conto alla cameriera e io 
de richiedo di rifare il conto alla cameriera.
 
 
si tratta di capire alcune cose, che leggi e rileggi son li, ma tutte 
insieme se non messe al posto giusto; sono inapplicabili.
 
mi sto chiarendo le idee


 foo();?
 
Ti stavo semplicemente mostrando come le "righe" non devono essere
scritte in ordine cronologico, che JavaScript non lo richiede. Se lo
richiedesse, darebbe un errore, in quanto incontrerebbe la chiamata a
`foo` ancor prima che `foo` sia definita.
 
Nel caso del `document.getElementById` non funziona allo stesso modo in
quanto stai usando le DOM API (che non sono parte di JS ma solo esposte
dall'host al linguaggio) per interrogare il document tree, che non è
ancora pronto. Se il web supportasse PHP o C lato client, per dire un
linguaggio che conosci, avresti esattamente il medesimo problema.

 insieme se non messe al posto giusto; sono inapplicabili.
 
Lo sono, basta dividerle correttamente. È palese che non ti è molto
chiara la suddivisione tra cosa è JavaScript e cosa non lo è. Quindi ti
consiglio di partire da lì. Capire cosa è JS, cosa non lo è (HTML, CSS,
DOM, DOM API, etc) e affrontare una cosa alla volta magari. Tu al
momento non stai affrontando solo JS, ma l'intero sviluppo front-end su
web: non puoi farcela se non sai neanche esattamente dove finisce una
cosa e dove ne inizia un'altra.

 linguaggio che conosci, avresti esattamente il medesimo problema.
 
 
ok!

 Non hai definito a monte nessuna variabile, se intendi tramite CSS.
 
bè?! #td1 {
 
} era definito nei css

sto cercando di capire.   
 
grazie
 
 

 grazie
 
Prego.