Guida JavaScript
Introduzione
Secondo Wikipedia esistono oltre 700 linguaggi di programmazione.
Esistono 2 tipi di linguiaggi di programmazione:
- compilati
- interpretati
Linguaggi Compilati
Le istruzioni scritte dal programmatore (altrimenti detto “codice sorgente”) vengono date come input ad un programma, chiamato appunto compilatore, che lo trasforma in codice macchina
Linguaggi Interpretati
Il codice sorgente viene eseguito direttamente da un programma, chiamato interprete, che esegue le operazioni
| Compilati | Interpretati |
| ADA | PHP |
| C | JavaScript |
| C++ | Ruby |
| Pascal | Basic |
| Fortran | Python |
JavaScript è un linguaggio di programmazione interpretato (dal browsewr) ed è uno dei più usati al mondo, è un vero e proprio linguaggio di programmazione (o di scripting che dir si voglia) orientato agli oggetti (seppur in modo "limitato") ed agli eventi.
Storia
JavaScript fu sviluppato originariamente da Brendan Eich della Netscape Communications nel 1995.
E' Stato pensato per un utilizzo solamente client-side come compagno di HTML e CSS ed è stato cosi fino al 2010.
Nel 2010 grazie principalmente a Node.js, JavaScript è stato trasformato in un linguaggio server sid, che quindi può essere utilizzato senza un browser e senza HTML e CSS avendo funzionalità simili ai linguaggi come PHP ecc.
JavaScript nasce per dare dinamicità alle pagine web.
Consente di:
- Accedere e modificare elementi della pagina HTML
- Reagire ad eventi generati dall'utente
- Validare i dati inseriti dall'utente
- Interagire con il browser:
- determinare il browser utilizzato
- la dimensione del viewport
- lavorare con i cookie
Implementare il Codice JavaScript
Il codice Javascript viene implementato direttamente all'interno delle pagine HTML, frequentemente all'interno della sezione <head>, con l'utilizzo dei tag <script> ... </script>.
E' bene precisare che il codice Javascript può essere inserito in qualsiasi punto del documento HTML, sia nell'<head> che nel <body> della pagina.
Più frequentemente alla fine del tag <body>:
<script src="path/script.js"></script>
E' possibile includere anche gli script esterni. Per farlo si usa sempre il tag <script> specificando, all'interno dell'attributo src, la URL del file Javascript che si desidera includere:
<script src="https://www.sito.com/file-esterno.js"></script>
Hello World in Javascript
Per stampare a schermo una semplice stringa di testo si utlizza document.write('testo').
Il codice che va implementato nel <body> della pagina nel punto esatto in cui si vuole appaia la stringa, ad esempio in un paragrafo oppure nella cella di una tabella.
Esempio:
Le variabili
In un qualsiasi linguaggio di programmazione un ruolo indispensabile e di primo piano è occupato dal concetto di variabile.
Possiamo definire una variabile come un contenitore nel quale salviamo un informazione, o meglio un etichetta che assegnamo all'informazione.
Le variabili in JavaScript sono definite con la parola var seguite dal nome della variabile:
var miaVariabile
JavaScript è case sensitive, cioè fa distinzione tra lettere maiuscole e minuscole, quindi la variabile miaVariabile è diverso da miavariabile.
Molte keyword sono costituite da parole composte unite senza alcuno spazio o trattino ad esempio: getElementById()
Questo metodo di scrittura è detto camelCase, le lettere maiuscole all’interno della keyword servono per individuare facilmente l’inizio di una parola.
I nomi delle variabili devono rispettare precisi criteri:
- devono cominciare sempre con una lettera, mai con un numero
- in generale non devono essere presenti caratteri diversi da lettere o numeri
- i nomi devono essere diversi dalle keyword riservate di JavaScript
Per assegnare un valore ad una variabile viene utilizzato operatore di assegnazione. Questo operatore va indicato con =
Esempio:
Lo scope: variabili globali e locali
Lo scope o ambito di visibilità di una variabile è la parte di uno script all’interno del quale si può fare riferimento ad essa.
Le variabili dichiarate all’interno di una funzione sono dette locali alla funzione dal momento che sono accessibili soltanto all’interno del suo corpo.
Le variabili dichiarate fuori da qualsiasi funzione sono dette globali e sono accessibili da qualsiasi punto dello script, anche all’interno di funzioni.
Tipi di dato: il valore delle variabili
“JavaScript is Loosely Typed”
La tipizzazione è una delle caratteristiche che distinguono i linguaggi di programmazione.
Le variabili possono contenere diversi tipi di dati, e strutture di dati. Alcuni esempi: numeri interi (int), numeri con la virgola, stringhe, liste, etc...
In Javascript il programmatore non deve dichiarare “in anticipo” il tipo della variabile che utilizzerà.
JavaScript automaticamente riconoscerà che tipo di dato è!
I tipi di dati nel JavaScript sono 7
- Number - Numero
- String - Stringa, sequenza di caratteri
- Boolean - true|false, 1|0
- Object - Oggetto
- Function - Funzione, un Oggetto «speciale»
- Null - Valore Nullo
- Undefined - Non Definito
Un altro tipo di dato particolare della variabile è l'array
Operatori
Se è vero che le variabili svolgono un ruolo da primo piano in un qualsiasi programma, è altrettanto vero che lo è altrettanto saper svolgere su di esse determinate operazioni come, ad esempio, operazioni matematiche, confronti, concatenazioni, ecc.
Operatori di assegnazione
Abbiamo già visto che per assegnare un valore ad una variabile utilizzaimao l'operatore di assegnazione =
Ma esistono anche altri operatori di assegnazione, specialmente se si lavora con dei valori o variabili numeriche.
+=operatore di assegn. incrementale e viene usato cosi:x += yche equivale ax = x + y-=operatore di assegn. decrementale e viene usato cosi:x -= yche equivale ax = x - y*=operatore di assegn. di moltiplicazione e viene usato cosi:x *= yche equivale ax = x * y/=operatore di assegn. divizionale e viene usato cosi:x /= yche equivale ax = x / y%=operatore di assegn. modulare e viene usato cosi:x %= yche equivale ax = x % y
Operatori di concatenzaione
Gli operatori di concatenzaione servono appuno per concatenare 2 variabili stringa.
+con questo operatore è possibile concatenare 2 variabili stringa
+=con questo operatore viene concatenato il valore della variabile di sinistra all'espressione di destra.
Operatori matematici
Si tratta di comuni operatori per effettuare operazioni matematiche tra variabili numeriche
+Esegue un'addizione o concatena se almeno una variabile è stringa-Esegue una sottrazione*Esegue una moltiplicazione/Esegue una divisione%(modulo) calcola il resto intero della divisione tra due numeri
Inoltre ci sono due operatori molto importanti:
++operatore di incremento
--operatore di decremento
Operatori di confronto
Operatori di confronto oppure gli possiamo anche chiamare operatori relazioneli, possono agire su diversi tipi di variabili (stringa, numero, valore booleano ecc) e sono utilizzati per effettuare appunto il confronto.
L'Esito di questo confronto genera un valore booleano (true o false).
==Uguaglianza===Uguaglianza stretta (sia di tipo e di valore)!=Diversità (Not)<Minore<=Minore o uguale>Maggiore>=Maggiore o uguale
Questo tipo di operatori assume un'importanza centrale all'interno delle strutture di controllo (o strutture condizionali) quando, cioè, l'esito del confronto tra due o più variabili diventa determinante al fine del comportamento del programma stesso.
Operatori logici
Questi operatori consentono di effettuare operazioni logiche di associazione.
Anche questi operatori sono utilizzati nelle strutture di controllo del flusso di programma.
-
&&- L'operatore "AND" (operatore binario - prevedono 2 operandi) è utilizzato per creare condizioni complesse composte da una pluralità di sotto-condizioni; Tutte le sotto-condizioni devono restituere true affinche la routine si verifichi ||- UL'operatore "OR" (operatore binario - prevedono 2 operandi) è utilizzato per creare condizioni complesse composte da una pluralità di sotto-condizioni; affinché la routine si verifichi è necessario che almeno una delle sotto-condizioni sia vera.!- L'operatore "NOT" (operatore unario - richiede un operando) indica una negazione all'interno di una routine. In sostanza si usa per invertire il significato di una condizione.
Esempio:
Strutture condizionali
Strutture condizionali dette anche istruzioni condizionali eseguono un certo blocco di codice se si verifica una ben precisa condizione.
if, else if, else
Come in ogni linguaggio di programmazione che si rispetti, anche in Javascript, infatti, è possibile definire delle condizioni al verificarsi delle quali deve o meno accadere qualcosa. Per fare ciò ci si serve degli operatori if, else if, else i quali corrispondono alle locuzioni condzionali "se", "oppure se" e "oppure".
La struttura è la seguente:
- keyword if - significa "Se"
- condizioe (...) - restituisce un valore booleano true/false come risultato
- istruzione {...} - cosa accade se la condizione si verifica
Istruzioni condizionali composite (con operatori logici "AND"):
Avvia lo script
Switch case
Con lo switch viene presa in esame una data variabile e vengono definiti una serie di comportamenti (casi) a seconda che quesa abbia un determinato valore.
- il costrutto si apre con la parola switch seguita da una parentesi tonda al cui interno è specificata la variabile da valutare;
- vengono definiti una serie di casistiche attraverso la parola case con un possibile valore della variabile presa in esame seguita dai due punti (:);
- all'interno di ogni blocco case sono inserite delle istruzioni al termine delle quali deve essere inserito il comando break al fine di interrompere il flusso dello switch;
- l'ultimo blocco è contraddistinto dalla parola default seguita dai due punti (:) che definisce le istruzioni da eseguire qualora nessuno dei casi si sia verificato.
La sintassi di switch è la secuente:
I Cicli
Per una serie di motivi può nascere l'esigenza di dover ripetere una serie di istruzioni un determinato numero di volte, o finchè non si verifichi una data condizione. In tali circostanze è necessario ricorrere alle iterazioni o, più comunemente, ai cicli.
Javascript supporta diverse strutture iterative:
- il ciclo
for() - il ciclo
while() - il ciclo
do while()
Il ciclo for()
Un ciclo for() serve a ripetere una serie di istruzioni un determinato numero determinato di volte. Per definire un ciclo for() si imposta:
- una variabile contatore a cui si assegna un valore di partenza arbitrario (solitamente 0);
- la condizione di terminazione (cioè un valore della variabile contatore che, una volta raggiunto, blocca il ciclo);
- ed uno step (cioè l'incremento - o decremento - da applicare alla variabile contatore ad ogni passaggio del ciclo).
Ecco la sintassi:
Con for abbiamo definito il valore di partenza (var i=0), la condizione che termina il ciclo (i<3) ed il nostro step (i++). In pratica for eseguirà le istruzioni contenute tra le parentesi graffe per tre volte in quanto al primo passaggio "i" avrà valore 0, al secondo 1, al terzo 2 ed a questo punto si stopperà in quanto la condizione di terminazione ci dice che il ciclo dovrà continuare sino a quanto "i" è minore di 3.
Il ciclo while()
A differenza di for(), il ciclo while() non prevede l'utilizzo di alcun contatore ma semplicemente l'indicazione di una condizione di terminazione: il ciclo terminerà non appena la condizione impostata si realizza(diventerà true).
La sintassi è la seguente:
Il ciclo while si ferma non appena la condizione diventa true. Il ciclo while è pratico per eseguire cicli la cui condizione non dipende per forza da un contatore, ma da unza condizione.
A parte ciò, il ciclo for() e while() sono equivalenti.
Il ciclo do while()
La struttura do while() è una variante di while(). La differenza tra le due sintassi consiste nel fatto che il controllo della condizione avviene dopo l'esecuzione dell'istruzione e non prima; la differenza, da un punto di vista pratico, è che l'istruzione viene eseguita sempre almeno una volta.
Questa la sintassi:
Gli array
Gli array consentono di associare più valori ad un unico nome di variabile (o identificatore). In genere i valori contenuti in un array hanno una qualche affinità (ad esempio l’elenco dei giorni della settimana). L’uso degli array evita di definire più variabili e semplifica lo svolgimento di operazioni cicliche su tutti i valori.
Gli elementi di un array possono essere di qualsiasi tipo di dato/valore previsto da JavaScript
I valori/elementi dell’array sono delimitati da parentesi quadre e separati da virgole.
Ecco la sintassi:
var iscritti = ["Luca", "Marco", "Paolo"];
Così, ad esempio, se vogliamo accedere al primo elemento dell’array scriveremo:
var studente = iscritti[0];
Per aggiungere un elemento i un array abbiamo la funzione .push():
Ordinamento di un array: sort() e reverse()
Lavorando con gli Array() a volte si ha l'esigenza di manipolare i dati in maniera diversa da quella nativa, ad esempio ordinando i dati secondo un certo ordine/criterio o manipolandoli come una stringa.
Con il metodo sort() possiamo ordinare un Array() in ordine alfabetico:
Con il metodo reverse() possiamo invertire l'ordine di un Array() in senso contrario:
Convertire un array in stringa
I metodi toString() e join(), la loro funzione è quella di convertire un Array() in una stringa.
Il metodotoString() crea un elenco di elementi separati da una virgola;
join() permette di scegliere il o i caratteri da utilizzare per la separazione
Array + Cicli =
Se non sappiamo quanti elementi ci sono in un array ma dobbiamo visualizzarli, possiamo utilizzare il ciclo for() e la proprieta .length .
Dove i avrà il valore 0 e con l'operatore di incremento avrà un valore diverso ad ogni ciclo permettendo di attraversare tutto l'array!
.length- è una proprietà degli array che ci dà la sua lunghezza, quindi il numero degli elementi contenuti
Esempio:
Il DOM
Il Document Object Model (o, più brevemente, DOM) è uno standard ufficiale del W3C attraverso il quale la struttura di un documento (esem. pagina HTML) è rappresentata sotto forma di un modello orientato agli oggetti.
In pratica ogni elemento della struttura del documento è rappresentato sotto forma di nodo di un elemento padre creando una sorta di "albero" con dei rami.
Con Javascript è possibile manipolare il DOM della pagina; ogni elemento della pagina viene rappresentato come un oggetto il quale può essere manipolato attraverso metodi e proprietà.
L'oggetto di base per la manipolazione del DOM è document il quale rappresenta la radice del documento nel suo complesso (cioè la pagina web).
Con JavaScript possiamo:
-
Modificare l'HTML
- Aggiungere/rimuovere classi css
- Cambiare l’inner html di un elemento
- Nascondere elementi
-
Reagire a eventi
- Al click
- Al hover
- Al caricamento completo dalla pagina
- ...
-
Interagire con il browser
- Impostare i cookie
- Leggere lo user-agent
- ...
Lista delle operazini da effettuare sull'element in JS
Ci sono più di 80 operazioni che si posssono fare con JavaScript
Eccone alcuni:
element.classList- restituisce i nomi delle classi CSS associate all’elementoelement.className- permette di impostare il/le classi CSS che l’elemento ha associateelement.innerHTML- permette di modificare l’innerHTML dell’elementoelement.style- aggancia un funzione che sarà chiamata quando accade un evento (es. click)element.value- per ottenere il valore di un element, se ne ha uno (utile nei form input)
Selezionare gli elementi della pagina HTML
Per identificare il o gli elementi sui quali agire èutilizziamo uno di questi metodi:
getElementByID()- identifica un solo elemento della pagina attraverso l'attributo ID (univoco);getElementByTagName()- identifica un set di elementi della pagina attraverso l'indicazione dello specifico tag (ad esempio tutti i paragrafi o tutti i link);getElementByClassName()- identifica un set di elementi della pagina attraverso l'indicazione di una specifica classe;
Modificare l'HTML del documento
Attraverso la proprietà innerHTML possiamo "scrivere" codice HTML all'interno di un qualsiasi nodo della pagina.
Modificare il valore di un attributo
Con JavaScript è possibile cambiare il valore dell'attributo
Ad esempio, di voler cambiare l'immagine sorgente (attributo src) di un tag <img>:
Modificare lo stile CSS di un elemento
L'attributo .style dell'element può diventare a sua volta un oggetto ed essere manipolato attraverso una serie di proprietà corrispondenti alle proprietà dei fogli di stile.
Gestire gli eventi utilizzando il DOM
Attraverso l'utilizzo del DOM è anche possibile assegnare un evento ad un dato elemento della pagina. Ad esempio:
Sempre attraverso il DOM è possibile creare degli event listener cioè dei "rilevatori di eventi" associati a specifici elementi della pagina.
Ad esempio:
Ci sono altri eventi da ascoltare in JavaScript:
.addEventListener('hover', function() {......});
.addEventListener('focus', function() {......});
Gestire le classi del documento html
Con JavaScript possiamo assegnare una classe con la proprietà .className.
Attenzione però, tutte le classi dell'elementno html vengono sostituiti con la nuova classe!
Ad Esempio:
Se volessimo, invece, aggiungere una classe alla lista delle classi, possiamo utilizzare la proprietà .classList.add()
Per rimuovere una classe dalla liste delle classi, possiamo utilizzare la proprietà .remove
Le Funzioni
Uno degli elementi chiave di un programma, in questo caso di un programma JavaScript, sono le funzioni.
buona norma riutilizzare il codice ogni volta che ve ne sia la possibilità, così da evitare di scrivere codice identico. Le funzioni rendono il codice più pulito e si riducono le possibilità di fare errori.
Le funzioni, quindi, sono dei pezzi di codice che possono essere richiamati più e più volte nel nostro programma principale.
Ecco la sintassi:
Le funzini possono accettare dei dati in ingresso! come gli (argomenti) che sono una lista opzionale di variabili separati da virgole che verranno utilizzate all’interno del corpo della funzione, cioè il blocco istruzioni.
Ad esempio:
La funzione per eseguire il codice al suo interno deve essere richiamata/evocata
Esempio pratico:
OUTPUT:
Gli Oggetti in JavaScript
Un Object oggetto letterale: è una struttura di dati che può contenere più valori ai quali si può accedere per mezzo di un indice di nomi.
Ecco come si crea un oggetto:
- Creiamo una variabile
- Apriamo le parentesi graffe
- Inseriamo una serie di coppie nome: valore
Leggere il valore di un Oggetto
Per recuperare un valore di un object ci sono 2 vie:
- dot notation - nome_oggetto.nome_proprieta
studente.nome - parentesi quadre come per gli array - nome_oggetto[nome_proprieta]
studente['cognome']
Aggiungere un valore ad un Object
Come per la lettura del valore anche per modificare un valore ad un oggetto sarà sufficiente comportarsi come nel caso della assegnazione di un nuovo valore ad una comune variabile: nome_oggetto.nome_proprieta = nuovo_valore oppure nome_oggetto[nome_proprieta] = nuovo_valore
Eliminazione di proprietà di un oggetto
L'eliminazione di proprietà avviene mediante lo statement delete secondo questa sintassi: delete nome_oggetto.nome_proprieta
D'ora in avanti, cercando di accedere a questa proprietà, l'interprete Javascript ci restituirà un valore undefined.
Objects - for..in
Se vogliamo stampare tutte le proprietà di un oggetto senza doverne conoscere il numero e il nome utilizziamo il ciclo per gli oggetti for..in
Il ciclo for..in passa attraverso tutte le chiavi dell'oggetto e si scrive in questo modo:
- keyword
for -
condizione
Andiamo avanti finché esistono delle chiavi da analizzare all’interno dell’oggetto- var
key- indica la chiave sulla quale operiamo - keyword
in- stiamo ciclando all’interno di - nome dell’oggetto
- var
Ecco la sintassi:
Stampiamo tutti i valori dell'oggetto studente:
OUTPUT:
API (HTTP, AJAX, JSON)
JavaScript ha la possibilità di fare le chiamate a server e gestire le risposta, cosi la pagina può dialogare con l'esterno.
HTTP
La communicazione avviene con il protocollo HTTP
L'HTTP è un protocollo utilizzato come principale sistema per la trasmisione di informazioni sul web, con architetture client-server.
Il messaggio è composto da 4 parti:
- Riga di richiesta
- Header
- Riga vuota
- Body (corpo) della richiesta
HTTP - Riga di Richiesta
METODO:
Identifica il tipo di operazione richiesta dal client. I due metodi più utilizzati sono GET e POST (ma esistono anche HEAD, PUT, PATCH, DELETE, OPTIONS, TRACE, CONNECT)
URI:
unified resource identifier è il nome del server che voglio contattare
VERSIONE PROTOCOLLO:
1.1 dal 1997 fino al 2014
2.0 dal 2015
HEADER
Header è uno spazio di lunghezza variabile che può contenere diverse informazioni nel formato chiave: valore
BODY
Body il corpo della richiesta non è altro che la parte che identifica la risorsa da richiedere.
AJAX
Anche i programmatori web possono fare chiamate HTTP utilizzando Javascript!
AJAX, Asynchronous Javascript And XML, permette di fare chiamate asincrone.
jQuery migliora e facilita la creazione di una chiamata Ajax. vedi metodo qui
JSON & XML
Per comunicare tra loro client e server devono "parlare" la stessa lingua!
Ne esistono 2 standard:
- XML (eXtensible Markup Language) è una linguaggio di markup (simile all’HTML) che stabilisce un meta linguaggio per passare dati strutturati.
- JSON (JavaScript Object Notation) utilizza la notazione che conosciamo per definire gli oggetti in JavaScript
Ecco come si presentano:
XML
JSON
JS + JSON =
Una volta arrivato la risposta dal server in formato JSON, è molto semplice trasformare la risposta (che è semplicemente testo) in un oggetto JavaScript, con JSON.parse().
API: Application Programming Interface
Con API si intende un insieme di procedure rese disponibili ad un programmatore per svolgere un insieme coerente di operazioni.
Query String
Un modo per passare dati al server è attraverso l’URI aggiungendo al termine una querystring.
www.boolean.careers?email=alex@mail.com&title=student
Ecco cosa abbiamo:
?indica che inizia la query string- chiave=valore
- ogni chiave valore è separata da un &
Esercizi:
Esercizio 1:
Chiedi all’utente il suo nome, poi chiedi il suo cognome, poi chiedi l'età, Infine scrivi sulla pagina
nomecognomeeta19
Script eseguito:
OUTPUT:
Esercizio 2: FizzBuzz
Stampare a schermo i numeri da 1 a 100. Se il numero si divide per 3 al posto del numero stampare Fizz, se si divide per 5 - stampare Buzz, se il numero si divide sia per 3 che per 5 stampare FizzBuzz.
Script eseguito:
OUTPUT:
Esercizio 3: Palindromo
Chiedere all'utente una parola, verificare se la parola è palindroma (viene letta nello stesso modo sia da sinistra a destra che da destra a sinistra.
Script eseguito:
OUTPUT: