Newsgroup: it.comp.lang.javascript
Titolo: css:  nome classe gia' utilizzato

<style type="text/css">
.paragrafo {
	text-align: center;
	color: blue;
	//ecc.
}
</style>
 
<script type="text/javascript">
	div=document.createElement('div');
	div.innerHTML=123;
	div.setAttribute('class','paragrafo');
 
	document.body.appendChild(div);
</script>
 
Mettiamo che il codice appena scritto venga inserito in una pagina html.
Mettiamo che la pagina html utilizzi già una classe css denominata 
proprio con lo stesso nome (paragrafo), che è magari inserita in un file 
.css esterno.
 
Abbiamo quindi due classi con nome uguale, ma quasi certamente con 
proprietà diverse.
Si crea quindi il tipico conflitto...
 
Per ovviare a ciò si potrebbero specificare le proprietà di style 
tramite codice JS.
Cioè invece di
 
	div.setAttribute('class','paragrafo');
 
scrivere direttamente
 
	div.style.textAlign='center';
	div.style.textAlign='blue';
	//ecc.
 
Naturalmente se le proprietà sono molte, il tutto diventa poco elegante 
(come voi insegnate, le proprietà e sempre meglio specificarle 
normalmente nel css)...
 
Non ci sarebbe magari un sistema per isolare il codice scritto all'inizio?
Magari racchiudendolo in una sorta di namespace
 
namespace mioJs {
	/*qui posso usare tranquillamente la classe 'paragrafo'
	senza interferire col documento principale*/
}
 
Non mi pare che però esistono cose del genere...

 }
 
Che c'entra JS? Non parlavamo di CSS?

 }
 
Confondi js con css. Non farlo.
 
Come ha gia` detto ZER0, con js fai il "controller", mentre ai css lascia 
lo stile.
 
Se il .paragrafo che aggiungi con js deve avere uno stile diverso dal 
resto del sito, puoi metterlo dentro un div (o un section, o un article, 
o ...) e poi da css definire lo stile di quello.
 
I css, tra le altre cose, sono stati inventati per dare uniformita` allo 
stile del sito. Se dai una determinata classe a degli elementi, 
dovrebbero essere tutti uguali, per quanto riguarda lo stile.
 
Bye.

 dovrebbero essere tutti uguali, per quanto riguarda lo stile.
 
Io penso, almeno così l'ho inteso, che la problematica fosse relativa al
codice usato da terzi. Ovvero non per lo sviluppo di un'applicazione,
non per lo sviluppo di un sito, ma per un componente che altre persone
potrebbero riusare, e quindi non sai a priori lo stile che quella pagina
potrà avere.
 
Premesso che comunque non c'è modo di risolverlo al 100% comunque la si
ponga, anche perché i CSS sono stati fatti apposta per essere "a
cascata" e comulativi, alla fine secondo me è una problematica che
dovrebbe risolvere l'utilizzatore finale. Se c'è un conflitto sta a lui
risolverlo. Ovviamente magari si potrebbe usare prefissi o altro per
rendere il conflitto un po' meno probabile. :)
 

 Che c'entra JS? Non parlavamo di CSS?
 
cioè io vorrei sapere se c'è un modo per inglobare sia css che js, in 
una medesima "area isolata", come se fosse un documento a se stante.
Ad ogni modo il link che hai mi postato mi sembra una discreta 
soluzione, ma se non è supportato...

 soluzione, ma se non è supportato...
 
Non ancora da tutti, e comunque non risolverebbe quello che cerchi di
fare te.

 Bye.
 
ma ci possono essere elementi che richiedono stili particolari 
(posizione assoluta, trasparenza, sovrapposizione...), e a tali stili 
bisogna dare un nome, che deve essere diverso da tutti gli altri nomi.
E' proprio questa la certezza che bisogna avere quando si incorpora un 
elemento "precostruito": l'elemento ospite non deve accedere (se non 
volontariamente) alle risorse dell'ospitante

 rendere il conflitto un po' meno probabile.:)
 
improbabile, ma sempre possibile.
Ecco perchè sarebbe utile un sistema per far lavorare padre e figlio in 
ambienti diverso.
Il figlio deve solo fornire l'output formattato al padre, per il resto 
niente in comune

 niente in comune
 
La versione breve: non lo puoi fare.

 stante (vedasi iframe).
 
mi sa che a questo punto l'unico modo è impostare le proprietà tramite 
codice js

 codice js
 
Non serve a niente. Anche in questo modo non ottieni quello che cerchi,
perché non è come un documento a sé stante. Tu hai detto:
 
"Il figlio deve solo fornire l'output formattato al padre, per il resto
niente in comune"
 
Ciò non lo puoi ottenere, fintanto che il documento è lo stesso (quindi
non iframe), "padre" e "figlio" (qualsiasi cosa tu voglia intendere con
questo, immagino con "padre" il documento vero e proprio e con "figlio"
il nodo che tu vai inserendo) avranno sempre *tutto* in comune.
 
Un esempio semplice? Diciamo che tramite JavaScript imposti uno stile
per il tuo div, qualcosa tipo:
 
    div.style.textAlign='center';
 
Perfetto. Ma se nel CSS c'è qualcosa tipo:
 
    div { text-align: left!important }
 
Il tuo div sarà allineato a sinistra.
 
Ma mettiamo che non sia questo il caso. Mettiamo che tu faccia un div
che ti serve per fare una finestra di dialogo, e che per rientrare
esattamente deve avere width 320px. Farai qualcosa tipo:
 
    div.style.width = "320px";
 
Ma poi da CSS hai qualcosa tipo:
 
    div { padding: 20px }
 
E il tuo div risulterà 360px, sballandoti ogni cosa.
 
E questo solo per tirare in ballo esempi semplici, il discorso può
essere ben più complesso se ti leggi il link che ti ho inviato
precedentemente.
 
Non solo: usando gli style inline (ovvero `div.style` da JS), ti freghi
le mediaquery, quindi se vuoi avere uno stylesheet diverso in base al
dispositivo (mobile, desktop) o per la stampa, non puoi.
 
Se il tuo scopo è "isolare" il nodo che vai ad aggiungere al documento,
dal documento stesso, la risposta è quella che ti ho dato prima: non puoi.

 volontariamente) alle risorse dell'ospitante
 
Dovresti guardare la differenza fra id e class
Leonardo
 

 dal documento stesso, la risposta č quella che ti ho dato prima: non puoi.
 
gioco pesante:
document.write('<div style="text-align:right!important">testo</div>');
 
Adesso chi la vince?

 Dovresti guardare la differenza fra id e class
 
in che senso?
Anche con gli id ci possono essere omonime, ed andrebbe ancora peggio

 Adesso chi la vince?
 
L'Entropia.
Prima o poi conquistera` l'universo.
 
Bye.

 volontariamente) alle risorse dell'ospitante
 
E` un semplice problema di organizzazione tua a cui il sistema non puo' 
porre rimedio.
 
E gli esempi molto astratti che porti non aiutano ad aiutarti.
 
Per esempio:
 
<body>
 <header>
  <h1>Titolo del sito</h1>
 </header>
 <article>
  <h1>Titolo dell'articolo</h1>
  <date>1 giugno 2012</date>
  <p>blablabla</p>
  <p>blablabla</p>
 </article>
 <aside>
  <div class="block">
   <h1>Titolo del blocco</h1>
   <div>blablabla</div>
  </div>
 </aside>
 <footer>
  <h1>Sitemap</h1>
  <ul>...</ul>
 </footer>
</body>
 
Ci sono 4 h1, tutti con funzioni diverse, ma puoi 
"namespacizzarli" (contestualizzarli):
 
header h1 { background: url(logo.jpg); text-indent: -9999px; }
article h1 { font-size: 2em; }
aside h1 { font-size: 1.5em; color: red; }
footer h1 { font-weight: bold; }
 
Lo stesso puoi fare con le classi e gli id. Se stai importando qualcosa 
di esterno, racchiudilo dentro un contenitore che conosci:
 
<div id="facebook-like">
 <script src="
www.facebook.com/quelchee.js
"></script>
</div>
 
A quel punto lo hai isolato e puoi stilizzarlo come vuoi:
 
#facebook-like h1 { color: blue; }
 
Bye.

 Adesso chi la vince?
 
Sempre il documento, perché vai ad aggiungere gli elementi NEL
documento. Come ti ho detto, se io facessi:
 
    div {
        padding: 20px;
    }
 
Quello che tu avresti impostato sarebbe solo il text-align, tutte le
altre proprietà sono CONDIVISE perché il nodo non è isolato dal
documento. Tu vuoi l'isolamento, ma questo non esiste. Dovresti
impostare TUTTE le proprietà ESISTENTI per TUTTI gli elementi che ti
interessa, con dei valori usando "!important".
 
E anche questo, in un'ottica più ampia, sarebbe inutile. Se io
aggiungessi uno User Stylesheet (vedasi il link che ti ho mandato sui
CSS e la loro natura "cascade") impostando:
 
    div {
        text-align: left!important
    }
 
La vincerebbe comunque lo User Stylesheet rispetto al tuo
"document.write" e "div style" nella pagina.
 
E questo senza tirare in ballo JavaScript. Se tiriamo in ballo JS,
allora non ci sono condizioni che tengano. Puoi scrivere tutti i
document.write che vuoi, ma basta un:
 
    $(function(){
        $("div").css("text-align", "left");
    });
 
Nella pagina, per vanificarli tutti quanti.
 
Te lo ripeto. Non puoi avere un "isolamento" come lo intendi tu. I CSS
sono stati fatti appositamente per essere "cascade".

 Anche con gli id ci possono essere omonime, ed andrebbe ancora peggio
 
Anche con i "namespace" che citi precedentemente ci possono essere
omonimie. Ci possono essere sempre omonimie, il succo è cercare di
ridurle il più possibile, così come fanno i namespace, se si rischia di
avere una casistica del genere.

 Prima o poi conquistera` l'universo.
 
Sacrosanta verità.

 "document.write" e "div style" nella pagina.
 
chiedo scusa
 
<style type="text/css">
div {
text-align:center !important;
}
</style>
 
<div style="text-align:right!important">testo</div>
 
Perchè allora il testo appare a sinistra?

 Perchè allora il testo appare a sinistra?
 
Perché non hai letto il link che ti ho passato all'inizio. Ho
specificato "User Stylesheet", e se appare a sinistra quello non è uno
User Stylesheet.
 
Documentati bene sui CSS partendo dal link che ti ho dato, sui pesi,
come funzionano, e sull'HTML in generale. Poi ne riparliamo.
 
Vedrai che l'isolamento di cui parli e vuoi non esiste in quanto il
documento è uno solo; e qualsiasi cosa tu possa fare sul nodo una volta
agganciato al documento non può essere isolato. Ammesso che tu accantoni
gli User Stylesheet, dovresti specificare ogni singola proprietà con
"!important", come ti ho detto, e questo comunque non ti mette a riparo
da JavaScript: se la pagina imposta alcuni CSS tramite JS invece che con
i fogli di stile, non ci puoi fare un granché. Questo perché non
esistono nodi "isolati".
 
Per essere ancora più chiari, non puoi avere un nodo in un documento il
cui stile viene specificato da te e il documento stesso non è in grado
di cambiarlo, direttamente o indirettamente, tramite CSS o JavaScript.
 
Come tutti ti hanno fatto notare, ciò che vuoi non si applica alle
tecnologie che vuoi usare, e ti hanno suggerito paradigmi differenti.
Probabilmente ciò che dovresti fare, è un passo indietro: Cchiederti
come mai hai bisogno di questo tipo di "isolamento", qual'è lo scopo che
vuoi raggiungere. È probabile che vi sia una strada migliore, o comunque
più in linea con HTML e CSS per raggiungere tale scopo. Vedasi per
esempio il thread sulla generazione di ID unici.

 avere una casistica del genere.
 
si, ma almeno si può usare la cosiddetta "virtualizzazione": un ns in 
genere può benissimo contenere un altro ns con stesso nome.
Inoltre si può impedire al figlio di accedere "inconsapevolmente" al 
nodo-padre, se non tramite l'uso esplicito di 'parent', 'myContainer', 
'myBase', ecc...
 
In pratica se esiste una risorsa all'interno del ns, viene usata quella 
risorsa, non quella del nodo-padre (anche se dovesse avere lo stesso nome).
Ognuno utilizza il suo livello, il suo canale, la sua frequenza...

 risorsa, non quella del nodo-padre (anche se dovesse avere lo stesso nome).
 
Il paragone che fai è fallace, perché stai confondendo Classi e
namespace. Quando crei un "DIV" e lo aggiungi al documento, è come se tu
creassi un instanza di una classe: erediti tutto ciò che la classe
definisce di default. Se crei un DIV, e lo aggiungi al documento dove
c'è un altro DIV, questi due elementi sono stati creati dalla stessa
"Classe", quindi condividono i medesimi attributi. Se dici che in quel
documento tutti i DIV devono essere di colore rosso, è come se lo
impostassi a livello di "Classe". Ergo, i due elementi condividono lo
stesso namespace.
 
Come ti ho già scritto precedentemente, anche se mi pare tu l'abbia
ignorato, ci sono i namespace anche in HTML e CSS. Quindi puoi creare
due elementi che non condividono lo stesso NS e quindi gli attributi non
vengono condivisi.
 
Detto questo, però, non sono comunque nodi isolati dal resto del
documento, in quanto parte del documento stesso: se la pagina non è
sotto il tuo controllo, chiunque può riscrivere una regola CSS che
ridefinisce gli stili per i tuoi elementi con un dato namespace, oppure
usare JS come ti ho mostrato in uno dei post precedenti.
 
L'isolamento, ti ripeto, non esiste in queste tecnologie come lo intendi tu.

 #facebook-like h1 { color: blue; }
 
#facebook-like potrebbe essere già utilizzato
 
Ps
 
Io sono un matematico, per cui se 2+2 fa 4, 4-2 deve fare 2 (almeno 
restando nell'insieme R con numeri finiti).
Ci sono cose improbabili ma non impossibili, per cui dal punto di vista 
matematico è "più che normale" che possano capitare.
Quindi purtroppo non mi piacciono certe soluzioni "empiriche", e cerco 
sempre di evitarle.
Ad ogni modo pazienza, se certi linguaggi/strutture non offrono 
soluzioni "assolute", cercherò di accettare...

 L'isolamento, ti ripeto, non esiste in queste tecnologie come lo intendi tu.
 
appunto, purtroppo non posso usare il mio approccio.
Massima indipendenza possibile tra moduli e sotto-moduli.
Previste modalità di interscambio di dati: dove e quando devono essere 
stabiliti in modo inequivocabile

 di cambiarlo, direttamente o indirettamente, tramite CSS o JavaScript.
 
ok devo basarmi su questa logica
 
 > Vedasi per esempio il thread sulla generazione di ID unici.
 
si, sotto questo aspetto sono riuscito infatti sono riuscito ad 
applicare la logica che volevo.
Praticamente ho capito che in realtà non mi serve usare gli id

 appunto, purtroppo non posso usare il mio approccio.
 
È quello che sto cercando di dirti da diversi post.
 
L'impressione generale è che tu abbia frainteso o non del tutto compreso
le tecnologie web, e che tu le usi nel modo sbagliato: come usare il
manico di un cacciavite per battere una vite nel legno.
 
Sicuramente HTML, JS e CSS hanno le loro limitazioni (del resto furono
creati per tutt'altri scopi) e sono in costante miglioramento, come
tutte le cose, ma se a questo aggiungi un fraintendimento di base sarà
difficile usarle correttamente e soprattutto avere una chiara idea del
quadro generale.

 Praticamente ho capito che in realtà non mi serve usare gli id
 
... Non hai neppure bisogno di avere quel genere di "isolamento".

 sempre di evitarle.
 
Non sono soluzioni empiriche. Sono perfettamente deterministiche, in 
questo caso.
 
Solo che tu non hai capito le precondizioni, la sintassi e la grammatica 
di quello che stai facendo, e cerchi di adottare quelle di linguaggi 
diversi.
 
E` come calcolare il volume di una sfera usando il numero di Avogadro e 
ignorando pigreco. Buona fortuna.
 
Appena avrai capito che sbagli e ti metterai a studiare come si deve, 
forse capirai anche DOVE sbagli e come correggere.
 
Bye.

 ... Non hai neppure bisogno di avere quel genere di "isolamento".
 
forse no, cmq devo mettere in ordine le idee

 quadro generale.
 
certo, intanto devo procedere col mio lavoro, e magari scopro che certe 
problematiche non esistono.
Forse ho fatto troppe teorie, a computer spento, in notti insonni ;)

 a();
 
MyNamespace = {
 a: function() {
  document.write('1');
 }
}
 
function a() {
 document.write('2');
}
 
a();
MyNamespace.a();
 
Ecco i namespace. :P
 
Bye.
 
P.S.: Il discorso e` molto piu` complesso, e devo ancora comprenderlo del 
tutto, ma puoi considerarla una base di partenza.

 forse capirai anche DOVE sbagli e come correggere.
 
devo anche procedere il lavoro, forse mi sono soffermato su teorie sbagliate

 tutto, ma puoi considerarla una base di partenza.
 
è già qualcosa

 forse no, cmq devo mettere in ordine le idee
 
Mi sembra un'ottimo proposito. :)

 Forse ho fatto troppe teorie, a computer spento, in notti insonni ;)
 
Allora buon lavoro – magari, appunto, capire che lavoro stai facendo
potrebbe anche indirizzarti meglio – e ti auguro di avere meno notte
insonni davanti a te.

 tranquillamente modificare l'iframe in base al contenuto.
 
ma lo devo fare manualmente?
Spero di no (lo deve fare da solo)


 
beh io ci ho marciato per decenni, e ancora lo uso; è sempre uno 
strumento molto evoluto.
Infatti per certi versi usando questi linguaggi di rete, mi sembra di 
essere tornato a più di 15 anni fa: poca tipizzazione delle variabili, 
strumenti di monitoraggio/debug praticamente assenti...
 
Vabè sono due realtà un po' diverse, con meccanismi e funzionamenti 
diversi (anche se si tratta sempre di programmazione); quindi 
giustamente non si possono fare paragoni
 

 strumenti di monitoraggio/debug praticamente assenti...
 
Non sono assenti (e vanno imparati a usare, vedasi post precedenti ;) ),
ma concordo che sono carenti e non paragonabili ad altri ambienti. Ma
del resto anche XCode non è confrontabile a Visual Studio.
 
Il lato positivo, è che sono in costante sviluppo e miglioramento. :)
 

 ho tre file: 1.html, 2.html, 3.html
 
[cut]
 
Okay, ho visto il codice e ci sono diversi errori soprattutto di
concetto e di impostazione. Potremmo stare qui a discuterne, ma come hai
detto te finisce che perdi più tempo a rispondere ai messaggi sul NG che
a impratichirti.
 
Quindi il mio consiglio è spassionato è: studia bene come funzionano le
tecnologie web, HTML, CSS e JavaScript; fatti dei tutorial e leggi libri
aggiornati (quelli di qualche anno fa sono più dannosi che altro); butta
un occhio alle varie librerie che ci sono a giro e come affrontano certe
problematiche (jQuery, underscore, backbone, spine, e chi più ne ha più
ne metta); perché a mio avviso il problema di fondo è che non hai ben
chiaro come usare questi linguaggi ancora; e che tu continui a avere la
mente impostata su linguaggi e contesti completamente differenti.
 
A volte è utile avere in testa altri linguaggi e riportare funzionalità
mancanti dall'uno all'altro, ma solo quanto si è abbastanza padroni di
entrambi. Quindi cerca di sgomberare un po' la mente, studiare bene il
tutto senza preconcetti, e poi riprova ad affrontare la stessa tematica.
 
Dopo questo lavoro potremmo magari parlare di come hai infine impostato
il tutto, e se ci sono ancora cose che non ti sono del tutto chiare.

 il tutto, e se ci sono ancora cose che non ti sono del tutto chiare.
 
ok, grazie di tutto

 Non sono assenti (e vanno imparati a usare, vedasi post precedenti;)  ),
 
ma sempre utilizzando parti di codice temporanee.
Non esistono ad esempio strumenti avanzati per monitorare il codice 
step-by-step (punti di interruzione, valori assunti dalle variabili in 
quel momento)
 

 quel momento)
 
Ma stiamo scherzando? Certamente che esistono. Il sopracitato Cloud9,
per non parlare del vecchio e caro Firebug, del Web Inspector, dei nuovi
Debugger per Firefox… Ormai ogni browser ha quello che dici tu, con la
possibilità anche di avere breakpoint custom (ovvero, "bloccati su
questa linea solo se la variabile X ha valore Y" ad esempio).
 
Senza contare le Debugger API introdotte recentemente da Mozilla, con le
quali puoi, in JavaScript, crearti il TUO Debugger, ispezionando il
codice a Runtime. Non ci sono molti altri linguaggi che ti permettono
una cosa simile.

 Debugger per Firefox… Ormai ogni browser ha quello che dici tu, con la
 
 
ok penso che li dovrò provare

 ok penso che li dovrò provare
 
Direi di si, ti semplificano notevolmente il debugging. Se qualcosa non
la sai, soprattutto in un ambiente nuovo, non devi dare per scontato che
non esista. Magari non esiste, ma magari no. :) Cerca di avere una mente
aperta e il più possibile libera dai preconcetti, e approfondisci il
nuovo ambiente di sviluppo in cui sei. Sicuramente troverai cose che ti
mancheranno, e avrai difficoltà a volte, ma troverai anche cose molto
interessanti che nei linguaggi e ambienti precedenti non avevi.

 Direi di si, ti semplificano notevolmente il debugging. Se qualcosa non
 
sto provando c9 ma lo devo capire, in output mi da:
 
Tip: you can access long running processes, like a server, at 
'
http://demo-project.netcult.c9.io
'.
Important: in your scripts, use 'process.env.PORT' as port and '0.0.0.0' 
as host.
debugger listening on port 15154
 
Ma Web Inspector è solo per MAc?

 Ma Web Inspector è solo per MAc?
 
No, è parte integrante del browser, quindi dipende per quale piattaforma
il browser è disponibile. Tutti gli Inspector e Debugger li hai su
Chrome, Safari, Firefox, e qualcosa anche su IE nelle ultime versioni
soprattutto (8 e 9), ma non lavorandoci non ti posso garantire la loro
bontà rispetto ai primi, sebbene almeno per IE9 abbia letto reazioni
positive.


 
quindi metto il codice js in un file a parte, magari inscatolandolo a 
sua volta in un'apposita function.
 
Nel file html aggiungo quindi l'apposito riferimento nell'head:
<script type=... src=.......
OK.
 
Però allo script (esterno) come faccio ad indicargli di scrivere proprio 
in quel div?


 
Come punto di partenza.

 Come punto di partenza.
 
ok

 ok
 
Buono studio! Facci sapere se ci sono dei dubbi durante la lettura di
quei tutorial. :)