Gioco a programmare: 2015

sabato 26 dicembre 2015

Disegnare rette di DIV su una pagina web

Creiamo un DIV.

<style>
#oggetto{
 position:absolute;
 width:100px;
 height:100px;
 background-color:red;
}
</style>

<script>
function init(){
 var elemento=document.createElement("div");
 elemento.setAttribute("id","oggetto");
 elemento.setAttribute("style","left:200px");
 document.body.appendChild(elemento);
}
</script>
<body onload="init()">

</body>

Ecco.
Gli attributi di stile spaziali sono resi come formato stringa.
Devo dare un valore numerico e convertirlo.
Proviamo...

Ecco:

function CreaDiv(left){
 var elemento=document.createElement("div");
 elemento.setAttribute("class","oggetto");
 elemento.setAttribute("style","left:"+left.toString()+"px");
 document.body.appendChild(elemento);
}
function init(){
 CreaDiv(100);
}

Andiamo con le due coordinate.

function CreaDiv(left,top){
 var elemento=document.createElement("div");
 elemento.setAttribute("class","oggetto");
 elemento.setAttribute("style","left:"+left.toString()+"px;top:"+top.toString()+"px;");
 document.body.appendChild(elemento);
}
function init(){
 CreaDiv(500,200);
}

Perfetto!!!

Ora costruiamo una funzione...

function CreaDiv(left,top){
 var elemento=document.createElement("div");
 elemento.setAttribute("class","oggetto");
 elemento.setAttribute("style","left:"+left.toString()+"px;top:"+top.toString()+"px;");
 document.body.appendChild(elemento);
}
function init(){
 for(var i=100;i<500;i++){
  CreaDiv(i,i);
 }
}

Ed ecco una retta con angolo di 45 gradi, ossia con tangente 1, dato che x e y sono uguali.
Rendiamo puntiforme il DIV...

<style>
.oggetto{
 position:absolute;
 width:1px;
 height:1px;
 background-color:red;
}
</style>

E il gioco è fatto! Ecco una retta a 45 gradi!

E via con la grafica di DIV!!!

sabato 19 dicembre 2015

Javascript: comparsa di un quadrato verde trascinabile col mouse, che sparisce al rilascio.

Bene.
Iniziamo con il programma.

Ho bisogno di creare un elemento al click del mouse.
Disponiamo che al click sulla pagina si crei un DIV in una determinata posizione.
Ed ecco che ho creato il codice che fa apparire, al click del mouse, dei div quadrati verdi con l'angolo superiore sinistro corrispondente alla posizione del mouse:

function crea(e){
 var elemento=document.createElement("div");
 elemento.className="classe";
 elemento.style.left=e.clientX+"px";
 elemento.style.top=e.clientY+"px";
 document.body.appendChild(elemento);
}
document.onmousedown=crea;

Però adesso mi serve che l'elemento si distrugga quando lascio il mouse.
Proviamo...

Sono andato abbastanza avanti!
Ecco il codice che fa apparire un quadrato verde al click del mouse, lo trascina intorno liberamente e poi lo distrugge al rilascio del mouse:

<script>
var elemento;
function crea(e){
 elemento=document.createElement("div");
 elemento.setAttribute("id","nome");
 elemento.className="classe";
 elemento.style.left=e.clientX-50+"px";
 elemento.style.top=e.clientY-50+"px";
 document.body.appendChild(elemento);
}
function OnMouseMove(e){
 elemento.style.left=e.clientX-50+"px";
 elemento.style.top=e.clientY-50+"px";
}

function distruggi(e){
 var genitore=document.body;
 elemento=e.target;
 genitore.removeChild(elemento);
}
document.onmousedown=crea;
document.onmouseup=distruggi;
document.onmousemove=OnMouseMove;
</script>

Va un po' perfezionato, forse...

martedì 15 dicembre 2015

Ripasso e modifica del codice per il DragDrop di un DIV in JavaScript.

E se riprendessi a postare qui i miei progressi? Questo enorme blocco di appunti mi è prezioso...

E infatti vi ho ritrovato il codice per realizzare il drag-drop.

Facciamolo con la sintassi buona per Firefox.

Prendo un DIV e lo rendo quadrato, colorandolo in modo diverso dallo sfondo.

<html>
<head>

<style>
#oggetto{
 background-color:green;
 height:100px;
 width:100px;
}
</style>


<script>

</script>

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

</body>
</html>

Ecco il risultato:

Bene.
Ora rendo la posizione assoluta...

<html>
<head>

<style>
#oggetto{
 position:absolute;
 background-color:green;
 height:100px;
 width:100px;
}
</style>


<script>

</script>

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

</body>
</html>

E adesso ottengo la posizione, salvandola in variabili.
Iniziamo con il solo asse delle X.

Per prima cosa, definisco una variabile che contiene l'oggetto bersaglio degli eventi, quindi creo le routines degli eventi.

<script>
var dragElement;

function OnMouseDown(event){
 alert(event.target.style.left);
}


document.onmousedown=OnMouseDown;


</script>

La casella di dialogo non mi restituisce assolutamente nulla.
Forse devo estrarne il numero mediante la funzione ExtractNumber. Come la creo?
Ma un momento... ricordo che le impostazioni di posizione date tramite il CSS non appaiono quando rilevate tramite il JavaScript...

Ecco: ho ricostruito il programma, con qualche ritocco, ossia la capacità di leggere in JavaScript le impostazioni fornite con il CSS mediante ComputedStyle.

<html>
<head>

<style>
#oggetto{
 position:absolute;
 left:100px;
 background-color:green;
 height:100px;
 width:100px;
}
</style>
<script>
var dragElement;
var OffsetX;
var OffsetY;
var StartX;
var StartY;

function Sinistra(oggetto){
 var risultato=parseInt(getComputedStyle(oggetto).left); 
 return isNaN(risultato)==true? null: risultato;
}

function Alto(oggetto){
 var risultato=parseInt(getComputedStyle(oggetto).top); 
 return isNaN(risultato)==true? null: risultato;
}
function OnMouseDown(e){
 dragElement=e.target;
 OffsetX=Sinistra(dragElement);
 OffsetY=Alto(dragElement);
 StartX=e.clientX;
 StartY=e.clientY;
 document.onmousemove=OnMouseMove; 
}

function OnMouseMove(e){
 dragElement.style.left=OffsetX+e.clientX-StartX;
 dragElement.style.top=OffsetY+e.clientY-StartY;
}

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

</script>

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

</body>
</html>

E funziona!!! Incollando su Blocco Note questo codice, e salvando con un'estensione .HTML, col browser Firefox, funziona! Con Internet Explorer sicuramente non funziona, mentre con altri non lo so.

Gioco a programmare

JavascriptProva