Indice del corso

Il metodo getElementById

Con il metodo getElementById() riesco a definire una variabile che contiene l'oggetto html referenziato da un dato identificatore.

Esempio:

L'intestazione di questo argomento è:<h2 id="Capitolo1"> Il metodo getElementById<h2>

Con il seguente script:

	<script>
		var arg = document.getElementById("Capitolo1");
	</script>
	

carico nella variabile arg l'oggetto html identificato da "Capitolo1". Trattandosi di un oggetto avrà metodi ed attributi, di questi ci occuperemo in lezioni successive. Per il momento accontentiamoci di sapere che esiste un attributo innerText che contiene il testo dell'elemento referenziato.

Ora, sfruttando quanto appreso nella lezione precedente, creo un handler dell'evento click su Pulsante 2 che visualizza l'attributo innerText di arg. L'event handler è il seguente:

	<script>
			var p2=document.querySelector('#Puls_2');
			p2.addEventListener('click', F2);
			function F2(){
				alert("arg.innerText= "+ arg.innerText);
				return;
			}
	</script>
	

Posso fare anche questo genere di cose:

Pulsante 3

	<script>
			var p3=document.querySelector('#Puls_3');
			p3.addEventListener('click', F3);
			function F3(){
				p3.innerText=arg.innerText;
				return;
			}
	</script>
	

L'elemento input

L'elemento input di HTML consente l'inserimento di dati da parte dell'utente.

L'elemento di input può assumere diverse forme, accettare un gran numero di differenti tipi di dato, e manifestare differenti comportamenti. Analizzarlo in dettaglio esula dallo scopo di questa lezione (richiederebbe un corso a se), ma certamente, su alcuni suoi aspetti, dovremo tornare in seguito.

Inserisci un dato:

Nel campo di input puoi inserire sia testi che dati numerici. Nel seguito studieremo le tecniche necessarie per riconoscere ed interpretare correttamente il tipo di dato inserito.

Ora inserisci una linea di testo. Vedrai che potrai inserire un testo lungo a piacere. Se premerai invio non succederà nulla. Infatti il campo di input consente solo l'inserimento di testi su di una singola linea.

L'elemento output

L'elemento output di HTML consente di presentare il risultati di calcoli eseguiti da una applicazione in risposta ad azioni o richieste da parte dell'operatore o di eventi esterni.

Campo si output:

Ora scrivo un frammento di codice che copia il contenuto di un campo di input su un campo di output in seguito alla pressione di un pulsante:

Inserisci un testo: CopiaOutput:

Questo è il codice:

	<script>
				var input=document.querySelector("#in");
				var pulsante=document.querySelector("#Copia");
				var output=document.querySelector("#out");
				pulsante.addEventListener('click',F4);
				function F4(){
				output.value=input.value;
				return;
				}
			
	</script>
	

Non è un granché, ma con questo meccanismo input -elaborazione-> output potremo studiare tutti i principali aspetti del linguaggio.

Evento input

Gestire l'evento click su un pulsante per avviare il processamento di un dato è, a volte, una inutile complicazione. Nel prossimo esempio gestiremo l'evento input sul campo di input. Inoltre il risultato della elaborazione sarà presentato su un altro campo di input.

Il frammento di codice che segue copia il contenuto del campo 1 sul campo 2 e viceversa.

Campo 1: <----->Campo 2

Questo è il codice:

	<script>
				var c1=document.querySelector("#C1");
				var c2=document.querySelector("#C2");
				c1.addEventListener('input',F5);
				c2.addEventListener('input',F6);
				function F5(){
				c2.value=c1.value;
				return;
				}
				function F6(){
				c1.value=c2.value;
				return;
				}
			
	</script>
	

Evento change

Far partire la gestione dell'evento all'inserimento di ogni carattere nei campi di input può, spesso, non essere una buona idea. L'evento change interviene solo dopo che confermo con invio l'inserimento del dato o quando, dopo aver modificato il dato, esco dal campo di input.

Campo 3: <----->Campo 4

Questo è il codice:

	<script>
				var c3=document.querySelector("#C3");
				var c4=document.querySelector("#C4");
				c3.addEventListener('change',F7);
				c4.addEventListener('change',F8);
				function F7(){
				c4.value=c3.value;
				return;
				}
				function F8(){
				c3.value=c4.value;
				return;
				}
			
	</script>