Ciao ho cercato di seguire un po' il discorso dall'inizio, ho l'impressione che ti stia perdendo in un bicchiere d'acqua perché, appunto, ti mancano alcune di quelle nozioni base che tutto sommato sono abbastanza logiche, come tu stesso hai scritto.
E' possibile, da quel che vedo, che tu abbia commesso qualche imprecisione tra le tue varie prove nella stesura del codice (in aggiunta a qualche altro fattore relativo al comportamento stesso del browser e all'interprete JavaScript), con la conseguenza che si sono generati errori e altri problemi vari, i quali ti fanno sembrare assurde quelle cose che invece sono relativamente logiche.
In linea di massima dovresti cercare di organizzare meglio il tuo script.
Hai comunque ricevuto varie risposte valide; vorrei personalmente aggiungere diversi dettagli per cercare di chiarire meglio alcuni aspetti.
Come già è stato detto, cerchiamo di analizzare per ordine i vari punti.
- Variabili globali
Nulla di così difficile da capire. Ti sono già state fornite varie risposte e tu stesso hai compreso più o meno come funzionano.
Se non dichiarate, tutte le variabili a cui si attribuisce un qualche valore, anche se questo avviene dentro una funzione, diventano automaticamente variabili globali.
In un tuo esempio hai dichiarato var num = 5; a livello principale (quindi globale) e poi hai però usato numero += 7;
Chiaramente, come tu stesso hai poi capito, è stato un tuo errore "lessicale" (se così possiamo dire) nella stesura del codice.
In tal caso, oltre a non funzionare come ti saresti aspettato, quello script produce un errore che interrompe l'esecuzione del codice. Infatti, dal momento che la variabile numero non è definita, non è possibile utilizzare l'operatore += che presuppone, appunto, l'esistenza della variabile stessa.
- Funzioni e l'istruzione return
Di per sé una funzione non è altro che un blocco di codice messo in memoria, il quale può essere eseguito attraverso l'invocazione della funzione stessa. Nulla di nuovo fin qui.
La funzione in sé non restituisce comunque nulla, a meno che non si utilizzi l'istruzione return, come giustamente ti ha indicato cassano nell'ultima risposta.
Riportando i tuoi due esempi dell'ultimo tuo post, e aggiungendo qualche commento:
codice:
var a = 10; // dichiaro la variabile e le assegno 10
myFunction(); // richiamo la funzione che modifica il valore della variabile, ora è 20. La funzione non restituisce comunque nulla
function myFunction() {
a = 20;
}
alert("Value of 'a' outside the function " + a); // utilizzo la variabile che appunto ha valore 20
// funziona perfettamente, a è aggiornata a 20
codice:
var a = 10; // dichiaro la variabile e le assegno 10
function myFunction() {
a = 20;
}
document.getElementById("demo").innerHTML = myFunction(); // richiamo la funzione che modifica la variabile ma di fatto non sta restituendo nulla, per cui ottengo undefined
// da undefined. Se però dentro la funzione do anche return a; mi viene dato 20
... puoi renderti conto tu stesso del funzionamento.
Nel primo caso tu non hai richiamato la funzione per farti restituire il valore della variabile a, ma hai usato direttamente la variabile.
codice:
alert("Value of 'a' outside the function " + a);
Se tu avessi richiamato la funzione, anche qui, come nel secondo caso, avresti ottenuto undefined, proprio perché quella funzione non restituisce nulla.
codice:
alert("Value of 'a' outside the function " + myFunction());
Nel secondo caso, invece, hai richiamato appunto la funzione, che chiaramente non restituisce nulla e quindi ottieni undefined.
codice:
document.getElementById("demo").innerHTML = myFunction();
E' ovvio che se tu avessi richiamato la funzione precedentemente e avessi utilizzato la variabile, avrebbe funzionato come nel primo caso:
codice:
var a = 10; // dichiaro la variabile e le assegno 10
myFunction(); // richiamo la funzione che modifica il valore della variabile, ora è 20. La funzione non restituisce comunque nulla
function myFunction() {
a = 20;
}
document.getElementById("demo").innerHTML = a; // uso la variabile che ora è 20
Analogamente, è ovvio che se la funzione restituisse il valore voluto, potresti richiamarla direttamente ottenendo tale valore, come tu stesso hai constatato:
codice:
var a = 10; // dichiaro la variabile e le assegno 10
function myFunction() { // questa funzione modifica la variabile è ne restituisce il suo valore
return a = 20;
}
document.getElementById("demo").innerHTML = myFunction(); // richiamo la funzione che restituisce il valore modificato della variabile: 20
Chiaramente il fatto di modificare il valore della variabile prescinde da ciò che decidi di far restituire alla funzione stessa.
Infatti la soluzione di cassano è questa:
codice:
function myFunction() {
return 20;
}
dove la variabile non è stata nemmeno utilizzata perché, in questo contesto, vale ciò che la funzione restituisce.
Il precedente esempio ha lo stesso risultato a prescindere dall'uso della variabile:
codice:
function myFunction() { // questa funzione restituisce il valore 20
return 20;
}
document.getElementById("demo").innerHTML = myFunction(); // richiamo la funzione che restituisce il valore 20
.
- Il prompt
Riguardo il metodo prompt() è preferibile (a mio parere) non utilizzarlo, ma usare sistemi alternativi (ad esempio un plugin JavaScript/jQuery). La documentazione stessa, e diverse guide, consigliano di non abusare di tale metodo perché questo interrompe di fatto l'esecuzione dello script e impedisce, all'utente, di agire su qualsiasi altro controllo della finestra finché il prompt stesso non sarà chiuso (così come per le altre finestre modali: alert e confirm)
Ora, tu hai riportato questo esempio:
codice:
prompt("Inserisci il tuo nome");
function somma(a, b) {
return a + b;
}
document.getElementById("demo").innerHTML = somma(5, 11);
prompt("Inserisci il tuo cognome");
in cui hai notato che il secondo prompt viene eseguito prima dell'innerHTML.
Qui ci sarebbe da scrivere un romanzo ma cerco di farla breve per farti capire cosa è andato storto e perché sarebbe meglio utilizzare, piuttosto, delle soluzioni alternative alle finestre modali native.
Il problema è legato più che altro ad innerHTML e alla gestione video del runtime JavaScript, piuttosto che al prompt() in sé.
In particolare la proprietà innerHTML agisce sugli elementi in modo visivo. A livello di esecuzione del codice, sarà necessario quindi un refresh video perché si possano vedere (a video) gli effetti apportati dopo la modifica di tale proprietà.
L'esecuzione dello script è comunque eseguita secondo l'ordine in cui tu hai scritto le varie istruzioni. Quindi, a li vello di codice, tale proprietà (innerHTML) viene regolarmente aggiornata dopo il primo prompt e prima che sia lanciato il secondo. Ciò che avviene, è che non vedi aggiornata la pagina finche non è finita l'esecuzione dell'intero blocco di script, che viene "ostaccolata" dai due prompt.
Direi che i motivi siano da ricercare quindi a livello tecnico. Il discorso ricade sulla gestione del thread e quindi del ciclo di elaborazione del runtime JavaScript.
Di fatto, nel tuo esempio sta avvenendo questo:
- lancio il primo prompt (che interrompe il runtime fino alla chiusura del prompt stesso)
- applico innerHTML (che viene regolarmente eseguito a livello di esecuzione del codice, per cui la proprietà risulta aggiornata dopo questa riga)
- lancio il secondo prompt (di nuovo, esecuzione interrotta fino a chiusura)
- infine il runtime JavaScript esegue il refresh video mostrando il risultato
Ora, è curioso notare che il risultato "visivo" varia a seconda del browser utilizzato. Testando su Firefox e IE11 , noto infatti che il risultato è più affidabile relativamente a ciò che ci si aspetterebbe. Cioè, a video, vedo subito l'aggiornamento dopo la chiusura del primo prompt, a differenza di altri browser su cui ho testato (Chrome e Edge).
Come ti ho indicato, dal momento che questi controlli (come altri) e i loro risultati (più che altro visivi, se non a livello funzionale) sono affidati al browser stesso che si sta utilizzato, è preferibile utilizzare delle soluzioni via codice, ad esempio script o plugin Javascript/jQuery, che è possibile personalizzare al meglio, che vengono eseguiti magari in overlay integrandosi dentro la pagina HTML, e che non influiscono/bloccano le funzionalita della finestra del browser e l'esecuzione stessa dello script.
Chiaramente dovrai valutare tu come meglio procedere.
Perdona la lungaggine, spero solo di non averti confuso maggiormente le idee