Indice del corso

Eseguire codice JavaScript

JavaScript non richiede la presenza di una routine main da cui far partire l'esecuzione del programma come nei linguaggi C, C++, Java ma l'interprete JavaScript è inglobato nel browser ed è sempre pronto ad eseguire i comandi del linguaggio nell'ordine in cui l'incontra.

Nella lezione precedente abbiamo visto come inserire il codice JavaScript all'interno di documento html:

1. Direttamente all'interno di un elemento script

<span class="JSOutput"><script>document.write("Hello World!");</script></span> che produce:

2. All'interno di un file con estensione js

Quando l'interprete di HTML incontra il comando:
<script src="Esempio.js"></script>
esegue i comando in esso contenuti, come nell'esempio seguente:

• Abbiamo anche visto come creare una semplice funzione JavaScript all'interno di un file con estensione js e come invocarne l'esecuzione:
  1. il file "helloWorld_2.js contiene il codice:

     				function helloWorld(saluto){
     					document.write(saluto);
     					return;
     				}
     				

  2. il file"helloWorld_2.js" è collegato al file html mediante la tag:  <script src="JavaScript_2.js"></script>
  3. la funzione può essere invocata inserendo < script > helloWorld(formula di saluto);< /script > in un qualsiasi altra tag, come, ad esempio, nell'elemento h3 che segue:

3. In risposta ad un evento di tipo click su un oggetto html.

JavaScript può intercettare tutti gli eventi che si verificano all'interno di un documento html. In successive lezioni affronteremo in maniera più dettaglita questo argomento. Per il momento ci accontenteremo di apprendere come associare una funzione JavaScript all'evento click eseguito dall'utente. Questo ci servirà per poter scrivere da subito codice per provare le caratteristiche dei linguaggio che andremo a studiare.

Creeremo delle funzioni per la gestione degli eventi (event handler)

La prima cosa da fare è intercettare l'evento che si desidere servire. Per far questo occorre che JavaScript si metta in ascolto dell'evento sull'elemento che ci interessa. Per far questo gli oggetti di html sono dotati di un metodo "addEventListener" che consente di specificare sia il tipo di evento che la routine di gestione.

Vediamo come fare:

1. Creiamo un pulsante:
   • Utiliziamo l'elemento button (in seguito vedremo come l'evento click possa essere riconosciuto su molti altri elementi);
   • <button id="Puls_1"> Clicca qui </button>
   • Clicca qui
2. Facciamo in modo che JavaScrip "senta" l'evento click sul pulsante P1. Occorre inserire, direttamente nel codice html(o in un file js associato), il seguente script:

    
   
   		<script>
   			var p1=document.querySelector('#Puls_1');
   			p1.addEventListener('click', F1);
   		</script>	
   					

   Questo frammento di codice merita un commento:

   					
   		var è una dichiarazione di varibile, la più ampia possibile, in grado di contenere un oggetto;
   		(In una successiva lezione esamineremo tutti i tipi di variabile previsti da Javascript)
   		p1 è l'oggetto button identificato da id="Puls_1", restituito dal metodo querySelector di document;
   		(Abbiamo gia utilizzato il metodo write, nel seguito vedremo gli altri metodi di document.)
   		p1.addEventListener('click',F1); è l'invocazione del metodo addEventListener sull'oggetto p1. 
   		In questo modo si mette JavaScript in ascolto dell'evento click sull'oggetto p1 e si specifica il nome
   		della funzione che gestirà l'evento.
   									
   					

3. Creiamo l'event handler, la funzione F1 che gestisce l'evento:

    
   
   		<script>
   			F1(){
   				alert("Gestione dell'evento click sul button Puls_1");
   				return;
   			}
   		</script>
   
   					

   
   
   		F1 non fa molto ma quello che ci interessava era solo  mostrare un altro metodo per 
   		mandare in esecuzione codice JavaScript. 			
   			
   						

Nella lezione successiva vedremo come fornire input a funzioni JavaScrip e scrivere i risultati delle elaborazioni su campi di output. Tutto questo sarà fatto per studiare gli elementi fondamentali del linguaggio: variabili, costanti, strutture di controllo, loops.