JAVASCRIPT

JavaScript è un linguaggio di scripting lato-client, che viene interpretato dal browser. Il linguaggio scripting significa che può essere inserito in un codice html senza compilarlo. Lato client invece vuol dire che viene eseguito dal computer direttamente (a differenza dei linguaggi lato-server che vengono eseguiti dal server a cui si richiede la pagina web, un esempio è php).

In pratica il Browser scarica il codice e poi lo interpreta. Alla domanda perché usare Javascript nelle pagine web si risponde : perchè è possibile dinamicizzare una pagina HTML, interagire con l'utente ed automatizzare alcuni processi sulla base del verificarsi di taluni eventi legati al comportamento dell'utente, alle caratteristiche del sistema o ad eventi temporali.

Javascript è un linguaggio orientato agli eventi e orientato agli oggetti, quindi il programmatore può creare oggetti personalizzati o usare quelle delle API (Application Programming Interface che sono librerie da utilizzare per gli sviluppatori di vari linguaggi e varie piattaforme. Per esempio ci sono quelle di Google per usare per esempio strumenti per sfruttare le cartine di Googlemaps, o quelle di Windows per sviluppare software compatibile con il relativo sistema operativo) che sono a disposizione dei programmatori. I vari oggetti ovviamente possono usare i metodi presenti all'interno delle classi a cui fanno riferimento. In realtà non è corretto parlare di OOP per Javascript, in quanto questo linguaggio non conosce i concetti di classe e di interfaccia, tanto meno di polimorfismo e non è un linguaggio fortemente tipizzato. Pur non essendo munito delle caratteristiche citate, Javascript permette ugualmente di creare degli oggetti. La sintassi è :

oggetto.metodo(parametri)

oppure

oggetto.proprietà

ovviamente il numero e il tipo di elementi delle proprietà dipendono dal metodo usato. Gli oggetti nativi più importanti di Javascript sono:

window - questo oggetto rappresenta la finestra del browser; fanno parte dell'oggetto window altri due (sotto)oggetti:
- location - questo oggetto rappresenta la URL corrente;
- history - questo oggetto contiene la cronologia delle URLs visitate dall'utente;
navigator - questo oggetto contiene una serie di informazioni riguardo al browser utilizzato dall'utente;
screen - questo oggetto contiene una serie di informazioni relative alla risoluzione dello schermo dell'utente;
document - questo oggetto fa riferimento al documento aperto nel browser o, più precisamente, al suo nodo radice; appartengono all'oggetto document tutti gli oggetti corrispondenti a ciascun (sotto)nodo del documento HTML; A ciascun elemento, ancora, appartengono tutti gli oggetti corrispondenti ad eventuali attributi;

Esempio :

document.write('scrivo una frase nel documento');

scrive una frase nella pagina, se inserisco dei tag li rispetta.

Esempio :

var testo = document.getElementById('paragrafo1').innerHTML;

assegna alla variabile testo, il contenuto del paragrafo che è identificato con id=paragrafo1.

Il codice Javascript può essere scritto nello stesso documento dell'HTML, e può essere messo sia all'interno di <head> … </head> o all'interno del <body> … </body>. Il codice viene racchiuso tra i tag <script> … </script>. Il posizionamento dipende dal tipo di codice, gli script che scrivono nella pagina vengono inseriti nel punto in cui scrivere il testo, mentre le funzioni o il codice di finestre pop-up, per esempio vengono scritte all'interno dell'head.
Vediamo un codice di partenza che prevede l'utilizzo di Javascript :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<link href=”template.css” rel=”stylesheet” type=”text/css”>

<title>TITOLO PAGINA</title>

<noscript>

Per avere a disposizione tutte le funzionalità di questo sito è necessario abilitare Javascript

l'indirizzo web che fornisce istruzioni su come abilitare Javascript per i browser principali :

http://enable-javascript.com/it/

</noscript>

<style type=”text/css”>

//eventuale codice css legato al singolo documento

</style>

</head>

<head>

<body>

</body>

</html>

il codice sopra è quello di partenza. Se il browser ha Javascript disattivato verrà visualizzato il messaggio.

Ci sono vari modi per inserire del codice Javascript in una pagina web :

Inline, cioè all'interno dei tag html :

esempio 1

<button type="button" onclick="alert('messaggio della finestra')">Clicca</button>

questo pulsante si accorge quando viene cliccato con il tasto sx del mouse, e come risposta visualizza il messaggio in una finestra.

All'interno di un link

<a href="javascript:alert('messaggio finestra')">Cliccami</a>

in questo caso, invece che un link, viene eseguito il codice Javascript contenuto, in questo caso una finestra con un messaggio.

Se il codice è più complesso e contiene variabili e funzioni non è un metodo consigliato. In questo caso il codice, come già detto sopra, può essere inserito in qualsiasi parte del codice all'interno dei tag :

<script> … </script>

Il terzo metodo, consigliato, è quello di scrivere il codice Javascript in un file a parte con estensione .js. In questo caso lo stesso codice può essere utilizzato da più pagine web. Per collegare il codice della pagina web con quello del sorgente Javascript :

<script src="nomefile.js"></script>

oppure se il file non è salvato sul server della pagina web, si può inserire il percorso assoluto :

<script src="http://www.nomesito.com/nomefile.js"></script>

commenti :

// commento sulla stessa riga

commento su più righe...

commento ...

dichiarare le variabili

var identificatore;

var identificatore = valore;

dichiarare le costanti

const PIGRECO = 3.14;

Ogni istruzione termina con il ; ed è importante sapere che Javascript è case sensitive (pippo diverso Pippo diverso PIPPO).

Tipi di dato

primitivi :

numerici

stringhe

booleani

null

undefined

complessi

oggetti (array, le espressioni regolari, le funzioni)

Anche i dati primitivi possono usare metodi e proprietà, in quel caso il dato primitivo viene trasformato in oggetto.

Tipi numerici

var pippo = 100;

var pippo = -129;

var pippo = 10e-3;

range dei valori +/- 1.79769*10³⁰⁸

se si oltrepassano, non da errore, ma visualizza : infinity o -infinity.

NaN (Not a Number) : quando si divide per 0, radice negativa, etc.

Tipi Null

E' un valore che non appartiene a nessun tipo, indica appunto nessun valore

Tipi undefined

Indica che la variabile non ha ricevuto nessun valore, nemmeno Null.

Tipi boolean

può assumere due valori : true e false.

Tipi stringa

quando assumono valori composti da più caratteri alfanumerici racchiusi tra apici singoli '...testo...' o doppi “...testo...”.

var pippo =”Oggi è una bella giornata”;

Accetta all'interno degli apici i caratteri di escape. Per esempio se devo assegnare la frase : anch'io voglio il Mac

devo scrivere

var pippo =”anch\'io voglio il Mac ”;

Inserisce caratteri UNICODE scrivendo \uxxxx in cui xxxx è il valore esadecimale del carattere.

Una stringa speciale è quella vuota : var pippo = “”;

Essendo Javascript un linguaggio debolmente tipato, il tipo di una variabile può cambiare nel corso del programma, e questo avviene quando riceve valori di tipo diverso :

var pippo = 100; //tipo numerico

var pippo = “ciao”; //tipo stringa

….

Un altro problema è dovuto al fatto che il linguaggio accetta l'uso di variabili non dichiarate in precedenza con la parola chiave var. Questo può provocare errori difficili da gestire, quindi dalle ultime versioni è possibile inserire all'inizio di ogni script o alla prima riga del blocco codice delle funzioni la riga :

 "use strict";

gli effetti si hanno nelle istruzioni che la seguono. Esattamente, se uso una variabile non dichiarata, mi da un errore. Ovvio che l'effetto si ha negli script e nelle funzioni in cui la prima riga contiene questo comando. I vecchi Browser con un Javascript vecchio non interpretano questa riga, quindi se fosse presente un errore non viene rilevato.

Variabili locali e globali

Sono variabili globali quelle scritte all'esterno delle funzioni, mentre sono considerate locali quelle all'interno delle funzioni.

ESPRESSIONI E OPERATORI RELAZIONALI : come altri linguaggi

operatore condizionale

condizione ? Valore1 : valore2;

Se condizione è vera viene restituito valore1, altrimenti valore2.

Strutture condizionali

if(condizione)

if(condizione1)...else if(condizioneN)...else

if(condizione)...else

switch

Operatori ternari :

primo :

condizione ? Valore1 : valore2;

Se condizione è vera viene restituito valore1, altrimenti valore2.

Esempio

var statoMarcia = 'inserita';

documet.write(statoMarcia == 'inserita' ? 'auto in movimento' : 'auto ferma');

secondo (doppia condizione) :

(condizione1 ? outputTrue : (condizione2 ? Output1 : output2))

Se la condizione1 è vera verrà eseguito outputTrue, altrimenti si verifica la condizione2 e viene valutata, se vera si esegue output1 altrimenti output2.

Esempio

var statoMotore = 'acceso';

var statoMarcia = 'nessuna';

document.write(statoMotore == 'spento' ? 'Auto spenta' : (statoMarcia == 'inserita' ? 'macchina in movimento' : 'macchina ferma'));

I cicli

while

do...while

for

for-in e for-of

Per lavorare più comodamente con gli array JavaScript prevede due varianti del for: il for...in e il for...of. Vediamo come scrivere le istruzioni precedenti facendo uso del for...in:

var valori = [5, 10, 15, 20, 25, 30];

var totale = 0;

var indice;

for (indice in valori)

{

totale = totale + valori[indice];

}

Sfruttando questa variante del for non abbiamo bisogno di specificare la lunghezza dell’array nè l’istruzione di modifica della condizione. JavaScript rileva che la variabile valori è un array ed assegna ad ogni iterazione alla variabile indice il valore dell’indice corrente.

Utilizzando il for..of invece possiamo scrivere il ciclo in questo modo:

var valori = [5, 10, 15, 20, 25, 30]; assegno valori all'array valori

var somma=0;

var valore;

for (valore of valori)

{

totale = totale + valore

}

Ad ogni iterazione JavaScript assegna alla variabile valore il contenuto di ciascun elemento dell’array valori.

Break

Questa istruzione fa uscire da un istruzione di ciclo. Solitamente viene inserito in una o più condizioni che richiedono l'interruzione.

Continue

Può essere usato per saltare delle interazioni nelle istruzioni dei cicli. Per esempio se si vogliono saltare degli indici in un ciclo for.

FUNZIONI

una fase di definizione o dichiarazione della funzione in cui si assegna un nome ad un blocco di codice;
una fase di invocazione o chiamata in cui il blocco di codice viene eseguito.

Definire una funzione

Lo schema sintattico per la definizione di una funzione in JavaScript è il seguente:

function nome_funzione(argomenti)

{

//istruzioni

}

La parola chiave function evidenzia che stiamo dichiarando una funzione il cui nome_funzione segue le stesse regole dei nomi di variabili. Gli argomenti sono una lista opzionale di variabili separati da virgole che verranno utilizzate all’interno del corpo della funzione, cioè il blocco istruzioni.

Una volta dichiarata, una funzione non viene eseguita subito. Stiamo semplicemente dicendo all’engine JavaScript che al blocco di codice indicato viene assegnato un nome.

Invocare una funzione

L’esecuzione vera e propria avviene con l’invocazione o chiamata, il cui schema sintattico è:

nome_funzione(valori);

dove nome_funzione è il nome della funzione e valori è una lista opzionale di espressioni separata da virgole.

Gli eventuali valori inseriti nella chiamata di una funzione vengono passati, cioè assegnati, ai corrispondenti argomenti della definizione della funzione.

L’istruzione return

Nel corpo della funzione può essere presente l’istruzione return che consente di terminare e restituire un valore al codice che l’ha chiamata. Questo ci consente di assegnare ad una variabile il valore restituito da una funzione o utilizzare una funzione all’interno di una espressione.

Gli oggetti

Oggetto	Descrizione
navigator	Rappresenta il browser stesso
window	È la finestra che contiene tutto quanto
document	È il documento HTML vero e proprio
document.forms[“nomeForm”]	Sono i moduli per raccogliere l’input dell’utente
document.images[“nomeImmagine”]	Le immagini
document.cookie[“nomeCookie”]	I cookie
document.getElementById(“idElemento”)	gli elementi della pagina definiti con attributo `id`
location	La barra degli indirizzi
status	La barra di stato, nella parte bassa del browser
window.frames	contiene gli eventuali frames
document.applets[“nomeApplet”]	Le applet

Questa tabella contiene alcuni oggetti di Javascript. Ogni oggetto ha dei metodi specifici che vanno chiamati rispettando delle regole di sintassi.