JAVASCRIPT DIFFERENZA TRA JAVASCRIPT E JAVA TAG LO SCRIPT OGGETTI LE CLASSI FUNZIONE GESTORE DI EVENTI ELEMENTI DEL LINGUAGGI è un vero e proprio linguaggio di programmazione orientato a oggetti

DIFFERENZA TRA JAVASCRIPT E JAVA Java non è la stessa cosa di JavaScript! Essi introducono due diverse tecniche per la programmazione su Internet. Java è un linguaggio di programmazione, mentre Javascript, come dice lo stesso nome, è un linguaggio per realizzare script (scripting language). La differenza consiste nel fatto che con Java si possono realizzare veri e propri programmi, mentre spesso si vuole creare un bell'effetto evitando di avere a che fare con la programmazione pura. Quindi l'obiettivo principale di Javascript è quello di essere facile da comprendere e da usare, senza preoccuparsi troppo della programmazione. Si potrebbe dire che Javascript sia piuttosto un'estensione di HTML che un linguaggio di programmazione indipendente. Naturalmente questa non è la definizione 'ufficiale', ma penso che possa rendere più facile la comprensione della differenza tra Java e Javascript

TAG I tag che si utilizzano per inserire codice JS nelle pagine Html sono i seguenti: <! Qui va il codice di Javascript //-->

LO SCRIPT Lo script è tutto ciò che è inserito nei tag e può essere inserito sia in testa al documento che nel BODY;

LE CLASSI ARRAY DATE STRING MATH

ARRAY La classe Array permette di accedere alla proprietà length.La classe Array contiene anche i seguenti metodi: Sort, ordina gli elementi dellarray; Concat, unisce due o più array e restituisce un nuovo array; Pop, rimuove lultimo elemento dellarray e lo restituisce; Join, unisce tutti gli elementi dellarray in una stringa

STRING La classe String gestisce le sequenze di caratteri; il numero di caratteri che compongono una stringa è indicato dalla proprietà Length.Tra le funzioni associate alla classe string ci sono: CharAt: ha come parametro un numero intero e restituisce il carattere che si trova nella posizione specificata dal parametro; Concat:ha come parametro una o più stringhe e restituisce una nuova stringa corrispondente alla concatenazione tra loggetto su cui è stata applicata la funzione e i parametri; Search: ha come parametro la stinga da cercare e restituisce la prima posizione in cui ha trovato la corrispondenza, altrimenti restituisce il valore –1; Substring: ha come parametri due numeri interi e restituisce la sottostringa compresa tra le posizioni specificata dai parametri; ToLowerCase: converte tutti i caratteri in minuscolo ToUpperCase: converte tutti i caratteri in maiuscolo

DATE fornisce informazioni circa la data di oggi

MATH La classe Math gestisce le costanti e le funzioni matematiche. Tra le costanti ci sono: PI: valore di pigreco, E : valore della costante di Eulero, base dei logaritmi naturali. Tra le funzioni ci sono: Abs: restituisce il valore assoluto del numero passato come parametro, Exp: restituisce il valore di e n, dove n è il numero passato come parametro, Log: restituisce il logaritmo naturale di un numero passato come parametro, Pow: riceve come parametri due numeri, base ed esponente, e restituisce il valore base esponente, Random: restituisce un numero casuale tra zero e uno Round: riceve come parametro un numero e restituisce il valore arrotondato allintero più vicino, Sqrt: restituisce la radice quadrata di un numero passato come parametro.

FUNZIONE Una funzione è una parte di codice che viene definita una sola volta all'interno di un programma e può essere richiamata ed eseguita più volte. La sintassi per la definizione è la seguente: function elabora(parametro) { righe di codice return valore; } Per richiamare la funzione (che in questo caso restituisce un valore): var y=elabora(passoparametro); in questo modo la variabile y avrà il valore restituito dalla funzione I PARAMETRI

Ci sono due tipologie di parametri: quelli usati nella definizione di una subroutine, e quelli passati alla subroutine quando viene richiamata. I parametri nella definizione sono chiamati parametri formali, quelli passati alla subroutine quando viene chiamata sono chiamati parametri attuali. PARAMETRI FORMALI PARAMETRI ATTUALI

PARAMETRI FORMALI Un parametro formale deve essere un identifcatore, ossia un nome; assomiglia molto ad una variabile, e, come una variabile, ha un tipo associato come int, boolean, o String.

PARAMETRI ATTUALI Un parametro attuale è invece un valore, e quindi può essere indicato da una qualsiasi espressione, purchè l'espressione abbia un valore del tipo corretto. Quando viene chiamata una subroutine, occorre fornire un parametro attuale per ogni parametro formale nella definizione della subroutine. Il computer valuta ogni parametro attuale ed inizializza il corrispondente parametro attuale con tale valore. ESEMPIO

ESEMPIO Consideriamo ad esempio la subroutine static void doTask(int N, double x, boolean test) { // le istruzioni per svolgere tale compito vanno qui } Questa subroutine potrebbe essere richiamata dall'istruzione doTask(17, Math.sqrt(z+1), z >= 10); Quando il computer esegue questa istruzione, essenzialmente ottiene lo stesso effetto del blocco di istruzioni: { int N = 17; // dichiaro un int di nome N con valore iniziale 17 double x = Math.sqrt(z+1); // calcolo Math.sqrt(z+1) e uso il // risultato per inizializzare la nuova variabile x di tipo double boolean test = (z >= 10); // valuto "z >= 10" // e uso il risultato true/false value per inizializzare // una nuova variable di nome test // le istruzioni per svolgere tale compito vanno qui }

OGGETTI Oggetto è formato da un insieme di variabili e di funzioni. si possono creare nuovi oggetti utilizzando le classi predefinite del linguaggio JavaScript oppure definendo nuove classi. Gli oggetti sono raccolte di blocchi di dati identificabili tramite dei nomi; questi valori sono chiamati "proprietà dell'oggetto". Dichiarazione di un oggetto e delle sue proprietà: 1) var cane = new Object(); dichiaro "cane" come oggetto generico (senza proprietà) cane.razza='barboncino'; associo le proprietà cane.colore='nero'; cane.peso=10; 2) var cane = {razza:'barboncino', colore:'nero', peso:10}; Le proprietà possono contenere qualsiasi tipo di dati anche composti. Quindi, un oggetto può contenere a sua volta un altro oggetto. Nel caso di una funzione avremo: cane.abbaia=abbaia(); function abbaia() { alert('BAU!'); } OGGETTO WINDOW OGGETTO DOCUMENT

OGGETTO WINDOW L'oggetto window è il primo nella gerarchia e viene associato ad ogni finestra aperta del browser (indica le caratteristiche della finestra quali il nome e la posizione) IL metodo di window.open consente di aprire una finestra del browser, specificando tre parametri: LURL della pagina che si vuole aprire Il nome associato alla finestra, Una lista di caratteristiche OGGETTI PREDEFINITI WINDOW

OGGETTOMETODI E PROPRIETA TIPO DESCRIZIONE WINDOWOPENMApre una nuova finestra del browser NAVIGATEMCrea un link ad una pagina o ad un file CLOSEMChiude la finestra corrente del browser CONFIRNMMostra un messaggio di conferma SCREENMRestituisce informazioni sullo schermo, come larghezza ed altezza della risoluzione video (width e height).

OGGETTO DOCUMENT L'oggetto document rappresenta il contenuto di un frame o di una finestra. (Dispone di proprietà che permettono di avere informazioni sul documento visualizzato dal browser. Questo oggetto dispone anche di metodi che permettono ai programmi di javascript di poter modificare dinamicamente gli oggetti contenuti nel documento (array, form, immagini, ecc...)).

VARIABILE Una variabile è unarea di memoria che ha un nome, un tipo e una dimensione, linsieme dei dati che variano durante lesecuzione di un progetto. In JavaScript quando si dichiara una variabile non è necessario specificare il tipo; la dichiarazione della variabile viene fatta specificando il nome assegnandole un valore. Una variabile può essere dichiarata come stringa, vista come un particolare oggetto che ha delle proprietà: per esempio lenght che contiene il numero dei caratteri che compongono la stringa. OPERATORI ARITMETICI

OPERATORI ARITMETICI Tipo di OperatoreOperatoreDescrizioneEsempi Aritmetico+Addizionea + b -Sottrazionea – b *Moltiplicazionea * b /Divisionea / b Confronto>Maggiore dia > b <Minore dia < b >=Maggiore o ugualea > = b <=Minore o ugualea < = b !=Diversoa ! = b = Ugualea = = b Logico!NOT! a && AND a && b OR a b Assegnazione= a = b ++Incremento e assegnazionea++ --Decremento e assegnazionea - - +=Addizione e assegnazionea += b - =Sottrazione e assegnazionea - = b *=Moltiplicazione e assegnazionea* = b /=Divisione e assegnazionea / = b

STRUTTURE DI CONTROLLO STRUTTURE CICLICHE STRUTTURE ALTERNATIVE

STRUTTURE CICLICHE switch per la selezione multipla switch ( espressione ) case valore1 : // istruzioni break ; case valore2 : // istruzioni break ; … default : // istruzioni if per la selezione binaria if ( condizione ) // istruzioni else // istruzioni

STRUTTURE ALTERNATIVE for per la ripetizione enumerativa for ( i=valore_iniziale; i<valore_finale; incremento ) // istruzioni while per la ripetizione con controllo della condizione while ( condizione ) // istruzioni

DATI PRIMITIVI numeri stringhe di testo valori di verità (booleani)

DATI COMPOSTI funzioni oggetti Array ("collezione" di tipi primitivi)

onCLICK Il gestore di eventi onClick gestisce levento causato dallutente quando fa click con il pulsante del mouse sopra un elemento.Nel seguente esempio viene aggiunto un gestore di eventi ad un bottone: Lattributo onClick esplicita,tra doppi apici,le istruzioni Javascript da eseguire in seguito al verificarsi dellevento

ALERT La funzione alert apre una finestra di dialogo contenente il testo specificato come parametro.

onMOUSEOVER e onMOUSEOUT I gestori di eventi onMouseOver e onMouseOut possono essere usati con il tag del linguaggio HTML, che gestisce i link, per controllare gli spostamenti del puntatore del mouse sopra un collegamento.Il primo evento si verifica quando lutente sposta il puntatore del mouse sopra il collegamento ipertestuale, mentre il secondo evento accade quando lutente allontana il puntatore dal collegamento.

onLOAD Il gestore di eventi onload viene aggiunto al tag della pagina HTML e viene attivato quando il browser ha completato il caricamento della pagina

EVENTI Eventi generati dallutente(il movimento del mouse,il click del mouse,il tasto da tastiera) Eventi generati dal browser web(il termine del caricamento di una pagina web,la segnalazione di un errore di caricamento) GESTORE DI EVENTI onCLICK ALERT onMOUSEOVER e onMOUSEOUT onLOAD

GESTORE DI EVENTI Un gestore di eventi è individuato da un attributo inserito in un tag HTML, che specifica quale azione JavaScript deve essere eseguita quando si verifica levento controllato dal gestore: La seguente tabella mostra principali gestori di eventi: EVENTODESCRIZIONE OnBlur Lelemento di un modulo (casella di testo,area di testo, elenco), una finestra o un frame perdono il f ocus, cioè la loro evidenziazione OnChangeLelemento di un modulo perde il focus e il suo valore è stato modificato onClickLutente fa click su un elemento OnFocusUna finestra, in frame o lelemento di un modulo acquisiscono il focus onLoadIl browser termina il caricamento della pagina OnMouseOutIl puntatore del mouse si allontana da un elemento su cui era posizionato OnMouseOverIl puntatore del mouse si sposta sopra un elemento. OnResetLutente preme il bottone reseat di u modulo onSubmitLutente preme il bottone submid di un modulo

ELEMENTI DEL LINGUAGGIO JavaScript ha una sintassi simile a quella del linguaggio di programmazione Java. Uno Script in JavaScript può essere specificato in due modi: inserendo le istruzioni tra i tag e inserendo le istruzioni in un gestore di eventi. I tipi di dati riconosciuti da JavaScript sono: i numeri, sia interi che in virgola mobile le stringhe di caratteri i valori booleani, true e false gli oggetti due valori speciali, null e undefined Realizzato da: Gancitano Cinzia Maggio Vita Livorsi Cristina Di Maria Maria Gancitano Antonino Crocchiolo nadia