JavascriptProva

domenica 15 gennaio 2012

Variabili e notazioni a parentesi quadrate

Cerchiamo di dare una spiegazione razionale...

Anzichè con l'istruzione Var, una variabile può essere creata come proprietà dell'oggetto window.
<script>

function funzione(){
 window.variabile="ciao";
 alert(variabile);
 
}
funzione();
</script>


Ora enuncio un'altra verità che ho appena acquisito:
Per far riferimento a una proprietà di un oggetto, anzichè la notazione con il punto si può usare anche una notazione a parentesi quadrate:
Ora scrivo un codice normalmente con la notazione "a punti":
<script>

function funzione(){
 alert(document.getElementById("testo").style.width);
 
 
}
funzione();
</script>
<body onClick="funzione()">
<div id="testo" style="position:absolute;width:130px;height:50px;background:green"></div>
</body>
e ottengo una Box con il valore dell'ampiezza dell'elemento DIV con ID = "testo", come mi aspettavo.
Adesso trasformo la notazione in una notazione a parentesi quadrate:
<script>

function funzione(){
 alert(document["getElementById"]('testo')["style"]["width"]);
 
 
}
funzione();
</script>
<body onClick="funzione()">
<div id="testo" style="position:absolute;width:130px;height:50px;background:green"></div>
</body>
..e ottengo esattamente lo stesso risultato! Questo dà modo di convertire agevolmente una stringa in un nome di variabile, creandola come membro dell'oggetto window mediante la notazione a parentesi quadrate!!!
OLE'!

Convertire una stringa in un nome di variabile

Come convertire una stringa in un nome di variabile?

Analizziamo quanto detto a questo indirizzo.

Ho una stringa 'myVar'.
Voglio usarla come nome di una variabile come questa: myVar=1;

Ecco una soluzione, che voglio provare:
Innanzitutto dichiaro una variabile cui do un valore stringa, che sarebbe il nome dell'altra mia variabile.
Quindi uso la sintassi window[mystring] ed è come se dichiarassi una variabile myVar, cui do il valore che voglio.
<script>
function funzione(){
 var mystring ="myVar";
 window[mystring]=1;
 alert(myVar);
}
funzione();
</script>


A questo punto posso trattare la variabile come una variabile qualunque.
<script>
function funzione(){
 var mystring ="myVar";
 window[mystring]=1;
 alert(myVar);

 myVar=1234;
 alert(myVar);
 
 myVar="La vispa Teresa";
 alert(myVar);
}
funzione();
</script>
e che mi prenda un accidente se non funziona!!!

Semplifichiamo il codice contorto per il pallone che rimbalza...

Bene.
Sto sgrossando un po' la mia cultura rudimentale in JavaScript, e scopro sempre di aver trovato soluzioni idiote per problemi che, conoscendo meglio il linguaggio, si possono risolvere in modo molto più elegante e funzionale!

Ecco un codice molto migliore per far rimbalzare un oggetto:
<script>
var intervallo;
var intX=5;
var intY=5;
function step(oggetto) {
 var str=oggetto.style.left;
 var nLeft=Number(str.replace("px",""));
       
 var str=oggetto.style.top;
 var nTop=Number(str.replace("px",""));

 if ((nLeft>800)||(nLeft<10))
  intX=-intX;
 if ((nTop>500)||(nTop<10))
  intY=-intY;

 oggetto.style.left=nLeft+intX;
 oggetto.style.top=nTop+intY;
}

 
function muovi(oggetto,tempo){
 clearInterval(intervallo);
 intervallo=setInterval(function() {step(oggetto)},tempo);

} 
</script>
<body onClick="muovi(document.getElementById('testo'),10)">
<img id="testo" src="pallone.gif" style="left:10px;top:50px;width:50px;height:50px;position:absolute" />
</body>

Il problema è che devo usare variabili globali, e questo mi crea grossi problemi per creare multipli oggetti in movimento!
Ho fatto un po' di ricerche e un po' di ragionamenti, che mi hanno condotto a un certo argomento...

sabato 14 gennaio 2012

Pallone...

Con l'immagine di un pallone la cosa è più suggestiva...
Basta trovare l'immagine di un pallone e cambiare DIV con IMG dando lo stesso attributo ID del DIV precedente.
<script>
var intervallo;
var dirX;
var dirY;
function step(oggetto,intX, intY,limX, limY) {
 var str=oggetto.style.left;
 var nLeft=Number(str.replace("px",""));
       
 var str=oggetto.style.top;
 var nTop=Number(str.replace("px",""));

 if (nLeft>limX)
  dirX=1;
 if (nLeft<(intX*2))
  dirX=0
 if (dirX==1)
  intX=-intX;
 if (dirX==0)
  intX=intX;

 if (nTop>limY)
  dirY=1;
 if (nTop<(intY*2))
  dirY=0
 if (dirY==1)
  intY=-intY;
 if (dirY==0)
  intY=intY;


 oggetto.style.left=nLeft+intX;
 oggetto.style.top=nTop+intY;
}

 
function muovi(oggetto, intX, intY,tempo,limX, limY){
 clearInterval(intervallo);
 intervallo=setInterval(function() {step(oggetto, intX, intY, limX, limY)},tempo);
} 
</script>
<body onClick="muovi(document.getElementById('testo'),2,2,5,800,500)">
<img id="testo" src="pallone.gif" style="left:0px;top:50px;width:50px;height:50px;position:absolute" />
</body>

Ed ecco l'oggetto che rimbalza contro le pareti di una scatola invisibile!

Ecco il codice!
<script>
var intervallo;
var dirX;
var dirY;
function step(oggetto,intX, intY,limX, limY) {
 var str=oggetto.style.left;
 var nLeft=Number(str.replace("px",""));
       
 var str=oggetto.style.top;
 var nTop=Number(str.replace("px",""));

 if (nLeft>limX)
  dirX=1;
 if (nLeft<(intX*2))
  dirX=0
 if (dirX==1)
  intX=-intX;
 if (dirX==0)
  intX=intX;

 if (nTop>limY)
  dirY=1;
 if (nTop<(intY*2))
  dirY=0
 if (dirY==1)
  intY=-intY;
 if (dirY==0)
  intY=intY;


 oggetto.style.left=nLeft+intX;
 oggetto.style.top=nTop+intY;
}

 
function muovi(oggetto, intX, intY,tempo,limX, limY){
 clearInterval(intervallo);
 intervallo=setInterval(function() {step(oggetto, intX, intY, limX, limY)},tempo);
} 
</script>
<body onClick="muovi(document.getElementById('testo'),2,2,1,800,500)">
<div id="testo" style="left:0px;top:50px;width:50px;height:50px;position:absolute;background:brown"></div>
</body>
Ottimo!

Eliminazione del problema dei setInterval multipli

...che poi è una fesseria quello che ho fatto ieri, di usare il parametro direzione quando la stessa cosa può essere ottenuta usando gli intervalli negativi!

Ricostruiamo daccapo tutto il codice per muovere un oggetto, preoccupandoci soltanto dopo dell'incapsulamento e della creazione di funzioni di uso generale...


Per cominciare, ho risolto il problema della creazione di nuovi intervalli a ogni click del mouse, che accelera sempre di più il movimento dell'oggetto ogni volta che si esegue l'evento che avvia la funzione.
<script>
var intervallo;
function step(oggetto,intX, intY) {
 var str=oggetto.style.left;
 var nLeft=Number(str.replace("px",""));

 oggetto.style.left=nLeft+intX;
}
function muovi(oggetto,intX,intY){
 
 clearInterval(intervallo);
 intervallo=setInterval(function() {step(oggetto,intX,intY)},1);
} 

</script>
<body onClick="muovi(document.getElementById('testo'),1,0)">
<div id="testo" style="left:0px;top:50px;width:50px;height:50px;position:absolute;background:brown"></div>
</body>

giovedì 12 gennaio 2012

Parametri per la diirezione alla funzione che muove un oggetto

Ho ripreso la funzione step() e l'ho dotata, oltre che dei parametri incX e incY, che misurano l'incremento della posizione a ogni passo, anche dei parametri dirX e dirY che stabiliscono la direzione sugli assi X e Y.
function step(oggetto,incX,incY, dirX, dirY)
{
 if(!dirX)
  dirX=0;
 if(!dirY)
  dirY=0;
 var sinistra=oggetto.style.left;
  var numSinistra = Number(sinistra.replace("px",""));

 var alto=oggetto.style.top;
 var numAlto=Number(alto.replace("px",""));

 if (dirX==1)
  incX=-incX;
 if (dirY==1)
  incY=-incY;

 oggetto.style.left=numSinistra+incX;

 oggetto.style.top=numAlto+incY;
}
Il codice in rosso è quello dei due parametri e dell'azione che essi svolgono rendendo l'incremento negativo se assumono il valore 1, che sta per una direzione negativa.
Il codice in verde serve per rendere facoltativi i due parametri: potrebbe essere il caso di assumere per buono il fatto che la direzione sia di base positiva.