JAVASCRIPTJAVASCRIPT

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 JAVADIFFERENZA 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

TAGTAG

I tag che si utilizzano per inserire codice JS nelle pagine Html sono i seguenti: 

<SCRIPT Language="Javascript">

<!—

Qui va il codice di Javascript

//-->

</SCRIPT>

LO SCRIPTLO SCRIPT

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

LE CLASSILE CLASSI

• ARRAY

• DATE

• STRING

• MATH

ARRAYARRAY

La classe Array permette di accedere alla proprietà length.La classe Array contiene anche i seguenti metodi:

        Sort, ordina gli elementi dell’array;

        Concat, unisce due o più array e restituisce un nuovo array;

        Pop, rimuove l’ultimo elemento dell’array e lo restituisce;

        Join, unisce tutti gli elementi dell’array in una stringa

STRINGSTRING

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 l’oggetto 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

 

 

 

DATEDATE

fornisce informazioni circa la data di oggi

MATHMATH

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 en , 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 baseesponente ,

• Random: restituisce un numero casuale tra zero e uno

• Round: riceve come parametro un numero e restituisce il valore arrotondato all’intero più vicino,

• Sqrt: restituisce la radice quadrata di un numero passato come parametro.

 

FUNZIONEFUNZIONE

 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

I PARAMETRII 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 FORMALIPARAMETRI 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 ATTUALIPARAMETRI ATTUALIUn 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

ESEMPIOESEMPIOConsideriamo 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 }

OGGETTIOGGETTIOggetto è 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 WINDOWOGGETTO WINDOWL'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:

• L’URL della pagina che si vuole aprire

• Il nome associato alla finestra,

• Una lista di caratteristiche

OGGETTI PREDEFINITI WINDOW

OGGETTI PREDEFINITI WINDOWOGGETTI PREDEFINITI WINDOW

OGGETTO METODI E

PROPRIETA’ TIPO DESCRIZIONE

WINDOW OPEN M Apre una nuova finestra del browser

NAVIGATE M Crea un link ad una pagina o ad un file

CLOSE M Chiude la finestra corrente del browser

CONFIRN M Mostra un messaggio di conferma

SCREEN M Restituisce informazioni sullo schermo, come larghezza ed altezza della risoluzione video

(width e height).

OGGETTO DOCUMENTOGGETTO 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...)). 

VARIABILEVARIABILE

Una variabile è un’area di memoria che ha un nome, un tipo e una dimensione, l’insieme dei dati che variano durante l’esecuzione 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 ARITMETICIOPERATORI ARITMETICITipo di Operatore Operatore Descrizione Esempi

Aritmetico + Addizione a + b  - Sottrazione a – b

  * Moltiplicazione a * b  / Divisione a / bConfronto > Maggiore di a > b  < Minore di a < b  >= Maggiore o uguale a > = b  <= Minore o uguale a < = b  != Diverso a ! = b  = = Uguale a = = bLogico ! NOT ! a  && AND a && b

  OR a bAssegnazione = Assegnazione a = b  ++ Incremento e assegnazione a++  -- Decremento e assegnazione a - -  += Addizione e assegnazione a += b  - = Sottrazione e assegnazione a - = b  *= Moltiplicazione e assegnazione a* = b

  /= Divisione e assegnazione a / = b

STRUTTURE DI CONTROLLOSTRUTTURE DI CONTROLLO

STRUTTURE CICLICHE

STRUTTURE ALTERNATIVE

STRUTTURE CICLICHESTRUTTURE 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 ALTERNATIVESTRUTTURE 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 PRIMITIVIDATI PRIMITIVI

• numeri• stringhe di testo• valori di verità (booleani)

DATI COMPOSTIDATI COMPOSTI

• funzioni• oggetti• Array ("collezione" di tipi primitivi)

onCLICKonCLICK

Il gestore di eventi onClick gestisce l’evento causato dall’utente quando fa click con il pulsante del mouse sopra un elemento.Nel seguente esempio viene aggiunto un gestore di eventi ad un bottone:

<INPUT TYPE=”button” VALUE=”copyright”onClick=”…”>

L’attributo onClick esplicita ,tra doppi apici,le istruzioni Javascript da eseguire in seguito al verificarsi dell’evento

ALERTALERT

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

onMOUSEOVER e onMOUSEOVER e onMOUSEOUTonMOUSEOUT

I gestori di eventi onMouseOver e onMouseOut possono essere usati con il tag <A> del linguaggio HTML , che gestisce i link , per controllare gli spostamenti del

puntatore del mouse sopra un collegamento.Il primo evento si verifica quando l’utente sposta il puntatore del mouse sopra il collegamento ipertestuale, mentre il secondo evento accade quando l’utente allontana il puntatore dal collegamento.

onLOADonLOAD

Il gestore di eventi onload viene aggiunto al tag <BODY> della pagina HTML e viene

attivato quando il browser ha completato il caricamento della pagina

EVENTIEVENTI

        Eventi generati dall’utente(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 EVENTIGESTORE 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 l’evento controllato dal gestore:

La seguente tabella mostra principali gestori di eventi:

 EVENTO DESCRIZIONEOnBlur L’elemento di un modulo (casella di testo ,area di testo, elenco), una finestra o un frame

perdono il f ocus, cioè la loro evidenziazione

OnChange L’elemento di un modulo perde il focus e il suo valore è stato modificato

onClick L’utente fa click su un elemento

OnFocus Una finestra, in frame o l’elemento di un modulo acquisiscono il focus

onLoad Il browser termina il caricamento della pagina

OnMouseOut Il puntatore del mouse si allontana da un elemento su cui era posizionato

OnMouseOver Il puntatore del mouse si sposta sopra un elemento.

OnReset L’utente preme il bottone reseat di u modulo

onSubmit L’utente preme il bottone submid di un modulo

ELEMENTI DEL LINGUAGGIOELEMENTI 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 < Script > e < /script >

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