RIEPILOGO

Che cosa è una variabile e come si dichiara ?

Definire e /o i nizializzar e una v ariab ile

Che cosa è una funzione e come la definisco?

Dich iarare e d efinire una f unzione

Dich iarare e d efinire una f unzione

Che regole deve rispettare il nome di una funzione o di una variabile?

  • Iniziare il nome con una lettera (A-Z o a-z) l'underscore (_) o il segno del dollaro ($).
  • Continuare con un numero qualsiasi di lettere, numeri, "_" 0 "$".
  • Javascript è case sensitive.

Come agisce javascript sulla tua pagina?

A cosa serve il ";"?

  • Il punto e virgole è il segno che separa le istruzioni fra loro.

  • Le istruzioni NON sono separate dalla fine riga.

A cosa serve il "."?

  • Il punto è l'operatore di appartenenza indica che la proprietà o il metodo che si trova alla sua destra appartiene all'oggetto che si trova alla sua sinistra.

  • Gli operatori punto possono essere usati in catena.

A cosa servono le parentesi graffe ?

  • Una coppia di { } definisce un blocco di istruzioni che vengo eseguite insieme, prima di proseguire con l'esecuzione del programma.

PROGRAMMAZIONE ITERATIVA

GLI OPERATORI LOGICI e TABELLE DI VERITÀ

wh ile

Il ciclo while

  • Il ciclo while ripete un blocco di codice fino a quando una condizione specificata è vera.
Sintassi
  • while (condizione) {
    // blocco di codice da eseguire
}
Esempio
  • Questo ciclo continua fino a che < i > è minore di 10
     
  • function myFunction() { var i = 0;

  while (i < 10) {

    var text = "<br>The number is " + i; document.getElementById("demo").innerHTML += text; i++;

  }

  document.getElementById("demo").innerHTML += "<br>Il ciclo è finito!";

}

!!! ATTENZIONE !!!

Se si dimentica di aumentare la variabile usata nella condizione, il ciclo diventerà infinito . Questo manderà in crash il browser.

for

Esempio
  • Questo ciclo for continua fino a che < i > è minore di 10
     
  • function myFunction() {

  for (var i = 0; i < 10; i++;) {

    var text = "<br>The number is " + i; document.getElementById("demo").innerHTML += text;

  }

  document.getElementById("demo").innerHTML += "<br>Il ciclo è finito!";

}

 

IL MODELLO DI PROGRAMMAZIONE AD OGGETTI

VARIABILI

Prima di usare una variabile la dichiaro usando l’istruzione var.

Per assegnare alla variabile un valore utilizzo l’operatore di assegnazione (“=“).

DEFINIRE U NA V ARIABILE
var pippo;
ASSEGNARE UN VALORE
pippo = ″Ciao gente!″;

pippo = new Date();

COSA È UNA FUNZIONE

Una funzione (o metodo) è una costrutto presente in tutti i linguaggi di programmazione che consente di associare un gruppo di comandi ad un identificatore.

Quando nel programma scriverò l’identificatore saranno eseguiti tutti i comandi che compongona la funzione

DEFINIZIONE

Una funzione deve essere dichiarata e definita:

  • cioè vanno specificati il nome e il numero di parametri che verranno utilizzati nel corpo della funzione

  • e successivamente dovremo scrivere il corpo della funzione vera e propria.

  • all’interno del corpo della funzione potrò definire un valore di ritorno.

  • e successivamente dovremo scrivere il corpo della funzione vera e propria.

  • all’interno del corpo della funzione potrò definire un valore di ritorno.

SCRITTURA DI FUNZIONI CON NOME
function numefunzione (parametro1, parametro2, ….) {

  // Blocco di istruzioni

}
  • nomefunzione è il nome univoco della funzione. Tutti i nomi di funzione in un documento devono essere univoci.
  • parametro1, parametro2, … uno o più parametri che vengono passati alla funzione. I parametri sono detti anche argomenti.
  • Blocco di istruzioni contiene tutto il codice JavascriptScript relativo alla funzione. Questa parte contiene le istruzioni che eseguono le azioni, ovvero il codice che si desidera eseguire.
SCRITTURA DI FUNZIONI ANONIME
var nomevariabile = function (parametro1, parametro2, ….) {

// Blocco di istruzioni

}
  • nomevaribile è il nome di una variabile.
  • parametro1, parametro2, … uno o più parametri che vengono passati alla funzione. I parametri sono detti anche argomenti.
  • Blocco di istruzioni contiene tutto il codice ActionScript relativo alla funzione. Questa parte contiene le istruzioni che eseguono le azioni, ovvero il codice che si desidera eseguire.
PARAMETRI E VALORI D I RITORNO

I parametri (un elenco di valori separati tra virgole contenuti tra le parentesi tonde che caratterizzano la funzione) servono per passare alla funzione i valori su cui compiere l’elaborazione .

Una funzione può restituire un valore che di norma è il risultato dell’elaborazione compiuta. Per compiere questa operazione si utilizza l’istruzione return che specifica il valore che verrà restituito dalla funzione.

L'istruzione return ha anche l’effetto di interrompere immediatamente il codice in esecuzione nel corpo della funzione e restituire immediatamente il controllo del flusso di programma al codice chiamante

SCOPO DELLE V ARIABILI

Lo scopo delle variabili definisce l’ambito della loro visibilità.

Con l’introduzione delle funzione ho di fatto definito due livelli di script:

  • Uno script di primo livello che viene eseguito immediatamente quando il browser lo incontra.

  • Uno script di secondo livello che sta dentro il corpo delle funzioni e che viene eseguito solo quando le funzioni sono richiamate.

Quando definisco una variabile nello script di primo livello il suo valore sarà disponibile in tutto il codice della pagina web.

Quando definisco una variabile nello script di secondo livello, cioè all’interno del corpo di una funzione, il suo valore sarà disponibile solo all’interno della funzione. Così in funzioni diverse potrò avere senza problema variabili con lo stesso nome senza che i valori contenuti interferiscano l’uno con l’altro.

ESEMPIO
function cheData() {

  var adesso, dataOraStringa, mesi;

  mesi = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio",

          "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

  adesso = new Date();

  dataOraStringa = adesso.getDate() + " " + mesi[adesso.getMonth()] + " " + adesso.getFullYear() + " " + adesso.getHours() + ":" +

  adesso.getMinutes(); return dataOraStringa;

}

TIPI DI DATI

Tipi di dati, oggetti e classi
 

OGGETTO e CLASSE

L’oggetto è una grandezza informatica in grado di rappresentare i dati.

Nella programmazione OOP tutte i dati si rappresentano e si elaborano tramite oggetti.

Quando scrivo:

pippo = new Date();

o:

pippo = ″Ciao gente!″;

non assegno semplicemente un valore a una variabile. Creo un dato complesso detto oggetto che oltre al valore contiene tutti gli strumenti necessari ad elaborarlo.

Nella programmazione OOP i tipi di oggetto (il tipo è, in generale, determinato dal tipo di dati che l’oggetto è destinato ad elaborare) si chiamano classi.

La classe, cioè, è l’insieme di regole che determinano come funziona un oggetto di una determinato tipo (o, i termini OOP, un istanza di una determinata classe).

In Javascript non si fa menzione espressa del temine class (che per altro è una parola riservata che non può essere usata dall’utente). Per noi quindi oggetto (inteso come tipo di oggetto) e classe saranno sinonimi.

Esistono oggetti (classi) predefinite dal linguaggio, oggetti (classi) create dalla comunità dei programmatori e che posso caricare e utilizzare nelle mie pagine Web e, infine, noi stessi possiamo creare le nostre classi per risolvere i nostri problemi.
 

OGGETTI (CLASSI) PREDEFINITI

Tipi di base (o tipi semplici):

  • Number: numeri interi e numeri con parte decimale

  • String: Stringhe di caratteri (testo)

  • Boolean: Vero e falso

Tipi complessi:

  • Array: Lista indicizzata di valori.

  • Date: Date.

  • RegExp: Regular Expression.

E infine l’oggetto Object che rappresenta un OGGETTO generico. Con Object posso rappresentare una struttura dati qualsiasi e costruire dei tipi di dati utente, le mie classi.
 

OGGETTI (CLASSI) STATICI

Oggetti (classi) predefiniti, già creati da javascript da cui non si possono creare istanze, ma che hanno solo metodi e proprietà statiche.

  • Math: libreria di funzioni matematica

  • JSON: Trasformazione di oggetti nella loro rappresentazione stringa e viceversa

  • localStorage: Metodi per gestire la memorizzazione di informazioni sul dispositivo dell’utente.
     

PROPRIETÀ E METODI

Ogni tipo di dato (classe) è caratterizzato da:

  • Proprietà che ci consentono di leggere o modificare determinate caratteristiche di un individuo della classe
  • Metodi che ci mettono a disposizione determinate azioni che gli oggetti possono compiere o subire
     
PROPRIETÀ

Le proprietà si usano come le variabili, solo che non sono globali ma riferite ad un elemento specifico: l’oggetto (l’istanza della classe)

Una volta che una variabile contiene un oggetto

pippo = ″Ciao gente!″;

Posso accedere alle sue proprietà:

  • Usando l’operatore di appartenenza ˝•˝
  • var len = pippo.length;
  • Usando le parentesi quadre che racchiudano il nome della proprietà come stringa di caratteri.
  • var len = pippo[″length″];

In entrambi i casi len conterrà il numero di caratteri di cui è composta la variabile stringa pippo (5).

Alcune proprietà sono a sola lettura

pippo.length = 3; /// !!!!! errore

è un errore perché la proprietà length è a sola lettura. Mentre invece:

elemento.innerHTML = ″Ciao gente!″;

modifica il contenuto HTML dell’elemento della pagina elemento (che un elemento HTML definito nella pagina).
 

METODI

I metodi si usano come le funzioni, solo che non sono globali ma riferite ad un elemento specifico: l’oggetto (l’istanza della classe)

Una volta che una variabile contiene un oggetto

pippo = new Date();

Posso accedere ai suoi metodi.

Come le funzioni i metodi possono ricevere parametri e ritornare valori.

Per accedere ad un metodo uso l’operatore di appartenenza ˝•˝ e faccio seguire l’identificatore dalle parentesi tonde

var giorno = pippo.getDate();

giorno contiene il giorno del mese della data corrente.

Alcuni metodi accettano parametri:

pippo.setDate(3);

Modificherò la data contenuta nella variabile pippo: il giorno del mese sarà 3.
 

PROPRIETÀ E METODI STATICI

Esistono metodi e proprietà particolari che non si applicano ai singoli oggetti (istanze de una classe) ma hanno un uso globale.

Per usarli non li applico all’oggetto ma alla classe

var data = Date.parse("March 21, 2012");

La variabile data contiene l’oggetto Date ottenuto convertendo in data la stringa passata come parametro al metodo statico Date.parse
 

L’OGGETTO document

Quando il browser carica la pagina web crea automaticamente l’oggetto document.

L’oggetto document è costituito dall’insieme di tutti gli elementi HTML definiti nella pagina.

La maggior parte dell’attività di programmazione in javascript consiste nell’interagire con l’oggetto document: aggiungere elementi, estrarre elementi e modificarli, rispondere con azioni agli eventi provocati dall’utente e subiti dagli elementi interattivi.

Come per gli altri oggetti l’accesso alle proprietà e ai metodi avviene attraverso l’operatore di appartenenza (.)

Se, per esempio, voglio recuperate l’elemento con l’attributo id = mio_id:

var elemento = document.getElementById(‘mio_id’);


COSTRUCTOR

È la particolare funzione che consente di creare un oggetto di un particolare tipo (un’istanza di una classe):

  • Implicito:

    var str = "Ciao!";

  • Esplicito:

    var adesso = new Date();
  • Altra funzione o metodo:
​var elemento = document.createElement("p");