Introduzione a JavaScript

JavaScript è un linguaggio di scripting, il quale
viene interpretato ed eseguito dal client
(browser).

Tutte le istruzioni JavaScript, per poter essere
eseguite, necessitano di essere scritte all’interno
del tag HTML:
<script>…</script>

Il tag <script> va sempre inserito prima della
chiusura di <body>.
Solo rari e speciﬁci casi prevedono l’uso di
<script> all’interno di <head>.

A differenza di altri linguaggi di programmazione
veri e propri, JavaScript non è orientato agli
oggetti, come ObjectiveC o C#, ma si basa sugli
oggetti.

html
head
body
link
title
h1
div p
img
em
navigator
window
document

Le variabili sono delle “scatole” che possono
contenere un qualsivoglia valore, numerico
testuale o strutturale.
Le variabili, per deﬁnizione, possono variare
durante l’esecuzione dell’applicazione.

Le variabili in JavaScript si scrivono anteponendo
al nome della variabile la parola riservata var.
var first = 1; 
var second = “Text”;
Non è sempre necessario inizializzare le variabili.
var first; 
var second, third, fourth;

Le tipologie di dati in JavaScript sono:
• Boolean (valori booleani)
• Number (numeri interi o reali)
• String (caratteri e stringhe)
• Undeﬁned o Null (non diﬁniti o nulli)

Il tipo boolean accetta solo due possibili valori,
true (vero) o false (falso)
var first = true; 
var second = false;

Il tipo integer accetta valori numerici interi
compresi tra -inﬁnito a +inﬁnito:
var first = 10; 
var second = 1540; 
var third = -230; 
var fourth = 5*3;

Il tipo float accetta valori numerici reali compresi
tra -infinito a +infinito:
var first = 4.153; // 4,153 
var second = 3.2e5; //3,2 * 10^5

Il tipo string accetta qualsiasi tipologia di
carattere compreso tra singoli o doppi apici:
var first = “This is a string”; 
var second = ‘This is another string’; 
var third = ‘This is “the last” string’;

Il tipo undeﬁned è il valore di una variabile che
non ha valore. Viceversa, il tipo null è una
variabile vuota:
var first; 
console.log(first); // undefined
 
var second = null; 
console.log(second); //null

Gli operatori aritmetici seguono la stessa logica
degli operatori aritmetici a cui siamo abituati; +, -,
*, /, % (modulo)

Gli operatori di assegnazione servono per
assegnare un valore ad una variabile.
• = (assegnazione)
• += (somma per assegnamento)
• -= (sottrazione per assegnamento)
• *= (moltiplicazione per assegnamento)
• /= (divisione per assegnamento)
• %= (modulo per assegnamento)

Gli operatori booleani seguono la logica del suo
creatore, George Bool. Si basano su una
matematica che accetta solo due possibili valori:
true e false.
• && (AND logico)
• || (OR logico)
• ! (NOT logico)

A B X
0 0 0
0 1 0
1 0 0
1 1 1
A B X
0 0 0
0 1 1
1 0 1
1 1 1
A X
0 1
1 0
AND OR NOT

Gli operatori di controllo matematici veriﬁcano se
la condizione può essere vera.
• == (uguaglianza)
• === (uguaglianza di
valore e di tipo)
• < (minore)
• <= (minore e uguale)
• > (maggiore)
• >= (maggiore e
uguale)
• != (diverso)
• !== (differente valore e
tipo)

Gli operatori di incremento servono ad
incrementare o decrementare di 1 una variabile.
• ++ (incremento - prefisso e postfisso)
• -- (decremento - prefisso e postfisso)

Le strutture condizionali permettono di eseguire
un blocco di codice se la sua condizione è vera.
if(condition) 
statement
if(condition) 
statement 
else 
statement
if(condition) 
statement 
elseif 
statement 
else 
statement

switch permette in modo più chiaro e pulito
l’esecuzione di più if in cascata, a patto che la
condizione rimanga sempre la medesima.
switch(condition)
case statement
break

L’istruzione all’interno di while viene eseguita
ﬁntantoché la condizione risulterà essere vera.
while(condition) 
statement 
increment

Il comportamento è analogo a while, con l’unica
differenza che l’incremento del valore avviene
prima dell’esecuzione dello statement.
for(instance; expression; increment) 
statement

Grazie a try è possibile “catturare” i possibili errori
derivanti dal nostro codice ed eseguire delle
azioni adeguate.
try 
statement 
catch(error) 
error statement

Le strutture di dati in JavaScript sono:
• Array
• Functions (funzioni)
• Objects (oggetti)

Un array è un’insieme di valori (stringhe, numeri o
array) accomunati da un indice.

Un array può essere deﬁnito come una collezione
organizzata di oggetti.
Per collezione, si intende che gli oggetti che ne
fanno parte siano dello stesso tipo (in JavaScript,
e in molti altri linguaggi, possono anche non
esserlo).
Per organizzata, implica che sia possibile
identiﬁcare univocamente tutti gli oggetti
dell’array in modo sistematico.

2 3 5 7 11 13 17 19
0 1 2 3 4 5 6 7
Ad esempio: array di numeri primi
var numeriPrimi = new Array(2,3,5,7,11,13,17,19);

Gli array possono anche essere deﬁniti nel
seguente modo:
var numeriPrimi = new Array(); 
numeriPrimi[0] = 2; 
numeriPrimi[1] = 3; 
numeriPrimi[2] = 5;

Gli array possono anche essere utilizzati in modo
literal (array literal) senza per forza di cose
istanziare una nuova istanza della classe Array.
var numeriPrimi = [2,3,5,7,11,13,17,19];
console.log(numeriPrimi[2]); // 5

Una funzione permette di creare un blocco di
codice in modo da poter essere richiamato ed
eseguito successivamente, anche in molteplici
punti diversi della nostra applicazione.

Oltre alle numerose funzioni che JavaScript ci
mette a disposizione, abbiamo la possibilità di
creare noi stessi delle funzioni personalizzate atte
a svolgere determinati compiti all’interno del
nostro codice; richiamando semplicemente la
porzione di codice relativa, alla quale avremo
attribuito un nome che identiﬁchi la funzione.

var nomeFunzione = function(){
statement
return
}

L’istruzione return, seguita dal valore che deve
ritornare, è un metodo più semplice ed efﬁcace
per poter gestire il risultato dei calcoli che
vengono effettuati all’interno della funzione.
console.log(nomeFunzione());
var first = nomeFunzione();

Alla funzione, inoltre, possiamo attribuire tutta
una serie di parametri aggiuntivi che possono
variare all’interno dell’esecuzione del nostro
programma, attuando il concetto di riusabilità del
codice.
var nomeFunzione = function(arg1, arg2, argn){
statement
return
}

Gli argomenti, inﬁne, possono avere dei valori di
default che, nel caso non vengano deﬁniti nel
richiamare la funzione, vengono utilizzati
comunque prendendo il valore di default che gli
è stato attribuito.
var nomeFunzione = function(arg1, arg2, argn = 0){
statement
return
}
nomeFunzione(1,2);

Gli argomenti sono dei segnaposto all’interno
della nostra funzione. Se il nome dell’argomento
è uguale al nome di una variabile all’esterno della
funzione, i calcoli fatti su entrambe sono
individuali e non vanno ad incidere l’uno sull’altro
(scoping).
var arg1 = ‘argument 1’; 
var nomeFunzione = function(arg1, arg2, argn){
statement
return
}

Gli oggetti sono i principali tipi di dato in
JavaScript: qualsiasi cosa è, in realtà, un oggetto.
 
Un oggetto non è altro che una struttura con delle
proprietà e dei metodi.
var first = new Array(“abc”, 234);
 
console.log(first.length); //proprietà 
first.push(12); // metodo

È possibile, tuttavia, costruire degli oggetti
personalizzati, anche abbastanza complessi,
attraverso le funzioni costruttrici.
Si può ad esempio creare un oggetto cane, con
delle proprietà come razza e taglia, e delle istanze
riferite all'oggetto cane, come Pastore Tedesco o
Barboncino.

Inoltre, essendo JavaScript basato sul DOM, gli
elementi stessi del DOM costituiscono degli
oggetti lato client, ovvero degli elementi presenti
nella pagina HTML che hanno delle proprietà e
dei metodi predeﬁniti.
Ad esempio, la ﬁnestra nella quale è descritta una
pagina HTML è rappresentata da un oggetto
window, che può essere chiusa o aperta,
attraverso i metodi close() e open().

Così come succede per gli array, anche gli oggetti
possono essere creati con la direttiva new:
var obj = new Object(); 
obj.name = “Pippo”; 
obj.surname = “Pluto”; 
obj.walk = function(step){};
console.log(obj.name); // Pippo

Tuttavia, anche per gli oggetti, si preferisce
utilizzare la sua forma literal (object literal):
var obj = { 
name:“Pippo”, 
surname:“Pluto”, 
walk:function(step){} 
};
console.log(obj.name); // Pippo

2015 Giovanni Buffa - CC by-nd 3.0

Introduzione a JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduzione a JavaScript

Similar to Introduzione a JavaScript (20)

More from Giovanni Buffa

More from Giovanni Buffa (20)

Introduzione a JavaScript