JS
JavaScript
JavaScript <> JAVA
JavaScript viene interpretato dai browser, oguno ha il suo JavaScript Engine.
File esterni JavaScript hanno estensione .js
Input: prompt
Output: alert
Concatenazione di stringhe: +
Le istruzioni terminano con ;
Variabili
Dichiarazione di variabili
var nomeVariabile;
var non è obbligatorio, ma è raccomandato
Dichiarazioni multiple
var nomeVariabile1, nomeVariabile2, nomeVariabile3;
Nomi di variabili
I nomi delle variabili ammettono lettere, cifre, segno del dollaro $, segno underscore _ e non possono iniziare con una cifra.
Assegnazione di un valore ad una variabile
nomeVariabile = valoreVariabile;
Dichiarazione e assegnazione
var nomeVariabile = valoreVariabile;
Tipi di dati in JavaScript
ATTENZIONE: JavaScript è un linguaggio Weak Typing, infatti non è necessario dichiarare di che tipo è la variabile dichiarata e alla stessa variabile possono essere assegnati valori di tipi diversi.
Caratteri e Stringhe
possono essere racchiuse tra virgolette singole o doppie purché usate dello stesso tipo
Escaping –> \
le stringhe in JS sono oggetti e come tali hanno metodi e proprietà come:
nomeVariabile.length –> proprietà length
nomeVariabile.toupperCase(); –> metodo toupperCase
Concatenazione
+
Dati booleani
true
false
Numeri (interi, decimali, …)
var a, b, c;
a = 5;
b = -5;
c = 5.5;
Trasformare una stringa in numero
var pippo = “5”;
var pluto = Number(pippo);
Verificare se una variabile è un numero
if ( !isNaN(pluto) ) { istruzione;}
Operatori
- di assegnazione: =
- aritmetici: + – * /
- += -= *= /=
- precedenza: * viene eseguito prima di + ; ( )
- di incremento o decremento (di 1): ++ —
Gli spazi nelle istruzioni
Non hanno impatto.
Caratteri di escape
\n newline
Commenti
// linea singola
/*
linee multiple
*/
Condizioni
if ( condition is true ) {
istruzione;
istruzione;
} else {
istruzione;
istruzione;
}
Comparazione
== equal
!= not equal
=== strict equal (anche il tipo di dato)
!== not strict equal
>
>=
<
<=
Operatori logici
&&
||
Switch
switch ( variabile ) {
case "a":
alert("A");
break;
case "b":
alert("B");
break;
default:
alert("default");
}
Operatore ternario
condizione ? istruzione x vero : istruzione per falso
var risultato = (a == b ? true : false);
Parentesi
( ) condizioni
[ ] array
{ } blocchi di codice
Funzioni
function nomeFunzione (param1, param2) {
istruzione;
istruzione;
}
nomeFunzione (arg1, arg2);
Possono essere dichiarate in qualsiasi momento, ma è bene definirle prima che vengano richiamate per leggibilità del codice.
nb: Parametri / Argomenti
function nomeFunzione(param1, param2) {
var ris = param1 + param2;
return ris;
}
var res = nomeFunzione(arg1, arg2);
var nome = prompt(“Come ti chiami?”);
Scope delle variabili
locali, all’interno di una funzione
globali, fuori dalle funzioni
Richiamare file JS esterni in HTML
<script src="nomefile.js"></script>
Cicli (iterazioni)
for
for (var ix =1 ; ix <= 10 ; ix++) {
istruzione;
}
while
var ix = 1;
while ( ix <= 10 ) {
ix++;
}
do while
var ix = 1;
do {
ix++;
} while ( ix <= 11 )
Best practice
nomi delle variabili in formato camelCase
var variabile;
var nomeVariabile;
parentesi
if () {
// parentesi di chiusura sulla stessa colonna della parola chiave di apertura
} else {
}
funzioni
nomi in formato camelCase : function nomeFunzione(){}
definirle prima di chiamarle
Array
JavaScript permette array misti e con lunghezza dinamica
dichiarazione
var nomeArray = [];
assegnazione
nomeArray[0] = “a”;
nomeArray[1] = 20;
dichiarazione + assegnazione
var nomeArray = [ “a”,20];
proprietà degli array
nomeArray.lenght (nb: 0-based)
metodi degli array
nomeArray.toUpperCase();
.reverse
.sort
.join
.pop
.push
…
DOM
Document
–> la pagina web in HTML
Object
–> elementi HTML, e loro contenuto, che compongono la pagina
Model
come chiamiamo questo insieme di elementi, come sono in relazione gli elementi tra di loro
Utilizzo in JavaScript
var nomeVariabile = document.getelementById("nomeId");
nomeVariabile.innerHTML = "Nuovo valore";
Eventi
JavaScript può gestire gli eventi ed eseguire di conseguenza delle istruzioni (handling events)
.onload
.onclick
.nomouseover
.onblur
.onfocus
nomeElemento.onclick = function() { istruzioni };
File I/O in JavaScript?
No.
Object-oriented programming
Sì.
Classi
descrizione dell’oggetto
Proprietà
attributi dell’oggetto
Metodi
funzioni dell’oggetto
Incapsulazione
proprietà + metodi
Oggetti preconfezionati in JS
utilizzabili direttamente: array, stringhe, date, regular expression, …
da applicare alle variabili: Math, …
Dichiarazione di nuovi oggetti
var today = new Date();
Memory management
In JS è automatica.
MultiThreading
Debugging
- Errori di sintassi
- Errori logici
- Errori aritmetici (es: dividere per zero)
Utilizzare la console degli errori del browser (da sola o all’interno dei web developer tool).
Nota
L’utente e il browser innescano EVENTI che causano reazioni a livello di JavaScript, CSS e HTML.
Risorse
- http://javascript.crockford.com
- http://www.2ality.com/
- https://leanpub.com/understandinges6
- http://exploringjs.com/
- http://phrogz.net/js/classes/OOPinJS.html
- https://babeljs.io/
- http://es6-features.org
Reference
Mozilla Reference
Quirksmode.org
Learning the JavaScript Language – corsi: Lynda.com – insegnante: Joe Chellman
Programming Foundations: Fundamentals – corsi: Lynda.com – insegnante: Simon Allardice