Newsgroup: it.comp.lang.javascript
Titolo: per Juliet

Ciao Juliet,
nei gg scorsi hai postato una bellissima Zuper per dare il benvenuto a
Ro<*¿*>berto, si trattava di una schermata nera, con un finta finestra
arancione ed il teto in dissolvenza. L'ho trovata geniale e ne volevo
studiare il codice. Purtroppo non l'ho salvata (mi sono dimenticato .. ops)
ed ora non riesco a ritrovarla.
Mi potresti dire dove potrei trovare degli effetti simili sul web? In questo
modo potrei studiarne il codice come avrei voluto.
Grazie 1000

Sigh..
nessuno ha mai parlato cosě di una mia
zuper :-(
--
Bye
        Ro<*ż*>berto

 zuper :-(







Brutta gatta da pelare questa Zuper 
  ^_____^


magari mentre te la spiego la 
  capisco un po' anch'io (mi accorgo che è davvero incasinata)


(non voglio impegnarmi troppo e 
  lascerò che sia Outlook Express a occuparsi della parte HTML del messaggio ; 
  )


 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
HTML 4.0 
Transitional//EN">
<HTML><HEAD><TITLE>Untitled</TITLE>
<META 
http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT>




Messaggio: ogni 
  "
///
" equivale ad 
  un'interruzione di paragrafo, ogni "***" ad un'interruzione di 
  riga


msg = "Benvenuto 
Maestro...///"+
"Vi conosco di fama, e ho sempre desiderato 
incontrarVi***"+
"[ non badate a ciò che si legge a nome mio sul Newsgroup 
]***"+
"[ in parte si tratta di un fake, e in parte di una messinscena 
]***"+
"[ non me ne vogliate, ve ne prego ]***///"+
"Vedo che la Vostra 
Zuper faceva uso nientemeno che di DirectX***"+
"Direct Animation, ad essere 
precisi***"+
"Purtroppo non ho potuto ammirarla, avendo disattivato ActiveX e 
Java***"+
"[ sapete com\'è, questioni di sicurezza ]***///"+
"Sono sicura 
di essermi persa un vero spettacolo,***"+
"farò il possibile per replicare in 
ambiente più sicuro la Vostra opera***"+
"[ reperire il codice, mi duole 
dirVelo, non sarà affatto un problema per me ]***"+
"[ lo Script Debugger ha 
tolto molta poeticità allo script occultato ]***///"+
"[ ... anzi, se Vi 
interessa ho uno spunto interessante a proposito ]***"+
"[ Ve lo posso 
esporre in privato? ]***///"+
"Bando alle ciance. Voi siete una leggenda, e 
mi riempe il cuore di gioia incontrarla, alfine***"+
"Ho solo il terrore di 
deluderVi***"+
"Ma sono pronta a scommettere sulla Vostra 
indulgenza***///"+
"***"+
"Sinceramente 
Vostra,***"+
"Juliet***"+
"***///"+
"[ P.S. ]***///"+
"[ Non ridete 
di me! ]***///"




Dividiamo il messaggio in un array 
  di paragrafi, contemporaneamente rimuovendo i segni di 
separazione


msg = 
msg.split("
///"
)


Trasformiamo ogni paragrafo in un array di righe, rimuovendo i 
  delimitatori di riga


for(i in 
msg){
    msg[i] = msg[i].split("***")
}




Oggetto RGB: un oggetto con tre 
  parametri (rosso, verde e blu) che verranno convertiti in altrettante 
  proprietà: r (rosso), g (verde) e b (blu)


function RGB(r, g, 
b){




Il valore di ognuna di queste 
  proprietà non può scendere sotto 0 nè salire sopra 255, quindi se i parametri 
  provano a settare un valore illegale, li aggiustiamo noi ; 
)


    
r<0?r+=255:r>255?r=255-r:r=r
    
g<0?g+=255:g>255?g=255-g:g=g
    
b<0?b+=255:b>255?b=255-b:b=b




Ora che i parametri sono a posto, li arrotondiamo e 
  li assegniamo alle proprietà dell'oggetto RGB


    
this.r = Math.ceil(r)
    this.g = 
Math.ceil(g)
    this.b = Math.ceil(b)




toHTML: questa 
  funzione (altra proprietà dell'oggetto RGB), creata al volo con new 
  Function, crea una stringa colore HTML a partire dalle proprietà r, g e b 
  dell'oggetto RGB. Se RGB.r=255, RGB.g=128 e RGB.b=0, allora RGB.toHTML() darà 
  come risultato "#FF8800". E' vero che con IE si può tranquillamente usare 
  style="rgb(255, 128, 0)", ma questo oggetto è in previsione di una futura 
  versione per Netscape. E poi impariamo dalla Microsoft, questa è una 
  scriptlet, è codice riutilizzabile!


    
this.toHTML = new Function('r = this.r.toString(16);\n' +
    
    'g = this.g.toString(16);\n' +
    
    'b = this.b.toString(16);\n' +
    
    'r.length<2?r="0"+r:r=r;\n' +
    
    'g.length<2?g="0"+g:g=g;\n' +
    
    'b.length<2?b="0"+b:b=b;\n' +
    
    'return ("#" + r + g + 
b).toUpperCase();')
}




Altra scriptlet: centra un oggetto 
  del DOM di IE in mezzo alla finestra. Serve a centrare non la 
  simil-finestra (che si centra da sè grazie ad un CSS), ma i paragrafi del 
  testo colorato (ogni paragrafo è un oggetto, a sua volta contenente oggetti 
  riga)


function 
center(obj){
    obj.style.pixelLeft = 
(document.body.clientWidth - obj.clientWidth)/2
    
obj.style.pixelTop = (document.body.clientHeight - 
obj.clientHeight)/2
}




Oggetti RGB standard: qui creo 
  nuovi oggetti RGB che mi potrebbero essere utili (corrispondono ai colori 
  nero, bianco, rosso, verde e blu)


RGB_BLACK=new 
RGB(0,0,0)
RGB_WHITE=new RGB(255,255,255)
RGB_RED=new 
RGB(255,0,0)
RGB_GREEN=new RGB(0,255,0)
RGB_BLUE=new 
RGB(0,0,255)




Questo è un colore personalizzato, 
  mi pare il "mio" giallo


RGB_CUST=new RGB(0xFF, 0x63, 
0x00)




doshade serve a creare sfumature a 
  partire da due colori (ossia due oggetti RGB). f è il colore di partenza, l 
  quello di arrivo, e s sono i passaggi della sfumatura. Le sfumature vengono 
  create sotto forma di array di stringhe colore HTML


(anch
e questo codice riciclabilissimo)


function doshade(f, l, 
s){
    temp = new Array()




Calcolo il 
  "passo" della sfumatura, ossia di quanto devono variare rosso, verde e blu ad 
  ogni passaggio


    step = new 
Array((f.r-l.r)/s, (f.g-l.g)/s, (f.b-l.b)/s)
    for(i=0; 
i<s; i++){
        if(i){




valore di arrivo + (passo x 
  passaggi da compiere) = valore del passaggio attuale


tre colori, tre valori. Tre valori, 
  un nuovo oggetto RGB. Prontamente convertito in codice HTML e aggiunto 
  all'array


            
temp[i]=(new RGB(l.r+step[0]*(s-i), l.g+step[1]*(s-i), 
l.b+step[2]*(s-i))).toHTML()
        
}
        else{


Per evitare arrotondamenti indesiderati il primo colore viene ripreso 
  pari pari come è stato passato alla funzione


            
temp[i] = f.toHTML()
        
}
    }




idem come sopra: l'ultimo colore 
  non viene calcolato, ma ripreso esattamente come ci è stato 
  passato


    temp[s] = 
l.toHTML()




Signore, la Sua sfumatura è pronta. Grazie e buona 
  giornata a Lei


    return 
temp
}




inizializzo la variabile list in 
  modo che contenga nullstring anzichè undefined (più avanti mi 
  servirà)


list=""




doit(): si dia inizio alle danze! 
  (beh, quando saremo pronti)


function doit(){




List è un 
  Enumerator. Un Enumerator è una specie di nastro trasportatore: item() 
  attiva il braccio meccanico che prende l'oggetto sul nastro e ce 
  ne restituisce il valore. item() può essere richiamato tutte le volte che 
  lo si desidera senza pericolo di interferire, perchè gli Enumerator sono di 
  sola lettura. Nel nostro caso l'oggetto sul nastro trasportatore è un Task 
  (vedi in fondo)


    del = 
list.item().delay




Eseguiamo il comando del Task 
  attuale


    
eval(list.item().cmd)




Facciamo avanzare il nastro 
  trasportatore


    
list.moveNext()




Se il nastro trasportatore non ha 
  ancora raggiunto la fine, passiamo all'oggetto successivo, ma solo dopo che il 
  tempo indicato dal task corrente è trascorso. Sennò ci fermiamo 
  qui.


    
if(!list.atEnd()){setTimeout("doit()", del)}
}


 


</SCRIPT>


 


<META content="MSHTML 
5.50.3825.1300" name=GENERATOR>
</HEAD>
<BODY 

style="BACKGROUND: black; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; 
BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
bottomMargin=0 
bgColor=#ffffff leftMargin=0 topMargin=0 scroll=no 

onload="list=tasks;doit()" rightMargin=0>
  <FIELDSET id=cont 

  style="BORDER-LEFT-COLOR: #ff9c31; BACKGROUND: #202020; LEFT: 10%; 
BORDER-BOTTOM-COLOR: #ff9c31; WIDTH: 80%; BORDER-TOP-COLOR: #ff9c31; POSITION: 
absolute; TOP: 10%; HEIGHT: 80%; BORDER-RIGHT-COLOR: #ff9c31"> 
  
<LEGEND 
  style="BACKGROUND: #ff9c31; FONT: bold 13px Tahoma; COLOR: 
black">message 
  
area</LEGEND></FIELDSET>
<SCRIPT>




le 
  sfumature animate avranno 16 passi


var stps = 
16




tasks: la "lista della 
  spesa"


var tasks=new 
Array()




Concateniamo due sfumature da 
  8 passi (da Nero a Giallobyjuliet, e da Giallobyjuliet a Arancionebyjuliet) 
  per ottenere una sfumatura composita a 16 passi


var 
shd=doshade(RGB_BLACK, RGB_CUST, stps/2)
shd = shd.concat(doshade(RGB_CUST, 
new RGB(0xFF, 0x9C, 0x31), stps/2))




E qui si ride. I casini 
  cominciano da qui


for(a in 
msg){




Per ogni paragrafo creiamo un DIV. Ogni DIV-paragrafo ha un id 
  del tipo: contX, dove X è l'indice (0 per il primo, 1 per il secondo e così 
  via)


   
document.writeln('<div align="center" 
style="position:absolute;left:0;top:0;width:100%" 
id="cont'+a+'">')




Aggiungiamo alla lista un nuovo compito da svolgere: allineare 
  il paragrafo attuale (i compiti vengono salvati come oggetti Task, vedi in 
  fondo per maggiori dettagli)


    
tasks[tasks.length] = new Task("center(document.all[\"cont"+a+"\"])", 
0)
    for(b in msg[a]){




Creiamo uno SPAN per 
  ogni riga contenuta nel paragrafo. Le SPAN-righe hanno gli id di questo 
  tipo: spanX


     
   document.writeln('<span id="span' + b + a + '" 
style="visibility:hidden;font:bold 13px 
\'Tahoma\'">'+msg[a][b]        
    +'</span><br>')




Per ogni passaggio di sfumatura, creiamo un nuovo Task che 
  cambia colore al testo, e lo aggiungiamo alla 
lista


        for(c=0;c<stps;c++){
            
tasks[tasks.length] = new Task("document.all[\"span" + b + a + 
"\"].style.color=\""+shd[c]+"\"", 
10)
            if(!c){
                
tasks[tasks.length] = new Task("document.all[\"span" + b + a + 
"\"].style.visibility='visible'",0)


            }
        }




Questa è una vera finezza: la 
  persistenza delle righe del messaggio dipende dalla loro lunghezza: 20 
  millisecondi a carattere, per permettere di leggere la riga prima che ne 
  compaia una nuova o che le righe incomincino a sparire. Nientepopodimenochè : 
  )


        tasks[tasks.length] = 
new Task("void(0)", msg[a][b].length*20)
    
}




Invertiamo la sfumatura dopo che 
  tutte le righe sono visibili per sfumarle e nasconderle una alla 
  volta


    for(b in 
msg[a]){
        
for(c=0;c<stps;c++){
        
    tasks[tasks.length] = new Task("document.all[\"span" + b + a 
+ "\"].style.color=\""+shd[stps-c]+"\"", 10)
    
    }
        
tasks[tasks.length] = new Task("document.all[\"span" + b + a + 
"\"].style.visibility='hidden'",0)


    
}




chiudiamo il DIV-paragrafo: notate 
  che i DIV non vengono mai nascosti/mostrati, ma solo centrati in mezzo alla 
  pagina in modo da centrare il testo, ad essere nascoste/mostrate sono solo le 
  SPAN-righe


    
document.writeln('</div>')
}




a partire dall'array tasks 
  creiamo un Enumerator (vedi funzione doit() per sapere a cosa serve un 
  Enumerator)


tasks = new 
Enumerator(tasks)




Oggetto Task: la proprietà 
  cmd è una stringa da eseguire con eval(), delay è il timeout per il task 
  successivo della lista


function 
Task(a,b){
this.cmd=a
this.delay=b


}
</SCRIPT>
</BODY></HTML>




Che faticaccia! spero sia servito a 
  qualcosa...


konnichiwa by Juliet-chan! 
  ^____^o







[ecchesnip!!!]


</
HTML>


 


sicuramente è 
servita...


di nuovo complimenti! 



 


;-)


 
  wrote in message 
8ique7$le$4...@pegasus.tiscalinet.it
...




Brutta gatta da pelare questa 
    Zuper ^_____^


magari mentre te la spiego la 
    capisco un po' anch'io (mi accorgo che è davvero incasinata)


(non voglio impegnarmi 
    troppo e lascerò che sia Outlook Express a occuparsi della parte HTML del 
    messaggio ; )


[cut]


va la' che mi ricordo bene anche il tuo Ro<*¿*>berto "pulsante"
;-))))
grazie, ora mi sento meglio...
cmq, Juliet si meritava gli elogi che gli hai fatto, forse non tanto per
la complessità del codice, ma sicuramente per l'effetto visivo!


 la complessità del codice, ma sicuramente per l'effetto visivo!
scusa tanto ; P
la prossima volta sarà la codifica/decodifica Lempel-Ziv in Javascript,
contento? E DICO SUL SERIO ; PRRRR

:-))
permalosa come una donna!
