Utilizzare una variabile ovunque

**Floky** · 27-05-2017, 12:20

ciao badaze abbi pazienza.. il tuo esempio l'ho capito.

Stamperà:
pippo = 15
pluto = 314 perchè var a dentro la funzione pluto è un'altra variabile (perchè ha local scope) rispetto a quella esterna pur avendo lo stesso nome
pippo = 15
caio = 1000
pippo = 15

Ed è quello che ho scritto anche io nell'ultimo post 2° codice.

Il mio caso è diverso. Guarda 3° codice dell'ultimo post inserito. Come faccio a richiamare il codice interno alla function() ? Se uso la x all'interno dell'evento tutto ok ma se lo faccio fuori (in un altro punto) non va.

Se fosse una funzione normale (come il tuo esempio) funziona (vedere anche 2° codice ultimo mio post)

**badaze** · 27-05-2017, 12:47

Il codice che hai postato ha degli errori e quindi non so se è solo una parte o se è completo. Se tu potessi postarlo per intero.

**Floky** · 27-05-2017, 13:15

Erano degli esempi.. il codice originale non differisce da quello se non per id con altri nomi. Questo ï¿½ quello originale:

codice:

<form id="mioForm" action="register.php" method="post">
    <div class="partOne">
        <input type="text" id="nome" name="name" placeholder="Nome" required>
	<input type="text" id="azienda" name="azienda"  placeholder="Azienda" required>
	<input type="text" id="email" name="email"  placeholder="Email">
    </div>
    <div class="partTwo">
        <textarea name="message" id="mess" placeholder="Scrivimi"></textarea>
	<input type="submit" value="Invia">
    </div>
</form>

codice:


$(function() {


    $("#mioForm").on("submit", function(e) {
        e.preventDefault();
	item = $("#nome").val();
	playGame();
			
	var details = $("#mioForm").serialize();
	$.post("register.php", details, function(data) {
	    $("#mioForm").html(data);
	});
    });

    // Da qui in poi c'ï¿½ il resto dello script (varie funzioni, altri eventi ecc...
    funzione1...
    funzione2...
    funzione3...
    funzioneN...
    evento1...
    evento2...
    eventoN...

   // ad un certo punto ho:
   var sfidante = new Giocatori(item) // qui voglio utilizzare il nome inserito nel form per cui richiamo item
   var computer = new Giocatori("Robot") 
    

});

PS: playGame() l'ho aggiunta stamattina e cosi funziona tutto. Ipotizziamo di togliere playGame() e lasciare tutto il resto uguale

Il problema per cui ho aperto il post ï¿½ che non posso richiamare item in quel punto

Eppure item (non avendo messo var) non dovrebbe essere globale e poterla utilizzare dove voglio?

Perchï¿½ nel tuo ultimo esempio la funzione caio stampa (giustamente) 1000 e non 15? Perchï¿½ la variabile ï¿½ aggiornata.

Perchï¿½ dunque la mia variabile item (senza var) non viene tratta allo stesso modo? Prova a chiamare questa variabile in qualsiasi punto che non sia all'interno dell'evento submit..

c'ï¿½ qualche differenza nel creare una funzione con nome (function pippo, function caio ecc...) e poi richiamarle (pippo(), caio() ecc..) e una funzione anonima (on("submit", function() {... #code ?

E' questo che non riesco a capire.. In sti giorni ho riletto tutorial in merito allo scope di javascript ma non ho trovato chiarimenti.

Ad ogni modo grazie per la disponibilitï¿½ e la pazienza.

**badaze** · 27-05-2017, 14:15

Prova questo.

codice:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
var item = 'xxxxxxxxxxxxxxx';
function giocatore(nome) {
 return "++++" + nome;
}
function aaaa() {
 
 $(function() {    
  $("#mioForm").on("submit", function(e) 
  {        
   e.preventDefault();    
   alert("On submit prima " + item);
   item = $("#nome").val();
   alert("On submit dopo " + item);
  });
  
  $("#mySubmit").on("click", function(e) 
  {        
   alert("On click " + item);
  });  
 });
}
</script>
</head>
<body onload="aaaa()">
<form id="mioForm" action="register.php" method="post">      
 Nome : <input type="text" id="nome" name="name" placeholder="Nome" required/>
 <input type="submit" value="Invia" id="mySubmit">
</form>

</body>
</html>

**KillerWorm** · 27-05-2017, 17:13

Ciao, le indicazioni che ti sono state fornite risolvono essenzialmente il problema in questione (su questo non avrei nulla da aggiungere rispetto a ciò che già ti è stato indicato) ma personalmente penso di aver afferrato il punto cruciale in cui ti stai perdendo.
Si tratta di capire come avviene la gestione degli eventi e come si comporta lo script presente dentro le funzioni definite per tali eventi. Ho l'impressione che ti stiano sfuggendo proprio i concetti principali della programmazione ad eventi.

In particolare tu stai popolando (valorizzando) la tua variabile in una parte di script che viene eseguita esclusivamente quando avviene un particolare evento (nel tuo caso il submit). Infatti quella tua funzione non è altro che un callback definito come gestore per l'evento submit. Invece tu stai cercando di leggere quella variabile ed ottenere quel valore prima che avvenga quell'evento e che sia quindi assegnato tale valore a tale variabile.

Anche se la tua variabile fosse globale, e quindi sia visibile in qualsiasi punto del tuo script, non è detto che questa risulti essere valorizzata, almeno fintanto che non sia eseguita quella parte di script in cui le viene assegnato un qualche valore.

Analizziamo questo tuo script (ho giusto corretto qualche imprecisione):

codice:

$(function() {
  var x = 5;
  $("#mioForm").on("submit", function(e) {
    e.preventDefault():
    x = $("#test").val();
  });
  $("#demo").html(x); // Non posso utilizzare x al di fuori perché non stampa il valore aggiornato (15) ma stampa il valore iniziale (5)
}

Prima di tutto, giusto qualche chiarimento:
Qui, la variabile x non è dichiarata a livello globale (badaze ti ha indicato più volte il modo corretto per farlo) perché sta comunque dentro la funzione principale di jQuery, che non è altro che un gestore (cioè una funzione callback) dell'evento (o meglio, del metodo) ready in jQuery. Ad ogni modo la tua variabile è comunque visibile sullo scope locale di questa funzione, per cui è visibile anche sull'ultima tua riga $("#demo").html(x).

Cosa avviene però?
La variabile x è vista correttamente nell'ultima riga, però in questo caso risulta essere 5, il valore definito inizialmente.

Ti sarai chiesto, "perché è 5 se le ho assegnato un nuovo valore poco prima nell'evento submit?"

E' presto detto: tu stai valorizzando la variabile dentro il callback di quell'evento submit* (vedi nota) per cui tale variabile assumerà quel valore solo quando avverrà quel tale evento, perché sarà appunto eseguito quello script dentro quel gestore di evento.

* NOTA: che sia submit o qualsiasi altro evento, cambia poco in questo particolare caso, perché tu hai usato preventDefault() che impedisce di fatto il comportamento nativo dell'azione submit in un form, per cui normalmente avverrebbe un refresh della pagina. Ma come ti ha fatto notare giustamente cavicchiandrea, in questo contesto non ha alcun senso usare un submit; sarebbe forse più opportuno utilizzare un semplice pulsante e quindi sfruttare, ad esempio, l'evento click.

La tua ultima riga (dove hai .html(x)) invece viene eseguita praticamente all'istante, cioè nel momento in cui la pagina è pronta (e quindi viene eseguito lo script dentro la tua funzione principale).

Lo script nella funzione dell'evento submit invece deve attendere che si verifichi quel tale evento per fare in modo che sia eseguito, e quindi che la variabile x sia valorizzata.

Sul tuo primo post hai riportato questo esempio (anche qui ho corretto alcune imprecisioni) dove hai detto che ti funziona e non capivi perché nell'altro caso non ti funzionava:

codice:

$(function() {
    function prova() {
        x = $("#test").val();
    }
    prova();
    $("#tip").html(x);
});

E' ovvio che in questo caso la variabile x risulta essere valorizzata (e chiaramente è visibile) nel momento in cui viene eseguita l'ultima riga. Questo perché la tua funzione prova() (in cui hai valorizzato x) viene eseguita, nel momento in cui la stai richiamando, prima della tua ultima riga.

In conclusione, l'uso della variabile (che sia globale, locale o cos'altro) deve essere concepito secondo la logica di esecuzione dello script. Se tu vuoi visualizzare il valore di quella x dopo che avviene un particolare evento (che sia il submit di un form o l'evento click di un pulsante o l'evento input in una casella di testo o il change di un elemento select), il tuo .html(x) deve essere eseguito, non dopo la dichiarazione della funzione stessa, ma dopo che quella funzione è stata eseguita (richiamata). Poi decidi tu come impostare la cosa. Puoi forzare l'esecuzione del callback, in modo che sia valorizzata la variabile anche se di fatto non è avvenuto nessun evento submit, oppure impostare un'ulteriore funzione (che so: playGame(), come hai già fatto, mi pare di capire) che chiamerai da dentro il callback e dentro la quale sarà mostrato il valore della variabile (il tuo .html(x)) che, in tal caso, risulterà chiaramente valorizzata.

Spero di averti aperto qualche bagliore, o quantomeno di non averti confuso maggiormente le idee

Buon proseguimento.

**Floky** · 27-05-2017, 18:55

Nuovamente grazie a tutti, badaze, cavicchiandrea e killerworm che con la sua spiegazione dettagliata mi ha chiarito alcune cose.

So che giï¿½ badaze mi aveva dato consigli ma non li avevo colto a fondo ma grazie alla spiegazione di Killerworm, ho capito (in ritardo) i consigli di badaze. D'altronde sono all'inizio con javascript.

Il problema principale, come mi ha detto killerworm, ï¿½ che non sapevo proprio che tutto quello definito dentro $(function() {... non fosse globale.. pensavo che era la parte piï¿½ esterna dello script.. Per javascript la parte piï¿½ esterna ï¿½ quella tra <script> e </script> (giusto?) e credevo che con jquery fosse quello definito dentro il ready.

Il submit l'ho messo perchï¿½ ho riprodotto l'esercizio che sto leggendo sul libro.. il preventDefault perchï¿½ invece dell'invio normale volevo fare una chiamata ajax (l'esercizio che sto seguendo).

La tua ultima riga (dove hai .html(x)) invece viene eseguita praticamente all'istante, cioï¿½ nel momento in cui la pagina ï¿½ pronta (e quindi viene eseguito lo script dentro la tua funzione principale).

Si questo ero riuscito a capirlo ma non sapevo come fare.

Sostanzialmente se avessi dichiarato var x fuori dal ready avrei potuto fare quel che volevo fare, ossia richiamare la variabile ovunque, natiralmente dopo aver eseguito l'evento?

Questo ï¿½ il succo del discorso.

Si si mi sei stato d'aiuto anche se alcuni punti (essendo principiante) dovrï¿½ leggerli piï¿½ attentamente.

Grazie mille a tutti

**KillerWorm** · 27-05-2017, 20:28

Per javascript la parte piï¿½ esterna ï¿½ quella tra <script> e </script> (giusto?)

In linea di massima sì.

non sapevo proprio che tutto quello definito dentro $(function() {... non fosse globale.. pensavo che era la parte piï¿½ esterna dello script

So che hai capito ma, giusto per puntualizzare, jQuery è comunque JavaScript, sottostà alle regole dettate dell'interprete JavaScript.
Se tu noti, quando definisci il ready, (diciamo così), non fai altro che dichiarare una funzione da passargli come callback (che poi sia anonima non cambia nulla ai fini dello scope). Va da se che dentro il corpo di quella funzione avrai uno scope locale e non globale; quindi se qui dentro dichiari una variabile con var, il suo scope (ambito di visibilità) sarà delimitato all'interno della funzione stessa.

Sostanzialmente se avessi dichiarato var x fuori dal ready avrei potuto fare quel che volevo fare, ossia richiamare la variabile ovunque, natiralmente dopo aver eseguito l'evento?

Esatto.

Buono studio

Discussione: Utilizzare una variabile ovunque

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio