Javascript - Eventi

Interattività ed eventi

Attraverso il modello a oggetti del documento, è possibile associare l’esecuzione di un programma agli eventi che avvengono nell’interazione utente-browser.

Eventi generati dall’utente attraverso le proprie azioni.

Eventi generati dal browser(caricamento immagini, documento).

Elenco 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

·      Unload: il documento è tutto scaricato

Gestore 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, on MouseOver, ecc.

Gli eventi sono riferiti agli elementi html.

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>

Quando le istruzioni sono complesse è possibile far richiamare dai gestori delle funzioni dichiarate in precedenza.

<input type=”button” value=”Premi qui” onclick=”mia_funzione()”/>

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 viene eseguito.

Se l’utente clicca “annulla”, return diventa false e l’evento non viene eseguito.

Javascript - Oggetti built-in

Oggetto Date

Permette di gestire informazione relativa a data e ora.

Per creare un nuovo oggetto  di tipo Date:
var data = new Date();

Viene creato un oggetto che rappresenta il momento in cui lo script viene eseguito.
Anno, giorno, mese, ora, minuti, secondi, millisecondi.

Metodi dell’oggetto Date

·      getDate(); giorno numerico.

·      getMonth(); mese in forma numerica (gennaio=0).

·      getFullYear(); anno in 4 cifre.

·      getDay(); giorno della settimana in forma numerica(0=domenica).

·      getHours(); ora.

·      getMinutes(); minuti.

·      getSeconds(); secondi.

E possibile anche settare i contenuti:
setYear(); setMonth …

Oggetto Math

Si occupa di svolgere  mediante metodi e proprietà funzioni matematiche.

Metodi dell’oggetto Math

·      Math.min(); minore di 2 parametri.

·      Math.max(); maggiore di 2 parametri.

·      Math.random(); valore casuale tra 0 e 1.

·      Math.floor(); il parametro viene arrotondato per difetto all’intero inferiore.

·      Math.round(); il valore del parametro viene arrotondato al suo intero più vicino.

Oggetto String

Proprietà:
length; restituisce la lunghezza della stringa.

Metodi:

·      charAt(n); restituisce carattere in una posizione specifica.

·      indexOf(substr); restituisce la posizione della prima occorrenza di un carattere in una stringa.(-1 se non la trova).

·      lastIndexOf(substr) restituisce la posizione dell’ultima occorrenza di un carattere in una stringa.(-1 se non la trova).

·      Replace(stringa1,stringa2);sostituisce alcuni caratteri con altri.

Javascript - Le Funzioni

Quando alcune sequenze d’istruzioni devono essere utilizzate più volte, per non riscriverle è possibile raggrupparle sotto un’unica etichetta e richiamarle quando servono.

Una funzione è un blocco d’istruzioni al quale è associato un identificativo (etichetta).

Solo quando chiamata, la funzione è eseguita.

Definirle

Si usa la parola: function .

Si compone di :
un nome;
uno o più parametri opzionali;
un corpo;

Si dichiarano nel head e si richiamano nel body.

function nome(parametri){
blocco istruzioni;}

Parametri

Costituiscono le variabili su cui opera una funzione, se sono più di uno, si separano con una virgola.

function nome(par1,par,2)

All’interno della funzione è possibile dichiarare altre variabili locali.

I nomi che si assegnano ai parametri sono come “segnaposto”(parametri formali) che saranno poi sostituiti dai nomi effettivi delle variabili(parametri attuali).

Funtion saluta(nome){
alert(“ciao”+nome);}

Var nomeDaSalutare = “Pippo”;
saluta(nomeDaSalutare);

Chiamata di una funzione

Chiamata o invocazione di una funzione un punto qualsiasi dello script nel quale compare l’indicatore della funzione.

Function scrivi(stringa){ Dichiarazione
document.write(stringa);

var mia_stringa = “Pippo”;
scrivi(mia_stringa); Chiamata

Restituzione dei valori

Le funzioni possono:
svolgere delle azioni;
restituire dei valori (window.prompt);

Per fare sì che una funzione restituisca un valore, si utilizza l’sirtuzione: return.

Function nome(parametri){
var risultato;
blocco istruzioni;
return risultato;}

Quando si richiama una funzione, per catturare il valore restituito, è necessario assegnarlo a una variabile.

Var nome_variabile=nome_funzione(..);

function quadrato(numero){
return numero*numero;}

var num=10;

var num_quadrato=quadrato(num);

Chiamata di una funzione da un’altra funzione

Una funzione A può chiamare la funzione B perché effettui una certa operazione e restituisca un valore.

Function funzione_A(parametri){
var risultato:
blocco istruzioni;
return risultato;}

Funtion funzione_B(parametri){
var valore = funzione_A(…);}

Variabili locali e globali

Se la variabile è stata dichiarata all’interno di una funzione, è locale.

Se la variabile è stata dichiarata fuori da qualsiasi funzione, è globale.(accessibile da ogni funzione).

Se la variabile locale e globale ha lo stesso nome, quella locale prevale e nasconde la variabile globale.

Passaggio dei parametri

L’associazione tra parametri formali e attuali può essere fatta in due modi:

·      Per valore: quando si chiama la funzione e il valore del parametro attuale è passato a quello formale; la funzione modifica solo i dati utilizzati all’interno della funzione e sono modificati solo i parametri formali.

·      Per riferimento: quando si chiama la funzione il parametro attuale e il parametro formale diventa la stessa variabile, con lo stesso indirizzo in memoria, quindi si riferiscono entrambe allo stesso valore. Questo perché in realtà le variabili non contengono il valore, ma il riferimento, ossia l’indirizzo del valore.

La regola fondamentale:

I tipi primitivi (numeri e booleani, stringhe) sono manipolati per valore. Anche

I tipi di riferimento (come oggetti e array) sono passati per riferimento.

Esempio con tipi primitivi:

function prova_valore(par1){
par 1 = par1*5;
document.write(“all’interno della funzione il parametro formale vale:” + par1);}

var n=10;
prova_valore(n) à il suo valore sarà 50
document.write(“il parametro restituito contiene nuovamente”+n); à il suo valore sarà di nuovo 10

Esempio con tipi di riferimento:

var array=new Array(3);
funtion prova_valore(array){
array[1]=array[1]*5;
document.write(array[1]);}

var mia_lista=new Array(5,10,15);
prova_valore(mia_lista);àil suo valore sarà 50
document.write(mia_lista[1]);} à il valore sarà ancora 50

Javascript - Array

Oggetti

L’utente si definisce i propri oggetti oppure usa gli oggetti predefiniti che il linguaggio mette a disposizione (built-in objects).

String, Date, Boolean, Array, Math, RegExp, Html Dom.

Array

Una array o vettore è un oggetto “complesso” che permette di memorizzare all’interno di una singola variabile un insieme ordinato di valori.

Per crearlo:
var nuovo_array = new Array(numero)

Un array lungo 4 avrà indici da 0 a 3 (0  a n-1).

Attraverso l’indice è possibile accedere al singolo elemento: [0] [1]

I form , le immagini possono essere considerati come array.

Una volta creato lo si inizializza:
mio_array[n]=”valore”;

Accedere agli elementi:
nome_array[indice];

Dichiarazione compatta:
var mio_array = (“Marco”,”Gianni”);

Per stampare l’elenco completo dell’array come una stringa:
document.write(mio_array);

Proprietà e Metodi

Proprieta:

mio_array.length per impostare o leggere la lunghezza dell’array.

Metodi:

mio_array.sort() per ordinare gli elementi di un array.

mio_array.concat(altroArray) per concatenare due array. E possibile concatenare direttamente degli elementi.

Ciclo for applicato agli array

Per scorrere velocemente una lista ed eseguire operazioni su di essa.

Di solito, la condizione espressa chiede che il ciclo venga concluso fino a che l’array non è finito.

For(var i=0;i<mio_array.length;i++)

Ciclo For..in

Permette di fare un ciclo per un array, determinando automaticamente il numero di ripetizioni in base agli elementi degli array.

var i=0;
for(i in nomeArray);

Javascript - Costrutti (strutture di controllo)

Condizionali

Selezione: consente di scegliere se eseguire o meno alcune istruzioni in base al valore booleano.

If(condizione){
istruzione1;
istruzione2;
}

Selezione binaria: consente di scgliere quali istruzioni eseguire in base al valore booleano.

If(condizione){
istruzione1;
istruzione2;
}
else{
istruzione1;
istruzione2;
}

Contemplano anche gli operatori logici && (and)e || (or).
if(eta>18 && eta<40){ }
if(eta<26 || professione !="studente"){ }

Selezione binaria nidificata: consente di scegliere tra piu di due istruzioni in base al valore booleano.

If(condizione){
blocco istruzioni;
}
else if(condizione){
blocco istruzioni;
}
else{
}

Selezione multipla(SWITCH): alternativa alla selezione nidificata e si usa quando è necessario eseguire operazioni legate a valori precisi. Si possono porre una serie di condizioni da valutare il modo sequanziale.

Switch(n){ quale valore ha in questo momento la variabile. (nome della variabile.)

case value1: se la variabile ha valore 1.
istruzioni;
break;

default: se la variabile non ha nessuno dei valori sopra.
istruzioni;
break;
}

Case può essere:
letterale case "Francia":
una variabile(che contiene un valore) case nazione1:

Costrutti iterativi

Detta anche CICLO è un blocco d’istruzioni che sono ripetutamente eseguite fino a che una certa condizione cambia di stato.

Tre Tipi:

Precondizionata: con clausola sulla condizione iniziale.

Quando un blocco d’istruzioni deve essere eseguito più volte, ma non è possibile sapere a priori quante.

While(condizione){
blocco istruzioni;
}

Le istruzioni sono eseguite se la condizione è true.
Se è falsa, è possibile che le istruzioni non siano mai eseguite.
E possibile creare un ciclo infinito.

REGOLE:

- Inizializzare le variabili il cui valore la condizione di uscita dal ciclo (variabili di controllo) prima del ciclo.
- Il blocco delle istruzioni deve comprendere la modifica delle variabili di controllo dello stesso.
- Inserire sempre la condizione di uscita.

Postcondizionata: con clausola sulla condizione in coda.

Quando un blocco d’istruzioni deve essere eseguito più volte, ma non è possibile sapere a priori quante.

Esegue sempre almeno una volta il ciclo, anche se la condizione è falsa nella prima iterazione.

do{
blocco istruzioni;}
while(condizione)

Enumerativa: con scorrimento di una sequenza iterativa.

Il comando iterativo esegue un blocco di istruzioni per un numero determinato di volte, finché la condizione non diventa falsa.

La condizione viene valutata ogni iterazione, prima di eseguire le istruzioni: se è vera, il blocco di istruzioni viene eseguito e l’indice aggiornato. Quando è falsa il ciclo termina.

for(inizializzazione;condizione;incremento ){
blocco di istruzioni;}

var parziale=0:
for(i=1;i<=10;i++)


Break e continue: sono due istruzioni che offrono maggior controllo sui cicli.

Break interrompe l’esecuzione di un ciclo facendo continuare il programma dalla prima istruzione al di fuori del blocco in cui è inserito.

Continue interrompe il ciclo ma non esce dal blocco in cui è inserito passando al valore seguente.

Javascript - Operatori e Metodi

Operatori= Operatore di assegnamento;

+ concatenazione;

Tag complesso: con caratteri di escape
var img = "nutella.jpg";
document.write("<img src=\"" +img+ "\">");

Operatori aritmetici(unari)
+, -, /, *, %
Operatori d’incremento e decremento:
operatore prefisso: restituisce il valore dopo l’operazione,
++n o --n
es. i = 1;
J= ++i; i e J valgono 2
operatore suffisso: restituisce il valore prima delll’operazione
n++ o n--
es. i = 1;
J= i++; i vale 2, j vale 1

Operatori di confronto

Sono operatori binari.

Confrontano du valori e restituiscono un valore di verità.

Es. 2>1 true 2>3 false
var a=2;
var b=3;
var confronto=false; (inizializza)
confronto = a<b; confronto conterrà true.

Operatori: == , >, <, >=, <=, !=(non uguale).

Operatori logici

Operatori logici

Restituiscono valori di verità.

&& (and): vero solo se entrambi veri.

|| (or): vero se uno dei due è vero.

! (not, negazione): a partire da una preposizione A, si forma una nuova preposizione chiamata negazione di A, la quale è vera quando A è falsa ed è falsa quando A è vera.

Ordine di precedenza degli operatori predefinito:

negazione e incremento,
moltiplicazione, divisione e modulo,
addizzione e sottrazione,
confronto,
uguaglianza,
and,
or,
assegnamento.

Per modificare l’ordine si utilizzano le parentesi.


Metodi di window

Più utilizzati: alert, confirm, prompt

Generano finestre modali, bloccano l’esecuzione dello script finché l’utente non esegue un’azione.

Alert

Avvertono l’utente di un particolare fatto. L’utente può solamente cliccare su ok.

Window.alert("stringa");

Possono essere concatenate:
alert("Buongiorno \n" + visitatore);


Confirm

Finestra che pone una domanda all’utente e chiede una conferma.

Due opzioni: Ok e Annulla.

Window.confirm("stringa");

Prompt Fa apparire una finestra con un campo di testo.
Ha due pulsanti: conferma e annulla.

E un metodo di input.

Window.prompt("testo nella finestra", "testo nel campo");

Esempio:
var visitatore = window.prompt("scrivi il tuo nome, "il tuo nome");
window.alert = (visitatore);

Introduzione a Javascript

Script interni

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

Script esterni

<script language=”Javascript” src=”modulo.js o URL” type=”text/javascript”></script>

Si omette il tag <script>

Estensione .js

Commenti

/* commento su più righe */

// su una riga

Variabili

Var prova = “ciao”;

Numeri

Interi e numeri con virgola sono  lo stesso tipo di dato

Operazioni: +, -, *, /, %

Stringhe

Concatenare due stringhe:
x = “stringa_1” + “Stringa_2”;

Concatenare stringhe e variabili
x = “stringa_1” +variabile +  “Stringa_2”;

Sequenze di escape:
\’ apice à html
\”virgolette à html
\n nuova riga
\\ à \ backlash à html

HTML

Inserito tra una coppia di virgolette
x + “<br/>” + y;

Booleani

Valori: true e false

Altri tipi primitivi

Undefined :
variabili non definite o non inizializzate;
proprietà che non esistono;

null : nessun valore, è vuoto.

Oggetto window

Finestra corrente, contesto di escuzione di javascript.

E l’oggetto globale, racchiude anche il DOM.

Proprietà degli oggetti

Per accedere alla proprietà di un oggetto:
oggetto.proprietà

In scrittura:
window.defaultStatus=”Questo è il mio messaggio di stato”.

In lettura:
x = window.navigator;
document.write(x);

Chiamata dei metodi

Associato a un oggetto si utilizza:
oggetto.metodo()

Es. document.write(“ciao”);

typeof

Funzione che permette di conoscere il tipo di un dato:

typeof(x) può dare come risultato:  string, boolean, number, undefined

Es.
x = “ciao”;
var tipo = typeof(x); à conterrà il valore String.

Document.write

Document.write(“ciao a tutti”);

Document.write(“<h1>ciao</h1>”);

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

x = 7;
document.write(x);
document.write(“<h2>”+ x + </h2>”);