ࡱ > )` XA bjbj 4 { { 7 t t t t A A A A t A \ B B B B BC D D D [ [ [ [ [ [ [ $ \ h ._ [ D yD " D D D [ t t B BC 7 [ T T T D R t 8 B BC [ T D [ T T ?V gV B B q'$ A M ~ WV Z [ 0 \ _V _ kR _ gV gV _ WX D D T D D D D D [ [ T D D D \ D D D D D* 1 d 1 t t t t t t Programmi, script e linguaggi di scripting Un browser, oltre che per visualizzare pagine html, pu essere utilizzato per eseguire brevi programmi, detti tecnicamente script. In generale un programma uninsieme di istruzioni che fanno eseguire al computer un certo compito: per esempio Microsof Word, con cui stato scritto questo documento, un programma. Uno script un programma interpretato ed eseguito attraverso un browser (es. Firefox). Ogni programma (ed anche ogni script) scritto usando un certo linguaggio, tecnicamente detto linguaggio di programmazione. Alcuni esempi di linguaggi di programmazione sono il C++, il Pascal, il Basic etc. Nel caso degli script noi useremo un particolare linguaggio (detto di scripting) che si chiama javascript (abbreviato JS). Interfaccia Ogni programma (e ogni script) si compone di due parti fondamentali: 1) una interfaccia per lo scambio di dati con lutente 2) un codice nascosto per lelaborazione dei dati. In pratica linterfaccia quella che vede lutente, cio colui che utilizza il programma. Invece il codice contiene le istruzioni che il programma esegue e che normalmente sono nascoste allutente. Possiamo paragonare linterfaccia ai pulsanti di controllo di una lavatrice, mentre il codice il motore e i dispositivi interni. Form come interfaccia per gli script javascript Linterfaccia fra uno script in JS e lutente realizzata tramite una pagina HTML. In particolare un elemento html molto utile a questo scopo il form. Il form infatti consente di effettuare linput e loutput dei dati e di colloquiare con lutente. Si consideri lesempio qui sotto: Si tratta evidentemente di un form per lacquisizione di due numeri e per il calcolo del loro prodotto. Il codice HTML associato il seguente:
Si noti che lattributo action vuoto. Il motivo che questo form non usato (come succede di solito) per raccogliere dati dallutente (per esempio per inviarli via mail al web master). Il nostro un form usato per creare uninterfaccia a uno script JS. ESERCIZIO 1 Create una pagina HTML e copiate dentro il body il codice precedente. Osservate che cosa succede quando si fa clic sul pulsante PRODOTTO... non succede nulla, vero? Bene, non abbiate fretta, vedremo fra poco come fare in modo che succeda qualcosa. Il tag input per l'inserimento dati nel form Si tratta dell'elemento essenziale del form, per mezzo del quale possibile acquisire dati dall'utente. Si tratta di un tag vuoto (non contenitore) che pu stare solo dentro un form. L'attributo pi importante dell'elemento input type. Mediante questo attributo si specifica che tipo di elemento dev'essere effettivamente visualizzato sul form. Vediamo ora nel dettaglio i due tipi di elemento input che useremo nel seguito. Text In questo modo viene realizzata unacasella di testosemplice, per l'inserimento di testo o valori numerici nel form. Esempio: Gli attributisizeemaxlenght(opzionali) permettono di indicare rispettivamente la dimensione (in numero di caratteri) della casella di testo e il massimo numero di caratteri che possono essere inseriti nella stessa. L'attributoididentifica univocamente la casella di testo attribuendole un nome. Button In questo modo viene realizzato un pulsante generico. Esempio: L'attributovaluepermette di specificare la scritta che dev'essere visualizzata sul pulsante. Eventi L'attributoonclick(detto anchegestore di eventi) permette di specificare cosa dev'essere eseguito quando l'utente fa clic sul pulsante. In generale un evento qualsiasi operazione che l'utente pu compiere su una pagina: fare click col mouse, modificare il contenuto di una casella di testo, passare col mouse sopra a una immagine, eccetera. Nellesempio precedente il codice da eseguire si trova infunz(). Funz() il nome, scelto liberamente a piacere, di unafunzione. Vedremo fra pochissimo cos' una funzione. Per adesso ci basta sapere che una funzione si riconosce perch ha sempre due parentesi tonde, aperte e chiuse, che ne accompagnano il nome. Script che fa la moltiplicazione Riprendendo il nostro esempio, vediamo adesso come completare la nostra pagina in modo che, facendo clic sul pulsante PRODOTTO, venga eseguito effettivamente il prodotto fra i due numeri scritti nelle due caselle di testo. Esaminando il pulsante generico button contenuto nel form: osserviamo che la funzione in questo caso si chiama mult(). Vediamo adesso come si fa per scrivere la funzione mult(). E' semplice: basta inserire nell'head della pagina (la stessa pagina che contiene il form) le seguenti righe di codice: Quello sopra un piccoloprogramma(pi precisamente si chiamascript) scritto in JS. Si noti che lo script viene messo nellhead allinterno di un elemento Notiamo anche che le istruzioni in JS sono terminate da un punto e virgola come in C. Anche se tecnicamente il punto e virgola finale in JS pu essere omesso nelle istruzioni che occupano unintera riga, conviene abituarsi ad usarlo sempre. ESERCIZIO 3 Copiare il codice precedente dentro l'head della pagina che contiene il form e provare a eseguire adesso il prodotto. Vediamo nei dettagli come funziona il nostro script L'operazione fondamentale del nostro script evidentemente c = a * b; dovea, becsono trevariabili.aebcontengono i due numeri da moltiplicare e c contiene il risultato del prodotto. I nomi delle variabili possono essere scelti a piacere come si vuole! Consideriamo ora le due istruzioni seguenti: a = document.getElementById('x').value;b = document.getElementById('y').value; La prima unaassegnazione, mediante la quale viene copiato dentro la variabileail numero contenuto nella casella di testo diidxcontenuta nel form. In pratica con document.getElementById(nomeid) posso accedere a qualsiasi elemento della pagina attraverso il suo attributo id. La seconda assegnazione fa la stessa operazione con la seconda variabile. Questo trasferimento di dati dal form al programma si diceinputoacquisizione. Se non si capisce, diamo di nuovo un'occhiata al nostro form e vediamo che contiene:primo numero
secondo numero
E' pi chiaro adesso? In generale per utilizzare in uno script un valore presente in una casella di testo di un form, bisogna usare la seguente sintassi ( un po' complicata, d'accordo...): document.getElementById(nomeid).value A questo punto non dovrebbe essere troppo difficile capire l'ultima istruzione del nostro script: document.getElementById('ris').value = c; Questa ancora una assegnazione, ma, al contrario delle precedenti, mette il contenuto della variabilec(cio il risultato della moltiplicazione) nella casella di testo dinamerisdel form. Questo tipo di trasferimento dati dal programma verso il form si diceoutputovisualizzazione. ESERCIZIO 4 Proviamo adesso qualche altro evento. Nel nostro esempio abbiamo usato levento onClick che si attiva quando lutente fa clic su un elemento (nel nostro caso un pulsante, ma potrebbe anche essere altro: per esempio unimmagine). Ci sono molti altri eventi che possono essere usati in JS. Trovate lelenco completo qui: HYPERLINK "http://www.programmiamo.altervista.org/js/Generali/def3.html" http://www.programmiamo.altervista.org/js/Generali/def3.html Per adesso provate a vedere come funzionano gli eventi onDblClick e onMouseOver. ESERCIZIO 5 Realizzare una pagina (diversa dalla precedente) contenente il seguente form: Assegnare nomi a piacere alle tre caselle di testo e al form, purch siano nomi diversi da quelli usati nell'esempio precedente (x, y, ris e modulo non sono ammessi!). Scrivere tre funzioni (una gi ce l'abbiamo) che facciano somma, differenza e quoziente fra i due numeri e inserirle nella pagina. Vietato usare a, b e c come nomi di variabili. Cambiateli!!! Provare il programma. Funziona tutto tranne la somma che fornisce risultati assurdi (per esempio 3+5 farebbe 35!). Il problema delloperatore + In JS loperatore + viene usato per concatenare due stringhe di caratteri. Per capire cosa significa concatenare, provate nello script precedente (quello che fa la somma) a inserire nei due campi di input (primo numero e secondo numero) invece che dei numeri le scritte BARBA e GIANNI e premete poi il pulsante di somma. Avete capito cosa succede? Nel nostro caso noi non vogliamo concatenare due numeri ma fare una somma! In questo caso occorre convertire il contenuto delle variabili in formato numerico in questo modo: c = Number(a) + Number(b); La funzione Number (fra le parentesi ci va il nome di una variabile) converte appunto il contenuto in un numero. ESERCIZIO 6 Sistemate il problema della somma che non funziona nel programma precedente. ESERCIZIO 7 Qui di seguito trovate il codice che serve per calcolare la somma di tutti i divisori (tranne 1 e il numero stesso) di un numero interonumdato. var div, tot, num; div=2;tot=0;while (div