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