Gioco a programmare

venerdì 29 marzo 2013

Gestiamo le date per creare un calendario...

Ora voglio delle caselle disposte in forma di calendario, con le date di un mese.

Ripassiamo come gestire le date con Javascript...

Ecco il codice che mi mette in una casella di dialogo la data scritta per esteso in italiano:

function main(){
 var D,WD,M,Y
 var WeekDays=new Array("domenica","lunedi","martedi","mercoledi","giovedi","venerdi","sabato");
 var Months=new Array("gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre");
 var dat=new Date();
 D=dat.getDate();
 WD=dat.getDay();
 M=dat.getMonth();
 Y=dat.getYear();
 alert(WeekDays[WD]+" "+D+" "+Months[M]+" "+Y);
}

giovedì 28 marzo 2013

Ecco la disposizione delle caselle in colonne ben realizzata!

Per prima cosa definire il numero delle caselle che si vuole, quindi l'altezza delle colonne.

Ecco: trovata la soluzione: 30 caselle disposte in 4 colonne di 7 elementi col resto di due.

<html>
<head>
<style>
.casella{
 border:1px solid red;
 width:200px;
 height:20px;
 position:absolute;
}
</style>

<script src="../librerie/funzioni.js"></script>

<script>
var casella;
var CaselleInColonna;
var NumeroCaselle;

window.onload=main;
NumeroCaselle=30;
CaselleInColonna=7;
function main(){
 for(var n=0;n<NumeroCaselle;n++){
  casella=document.createElement("div");
  document.body.appendChild(casella);
  casella.className="casella";
  casella.style.top=(EN(casella.currentStyle.height)*(n%CaselleInColonna))+"px";
  casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/CaselleInColonna)))+"px";
 }
}
</script>
</head>
<body>

</body>
</html>

martedì 26 marzo 2013

Righe e colonne.

Una nuova implementazione di un calendario...

<html>
<head>
<style>
.casella{
 border:2px solid blue;
 width:200px;
 height:100px;
 position:absolute;
}
</style>


<script>
var casella;
window.onload=main;
function main(){
 
 casella=document.createElement("div");
 casella.className="casella";
 document.body.appendChild(casella);
}
</script>
</head>
<body>

</body>
</html>

Questo crea una semplice casella ex novo... come già sapevamo...

Possiamo anche creare una funzione ex novo...

<html>
<head>
<style>
.casella{
 border:2px solid red;
 width:200px;
 height:100px;
 position:absolute;
}
</style>


<script>
var casella;
window.onload=main;
function main(){
 
 creaCasella("div","casella");
}
function creaCasella(tipo,classe){
 casella=document.createElement(tipo);
 casella.className=classe;
 document.body.appendChild(casella);
}
</script>
</head>
<body>

</body>
</html>

Bene. Ovviamente funziona... Ora introduciamo le coordinate...

Ma dobbiamo calcolare le righe e le colonne.

Ecco un modo di usare l'operazione modulo per calcolare il numero delle celle contenute in una colonna:

<html>
<head>
<style>
.casella{
 border:2px solid red;
 width:200px;
 height:10px;
 position:absolute;
}
</style>

<script src="../librerie/funzioni.js"></script>

<script>
var casella;
window.onload=main;
function main(){
 for(var n=0;n<7;n++){
  creaCasella("div","casella",0,30*(n%7));
 }
}
function creaCasella(tipo,classe, sinistra, alto){
 casella=document.createElement(tipo);
 casella.className=classe;
 casella.style.top=alto+"px";
 casella.style.left=sinistra+"px";
 document.body.appendChild(casella);
}
</script>
</head>
<body>

</body>
</html>

venerdì 22 marzo 2013

Cominciamo a muovere insieme genitori e figli...

function OnMouseDown(){
 if(event.srcElement.parentNode!=document.body){
  oggetto=event.srcElement.parentNode;
 }else{
  oggetto=event.srcElement;
 }

O meglio anche una strategia che ritrovi il parente più "anziano"...

function OnMouseDown(){
 oggetto=event.srcElement;
 while (oggetto.parentNode!=document.body){
  oggetto=event.srcElement.parentNode;
 }

Così da qualunque elemento si parta, alla fine si fa sempre riferimento al "parente" più anziano!

lunedì 18 marzo 2013

Eventi nell'ambito del DOM

Un oggetto genitore e un oggetto figlio:

<div id="oggetto">
 <div id="oggetto1">
 </div>
</div>

Secondo i fogli di stile, li coloro diversamente e do loro una grandezza consona:

#oggetto{
 top:0px;
 left:10px;
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;
} 
#oggetto1{
 width:50px;
 height:50px;
 background-color:blue;
 position:absolute;
}

Ecco...

Ora, essendo la mia pagina collegata alle opportune mie "librerie" dragdropS.js e funzioni.js, che consentono il trascinamento degli oggetti, vado a trascinare il "contenitore", ossia il "genitore".
Se trascino il genitore, anche il figlio si muove solidalmente.
Se trascino il figlio, questo se ne va per cavoli suoi.

Perchè?

Se ho capito bene, il bubbling fa in modo che l'evento subito dal figlio venga intercettato ed elaborato dal genitore.
No!
Nel mio dragdrop, l'evento non è intercettato dai DIV, ma da document. Questo impone un diverso modo di pensare...

venerdì 15 marzo 2013

Creato finalmente il codice di gestione delle collisioni, ci si studia un po' sopra.

Bene! Non metto qui il codice per esteso, ma cerco di aggiustarmelo in modo tale da incapsularmelo un po'.

Sembra che finalmente ci sono riuscito!, a fare un codice per la gestione delle collisioni.
Dopo un paio di bugs, uno che mi ha fatto sputare il sangue e un altro che ho capito subito e risolto con poca fatica, sembra che adesso sia perfetto.

Gestiamo ora il modo di chiamare questo modulo, che si chiama dragdrop.js.

Quando volevo usare quel dragdrop.js che avevo costruito basandomi sul tutorial per il trascinamento trovato in rete, l'unica cosa fondamentale era l'operazione

window.onload=main;
 
function main(){
 document.onmousedown=OnMouseDown;
}

Ossia innescare la funzione main() al caricamento della finestra e quindi, nel contesto della funzione main() assimilare l'evento mousedown alla funzione OnMouseDown.

Ora, invece, sulla pagina che usa il modulo dragdrop.js il codice è un po' più complesso perchè deve definire la matrice di ostacoli:

var ostacoli;
window.onload=main;

function main(){
 ostacoli=document.getElementsByTagName("div");
 document.onmousedown=OnMouseDown;
}

In questo caso ho impostato come matrice l'insieme degli elemento div, ma posso impostare qualunque matrice mediante l'uso dell'oggetto Array.

Quindi, riepilogando, le uniche condizioni per usare il modulo dragdrop.js sono:

associare all'evento onmousedown la funzione OnMouseDown;
impostare la matrice di ostacoli.

A questo punto la prossima mossa è creare matrici diverse da questa, immettendo elementi selezionati in essa e non tutti i DIV in generale.

giovedì 7 marzo 2013

Appunto bozza ennesima strategia nel tentativo di un codice per le collisioni (dannazione!)

Una bozza dell'ennesimo tentativo di strategia per le collisioni (speriamo che sia la volta buona). Appunto per ricopiare il codice da altro computer.

var BaseX, BaseY;
var MouseX, MouseY;
var oggetto;
var ostacolo;
var ostacolo2;
var prevSx,prevDx,prevHi,prevLo;
var MotoOrizzontale=true;
var MotoVerticale=true;
var ostacoli;
var Sx,Hi;
var ConsentitoADestra;
var ConsentitoASinistra=true;
function OnMouseDown(){
 ostacoli=document.getElementsByTagName("div");
 ostacolo=$("ostacolo1");
 ostacolo2=$("ostacolo2");
 oggetto=event.srcElement;
 oggetto.onselectstart=function(){return false};
 BaseX=EN(oggetto.currentStyle.left);
 BaseY=EN(oggetto.currentStyle.top);
 MouseX=event.clientX;
 MouseY=event.clientY;
 document.onmousemove=OnMouseMove;
 document.onmouseup=OnMouseUp;
 
}

function OnMouseMove(){
 prevSx=sinistro(oggetto);
 prevDx=destro(oggetto);
 prevHi=alto(oggetto);
 prevLo=basso(oggetto);
 
 Sx=BaseX+event.clientX-MouseX;
 Hi=BaseY+event.clientY-MouseY
 
 $("test").innerHTML=DirezioneOrizzontale(Sx,prevSx);
 if (ConsentitoADestra){
  if(DirezioneOrizzontale(Sx,prevSx)=="destra") oggetto.style.left=Sx+"px";
 }
 if (ConsentitoASinistra){
  if(DirezioneOrizzontale(Sx,prevSx)=="sinistra") oggetto.style.left=Sx+"px";
 }
 oggetto.style.top=Hi+"px";
 
 
 
 
} 
 

function DirezioneOrizzontale(X, prevX){
 if(X>prevX) {
  return "destra";
 }else if(X<prevX) {
  return "sinistra";
 }else{
  return "fermo";
 }
}
 
 /*if(sinistro(oggetto)<100) {
  MotoOrizzontale=false;
  oggetto.style.left=(100)+"px";
 }else{
  MotoOrizzontale=true;
 }
 
 
 
 if(basso(oggetto)>300) {
  MotoVerticale=false;
  oggetto.style.top=(300-altezza(oggetto))+"px";
 }else{
  MotoVerticale=true;
 }*/




function OnMouseUp(){
 
 document.onmousemove=null;
}


//FUNZIONI DINAMICHE VERSO LE QUATTRO SEMIPROIEZIONI
//----------------------------------------------------------------------------------------
function OggettoVersoLaSemiproiezioneOrizzontaleDestra(ost){
 if(prevDx<=sinistro(ost) && OggettoNellaSemiproiezioneOrizzontaleDestra(ost)) return true;
}

function OggettoVersoLaSemiproiezioneOrizzontaleSinistra(ost){
 if(prevSx>=destro(ost) && OggettoNellaSemiproiezioneOrizzontaleSinistra(ost)) return true;
}

function OggettoVersoLaSemiproiezioneVerticaleInferiore(ost){
 if(prevLo<=alto(ost) && OggettoNellaSemiproiezioneVerticaleInferiore(ost)) return true;
}

function OggettoVersoLaSemiproiezioneVerticaleSuperiore(ost){
 if(prevHi>=basso(ost) && OggettoNellaSemiproiezioneVerticaleSuperiore(ost)) return true;
}
//-----------------------------------------------------------------------------------------


//FUNZIONI STATICHE SULLE QUATTRO SEMIPROIEZIONI
//----------------------------------------------------------------------------------------------
function OggettoNellaSemiproiezioneOrizzontaleDestra(ost){
 if(OggettoNellaProiezioneOrizzontale(ost) && OggettoNelSemicampoDestro(ost)) return true;
}

function OggettoNellaSemiproiezioneOrizzontaleSinistra(ost){
 if(OggettoNellaProiezioneOrizzontale(ost) && OggettoNelSemicampoSinistro(ost)) return true;
}

function OggettoNellaSemiproiezioneVerticaleInferiore(ost){
 if(OggettoNellaProiezioneVerticale(ost) && OggettoNelSemicampoInferiore(ost)) return true;
}

function OggettoNellaSemiproiezioneVerticaleSuperiore(ost){
 if(OggettoNellaProiezioneVerticale(ost) && OggettoNelSemicampoSuperiore(ost)) return true;
}
//----------------------------------------------------------------------------------------------



//FUNZIONI STATICHE SULLE DUE PROIEZIONI
//----------------------------------------------------------------------------------------------
function OggettoNellaProiezioneOrizzontale(ost){
 if(OggettoNelSemicampoSuperiore(ost) && OggettoNelSemicampoInferiore(ost)) return true;
}

function OggettoNellaProiezioneVerticale(ost){
 if(OggettoNelSemicampoDestro(ost) && OggettoNelSemicampoSinistro(ost)) return true;
}
//-----------------------------------------------------------------------------------------------


//FUNZIONI STATICHE SUI QUATTRO SEMICAMPI
//-----------------------------------------------------------------------------------------------
function OggettoNelSemicampoDestro(ost){
 if(destro(oggetto)>sinistro(ost)) return true;
}

function OggettoNelSemicampoSinistro(ost){
 if(sinistro(oggetto)<destro(ost)) return true;
}

function OggettoNelSemicampoInferiore(ost){
 if(basso(oggetto)>alto(ost)) return true;
}

function OggettoNelSemicampoSuperiore(ost){
 if(alto(oggetto)<basso(ost)) return true;
}
//----------------------------------------------------------------------------------------------

function sinistro(ogg){
 return EN(ogg.currentStyle.left);
}

function larghezza(ogg){
 return EN(ogg.currentStyle.width);
}

function destro(ogg){
 return EN(sinistro(ogg)+larghezza(ogg));
}

function alto(ogg){
 return EN(ogg.currentStyle.top);
}
 
function altezza(ogg){
 return EN(ogg.currentStyle.height);
}

function basso(ogg){
 return EN(alto(ogg)+altezza(ogg));
}