Lezione 10 (IFTS 2019)

JAVASCRIPT

JavaScript è un linguaggio di programmazione.

COME FUNZIONA UN COMPUTER

  • Un computer per poter risolvere un qualsiasi problema ha bisogno di qualcosa che gli indichi esattamente cosa fare passo dopo passo
  • Un computer si limita ad eseguire delle istruzioni "macchina" per l'esecuzione delle quali è stato progettato
  • Un 'istruzione "macchina" e' un 'istruzione "primitiva" comprensibile e direttamente eseguibile dal calcolatore senza bisogno di essere interpretata
  • Qualsiasi compito per poter essere eseguito da un calcolatore deve essere tradotto in un insieme di istruzioni macchina
  • Un software non e' altro che un insieme di istruzioni eseguibili dal calcolatore che nel loro insieme risolvono un problema o eseguono un determinato compito
  • E' compito del programmatore "tradurre" un problema utilizzando solamente il set di istruzioni "primitive" comprensibili al calcolatore
  • Qualsiasi compito per poter essere eseguito da un calcolatore deve essere tradotto in un insieme di istruzioni macchina
  • Un software non e' altro che un insieme di istruzioni eseguibili dal calcolatore che nel loro insieme risolvono un problema o eseguono un determinato compito
  • E' compito del programmatore "tradurre" un problema utilizzando solamente il set di istruzioni "primitive" comprensibili al calcolatore

Un programma quindi è...

  • Una serie di istruzioni che il computer è in grado di eseguire
  • Che elaborano DATI (cioè informazione correttamente codificate)
  • Per risolvere un problema

Un linguaggio di programmazione è...

  • Un linguaggio formale dotato di una sintassi ben definita che viene utilizzato per scrivere programmi che realizzano algoritmi.
  • Serve a facilitare la programmazione dei calcolatori rendendo possibile descrivere gli algoritmi e le strutture dei dati in una forma più vicina a quella del linguaggio umano scritto.
  • A seconda del metodo utilizzato per tradurre il testo delle istruzioni in linguaggio macchina vengono suddivisi in due categorie:
    • compilati (e semicompilati)
    • interpretati.

LINGUAGGI COMPILATI 

  • Il sorgente (un file di testo con le operazioni da eseguire) viene compilato in codice macchina e viene impacchettato in un particolare file detto eseguibile che il computer è in grado di eseguire direttamente senza bisogno di altro software;
  • È specifico di un determinato sistema operativo e la compatibilità tra sistemi diversi può essere garantita solo dal fatto che esistano compilatori specifici per ogni sistema.

LINGUAGGI SEMICOMPILATI

  • Per semplificare la gestione della compatibilità non si compila il sorgente per uno specifico ambiente ma per una macchina virtuale.
  • Per essere eseguiti i programmi presuppongono che la macchiana virtuale sia installata.

LINGUAGGI INTERPRETATI

  • Lo script viene eseguito immediatamente: uno script javascript viene interpretato dal browser e da un output sul monitor, sulla stampante, un output audio, ecc. 

  • compilazione:
    • lo script viene elaborato dal compilatore prima di essere eseguito e la maggior parte degli errori di sintassi vengono individuati
  • interpretazione:
    • Lo script viene eseguito così com'è, il controllo della correttezza del codice è affidato direttamente all'esecuzione dello stesso. – Alcuni editor ci aiutano controllando la coerenza del codice

IL LINGUAGGIO JAVASCRIPY

  • Script in inglese significa "copione" o "sceneggiatura",.
  • Il browser legge una riga, la interpreta e la esegue, poi passa alla successiva e fa la stessa cosa, e così di seguito fino alla fine dello script.
  • Javascript è un linguaggio interpretato
  • L’interprete utilizzato per eseguirlo è il browser
  • è un linguaggio debolmente (o dinamicamente) tipizzato
  • Di norma risponda ad eventi:
    • Si scrive codice Javascript da eseguire quando una pagina web ha terminato il caricamento,
    • Per rispondere a un azione dell'utente
  • è in grado di leggere e scrivere gli elementi HTML.
    • Tramite JavaScript è possibile modificare la struttura del documento HTML in tempo reale, senza interagire con il server
  • può essere utilizzato per convalidare i dati inseriti dall'utente prima di inviarli al server.
  • può essere utilizzato per avere informazioni sul Browser del visitatore.
    • In questo modo possiamo decidere come comportarci a seconda del Browser che sta leggendo la pagina
  • può essere utilizzato per creare i cookie e quindi archiviare e recuperare informazioni sul computer del visitatore

COME COLLEGARE CODICE JAVASCRIPT ALLA PAGINA

  • è necessario comunicare al Browser sia la presenza di uno script sia il linguaggio in cui lo script è scritto. il meccanismo è simile a quello che abbiamo visto per i forgli di stile.
Codice incorporato
  • Per aggiungere codice javascript alla pagina è sufficiente inserire un tag <script>. Il codice JavaScript va inserito tra l'apertura e la chiusura del tag. Così:
<script>
   alert("ciao"); 
</script>
  • Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze.
File esterno
  • Si utilizza quando si scrive codice di una certa lunghezza e/o che potrebbe essere ripetuto su più pagine
  • o quando si utilizza un libreria Javascript esistente
<script src="js/main.js"></script>
Gestione diretta di un evento
  • Come abbiamo detto Javascript è fatto principalmente per rispondere a degli eventi, come quello di un utente che clicca un elemento della pagina
  • Si può associare direttamente del codice javascript all'evento di un elemento usando appositi attributi come onclick, onload, ecc:
<button onclick="alert('Ciao!')">Cliccami !</button>
<noscript></noscript>
  • All'interno del tag noscript può essere utilizzata la sintassi HTML per visualizzare messaggi se javascript non è abilitato. 
<noscript>
 <div>
   <h3>Per visualzzare correttamente il contenuto della pagina occorre 
       avere JavaScript abilitato.</h3> 
 </div> 
</noscript>

SINTASSI

JAVASCRIPT È CASE SENSITIVE

  • Tutti gli identificatori JavaScript sono case sensitive.
  • Questo significa che per Javascript le variabili Nome e nome sono due varibili diverse.
  • E che VAR o Var non sono interpretati come la parola riservata JavaScript var.

PROGRAMMI JAVASCRPT

  • Un programma per computer è un elenco di "istruzioni" che può essere "eseguito" da parte del computer.
  • In un linguaggio di programmazione, le istruzioni del programma sono chiamati statements.
  • Le istruzioni JavaScript (statements) sono separate da un punto e virgola .
var x = 5; 
var y = 6; 
var z = x + y;
  • Un blocco di istruzioni racchiuso tra parentesi graffe e viene considerato nella sintassi come un’unica istruzione.
  if (document.getElementById('nome').value == '' ||  
        document.getElementById('cognome').value == ''){
      alert ("Dati incompleti!");
      return false;
 }
  • Le istruzioni JavaScript (righe di comando, stataments) sono composte da:
    • Valori, operatori, espressioni, parole chiave e commenti.
  • La sintassi JavaScript definisce due tipi di valori: i valori fissi e valori variabili.
    • Valori fissi sono chiamati letterali o costanti .
    • I valori delle variabili sono chiamate variabili
  • Le costanti (o letterali) sono quantità note a priori il cui valore non dipende dai dati inseriti dall’utente e non cambia durante l’ esecuzione del programma.
  • Ogni tipo di dato ha il suo particolare modo di essere rappresentato in una costante.
  • Perché il browser interpreti correttamente il valore bisogna seguire esattamente le regole.
  • Le costanti servono:
    • A dare un valore iniziale ad una variabile
    • A confrontare una variabile con un valore di riferimento

Costanti numeriche

  • Le costanti numeriche iniziano con un carattere numerico, con + o con -.
  • Se un qualsiasi termine in uno script inizia con questi caratteri l’interprete lo considererà una costante numerica. Se non riuscirà a interpretarlo come tale segnalerà un errore.
  • Il segno che separa la parte intera di un numero dalla parte decimale è il punto.
  • Lo zero iniziale di un numero inferiore a 1 può essere tralasciato.
  • È possibile inserire numeri in formato decimale, binario, ottale o esadecimale. Per segnalare al compilatore che un numero non è decimale si fa precedere il numero da un prefisso.
  • Per i numeri esadecimali questo prefisso è 0x.
  • Gli altri termini (parole chiave e nomi) NON possono iniziare con un numero.
  • Esempi di costanti numeriche
1 
2433 
1000000000 
3.14 
.33333333333 
0.5 
2345.675 
0xFF0088 
0x5500ff 
0xff.00aa

Costanti stringa

  • Una stringa è una sequenza di caratteri che permette di rappresentare testi.
  • Un costante stringa è una sequenza (anche vuota) di caratteri racchiusi tra apici singoli o apici doppi.
  • Per inserire ritorni a capo, tabulazioni, particolari caratteri o informazioni di formattazione si utilizzano speciali sequenze di caratteri dette sequenze di escape. Una sequenza di escape è formata da un carattere preceduto dal simbolo \ (backslash). La sequenza di escape inserisce un carattere che non sarebbe altrimenti rappresentabile in un letterale stringa.
  • Principali sequenze di escape
    • \n nuova riga;
    • \r ritorno a capo;
    • \t tabulazione orizzontale;
    • \‘ apostrofo (o apice singolo);
    • \" doppio apice;
    • \\ backslash(essendo un carattere speciale deve essere inserito con una sequenza di escape).
Esempi di costanti stri nga
  // Stringa racchiusa da apici singoli
  'Ciao a tutti'
  // Stringa racchiusa tra apici doppi
  "Ciao"
  /* La sequenza di escape risolve l’ambiguità tra l’apostrofo inserito nella stringa e gli apici singoli che la racchiudono */
  'Questo è l\'esempio corretto'
  /* In questo caso non c’è ambiguità perché la stringa è
  racchiusa tra doppi apici */
  "Anche questo è l'esempio corretto"
  /* Per inserire un ritorno a capo si usano le sequenze
  di escape */
  "Questa è una stringa valida\rdi due righe"

Costanti booleane

  • Le costanti booleane, poiché rappresentano valori logici, possono avere solo due valori:
    • vero (rappresentato da true) e
    • falso (rappresentato da false).

Costanti di tipo Array

  • Il vaore Array rappresenta un lista ordinata di elementi
  • Il letterale Array è costituito da una serie di elementi separati da virgole compresa tra due parentesi quadre:
// array che contiene i mesi dell’anno 
["January", "February", "March", "April"];

Costanti di tipo Object

  • Il valore Object rappresenta una grandezza composta da numerosi diversi in realzione tra loro (esempi: un elemento di una rubrica telefonica, le opzioni di configurazione di un programma, ecc,)
  • Il letterale Object è invece compreso tra parentesi graffe ed è costituito da una serie di coppie “chiave:valore” separate da virgole:
//record di una rubrica telefonica in formato Object 
{name:”Irving”,age:32,phone:”555-1234”};

VARIABILI

Pensiamo a quando salviamo un numero di telefono del nostro amico Mario sul cellulare; se vogliamo chiamare il nostro amico, basterà inserire il suo nome (Mario, nome della variabile) ed il cellulare comporrà automaticamente il numero di telefono (valore della variabile). Se per qualche ragione Mario cambierà numero di telefono, modificherò il contenuto della mia rubrica (cambierò il valore della variabile). In questa maniera senza modificare le mie abitudini (inserirò sempre Mario) il mio cellulare comporrà il nuovo numero.

  • Una variabile è composta da due elementi:
    • il suo nome e
    • il suo valore;
  • Come ho visto nell’esempio del cellulare in un programma posso usare i nomi delle variabili al posto dei valori che rappresentano.
  • Ho la possibilità di usare simboli mnemonici al posto di numeri e stringhe di grande entità o difficili da ricordare.
  • Ho la possibilità di usare il nome della variabile al posto del suo valore per eseguirvi sopra delle operazioni, e generalizzare l’elaborazione.
  • Prima di usare una variabile la dichiaro usando l’istruzione var.
  • Per assegnare alla variabile un valore utilizzo l’operatore di assegnazione (=).
// creo una variabile che si chiama "mioNome" 
var mioNome; 
//assegno a mioNome il contenuto “Pippo" 
mioNome="Pippo";

TIPI IN JAVASCRIPT 

Tipo di dati Spiegazione Esempio
Number Qualsiasi valore numerico miaVariabile=300;
Number Numeri con virgola miaVariabile=12.5;
String Qualsiasi valore letterale. È una sequenza di caratteri, racchiusa tra virgolette. miaVariabile="Wolfgang";
Null È uno speciale tipo di dato che indica l’assenza di alcun valore (“è il nulla”). Non è lo zero. miaVariabile=null;
Boolean È uno tipo di dato che indica uno stato. Di fatto un valore booleano può assumere solo due valori: acceso (vero), spento (falso). È il classico “interruttore della luce”. //Vero:
miaVariabile=true;
//Falso:
miaVariabile=false;
Object Array (Elenco di valor)i miaVariabile=[‘lunedì’, ’martedì’, ‘mercoledì’, ‘giovedì’, ‘venerdì’, ‘sabato’, ‘domenica’]
Object Informazione complessa miaVariabile = {nome:”Mario”, cognome:”Rossi”, eta:25}

PAROLE CHIAVE

Le parole chiave sono i termini (composti da caratteri alfanumerici), riservati al linguaggio di programmazione. Il creatore del linguaggio di programmazione stabilisce a priori quali termini riservare e quale sarà la loro funzione, il compito del programmatore è quello di impararle ed usarle in maniera appropriata. Le parole chiave sono riservate non possono cioè essere usate per altre funzioni (nomi di vriabili o funzioni).

COMANDI JAVASCRIPT

Statement Description
break Esce da un blocco switch o da un ciclo
continue Interrompe l’iterazione di un ciclo se una determinate condizione si verifica e contuna con quella successiva
debugger Interrompe l’esecuzione e lancia il debugger, se disponibile.
do ... while Esegue un blocco di comandi fino a che una determinata condizione è vera.
for Esegue un blocco di comandi fino a che una determinata condizione è vera.
for ... in Esegue un blocco di comandi per ogni elemento presente in un insieme (Array o Object)
function Dichiara una funzione
if ... else ... else if Esegue un blocco di comandi quando una condizione è vera
return Interrompe l’esecuzione di una funzione e ritorna un valore
switch Organizza una serie di blocchi di istruzioni dioendenti da condizioni alternative.
throw Genera un errore.
try ... catch ... finally Gestione degli errori
var Dichiara una variabile.
while Esegue un blocco di comandi fino a che una determinata condizione è vera.

Operatori

Gli operatori sono token composti di uno o più caratteri speciali che servono a controllare il flusso delle operazioni che dobbiamo eseguire e/o a costruire espressioni

OPERATORI ARITMETICI
Operatore Funzione Espressione Valore di y Valore di x
    Valore iniziale: y=5
+ Addizione x = y + 2 y = 5 x = 7
- Sottrazione x = y - 2 y = 5 x = 3
* Moltiplicazione x = y * 2 y = 5 x = 10
/ Divisione x = y / 2 y = 5 x = 2.5
% Resto intero (Modulo) x = y % 2 y = 5 x = 1
++ Incremento x = ++y y = 6 x = 6
x = y++ y = 6 x=5
-- Decremento x = --y y = 4 x = 4
x = y-- y = 4 x = 5
OPERATORI DI ASSEGNAZIONE
Operatore Espressione Espressione equivalente Valore di x
 
Valori dati: x = 10; y = 5
= x = y x = y x = 5
+= x += y x = x + y x = 15
-= x -= y x = x - y x = 5
*= x *= y x = x * y x = 50
/= x /= y x = x / y x = 2
%= x %= y x = x % y x = 0
OPERATORI STRINGA
Operatore Espressione Espressione equivalente Risultato
  Valori dati: text1 = “Buon “; text2  = “giorno”; text3=“”;
= text1 = text2   text1 ‘giorno’  
= text3 = text1+text2   text3 ‘Buon giorno’  
+= text1 += text2 text1 = text1+text2 text1 ‘Buon giorno’  
STRINGHE E NUMERI
Operazione Espressione Conversione Risultato
Somma numero con numero x = 5 + 5; Nessuna conversione 10
Somma numero in una stringa con numero x = ‘5’ + 5; Converte 5 in ‘5. ’55’
Somma una stringa con un numero x = ‘Carlo’ + 5; Converte 5 in ‘5’. ‘Carlo5’
OPERATORI DI COMPARAZIONE
Operatore Descrizione Comparazione Risultato
    Valore di x: 5 (numero)
== Uguale a… x == 8 false
x == 5 true
=== Valore e tipo uguali x === "5" false
x === 5 true
!= Diverso da… x != 8 true
!== Valore e tipo diversi x !== "5" true
x !== 5 false
> Maggiore di… x > 8 false
< Minore di… x < 8 true
>= Maggiore o uguale a… x >= 8 false
<= Minore o uguale a… x <= 8 true

 

OPERATORI LOGICI
Operatore Corrisponde a… Esempi ( x = 3; y = 6;)
&& And logico (x < 10 && y > 1) è true
|| Or logico (x === 5 || y === 5) è false
! Not logico !(x === y) è true

PROPRIETÀ DEGLI OPERATORI

  • Precedenza (o Priorità)
    Indica l'ordine con il quale verranno eseguite le operazioni. Ad esempio in 4+7*5 verrà prima eseguita la moltiplicazione poi l’addizione.
  • Associatività
    Un operatore può essere associativo a sinistra oppure associativo a destra. Indica quale operazione viene fatta prima a parità di priorità.

SEPARATORI

  • I separatori sono simboli di interpunzione che permettono di chiudere un'istruzione o di raggruppare degli elementi. Il separatore principale è lo spazio che separa i termini tra di loro quando non ci sono altri separatori. Gli altri separatori sono:
    • (...) - parentesi tonde
    • {...} - parentesi graffe
    • , (virgola)
    • . (punto)

COMMENTI

  • I commenti sono testi che lo sviluppatore inserisce nel codice per renderlo più leggibile e vengono ignorati dall’interprete/compilatore. Esistono due tipi di commenti in uno script javascript:
    • Commenti di una sola riga preceduti da //
    • Commenti composti da una o più righe inseriti tra /* e */.

FUNZIONI E METODI

  • 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
  • L’uso di funzioni ha due vantaggi:
    • evitare di scrivere codice ripetitivo
    • rendere il mio programma modulare facilitando così modifiche e correzioni.
  • Le funzioni sono blocchi di codice JavaScript riutilizzabili in qualsiasi punto della pagina in cui sono inserite. I metodi sono semplicemente funzioni che sono associati a un oggetto.
  • 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.

ESEMPIO 1

function hello() {
  alert("Ciao gente!"); 
}

Questo codice dichiara la funzione hello.

  • Non ha parametri e non restituisce valori.
  • La funzione viene poi definita dal blocco di codice tra le due parentesi graffe.
  • Il comando usa la funzione alert (predefinita) per lanciare un messaggio all'utente. Se scrivo: hello(); si aprirà la piccola finestra dei messaggi con scritto ciao gente .

See the Pen Primo Esercizio Javascript by Bruno Migliaretti (@magicbruno) on CodePen.

ESEMPIO 2

function media(n1, n2) { 
   return (n1 + n2)/2; 
}

Questo codice dichiara la funzione media:

  • La funzione accetta due parametri che devono essere numeri e restituisce un numero.
  • La funzione viene poi definita dal blocco di codice tra le due parentesi graffe.
  • Il comando fa che la funzioni ritorni la media dei due numeri passati come parametri.
  • Se scrivo:
var a; 
a = media (5, 7);
  • a conterrà 6.

LA FUNZIONE media() IN UNA PAGINA INTERATTIVA

See the Pen Funzione media() in pagina interattiva by Bruno Migliaretti (@magicbruno) on CodePen.

Torna all'inizio