INFO/CSE 100, Spring Fluency in Information Technology Funzioni INFO/CSE 100, Spring Fluency in Information Technology http://www.cs.washington.edu/100 11/30/2018 fit100-12-functions
Letture e approfindimenti Altri riferimenti 11/30/2018 fit100-12-functions
Funzioni Una funzione è un modo di assemblare un insieme di istruzioni e dar loro un nome, cosi’ da riusarlo facilmente Le funzioni hanno uno schema specifico <nome> il nome di una funzione è un identificatore <lista parametri> lista di variabili di ingresso <istruzioni> le istruzioni eseguono il lavoro function <nome> ( <lista parametri> ) { <istruzioni> } 11/30/2018 fit100-12-functions
Esempio di funzione template example function <nome> ( <lista parametriu> ) { <statements> } template Scrivete una semplice funzione per il caclolo dell’Indice di Massa Corporea (IMC= Body Mass Index) con i dati nel Sistema Internazionale (Metri, Kg, Secondi) // Calcola l’indice di massa corporea // peso in kilogrammi // altezza in centimetri // restituisce il valore dell’IMC function imcE(pesoKg, altezzaCM) { var altezzaM= altezzaCM / 100; // converti in m return pesoKg / (altezzaM * altezzaM); } example 11/30/2018 fit100-12-functions
Sviluppiamo la funzione Per prima cosa, assicuriamoci che la nostra funzione faccia quello che abbiamo in mente. // Calocla il valore dell’IMC // peso in Kg // altezza in Metri // restituisci il valore di IMC function nome(lista parametri) { istruzioni } 11/30/2018 fit100-12-functions
Scegliamo un nome per la funzione I nomi delle funzioni si chiamano identificatori Iniziano con una lettera Devono avere un significato chiaro e naturale Non devono essere parole riservate in Javascript // Calcola il valore di IMC //peso in Kg // altezza in Centimetri // restituisci il valore di IMC function IMC(lista parametri) { istruzioni } 11/30/2018 fit100-12-functions
Scegliamo i parametri Anche i parametri sono identificatori Sono I nomi delle variabili che le funzioni usano nel corso dei calcoli Devono avere un significato abbastanza ovvio // Calcola il valore di IMC // peso in Kg // altezza in Centimetri // restituisci il valore di IMC function imc(pesoKg, altezzaCM) { istruzioni; } 11/30/2018 fit100-12-functions
Funzioni senza parametri! Non è necessario che una funzione abbia dei parametri Ma dobbiamo comunque includere le parentesi // stampa i saluti // Un saluto tipico è “ciao a tutti" function saluti() { document.write("ciao a tutti!"); } 11/30/2018 fit100-12-functions
Scriviamo il corpo della funzione Nel corpo della funzione è codificato tuto quanto serve ad eseguirla. // Calcola il valore di IMC // peso in Kg // altezza in centimetri // restiuisci il valore di IMC function imc(pesoKg, altezzaCM) { var altezzaM = altezzaCM / 100; // converti in m return pesoKG / (altezzaCM *altezzaCM); } Statements must have semicolons! Return statement returns a value. 11/30/2018 fit100-12-functions
Un semplice schema di test <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Indice di Massa Corporea</title> <script type="text/javascript"> // Calcola l’Indice di massa corporea nel Sistema Internazionale function imc( pesoKG, altezzaCM ) { var altezzaM = altezzaCM / 100; // Converti in metri return pesoKG / (altezzaCM * altezzaCM); } </script> </head> <body> <p>Questa pagina fornisce un semplice calcolatore per IMC. Un peso normale corrisponde a un IMC di 18.5-24.9</p> document.writeln("<br>imc(70,150): "+imc(70,150)); document.writeln("<br>imc(150,72): "+imc(150,)); document.writeln("<br>imc(175,72): "+imc(175,72)); document.writeln("<br>imc(200,72): "+imc(200,72)); </body> </html> La nuova funzione Istruzioni Di test 11/30/2018 fit100-12-functions
Proviamo la funzione e vediamo come lavora 11/30/2018 fit100-12-functions
Alcune caratteristiche interessanti <head> <title>Indice di Massa Corporea</title> <script type="text/javascript"> // Calcola l’Indice di Massa Corporea in unita S.I. // peso in Kg // altezza in Centimetri // restituisce il valore di IMC function bmiE(pesoKG, altezzaCM) { var altezzaM = altezzaCM / 100; // converti in metri return pesoKG / (altezzaM * altezzaM); } </script> </head> <script> in <head> locazione, commenti, keyword,parametri formali, parentesi graffe, parenthesi, operatori, espressioni, istruzione di assegnazione, istruzione return, punto e virgola 11/30/2018 fit100-12-functions
Funzioni <body> <Questa pagina fornisce un semplice calcolatore per IMC </p> <script type="text/javascript"> document.writeln("<br>imc(100,72): "+imc(100,72)+"); document.writeln("<br>imc(150,72): "+imc(150,72)+"); document.writeln("<br>imc(175,72): "+imc(175,72)+"); document.writeln("<br>imc(200,72): "+imc(200,72)+"); </script> </body> <script> in <body> locazione, documento, chiamet funzioni writeln , stringhe, stringhe concatenate chiamate di funzioni imc , argomenti (aka parametri attuali) 11/30/2018 fit100-12-functions
Globale o Locale?!? Lo scope di una variabile descrive quando e dove deve essere referenziata Le variabili locali sono conosciute solo dentro la funzione (parentesi graffe) Le variabili globali sono conosciute in tutto lo script Javascript, all’interno di <script> </script> // Calcola la percentuale di ore di studio settimanali // tempo di studio in ore // restituisce la percentuale var giorni = 7; function calcolaOreStudio(tempo) { var totaleOre = 24 * giorni; return tempo/totaleOre; } days = global variable time, totalHrs are local variables 11/30/2018 fit100-12-functions
Debugging Può essere difficile Ogni browser è fatto a modo suo se il browser è vecchio aggiornatelo! 11/30/2018 fit100-12-functions
Usate il programma TryIt Editor 11/30/2018 fit100-12-functions
Visualizziamo le variabili con alert(...) Usiamo la funzione alert(“messaggio") 11/30/2018 fit100-12-functions
Usiamo un editor che ci aiuta L’editor TextPad ha delle funzioni di evidenziazione 11/30/2018 fit100-12-functions
Visualizziamo il risultato con writeln(...) <body> <script type="text/javascript"> document.writeln(“qualcheVariabile: "+qualcheVariabile); </script> </body> 11/30/2018 fit100-12-functions
Usiamo un browser che ci aiuta Tutti I browser tollerano gli errori Usiamo un browser che aiuta nel debug ome Mozilla 11/30/2018 fit100-12-functions
Abilitiamo la Mozilla JavaScript Console 11/30/2018 fit100-12-functions
The Mozilla JavaScript console helps you by showing good error messages.
Interfacce grafiche (GUIs) Possiamo usare JavaScript per creare interfacce grafiche. 11/30/2018 fit100-12-functions
GUI I campi testo richiedono dati Una interfaccia grafica è un modo intuitivo di dare comandi, invece che memorizzare tabelle I campi testo richiedono dati I campi testo con etichette visualizzano dati Ipulsanti eseguono azioni radio buttons e caselle di controllo definiscono condizioni 11/30/2018 fit100-12-functions
Un semplice esempio Questa GUI ha diversi semplici controlli. Due pulsanti controllano il risultato Un campo di testo visualizza il risultato Una coppia di pulsanti di scelta controlla il display Pulsante per re-inizializzare http://www.cs.washington.edu/education/courses/100/04au/slides/13-gui/gui.html 11/30/2018 fit100-12-functions
Un semplice esempio <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Un semplice esempio di GUI</title> <script type="text/javascript"> codice funzione Javascript </script> </head> <body> HTML form </body> </html> Put the Javascript functions in the HTML <head> The HTML Form Element goes in the HTML <body> 11/30/2018 fit100-12-functions
Struttura della GUI La struttura del modulo è controllata con il codice HTML nel corpo della pagina Lo schema e I controlli sono forniti da nuovi tag <form id="buttonForm"> <button type="button" ... <input type="text" … <input type="radio" … <button type="reset" … <body> HTML form </body> </html> 11/30/2018 fit100-12-functions
<form> I moduli HTML forniscono all’utente un modo per inserire I dati in una pagina Web Un modulo può contenere diversi tipi di controlli ed elementi di visualizzazione I dati in un modulo possono essere trasferiti a un server Web o elaborati localmente Un modulo è definito come <form id="dmvForm"> ... </form> tag Un modulo ha vari attributi quali id, a cui ci si può riferire nel codice Un modulo contiene vari elementi come <input> e <button> 11/30/2018 fit100-12-functions
<button type="button" ...> <form> <button type="button" onclick=“poniRisultato(‘buon risultato')">Buoni risultati</button> onclick=“poniRisultato(‘cattivo risultato')">Cattivo risultato </button> </form> Un tag <button> può essere di tre tipi tipo “button” usato localmente Tipo “ submit” invia dati al server Tipo “cancella” re-inizializza il modulo Il valore dell’attributo “onclick” è un codice Javascript, in questo caso una chiamata a una funzione poniRisultato(stringa) 11/30/2018 fit100-12-functions
<input type="text" ...> <form> <b>Risultato:</b> <input type="text" value="nullo" readonly id=“campoRisultato"> <br> <input type="radio" name="carattere" id="radioMin" checked onclick=“poniRisultato(document.getElementById(‘campoRisultato').value)">Minuscolo <input type="radio" name="carattere" id="radioMaiusc" onclick=“poniRisultato(document.getElementById(‘campoRisultato').value)">Maiuscolo <br><button type="reset">Cancella</button> </form> Un campo <input> con type="text" è usato per inserire dati utenti e dati programmi value="nullo" definisce i valori iniziali readonly significa che solo il programma può definire il valore id=“campoRisultato" dà un modo per identificare questo particolare controllo in Javascript 11/30/2018 fit100-12-functions
<input type="radio" ...> <form> <b>Result:</b> <input type="text" value="nullo" readonly id="rcampoRisultato"> <br> <input type="radio" name=“carattere" id="radioMinusc" checked onclick=“poniRisultato(document.getElementById(‘campoRisultato').value)">Minuscolo <input type="radio" name="carattere" id="radioMaiusc" onclick=“poniRisultato(document.getElementById(‘campoRisultato').value)">Maiuscolo <br><button type="reset">Cancella</button> </form> Un tag <input> con type="radio" permette all’utente di selezionare diverse scelte name="case" identifica tutti I pulsanti dello stesso gruppo (ne sarà selezionato solo uno) L’attributo onclick fornisce a Javascript il codice da eseguire quando si clicca il pulsante id="radioLC" ci dà un modo per identificare un controllo particolare in Javascript 11/30/2018 fit100-12-functions
<button type="reset" ...> <form> <b>Risultato:</b> <input type="text" value="nullo" readonly id=“campoRisultato"> <br> <input type="radio" name=“carattere" id="radioMinusc" checked onclick=“poniRisultato(document.getElementById(‘campoRisultato').value)">Minuscolo <input type="radio" name="carattare" id="radioMaiusc" onclick=“poniRisultati(document.getElementById(‘campoRisultato').value)">Maiuscolo <br><button type="reset">Cancella</button> </form> Un tag <button> con type="reset" riporta tutti I controlli del modulo al loro valore originale 11/30/2018 fit100-12-functions
Un evento determina un processo Dopo avere visualizzato una agina, il browser Web attende … quando facciamo qualcosa, succede un evento Elaborare eventi è compito di un blocco di condice chiamato gestore di eventi event handler Il codice è identificato da particolari attributi Ci sono diversi eventi onClick, onChange, onMouseOver ... 11/30/2018 fit100-12-functions
Richiesta di elaborazione di un evento <form> <button type="button" onclick="sponiRisultato(‘buon risultato')">Buon risultato</button> onclick=“poniRisultato(‘cattivo risultato')">Cattivo risultato </button> </form> L’attributo onclick definisce una chiamata Javascript quando il pulsante è premuto In questo caso è la funzione poniRisultato(stringa) definita nella tag <head> Il valore della stringa è passato alla funzione poniRisultato(stringa) che viene eseguita 11/30/2018 fit100-12-functions
Elaborare un clic <script type="text/javascript"> function ponirRisultato(stringaRisultato) { var tempStringa = stringaRisultato; if (document.getElementById("radioMinusc").checked) { tempStringa = tempStringa.toLowerCase(); } else if (document.getElementById("radioMaiusc").checked) { tempStringa = tempStringa.toUpperCase(); } document.getElementById(“campoRisultato").value = tempStringa; </script> La funzione poniRisultato(stringa) + chiamata da diversi gestori di eventi In ogni caso, prende una stringa in ingresso, decide se si vuole in maiusco o in minuscolo e setta campRisultato in modo opporuno 11/30/2018 fit100-12-functions
poniRisultato(stringaRisultato) <script type="text/javascript"> function setResults(resultString) { var tempStringa = stringaRisultato; if (document.getElementById("radioMinusc").checked) { tempStringa = tempStringa.toLowerCase(); } else if (document.getElementById("radioMaiusc").checked) { tempStringa = tempStringa.toUpperCase(); } document.getElementById(“campoRisultato").value = tempStringa; </script> parametri, variabile locale, blocco if/else , referenza di campo, chiamata alla funzione toLowerCase() 11/30/2018 fit100-12-functions