Appunti su JavaScript e jQuery

DEFINIRE LE FUNZIONI

Per definire una funzione si usa la parola chiave function;

Una funzione si compone di:

Un nome (come per le variabili: lettere, numeri,_$)

§ Uno o più parametri opzionali

§ Un corpo (le istruzioni che la compongono e che sono comprese tra le parentesi graffe)

§ NB: le funzioni si dichiarano dentro la head del documento e si chiamano dentro il body.

esempio: CHIAMATA DI UNA FUNZIONE

Si definisce chiamata o invocazione di una funzione un punto

qualsiasi dello script nel quale compare l’indicatore della

funzione: Dichiarazione funzione (nella

function saluta() {

document.write(“ciao head del documento html)

”); } Chiamata funzione (nel body del

............................... documento html)

saluta(); PARAMETRI DI UNA FUNZIONE

I parametri costituiscono le variabili su cui opera una funzione. Se i parametri sono più di uno, si

separano con una virgola:

function nome_funzione (parametro1, parametro2, parametro3);

All’interno della funzione è possibile dichiarare altre variabili che vengono chiamate variabili

locali. Quando si definisce una funzione i nomi che si assegnano ai parametri sono come dei

“segnaposto” (chiamati parametri formali) che saranno poi sostituiti dai nomi effettivi delle

variabili (parametri attuali).

function saluta(nome) { parametro formale

alert ("ciao" + nome);

} parametro attuale

var nomedaSalutare = “Pippo”;

saluta(nomedaSalutare);

RESTITUZIONE DEI VALORI

Le funzioni possono

Svolgere delle azioni, come la funzione saluta(), concatena(), document.write()

§ Restituire dei valori ad esempio,

§ la funzione window.prompt restituisce un valore, che corrisponde all'input che

o l'utente ha inserito

Per fare sì che una funzione restituisca un valore, si utilizza

l’istruzione Return.

Quando si richiama la funzione, per “catturare” il valore

restituito e’ necessario assegnarlo ad una variabile.

var nome_variabile= nome_funzione(...);

function quadrato(numero) { Si puo’ anche scrivere in questo modo:

return numero*numero; function quadrato(numero) {

} var risultato; //variabile locale

var num= 10; risultato = numero*numero;

var num_quadrato= quadrato(num); return risultato;

document.write(num_quadrato); }

} VARIABILI LOCALI E GLOBALI

L’ambito di visibilità di una variabile (scope) dipende dal contesto in cui è dichiarata:

Se la variabile è stata dichiarata all’interno

§ di una funzione è una variabile locale

(l’ambito in cui è visibile è la funzione

stessa).

Se la variabile è stata dichiarata fuori da

§ qualsiasi funzione è una variabile globale

(accessibile da ogni funzione).

Se definiamo una variabile locale che ha lo stesso

nome di una variabile globale all’interno di una

funzione, la variabile locale prevale su quella

globale, o meglio prevale il suo valore.

In questo caso la variabile locale nasconde la

variabile globale.

NB: Sarebbe meglio evitare questa pratica, in

quanto si rischia poi di modificare anche il valore

della variabile globale.

esempio:

var risultato = 10;

function funzione_A(parametri) {

var risultato = 20; ...

Return risultato;

}

alert(risultato); Ora risultato contiene il valore 10!

1.10. GLI EVENTI

Le istruzioni JavaScript viste fino ad ora vengono eseguite al caricamento del documento HTML

Quando l’interprete JavaScript incontra la chiamata della funzione principale, il

§ programma viene eseguito

Attraverso il modello a oggetti del documento, è possibile associare l’esecuzione di un

programma agli eventi che si verificano nell’interazione utente-browser .

INTERATTIVITÀ DEGLI EVENTI

L’interprete Javascript “monitora” un insieme di eventi. Due tipi principali:

Eventi generati dall’utente attraverso le proprie azioni sul documento (es. movimenti del

§ mouse, passaggio del focus tra gli elementi del documento, clic...)

Eventi generati dal browser (es. caricamento delle immagini, caricamento del documento...)

§ ELENCO DEGLI EVENTI

Abort: caricamento delle immagini interrotto

§ Blur: l’elemento ha perso il focus

§ Click: clic col tasto sinistro

§ Change: selezione e poi deselezione di una voce

§ ContextMenu: clic col tasto destro

§ DblClick: doppio click

§ Error: quando si verifica un errore al caricamento di un’immagine

§ Focus: focus su un elemento

§ KeyDown: l’utente preme un tasto

§ KeyUp: l’utente rilascia il tasto

§ KeyPress: l’utente preme e rilascia un tasto

§ Load: termina il caricamento di un documento o di una immagine

§ MouseDown: l’utente preme il pulsante del mouse

§ MouseUp: l’utente rilascia il pulsante del mouse

§ MouseOut: il mouse si sposta dall’elemento

§ MouseOver: il mouse va sopra l’elemento

§ Reset: l’utente preme il pulsante reset di una form

§ Resize: quando la finestra del browser viene ridimensionata

§ Submit: click su invio

§ GESTORE DEGLI EVENTI

I gestori di eventi permettono di associare automaticamente il verificarsi di un evento alla

chiamata di un’istruzione o una funzione Javascript.

Dato un evento, si aggiunge il prefisso “on”: onLoad, onMouseOver, ecc.

§ Gli eventi sono riferiti agli elementi html (controlli dei form, link, immagini, ecc.)

§

Quando si verifica un certo evento, se il suo gestore è stato richiamato nel codice html,

l’istruzione JavaScript viene eseguita.

I gestori di eventi sono richiamati attraverso attributi html. ASSOCIARE ISTRUZIONI AGLI EVENTI

<a href=“http://www.unito.it" onClick="alert(‘Stai per accedere alla homepage di Unito')">Link</a>

Anche se l’istruzione javascript si trova all’interno di un tag html (e non all’interno di tag <script>),

deve rispondere alle regole sintattiche javascript (attenzione alle virgolette!).

Quando le istruzioni sono più complesse dei semplici alert o prompt, è possibile far richiamare dai

gestori di eventi delle funzioni dichiarate in precedenza.

ES: <input type=”button” value=“Premi qui" onClick=“mia_funzione()" />

METODO CONFIRM()

Il metodo confirm() mostra una finistra di dialogo con un messagio specifico (stabilito dal

programmatore), e insieme i pulsanti Ok e Cancel

Il metodo resituisce true se il visitatore clicca su Ok, restituisce false se clicca su cancella

var r = confirm(”Sei d’accordo?");

ASSOCIARE ISTRUZIONI AGLI EVENTI

Il gestore dell’evento richiama la funzione e, qualora la funzione restituisca un valore, esso viene

passato all’evento.

<a href=“http://www.unito.it” onClick=“return(confirm(‘vuoi abbandonare la pagina?’))”> link </a>

Se l’utente clicca “ok”, return diventa true e l’evento clic viene eseguito (l’utente accede alla

pagina indicata nell’attributo href) return true

à

Se l’utente clicca “annulla”, return diventa false e l’evento click NON viene eseguito (l’utente

rimane sulla pagina corrente) return fase

à

1.11. OGGETTO DOCUMENT

RIPASSO DOM

Il browser, quando interpreta una pagina HTML, oltre a visualizzarne il contenuto, crea ed

inizializza delle istanze di oggetti che rappresentano gli elementi all’interno della pagina:

Document Object Model DOCUMENT OBJECT MODEL

L’oggetto document rappresenta la pagina html visualizzata ed è su di esso che si agisce per

rendere le pagine dinamiche.

Tutti gli oggetti contenuti in una pagina HTML sono in realtà proprietà dell’oggetto document,

poichè risiedono all’interno del documento stesso.

L’oggetto document possiede le seguenti collections, che sono le più diffuse:

forms[ ]

§ links[ ]

§ images[ ]

§ anchors [ ]

§ SINTASSI

A differenza dell’oggetto window, a cui ci si può riferire anche omettendo l’oggetto

(es. alert(“bla bla”); per invocare metodi e proprietà di document è necessario utilizzare la

seguente sintassi:

document.metodo() (es. document.write(...))

document.proprietà (es. document.title) ACCEDERE AGLI ELEMENTI DEL DOM

Attraverso l'ID di un elemento (metodo più usato):

§ document.getElementById(id)

Es. var y=document.getElementById(“titolo”);

<img src=“” id=“titolo”>

ATTENZIONE! L'elemento viene memorizzato nella variabile come un oggetto (es.y.value)

Attraverso il nome dato all’elemento (attributo name) Es.

§ document.mioform.mioCampo.value=“ciao”;

var y = document.mioform.mioCampo.value;

< form name=“mioform”>

<input id=“mioCampo” name=“mioCampo” type=“text”>

Attraverso il suo tag html:

§ document.getElementsByTagName(tag)

//seleziono tutti i <p>

Es. var y=document.getElementsByTagName(“p”);

//seleziono il primo paragrafo

document.getElementsByTagName("P")[0].innerHTML

= "Hello World!”;

Attraverso il nome della classe:

§ document.getElementsByClassName(class)

Es. var y=document.getElementsByClassName(“par”);

ATTENZIONE! In un documento possono esserci più valori che condividono lo stesso tag o classe.

Attraverso il suo elemento html:

§ document.anchors[]

document.forms[]

document.images[]

document.links[]

Sia che si acceda agli elementi mediante la classe, che il tag html, che il nome dell'elemento

stesso, esso sarà considerato come un array. LE PROPRIETÀ INNERHTML

Per “recuperare” o modificare il contenuto di un elemento si usa la proprietà innerHTML.

Recupero valori

Es. var y =document.getElementById(“titolo”);

document.write(y.innerHTML)

Es. var x = document.getElementsByTagName(“p”);

document.write(x[0].innerHTML)

Inserimento valori

Es. document.getElementById(“titolo”).innerHTML=”Bla bla”;

document.getElementsByTagName(“p”)[0].innerHTML=”Bla bla”

Per inserire del contenuto in una pagina HTML meglio usare la proprietà innerHTML invece

di document. write().

Se il contenuto della pagina è già stato caricato, document.write() sovrascrive tutto!

<input type="button" value="Premi"

onClick="document.write('Ho sovrascritto tutto!')"/> MODIFICARE LO STILE

La sintassi per modificare lo stile di un elemento html è la seguente:

document.getElementById(id).style.proprietà = nuovo valore

Es. <p id=”pa