Javascript - ferrazzi.info · fare con l'utilizzo del solo HTML. ... un valore numerico ed una...

Dott.Ing.Ivan Ferrazzi

Javascript

Introduzionealla

programmazione

Dott. Ing. Ivan FerrazziV1.2 del 03/02/2014

1/32


Copyright ©2014 Dott.Ing. Ivan FerrazziPermission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.

2/32


Indice generaleINTRODUZIONE....................................................................................................4CONCETTI BASE...................................................................................................6

JavaScript in HTML...........................................................................................6Per iniziare: alert()...........................................................................................7Le variabili.......................................................................................................8Gli operatori.....................................................................................................9Il concatenamento.........................................................................................10

GLI OGGETTI......................................................................................................11Oggetti in JavaScript......................................................................................11Oggetti del DOM: getElementById()..............................................................12Le stringhe oggetto String.............................................................................13Oggetto Date.................................................................................................14Oggetto Image...............................................................................................15Le finestre......................................................................................................16

GLI ARRAY..........................................................................................................18GLI EVENTI.........................................................................................................20FINESTRE DI DIALOGO.......................................................................................22

Le finestre di conferma..................................................................................22Le finestre per l'inserimento di dati...............................................................22

COMANDI CONDIZIONALI E CICLI.......................................................................23Comando condizionale if...else......................................................................23Il comando condizionale switch.....................................................................24Il ciclo for.......................................................................................................25Il ciclo while...................................................................................................25

LE FUNZIONI......................................................................................................27Concetto base................................................................................................27Variabili locali e globali..................................................................................29

I FORM...............................................................................................................30Interagire con i componenti di un modulo FORM...........................................30

3/32


INTRODUZIONEJavascript nasce dall'esigenza venutasi a creare di interagire con i diversi oggetti della pagina web (immagini, form, link, ecc.) , cosa che era impossibile fare con l'utilizzo del solo HTML.Questo linguaggio, che con il suo utilizzo trasforma una pagina HTML in Dynamic HTML (DHTML), riesce a dar vita a delle pagine dinamiche, cioè vive, che cambiano a seconda di quello che fa il visitatore.JavaScript è un linguaggio di scripting, ciò significa che la sintassi JavaScript potete scriverla direttamente dentro la pagina HTML, senza bisogno di produrre alcun file compilato.É direttamente il browser, tramite un apposito motore di scripting (cioè di visualizzazione), che legge e interpreta le parti di codice JavaScript.Javascript non è Java, questi due linguaggi si assomigliano un po' nella sintassi (nel modo di richiamare oggetti e le loro proprietà tramite il "."), ma l'analogia termina qui. In realtà si tratta di due mondi complementari, di due linguaggi che fanno cose differenti.Infatti, per utilizzare Java bisogna installare sul proprio pc un software che legge e interpreta i programmi scritti con questo linguaggio, questo software è appunto la "Java Virtual Machine".JavaScript è un linguaggio lato-client, questo vuol dire che le pagine web vengono inviate all'utente da un web server, cioè da un programma che si trova su un computer remoto, e che per lo più non fa nient'altro che inviare le pagine a chi ne fa richiesta. L'utente da casa visualizza sul proprio browser le pagine che gli sono stato inviate.I linguaggi di scripting che vengono eseguiti dal web server invece si chiamano server side o lato server. JavaScript è un linguaggio lato client, ciò significa anche che gli script avranno validità all'interno delle singole pagine web, e non da una pagina all'altra. Con

4/32


JavaScript è possibile infatti passare una piccola quantità di dati da una pagina all'altra, ma è un'operazione che può essere effettuata con una certa difficoltà.

5/32


CONCETTI BASE

JavaScript in HTML

Il codice JavaScript viene integrato all'interno della struttura HTML grazie al tag <script>...</script>. E' possibile inserire uno o più tag <script> all'interno della struttura HTML ed il motore JavaScript andrà ad elaborarne i vari contenuti partendo dal primo blocco in alto e proseguendo in sequenza verso il basso. I vari blocco vengono visti dal motore JavaScript come uno unico.In alcuni casi utilizziamo JavaScript per andare a manipolare elementi HTML. Siccome anche l'interprete HTML elabora la struttura HTML dall'alto verso il baso è fondamentale che il blocco JavaScript in questione si trovi dopo l'elemento HTML di riferimento.Nella versione HTML 4.01 era indispensabile definire anche il MIME-type utilizzato con l'attributo type, ossia

<script type=”text/javascript”></script>

A partire dalla versione HTML5 questo non è più necessario e si può quindi scrivere semplicemente

<script></script>

E' possibile importare del codice JavaScript che si trova all'interno di un file estero. In questo caso possiamo scrivere

6/32


var numero = 12;

mentre la stringa (sequenza di caratteri) va inserita tra virgolette singole, oppure doppie

var stringa = “ciao a tutti”;var stringa = 'ciao a tutti';

Il valore booleano può essere vero (true) oppure falso (false). In questo caso scriviamo come valore

var bool = true;var bool = false;

Una variabile può contenere anche altre strutture che però si vedranno in seguito.La parola chiave var è necessaria quando creiamo la variabile. Se vogliamo cambiare il valore ad una variabile creata precedentemente scriviamo semplicemente

stringa = “Nuovo contenuto”;numero = 23;bool = true;

In fase di assegnazione di un valore è possibile utilizzare anche delle variabili. Se scriviamo

var a = 3;var b = 5;b = a;

il nuovo valore di b diventa 3.

Gli operatori

Gli operatori classici che possiamo utilizzare sono: + (addizione), - (sottrazione), * (moltiplicazione), / (divisione) e % (modula – resto di una divisione). Possiamo quindi scrivere

var a = 5 + 3;

In questo caso il valore assegnato ad a sarà 8.

JavaScript, così come tutti i linguaggi di programmazione, inizia ad elaborare la parte che si trova a destra dell'uguale fino a quando non recupera un valore effettivo che può essere poi salvato all'interno della variabile indicata nella parte sinistra. La parte destra può contenere dei valori come nell'esempio appena visto, ma può anche contenere delle

9/32


variabili. In questo caso è quindi possibile scrivere

var a = 10;a = a + 5;

JavaScript inizia ad elaborare la parte a + 5 recuperando l'attuale valore di a, ossia 10. Poi calcola la somma dei due valori, quindi 10 + 5 restituendo 15. Il valore restituito è un valore effettivo che può essere memorizzato all'intero di una variabile quindi prosegue con l'assegnazione a = 15.

Il concatenamento

L'operatore + si comporta in maniera differente in base ai valori che vogliamo “unire”. Nel caso di due valori numerici l'operatore + esegue l'operazione matematica, ossia l'addizione. Se cerchiamo, invece, di unire un valore numerico ed una stringa, oppure due stringhe, l'operatore concatena i due valori creando un'unica stringa.

var stringa = “ciao a “ + “tutti”;

Il valore di stringa diventa “ciao a tutti”. Nel seguente caso

var stringa = “Il risultato è “ + 23;

il valore di stringa diventa Il risultato è 23. Vediamo un esempio completo molto semplice

<!DOCTYPE html><html> <head> <title>JavaScript</title> <meta charset=”utf-8” /> </head> <body> ciao! <script> var nome = “Ivan”; alert(“Il mio nome è ” + nome); </script> </body></html>

10/32


GLI OGGETTI

Oggetti in JavaScript

La programmazione JavaScript è una programmazione ad oggetti, questo vuol dire che dobbiamo essere in grado di riconoscere i vari elementi che formano una pagina web.

• oggetto navigator, rappresentato dal browser• oggetto window, rappresentato dalla finestra che contiene la pagina

web• oggetto window.frame, reppresentato dai frames• oggetto document, rappresentato dal documento HTML• oggetto form, rappresentato dai form• oggetto images, rappresentato dalle immagini• oggetto cookie, rappresentato dai cookie• oggetto location, rappresentato dalla barra degli indirizzi• oggetto status, rappresentato dalla barra di stato

ecc...ecc....

Questa suddivisione della pagina in oggetti ci permette di interrogare questi elementi, leggerne le proprietà e in taluni casi anche cambiare il valore di queste proprietà.Un altro concetto importante è che ognuno degli oggetti del browser ha dei metodi e delle proprietà. Questo equivale a dire che ognuno degli oggetti del browser ha a disposizione determinate azioni e non altre.

Prendiamo ad esempio una macchina, la facciamo diventare il nostro

11/32


oggetto. L'oggetto macchina ha delle proprietà come potrebbero essere il numero delle ruote, il colore ecc., ma può anche avere dei metodi come possono essere l'accelerazione o la frenata.

Tutto questo tradotto in codice andrebbe così rappresentato:[oggetto].[caratteristica] es. macchina.nr_ruote [oggetto].[metodo] es. macchina.accelerazione()

Quindi se volessimo far apparire sullo schermo la scritta ciao dovremmo scrivere il codice in questo modo:

<!DOCTYPE html><html> <head> <title>JavaScript</title> <meta charset=”utf-8” /> </head> <body> <script> document.write(“ciao”); </script> </body></html>

Analizziamo quello che abbiamo scritto, l'oggetto document rappresenta il documento HTML, mentre write unito a document dal punto, è il metodo cioè la funzione all'interno dell'oggetto stesso che mi permette di stampare a video.

Oggetti del DOM: getElementById()

Ogni singolo tag presente all'interno della nostra pagina viene rappresentata nel browser sotto forma di albero ad oggetti (il DOM). JavaScript ci permette di effettuare una ricerca all'interno del DOM per ritrovare l'oggetto con specifico valore id.Il tag

<div id=”box”><strong>ciao</strong></div>

potrà essere recuperato con JavaScript con

var obj = document.getElementById(“box”);

Ogni oggetto che identifica un tag contenitore ha al suo interno la proprietà innerHTML che contiene l'intera struttura HTML presente all'interno dell'elemento stesso. Se scriviamo

<html> <head> </head>

12/32


<body> <div id=”box”><strong>ciao</strong></div> <script> alert(document.getElementById(“box”).innerHTML); </script> </body></html>

vedremo apparire sullo schermo il pop-up con all'interno il valore

<strong>ciao</strong>

Attenzione! Possiamo utilizzare getElementById() solo se l'interprete HTML ha già interpretato l'oggetto che intendiamo recuperare.

Le stringhe oggetto String

Quando creiamo una stringa con JavaScript utilizzando la forma semplice

var str = “ciao”;

JavaScript crea un oggetto. Infatti è possibile creare la stessa stringa utilizzando la forma

var str = new String(“ciao”);

Una volta creato l'oggetto String (in tutte e due i casi) è possibile utilizzare le proprietà e i metodi presenti in esso.

length restituisce il numero di caratteri di una stringacharAt(pos) restituisce il carattere in posizione pos indexOf(str) restituisce l'indice della prima occorrenza della stringa

str presente all'interno della stringa in questione. Restituisce –1 se la stringa str non è presente.

lastIndexOf(str) restituisce l'indice della prima occorrenza partendo da destra della stringa str presente all'interno della stringa in questione. Restituisce –1 se la stringa str non è presente.

replace(str1,str2) rimpiazza la prima occorrenza di str1 con str2split(str) converte una stringa in array utilizzando la stringa str

come elemento di separatore all'interno della stringa di partenza

substring(p1[,p2]) restituisce la sotto stringa in base all'indice di partenza p1 e quello finale p2. Indicando solamente p1 JavaScript estrarrà la sotto stringa fino alla fine.

Prendiamo come esempio la seguente stringa dalla quale vogliamo recuperare il valore presente dopo il simbolo dell'uguale (=), ossia 2.

13/32


var stringa = new String(“file:///home/mirko/Scrivania/pre?valore=2”);

Ora proviamo ad estrapolare il dato che ci interessa con

var valore=stringa.substring(stringa.lastIndexOf(“=”)+1);

dove substring() permette di ricavare le lettere a partire da un numero a scelta, lastIndexOf() invece restituisce l'indice della l'ultima occorrenza del carattere “=”.

Oppure possiamo ricavare la lunghezza di una stringa:

var x = “ciao”;document.write(x.length);

Oggetto Date

L'oggetto Date ci permette di interagire con la data di sistema. L'oggetto ha bisogno di essere inizializzato in questo modo:

var data = new Date();

Ora possiamo interrogare l'oggetto. Ad esempio se volessimo sapere la data e l'ora attuale basterà digitare:

document.write(data);

I metodi dell'oggetto date sono:

getDay() restituisce il numero relativo al giorno (0=lunedì,...,6=domenica)

getDate() restituisce il giorno del mesegetMouth() restituisce il mese (0=gennaio...)getYear() restituisce l'anno correntegetHours() restituisce l'ora correntegetMinutes() restituisce i minuti correntigetSeconds() restituisce i secondi correntigetTime() restituisce i millesecondi dal 1970

I metodi li possiamo utilizzare in questo modo:

var data = new Date();var giorno = data.getDate();document.write(giorno);

La data può essere settata con i seguenti metodi:

14/32


setDate(1) primo giorno del mesesetMonth(0) 0=gennaiosetYear(2003) anno 2003setHours(0) ora a 0setMinutes(0) minuti a 0setSecond(0) secondi a 0

Esempio:

var data = new Date();data.setDate(1);document.write(data);

Oggetto Image

L'oggetto Image permette di interagire con le immagini presenti all'interno del documento e caricate con il tag:

<img src=”nome_immagine.jpg” id=”icon” />

L'oggetto di immagine creato potrà essere modificato utilizzando la caratteristica src che contiene il percorso dell'immagine:

document.getElementById(“icon”).src

Quindi per cambiare l'immagine icon del tag IMG basterà scrivere:

document.getElementById(“icon”).src=”nuova_immagine.jpg”;

Questo sistema potrebbe risultare lento in quanto l'immagine viene caricata nel momento richiesto. Il problema si risolve facendo caricare subito tutte le immagini, senza visualizzarle, al caricamento della pagina.

Questo si ottiene nel seguente modo:

<script> var icon = new Image(); icon.src =”nuova_immagine.jpg”;

…

document.getElementById(“icon”).src = icon.src;</script>

Le immagini in questo modo sono già state caricate e basta solo richiamarle.

15/32


Le finestre

JavaScript ci da la possibilità di aprire nuove finestre, tramite l'oggetto window. La sintassi sarà quindi:

window.open('percorso','titolo','caratteristiche');

il titolo della finestra è opzionale, mentre nelle caratteristiche possiamo specificare a nostro piacimento vari parametri come le dimensioni, se far apparire le barre di scorrimento, se dare la possibilità di ridimensionemento, ecc. Vediamo un esempio:

<script> window.open('www.google.it','google','width=300,height=300');</script> Le varie caratteristiche che possiamo dare alla finestra sono spiegate nella tabella:

caratteristica valore spiegazione esempio

width numerico la larghezza della finestra in pixel width=400

height numerico l'altezza della finestra in pixel height=200

left numerico la distanza dalla sinistra del monitor left=300

top numerico la distanza dal lato superiore del monitor top=350

resizable yes / no indica se la finestra può essere ridimensionata o no resizable=no

fullscreen yes / no indica se la finestra va aperta a tutto schermo fullscreen=no

channelmode yes / no indica se la finestra deve essere aperta "in modalità canale" (solo per ie) channelmode=no

menubar yes / no la barra del menu (quella con scritto "file", "modifica", ecc.) menubar=no

toolbar yes / no la barra degli strumenti del browser (con i pulsanti "indietro", "avanti") toolbar=no

location yes / no la barra degli indirizzi del browser location=no

scrollbars yes / no le barre di scorrimento laterali scrollbars=no

status yes / no la barra di stato (quella in basso) status=no

window.open può essere utilizzato in combinazione con gli eventi, come possono essere onClick, onLoad, onUnload. Il consiglio che si può dare è di non usare troppo le queste finestre popup, per il fatto che non sono molto amate dai navigatori.E' possibile aprire una finestra vuota per poi riempirla successivamente come segue

<script> var w = window.open('','','width=300,height=300'); w.document.write(“<b>ciao a tutti</b>”);

16/32


</script>

17/32


GLI ARRAY

Gli array possono essere visti come dei “contenitori”, all'interno dei quali possiamo immagazzinare delle variabili o dei dati in modo ordinato, attribuendo degli indici.La costruzione dell'array può venire in due modi:

<script> alunni = new Array(); alunni[0]=”mario”; alunni[1]=”gigi”; alunni[2]=”luca”; alunni[3]=”federica”; alunni[4]=”giorgia”;</script>

Questa costruzione consente di inserire nell'array alunni tutti i nomi che vogliamo, ordinati per indice[]. All'interno delle parentesi tonde di Array si può specificare anche la lunghezza dell'array, cioè in questo caso, quanti nomi potrà contenere.I numeri in un array si inseriscono senza virgolette.

Un altro modo per costruire un array è questo:

alunni = new Array(“mario”,”gigi”,”luca”,”federica”,”giorgia”);

Ora possiamo interrogare l'array

18/32


document.write(alunni);

oppure se volessimo visualizzare solo luca:

document.write(alunni[2]);

Se, invece, volessimo sapere da quanti elementi è composto l'array:

document.write(alunni.length);

Gli array possono contenere anche delle immagini:

foto=new Array();foto[0]=new Image();foto[0].src=”nome_immagine0.jpg”;foto[1]=new Image();foto[1].src=”nome_immagine1.jpg”;ecc.

19/32


GLI EVENTI

Oltre ad essere organizzato ad oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi.Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena l'utente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, ecc.Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli sviluppatori.Gli eventi vengono associati ai tag, così se volessimo che il browser caricata la pagina, visualizzi una finestra di dialogo basterà scrivere

<body onload=”alert('ciao');”>...</body>

Vediamo qui di seguito i vari attributi di evento che si possono utilizzare:

onload=”” Il contenuto viene eseguito solo quando l'oggetto in questione è stato caricato completamente. Può essere inserito nel tag <body> oppure nei tag <img>.

onunload=”” Il contenuto viene eseguito quando si abbandona una pagina. Puo essere inserito nel tag <body>.

20/32


onmouseover=”” Il contenuto viene eseguito quando il puntatore del mouse arriva sull'oggetto in questione.

onmouseout=”” Il contenuto viene eseguito quando il puntatore del mouse esce dall'oggetto in questione.

onclick=”” Il contenuto viene eseguito quando viene premuto il pulsante del mouse sopra l'oggetto in questione.

onkeypressed=”” Il contenuto viene eseguito quando il cursore si trova sull'oggetto in questione e si preme un tasto.

onchange=”” Il contenuto viene eseguito quando JavaScript riconosce una variazione di contenuto quando l'elemento perde il focus (da usare su <select>, <input>, ecc.).

onfocus=”” Il contenuto viene eseguito quando l'oggetto acquisisce il focus (su elementi <input>, <textarea>, <select>, ecc.).

onblur=”” Il contenuto viene eseguito quando l'oggetto perde il focus (su elementi <input>, <textarea>, <select>, ecc.).

21/32


FINESTRE DI DIALOGO

Le finestre di conferma

Il comando confirm permette di chiedere conferma al visitatore tramite una finestra che presenta due opzioni annulla e ok. La sintassi è questa:

<body> <script> if(confirm('sei sicuro?')) { document.write(“sei sicuro!”); }else{ document.write(“non sei sicuro!”); } </script></body>

Le finestre per l'inserimento di dati

Il comando prompt permette di porre una domanda, con relativa risposta predefinita (facoltativa), all'utente e consente di dare una risposta, tutto questo all'interno di un'unica finestra di dialogo.Sintassi:

<body> <script> var nome=prompt(“come ti chiami?”,”inserire il nome”); document.write(“Il tuo nome è “ + nome); </script></body>

22/32


COMANDI CONDIZIONALI E CICLI

Comando condizionale if...else...

Il comando if...else... permette di controllare se si verificano delle condizioni e di reagire in modi diversi. La struttura del comando è la seguente:

if(condizione){ comandi se condizione è vera;}else{ comandi se condizione è falsa;}

gli operatori utilizzabili all'interno del blocco if sono:

== uguale!= non è uguale o diverso> maggiore di< minore di>= maggiore uguale<= minore uguale

Più condizioni possono essere combinate tra loro utilizzando gli operatori:

&& and logico che indica e

23/32


|| or logico che indica o! che indica non

esempio:

<html> <head> <script> function nome(){ if (prompt('digita il tuo nome')=='mirko'){ alert('ciao mirko'); document.write('ciao mirko'); }else{ alert('accesso negato'); nome(); } } </script> </head> <body onload=”nome();”> </body> </html>

Il comando condizionale switch

Lo switch è utile quando dobbiamo fare un controllo su una variabile che può assumere valori diversi. La sintassi è:

switch (variabile da valutare){ case valore1: comando da effettuare; break; case valore2: comando da effettuare; break; case valoren: comando da effettuare; break; default: comando da effettuare;}

Ora vediamo un esempio pratico:

<html> <head> </head> <body> <script> switch(screen.width){ case 640: document.write('larghezza 640'); break: case 1280: document.write('larghezza 1280'); break: case 1024: document.write('larghezza 1024'); break: default: document.write('larghezza sconosciuta'); }

24/32


</script> </body></html>

In questo modo cambiando la definizione dello schermo, cambierà anche la larghezza dello schermo e verrà visualizzata l'istruzione relativa.

Il ciclo for

Un ciclo for serve a ripetere una serie di istruzioni un determinato numero di volte, si imposta un contatore, in genere la variabile “i” e la si imposta uguale a zero, poi la si reimposta come minore del numero di volte che si vuole che l'operazione venga eseguita, in fine lo si incrementa. Il ciclo for è molto simile al while, la differenza sta nel fatto che while prevede una condizione che permette l'interruzione del ciclo.Sintassi:

for(i=0; i>3; i++) { comandi}

Esempio:

<html> <head> </head> <body> <script type="text/javascript"> for(i=0; i<3; i++) { document.write('ciao'+"<BR>"); } </script> </body> </html>

Impostando i<3 il comando verrà ripetuto 3 volte.

Il ciclo while

Il comando while permette di controllare una condizione e fino a che questa si verifica di eseguire determinati comandi.

<script type="text/javascript"> x=10; while(x<50){ document.write('ciao'); x++; }</script>

25/32


Abbiamo settato una variabile x assegnandogli 10, il comando while verifica se x è minore di 50, la condizione è vera quindi stampa “ciao” a video. Con il comando x++, andiamo ad incrementare di uno x che diventa 11. Il controllo continua fino a quando la condizione non si verifica più. Fino a quando x non diventa 50 verrà sempre stampato “ciao”.

Ora vediamo un esempio dell'utilizzo del while in combinazione con gli array:

<html> <head> </head> <body> <script type="text/javascript"> alunni = new Array(); alunni[0] = "Gigi"; alunni[1] = "Marco"; alunni[2] = "Luca"; voti = new Array(); voti[0] = 7; voti[1] = 8; voti[2] = 9; </script> <table border=”1”> <script type="text/javascript"> x = 0; while (x<alunni.length){ document.write("<TR><TD>" + alunni[x] + "</TD><TD>" + voti[x] + "</TD>"); x++; } </script> </table> </body> </html>

In questo esempio vediamo come il while continua a ripetere una riga della tabella, riempendola con i dati degli array fino a quando non ne trova più.

26/32


LE FUNZIONI

Concetto base

In Javascript esistono due modi per far eseguire i comandi all'interno della pagina HTML.La prima è quella di inserire i comandi all'interno del tag <script>...</script>.La seconda possibilità è quella di utilizzare le funzioni, ossia blocchi di comandi per uno scopo specifico.Queste si trovano all'interno del tag <head></head> e hanno la seguente struttura:

function nome_funzione(){ comando_1; comando_2; ... comando_n;}

Le funzioni vengono utilizzate per evitare di dover scrivere nuovamente parti di programma che all'interno della pagina HTML vengono utilizzate più spesso. Infatti possiamo richiamare una funzione ogni volta che ne abbiamo bisogno.Anche le funzioni vanno racchiuse all'interno del tag <script>.

<html> <head> <script> function ciao(){

27/32


Il parametro href all'interno del tag <a> contiene normalmente il riferimento ad una pagina HTML o a un link interno. Bisogna quindi utilizzare il comando “javascript:” prima di richiamare la funzione.Le funzioni possono essere richiamate anche con i gestori di eventi:

<a href=”#” onClick=”scrivi_testo('ciao');”>scrivi</a>

Variabili locali e globali

Le variabili globali hanno valore per tutto il documento HTML e vanno dichiarate all'inizio dello script e fuori da ogni funzione: il posto da preferire è nei tag <script> della sezione <head> in modo tale da creare i contenitori dei valori prima di ogni loro utilizzo;

Le variabili locali hanno valore solo all'interno della funzione in cui sono dichiarate, cioè all'interno del blocco di codice compreso tra function() { e la chiusura della parentesi } e vanno dichiarate entro questi blocchi.

In Javascript le variabili vengono create con la dichiarazione var per specificare che si tratta di variabili.

29/32


I FORM

Interagire con i componenti di un modulo FORM

Come detto precedentemente una pagina HTML è un oggetto document che può contenere a sua volta altri oggetti.Quando in HTML viene costruito un modulo i componenti vengono messi all'interno del tag <form>...</form>. Vediamo un esempio:

<html> <head> </head> <body> <form name=”modulo”> sesso: <input type=”radio” name=”sesso” value=”maschile” checked=”checked” /> maschile: <input type=”radio” name=”sesso” value=”femminile” /> femminile<br /><br /> <textarea name=”commento” rows=”8” cols=”50”> il suo commento signore! </textarea> </form> </body></html>

Quello che abbiamo creato è un modulo che ci permette di inserire un commento ed il sesso di una persona.Quando l'utente sceglie un altro sesso il commento rimane uguale, cerchiamo quindi di interagire direttamente con il componente del FORM

30/32


per cambiare il testo di default. Tutti i componenti hanno dei gestori di eventi che “ascoltano” quello che succede componente.Quello che ci interessa è sapere quando viene premuto il RADIO-BUTTON maschile e quando quello femminile, per poi cambiare rispettivamente il testo.In questo caso abbiamo bisogno del gestore di eventi onClick all'interno del tag <input type=”radio” ...>, il codice sarà:

<html> <head> </head> <body>

<form name=”modulo”> <input type=”radio” name=”sesso” value=”maschile” checked=”checked” onClick=”document.modulo.commento.value='il suo commento signore!'” /> maschile: <input type=”radio” name=”sesso” value=”femminile” onClick=”document.modulo.commento.value='il suo commento signora!'” /> femminile<br /><br /> <textarea name=”commento” rows=”8” cols=”50”> il suo commento signore! </textarea> </form> </body></html>

Come mostra l'esempio possiamo accedere ai singoli componenti partendo dall'oggetto document.

document.modulo.commento.value [restituisce il contenuto]document.modulo.commento.value=”ciao” [assegna un contenuto]

I FORM inseriti nel documento vengono identificati dal NAME datogli oppure da un array interno form[0]...form[n]. La stessa cosa succede con gli elementi che vanno da elements[0]...elements[n].

document.form[0].elements[2].value [restituisce il contenuto]document.form[0].elements[2].value=”ciao” [assegna un contenuto]

Ora vediamo i gestori di eventi più utilizzati nei FORM:

[A] onBlur/onFocusquando un componente riceve o perde il focus

[B] onChangequando viene modificato un componente di testo

[C] onClickquando viene selezionato un componente con il click del mouse

31/32


[D] onSelectquando viene selezionata una parte di testo all'interno di un componente di testo

[E] onLoad/onUnload

quando una pagina è stata caricata o chiusa

[F] onMouseOver/onMouseOut

quando il puntatore del mouse si posiziona sul componente o quando esce dal componente

[G] onSubmit/onResetquando viene chiesto di inviare i dati di un modulo o di cancellarli

<BODY> [A] [E]<FORM> [G]<INPUT TYPE=”FILE”> [A] [B]<INPUT TYPE=”TEXT”> [A] [B] [D]<INPUT TYPE=”PASSWORD”> [A] [B]<INPUT TYPE=”CHECKBOX”> [A] [C]<INPUT TYPE=”BUTTON”> [A] [C]<INPUT TYPE=”SUBMIT”> [A] [C]<INPUT TYPE=”RESET”> [A] [C]<INPUT TYPE=”RADIO”> [A] [C]<SELECT> [A] [B]<OPTION> [A] [B]<A HREF=”...”></A> [C] [F]<TEXTAREA></TEXTAREA> [A] [B] [D]

32/32

Javascript - ferrazzi.info · fare con l'utilizzo del solo HTML. ... un valore numerico ed una...

Documents

Transcript of Javascript - ferrazzi.info · fare con l'utilizzo del solo HTML. ... un valore numerico ed una...