Gioco a programmare: aprile 2013

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...

Gioco a programmare

JavascriptProva