Gioco a programmare

sabato 11 agosto 2012

Matrice di controlli in VB.NET

Ho trovato il modo di creare una matrice di controlli in VB.NRT.
Non differisce molto da come la creavo in VB6.
Mi pare di ricordare che anche in VB6 si poteva creare con Me.Controls.Add.
Io la creavo con Load. Comunque il risultato è ottimo anche qui.
Posso fare riferimento a uno degli elementi della matrice, come evidenziato dal codice dell'evento Form_Click che mi sposta il secondo elemento della matrice a destra, e che ho appunto creato come prova della possibilità di accedere a un preciso elemento a scelta della matrice.

Public Class Form1
    Dim btn(3) As Button
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        For n = 0 To 2
            btn(n) = New Button
            Me.Controls.Add(btn(n))
            On Error Resume Next
            btn(n).Top = btn(n - 1).Top + btn(n).Height
        Next
    End Sub
    Private Sub Form1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Click
        btn(1).Left = btn(1).Left + 200
    End Sub
End Class

giovedì 9 agosto 2012

Eventualità di misure del DIV inferiori allo spazio occupato dal border e padding

Ho risolto il problema dell'eventualità in cui la larghezza del DIV dovesse essere inferiore alla larghezza complessiva del padding e del bordo.

function div(colore,bord,largh,alt,sn,top,pad){
  var bordo=bord;
  var sinistra=sn;
  var alto=top;
  var padding=pad;
  var spazioMorto=((2*pad)+(2*(parseInt(bord))));
  var larghezza=function(){
   if(largh>=spazioMorto)
    return(largh-spazioMorto);
   else{
    padding=0;
    return(0);
   }
    
  }
  var altezza=function(){
   if(alt>=spazioMorto)
    return(alt-spazioMorto);
   else{
    padding=0;
    return(0);
   }
  }
 
 var inizia=function(){

  var elemento=document.createElement("div");
  elemento.style.position="absolute";
  elemento.style.backgroundColor=colore;
  elemento.style.border=bordo;
  elemento.style.width=larghezza();
  elemento.style.height=altezza();
  elemento.style.left=sinistra;
  elemento.style.top=alto;
  elemento.style.padding=padding;
  document.body.appendChild(elemento);
 }
 inizia();
}

Creazione e aggiunta di un TextNode.

Ora proviamo ad "appendere" un textnode a un div.

Ecco il codice:

<html>
<head>
<script>
function addNode(){
 var testo=document.createTextNode("Ciao scemo!");
 document.getElementById("mioDiv").appendChild(testo);
 
}
</script>
</head>
<body onClick="addNode()">
<div id="mioDiv" style="background-color:#AAFFCC;height:100px"></div>
</body>
</html>

E funziona. A ogni click sul DIV viene aggiunta una nuova frase "Ciao scemo" al DIV stesso.

Padding e Border cambiano le dimensioni di un elemento.

Che relazione c'è fra la proprietà "padding" e le proprietà "height" e "width"?

Ecco, mediante una serie di ragionamenti e di correzioni, ho capito che il valore di padding e quello di border cambiano la larghezza e l'altezza dell'elemento, e ho apportato le necessarie correzioni nella funzione mediante la quale creo un elemento DIV:

function div(colore,bordo,larghezza,altezza,sinistra,alto,padding){
 var colore=colore;
 var bordo=bordo;
 var larghezza=larghezza-(2*padding)-(2*(parseInt(bordo)));
 var altezza=altezza-(2*padding)-(2*(parseInt(bordo)));
 var sinistra=sinistra;
 var alto=alto;
  
 var inner="Fesso"
 var inizia=function(){
  var elemento=document.createElement("div");
  elemento.innerHTML=inner;
  document.body.appendChild(elemento);
 }
 inizia();
}

giovedì 2 agosto 2012

Variabili private e scope, ancora esercizi

Vogliamo vedere come in un oggetto si mettono le variabili private?
Vediamo qual è lo scope per una variabile dichiarata dentro e fuori da una funzione...

<html>
<head>
<script>
var cerchio=function(){
 variabile =123;
}

cerchio();
alert (variabile); 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

così facendo ottengo

Se dichiaro la variabile con this che succede?

<html>
<head>
<script>
var cerchio=function(){
 this.variabile =123;
}

cerchio();
alert (variabile); 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

ottengo

quindi è esattamente la stessa cosa...

mercoledì 1 agosto 2012

La funzione usata come funzione o come costruttore

Bene, dopo aver fatto questa clamorosa scoperta dell'acqua calda, uso una funzione dell'oggetto finestra, quello di base, come costruttore per un nuovo oggetto.

 
<html>
<head>
<script>
function cerchio(raggio){
 this.area=raggio*raggio*Math.PI;
 
 
}
var Cerchio = new cerchio(3);

alert(Cerchio.area);
 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

Ecco:

28.274333882308138

Se viceversa, uso this.area al di fuori dell'oggetto Cerchio, che succede?

<html>
<head>
<script>
function cerchio(raggio){
 this.area=raggio*raggio*Math.PI
}

cerchio(3);
alert(window.area);

 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

28.274333882308138

in questo caso non istanzio alcun oggetto Cerchio di tipo cerchio, ma eseguo semplicemente la funzione appartenente all'oggetto window.
In questo caso la proprietà area appartiene all'oggetto window, tant'è vero che viene mostrata chiedendo al programma di mostrare nella finestra di dialogo la proprietà window.area.

Ora invece di eseguire la funzione cerchio, la uso come costruttore per istanziare un oggetto Cerchio, e poi vedo se dicendo al programma di mostrare la proprietà window.area avviene qualcosa di diverso.

<html>
<head>
<script>
function cerchio(raggio){
 this.area=raggio*raggio*Math.PI
}

var Cerchio=new cerchio(3);
alert(window.area);

 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

undefined

Ecco: in questo caso, usando la funzione cerchio(raggio) come costruttore non l'ho eseguita nell'ambito dell'oggetto window, ma per costruire un oggetto Cerchio, cosa che crea una proprietà area dell'oggetto Cerchio, non dell'oggetto window.
Provo a chiedere al programma di mostrare sia la proprietà window.area sia la proprietà Cerchio.area

<html>
<head>
<script>
function cerchio(raggio){
 this.area=raggio*raggio*Math.PI
}

var Cerchio=new cerchio(3);
alert(window.area);
alert(Cerchio.area);
 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

undefined

28.274333882308138

Come volevasi dimostrare.

Vorrei cogliere l'essenza della differenza fra il Javascript, il Java, il C++ per quanto riguarda l'uso dei costruttori...

Riprendendo un po' di Javascript

Vediamo di ricreare un oggetto javascript.
Parto dall'oggetto window, che è l'oggetto dal quale partiamo sempre.
Per dimostrare che è l'oggetto dal quale parto sempre, faccio alcune piccole prove.

<html>
<head>
<script>
function main(){
 alert(this);
}
main();
 
</script>
</head>
<body bgcolor = cyan>


</body>
</html>

Ottengo:

[object Window]

Il this, che fa riferimento all'oggetto corrente, in questo caso fa riferimento alla finestra, che è sempre l'oggetto corrente.