Gioco a programmare

venerdì 5 aprile 2013

Salvataggio vecchia versione per inserimento voci del menu nelle caselle del calendario

Ho modificato la parte del programma che inserisce le voci del menu troncate all'interno delle caselle del calendario. La parte commentata è quella precedente, che non voglio perdere per eventualmente analizzarla in seguito; la parte in rosso è quella nuova, basata sulla funzione di servizio stringArray(elemento,numero) che ho inserito nella libreria "funzioni di servizio" di questo programma.

//la funzione che trascrive il contenuto del menu popup sulla casella (ha per parametro la casella sulla quale
//è stato evocato il menu popup)
function trascrivi(cas){
  var voce=document.createElement("span");
  voce.className="menu";
  voce.style.left=0+"px";
  
  voce.innerHTML=stringArray(event.srcElement,15);
  /*var stringArray=event.srcElement.innerHTML.split("");
  for(var i=0;i<8;i++){
   voce.innerHTML+=stringArray[i];
  }*/
  cas.appendChild(voce);
  
  

  rimuoviMenuPopup();
 
 
}

giovedì 4 aprile 2013

Funzione che identifica il capostipite di un elemento

Mi serve che cliccando su un figlio si debba confrontare il genitore con una serie di parametri per vedere se questo genitore è l'elemento giusto per avere una certa risposta.
Se non ci fosse la necessità di questo, l'evento potrebbe essere percepito dal genitore ed essere attuato sull'event.srcElement senza problemi.
Per questo mi serve una funzione che identifichi il capostipite:

//identifica il capostipite
function capostipite(elem){
 while(elem.parentNode!=document.body){
  elem=elem.parentNode;
 }
 return elem;
}

Banale.

Studio eventi fra padri, figli e bolle...

Creiamo un elemento e un elemento figlio.

function main(){
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
}

In base alle impostazioni del foglio di stile, ho ottenuto un quadrato più grande con all'interno un quadratino "figlio" più piccolo, sito in alto e a sinistra.

Con questa aggiunta, io "attacco un evento" all'elemento padre, dicendo che allo scattare di quell'evento l'elemento origine dell'evento deve diventare blu.
Vediamo che succede.

window.onload=main;
function main(){ 
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
 elemento.attachEvent("onmousedown",function(){event.srcElement.style.backgroundColor="blue"});
}

Ecco: se io clicco sul "padre", l'evento viene recepito dal padre, cui è "attaccato" l'evento, e diventa blu il padre, che è l'"elemento origine" dell'evento.
Ma se io clicco sul "figlio", l'evento viene recepito anche dal padre, perchè bubbla, ma diventa blu il figlio, perchè stavolta l'elemento origine dell'evento è lui.

martedì 2 aprile 2013

Calendario: progressi, usando le funzioni da me create e immesse in libreria

Ecco il codice, finora:

<html>
<head>
<style>
.casella{
 border:1px solid black;

 font-size:10px;
 position:absolute;
}

.casella2{
 border:1px solid red;

 font-size:8px;
 position:absolute;
}
</style>

<script src="librerie/funzioni.js"></script>
<script>
window.onload=main;
var Nomi=new Array(); 
var Mattine=new Array();
var Pomeriggi=new Array();
var Notti=new Array();
function main(){
 var larghezza=100;
 CreaCaselle(0,0,30,30,15,larghezza,"casella",Nomi);
 CreaCaselle(larghezza,0,30,30,15,larghezza,"casella",Mattine);
 CreaCaselle(larghezza*2,0,30,30,15,larghezza,"casella",Pomeriggi);
 CreaCaselle(larghezza*3,0,30,30,15,larghezza,"casella",Notti); 
 var dat=new Date();
 dat.setDate(1);
 for(var n=0;n<Nomi.length;n++){
  Nomi[n].innerHTML=dataString(dat,WDLETTERALE);
  if(dat.getDay()==0) Nomi[n].style.backgroundColor="#FFAAAA";
  dat.setDate(dat.getDate()+1);
 }
}

</script>
</head>
<body>
</body>
</html>

Sfuocata, ma comprensibile...

domenica 31 marzo 2013

Parametri relativi alla posizione del blocco di caselle.

Ultimo aggiustamento: la posizione del blocco di caselle.

Una semplice aggiunta: le coordinate del blocco:

function CreaCaselle(X,Y,numero,altezzaColonna,classe,matrice){
 var casella;
 for(var n=0;n<numero;n++){  
  //codice che crea una casella di tipo div e l'appende al documento
  casella=document.createElement("div");
  document.body.appendChild(casella);
  
  //codice che "conforma" la casella attribuendole una classe del CSS
  casella.className=classe;
  
  //Codice che stabilisce le coordinate della casella in base all'altezza della colonna
  casella.style.top=Y+(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
  casella.style.left=X+(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px"; 
  if(matrice) matrice.push(casella); 
 }
}

in modo da posizionarle dove meglio si ritiene.

Aggiungere le caselle a un Array (facoltativo)

Aggiungiamo anche un Array al quale aggiungere le caselle.

function CreaCaselle(numero,altezzaColonna,classe,matrice){
 var casella;
 for(var n=0;n<numero;n++){  
  //codice che crea una casella di tipo div e l'appende al documento
  casella=document.createElement("div");
  document.body.appendChild(casella);
  
  //codice che "conforma" la casella attribuendole una classe del CSS
  casella.className=classe;
  
  //Codice che stabilisce le coordinate della casella in base all'altezza della colonna
  casella.style.top=(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
  casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px"; 
  if(matrice) matrice.push(casella); 
 }
}

Così, se viene fornito l'ultimo parametro, ossia il nome di un Array al quale aggiungere le caselle, le caselle vi vengono aggiunte, altrimenti se non viene fornito il parametro, l'istruzione di aggiunta viene ignorata.
Si tratta di un parametro facoltativo.

Posizionamento in libreria della funzione creaCaselle, e successivi aggiustamenti.

Ora devo isolare la funzione che crea un gruppo di caselle... e porla in libreria.

Vediamo come si può fare...

Ecco: isolato il codice, e creata una funzione avente per parametri il numero totale di caselle e l'altezza della colonna (se per numero ho 10 e per altezza della colonna ho 3, mi creerà tre colonne da 3 caselle più una di una casella... e così via...

function CreaCaselle(numero,altezzaColonna){
        var casella;
 for(var n=0;n<numero;n++){  
  //codice che crea una casella di tipo div e l'appende al documento
  casella=document.createElement("div");
  document.body.appendChild(casella);
  
  //codice che "conforma" la casella attribuendole una classe del CSS
  casella.className="casella";
  
  //Codice che stabilisce le coordinate della casella in base all'altezza della colonna
  casella.style.top=(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
  casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px";  
 }
}

La posso mettere nella libreria, adesso.

Ci metto anche la funzione che crea la proprietà indexOf per i vecchi browser IE:

Array.prototype.indexOf=function(oggetto){
 for(var i=0;i<this.length;i++){
  if(this[i]==oggetto) return i;
 }
 return -1;
}

Così facciamo un po' d'ordine e la pagina principale diventa così (senza il problema degli Array e delle date, ancora):

<html>
<head>
<style>
.casella{
 border:1px solid blue;
 width:120px;
 height:15px;
 font-size:8px;
 position:absolute;
}
</style>

<script src="../librerie/funzioni.js"></script>
<script>
window.onload=main;

function main(){ 
 CreaCaselle(20,6); 
}
</script>
</head>
<body>
</body>
</html>

Però bisogna specificare nei parametri della funzione CreaCaselle anche la classe del foglio di stile che si vuole dare alle caselle: essa non può essere predefinita nella funzione!
Poca difficoltà nel fare questo: modifichiamo in modo che il nome della classe venga passato come parametro.

function CreaCaselle(numero,altezzaColonna,classe){
 var casella;
 for(var n=0;n<numero;n++){  
  //codice che crea una casella di tipo div e l'appende al documento
  casella=document.createElement("div");
  document.body.appendChild(casella);
  
  //codice che "conforma" la casella attribuendole una classe del CSS
  casella.className=classe;
  
  //Codice che stabilisce le coordinate della casella in base all'altezza della colonna
  casella.style.top=(EN(casella.currentStyle.height)*(n%altezzaColonna))+"px";
  casella.style.left=(EN(casella.currentStyle.width)*(Math.floor(n/altezzaColonna)))+"px";  
 }
}

cosicchè, avendo due stili nella sezione CSS, posso, variando il parametro, avere due formati completamente diversi delle mie caselle:

<html>
<head>
<style>
.casella{
 border:1px solid blue;
 width:120px;
 height:15px;
 font-size:8px;
 position:absolute;
}

.casella2{
 border:1px solid red;
 width:300px;
 height:20px;
 font-size:8px;
 position:absolute;
}
</style>

<script src="../librerie/funzioni.js"></script>
<script>
window.onload=main;

function main(){ 
 CreaCaselle(20,6,"casella2"); 
}
</script>
</head>
<body>
</body>
</html>

Ecco, cambiando la stringa passata come parametro posso far sì che le caselle abbiano lo stile casella o casella2.