Javascript

Javascript è un linguaggio orientato ad oggetti e basato su prototipi. Ci sono tre possibili approcci:

affrontarlo come un semplice linguaggio procedurale
affrontarlo anche con oggetti/proprietà/metodi
affrontarlo anche come linguaggio funzionale/prototipale
affrontarlo come linguaggio asincrono

Vi sono alcuni aspetti del JavaScript che possono essere considerati progettati male e di cui se ne sconsiglia l'utilizzo, ad esempio:

classi ed ereditarietà classica

Debugger

Mozilla Firefox 19 (o superiore) ha un debugger:

link1
link2

Struttura sequenziale

Esempio guidato (calcolatrice) javascript01.pdf
Test di comprensione javascript02b.pdf
Esercizio struttura sequenziale (età) javascript03.pdf
Esercizio stipendio javascript08.pdf

Struttura condizionale

Esempio guidato (condizione) javascript06.pdf
Come combinare le condizioni condizioni.odp
Esercizio (lavoro straordinario) javascript09.pdf
Esercizio (votare) javascript10.pdf
javascript12.odt (2 voti suff./insuff.)
javascript13.odt (debiti)
javascript14.pdf (piano cartesiano)
javascript16.pdf (squenza crescente/decrescente)
Operatori logici e condizionali (esempio 3 debiti)
operatore modulo
si puo' scrivere una condizione di aver riempito tutto il form?

Oggetti, metodi e proprietà

Introduzione: oggetti_metodi.pdf
Esempio 1 creare oggetti
tipi di dato
manuale di riferimento
oggetti e metodi Esempio 2
animazione libreoffice
versione statica
esempio oggetti metodi proprietà
esempio con funzione che restituisce qualcosa:
- somma(), window.open(), document.getElementById()
esempio con proprietà:
- forms[][].value, stringa.length, Date.now
http://www.w3schools.com/jsref/jsref_match.asp
esempi di funzioni in javascript

Struttura iterativa

Esempio guidato sulla struttura iterativa javascript20.pdf
Esercizi svolti sui contatori javascript25.pdf
creare un array
javascript23.pdf
1. http://www.w3schools.com/js/js_obj_array.asp
creare un paragrafo, appenderlo a body, creare un nodotesto, appenderlo al paragr.
creare 10 paragrafi, appenderli, creare 10 nodotesto, appenderli
creare una casella di input dentro un form esistente (con pulsante)
creare una casella di input dentro un paragrafo e modificare type in password
- crearne 10 come sopra
creare una casella di input dentro un paragrafo dentro un form
creare una casella di input con testo davanti
Scrivere un programma che chieda cinque numeri e ne visualizzi la somma
1. in questo caso non si puo' utilizzare solo un totalizzatore, ma e' obbligatorio memorizzare prima tutti i dati in un array… quindi è necessario una iterazione per riempire l'array e un'altra per sommare i valori.
visualizzare la tabellina del 4
visualizzare tutte le tabelline da 1 fino a 10.
Numero di ripetizioni sconosciuto (svolto in fondo a questa pagina)
Gioco della battaglia navale
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array

Approfondimento

Tipi di dato javascript04.pdf
1. errori javascript05.pdf
usare var? Se uso var la variabile è sempre globale, anche dentro una funzione (w3schools)

Esempio in fondo pagina?
La funzione del Javascript (da revisionare perché contiene errori)
http://raphaeljs.com/reference.html quadrato.rotate(45);

Esempio in javascript

calcolatrice-form.html

<html>
	<head>
		<script type="text/javascript">
		function funzioneProdotto()
		{
			var numero1=document.forms["formNumerico"]["numero1"].value;
			var numero2=document.forms["formNumerico"]["numero2"].value;
 
			if (numero1!=null && numero1!="" && numero2!=null && numero2!="")
			{
				risultato=numero1*numero2;
				window.alert("Risultato: "  + risultato );
			}
		}
		</script>
	</head>
 
	<body>
 
		<form id="formNumerico" action="" method="" >
			<input name="numero1" type="text" />
			<input name="numero2" type="text" />
			<input type="button" value="invia!" onclick="funzioneProdotto()" />
 
		</form>
	</body>
 
</html>

calcolatrice-prompt.html

<html>
	<head>
		<script type="text/javascript">
		function funzioneProdotto()
		{
			var numero1=prompt("Scrivi il primo numero","");
			var numero2=prompt("Scrivi il primo numero","");
			if (numero1!=null && numero1!="" && numero2!=null && numero2!="")
			{
				risultato=numero1*numero2;
				window.alert("Risultato: "  + risultato );
			}
		}
		</script>
	</head>
 
	<body">
 
	</body>
 
</html>

pagina.html

<html>
	<head>
		<script type="text/javascript">
		function laMiaFunzione()
		{
			var nome=prompt("Scrivi il tuo nome","Mario");
			if (nome!=null && nome!="")
			{
				document.write("<h1>Ciao " + nome + "! </h1>");
			}
		}
		</script>
	</head>
 
	<body onload="laMiaFunzione()">
         <h2> questa pagina simula una calcolatrice </h2>
 
	</body>
 
</html>

bottoni.html

<html>
  <head>
  <title>
  Esempio getElementById
  </title>
 
  <script type="text/javascript">
  function aggiungiColore() {
  document.getElementById('mio').style.backgroundColor='lime';
  }
  </script>
  </head>
  <body>
  <div style="background-color:pink; text-align:center;">
  <h1>getElementById</h1>
  </div>
 
  <div id="mio" style="background-color:yellow; height:100px; margin:20px;">
    il javascript può essere usato per modificare, in seguito ad eventi, 
    il codice HTML e il codice CSS
  </div>
 
  <input type="button" value="Colorami" 
   onClick="aggiungiColore();" />
 
  </body>
</html>

appendere.html

<html>
	<head> <title>modifica elemento esistente</title>
		<script>
		function appendi()
		{
			var paragrafo=document.createElement("P");
			var testo=document.createTextNode("ciao");
			var grassetto=document.createElement("STRONG");
                        document.body.appendChild(paragrafo);
			paragrafo.appendChild(grassetto);
			grassetto.appendChild(testo);
		}
		</script>
 
	</head>
	<body>
		<p>parola</p>
		<input type="button" onClick="appendi()">
	</body>
</html>

creare.html

<html>
	<head> <title>crea nuovo elemento </title>
		<script>
		function crea()
		{
			var testo=document.createTextNode("qui password");
			var paragrafo=document.createElement("P");
			var campo=document.createElement("INPUT");
			document.body.appendChild(paragrafo);
			paragrafo.appendChild(testo);
			paragrafo.appendChild(campo);
			campo.name="pass";
			campo.type="password";
			campo.onclick="crea()"; // non funziona :(
 
		}
		</script>
 
	</head>
	<body>
		<input type="button" onClick="crea()">
	</body>
</html>

elenco.html

<html>
	<head> <title>array di elementi </title>
		<script>
 
		function mostramolti()
		{
			var elenco= new Array(96,97,98,99);
			var dimensione = elenco.length;
			for (n=0; n<dimensione; n=n+1)
			{
				var elementoP=document.createElement("P");
				var testo="posiz. "+n+", valore "+elenco[n];
				var elementoT=document.createTextNode(testo);
				document.body.appendChild(elementoP);
				elementoP.appendChild(elementoT);
			}
		}
		</script>
 
	</head>
	<body>
		<input type="button" onClick="mostramolti()">
	</body>
</html>

totale5.html

<html>
	<head> <title>array di elementi </title>
		<script>
		function calcola()
		{	
			var voti= new Array();
			totale=0;
			for (n=0; n<5; n=n+1)
			{			
				voti[n]=document.forms["numeri"]["txtvoto"+n].value;
				totale=totale+parseInt(voti[n]);
			}
			document.write("<p>totale "+totale+"</p>");
 
		}		
 
		function aggiungi5Input()
		{   
			var formNumeri=document.getElementById("numeri");
 
			for (n=0; n<5; n=n+1)
			{
				testo="voto "+n;
				elementoP=document.createElement("P");
				elementoT=document.createTextNode(testo);
				elementoI=document.createElement("INPUT");
				formNumeri.appendChild(elementoP);
				elementoP.appendChild(elementoT);
				elementoP.appendChild(elementoI);
				elementoI.type="text";
				elementoI.name="txtvoto"+n;
			}
		}
 
		</script>
 
	</head>
	<body onload="aggiungi5Input()">
 
		<form id="numeri" >	
				<input type="button" value="sommare" onClick="calcola()">
		</form>
 
	</body>
</html>

voti.html

<html>
	<head> <title>array di elementi </title>
		<script>
		function aggiungiInput()
		{	var dimensione=document.forms["strumenti"]["txtquanti"].value;
 
			for (n=0; n<dimensione; n=n+1)
			{
				testo="voto "+n;
				var formNumeri=document.getElementById("numeri");
				var elementoP=document.createElement("P");
				var elementoT=document.createTextNode(testo);
				var elementoI=document.createElement("INPUT");
				formNumeri.appendChild(elementoP);
				elementoP.appendChild(elementoT);
				elementoP.appendChild(elementoI);
				elementoI.type="text";
				elementoI.name="txtvoto"+n;
			}
 
		}		
 
		function calcola()
 
		{   
			var voti= new Array();
 
			var dimensione=document.forms["strumenti"]["txtquanti"].value;
			totale=0;
			for (n=0; n<dimensione; n=n+1)
			{
				voti[n]=parseInt(document.forms["numeri"]["txtvoto"+n].value);
				totale=totale+parseInt(voti[n]);
			}
 
			for (n=0; n<dimensione; n=n+1)
			{
				document.write(voti[n]);
			}
			document.write("<p>totale "+totale+"</p>");
			document.write("<p>media "+(totale/n)+"</p>");
		}
		</script>
 
	</head>
	<body>
 
		<form id="strumenti" >	
		Inserire <input type="text" name="txtquanti"> elementi di input	
		<input type="button" value="aggiungi" onClick="aggiungiInput()">		
		</form>	
 
		<form id="numeri" >	
			<input type="button" value="calcola" onClick="calcola()">
		</form>
 
	</body>
</html>

Appunti di informatica

Table of Contents