JavaScript. crash course. by Stefano Burigat

Transcript

1 JavaScript crash course by Stefano Burigat

2 Introduzione ECMAScript (no DOM e BOM, no <script>) Sintassi simile a Java Variabili definite tramite var, loosely typed, operatore comma (,) per separare definizioni Sei tipi di dato: Undefined, Null, Boolean, Number, String, Object. Operatore typeofper determinare il tipo di una variabile Valore numerico NaNper indicare il fallimento di un'operazione che doveva tornare un numero. Funzione isnan()per determinare se un valore è NaN.

3 Conversione di tipo (cast) Funzione Boolean()per cast a Boolean Funzione Number()per cast a Number (meglio parseint()e parsefloat() per cast di stringhe) Funzione String()per cast a stringa (funziona anche tostring( )

4 Operatori Operatori unari ++, --, +, - Operatori logici!, &&, Operatori moltiplicativi *, /, % Operatori additivi +, - Operatori relazionali <, >, <=, >= Operatori d'uguaglianza ==,!=, ===,!==

5 Regole di type coercion Fare attenzione all'applicazione degli operatori a tipi di dato diversi (vengono fatti cast impliciti secondo regole predefinite) Esempio: operatori ==e!= Se un operando è booleano viene convertito in numero Se un operando è una stringa e un altro un numero, la stringa viene convertita in numero Se un operando è un oggetto e l'altro no, viene chiamato il metodo valueof() dell'oggetto Se entrambi gli operandi sono oggetti, viene verificato che siano lo stesso oggetto Se un operando è NaN, == ritorna false null e undefined sono uguali

6 Controllo del flusso if if (condition) statement1; else statement2; do while do { statement; } while (expression);

7 Controllo del flusso while while(expression) statement; for for (initialization; expression; post-loop-expression) statement;

8 Controllo del flusso for-in for (property in expression) statement; breake continuecome in Java switch switch (expression) { case value: statement; break; default: statement; }

9 Variabili e memoria Le variabili possono essere di tipo valore (tipi primitivi) o di tipo riferimento (oggetti). Alle variabili riferimento si possono aggiungere proprietà in ogni istante. Copiare variabili riferimento significa creare più riferimenti allo stesso oggetto. Tutti gli argomenti delle funzioni sono passati per valore. Le variabili definite all'interno di una funzione (tramite var) non sono visibli all'esterno. Le funzioni creano uno scope ma i blocchi no, al contrario di altri linguaggi.

10 Array Gli array sono liste ordinate di dati di qualsiasi tipo (anche misti). Possono essere creati tramite costruttore o in notazione letterale: // si possono passare la lunghezza o i singoli elementi come argomento var colors = new Array(); var colors = ["red", "blue", "green"]; L'accesso agli elementi viene fatto tramite bracket notation. E' disponibile la proprietà length(che può essere modificata).

11 Array Gli array supportano diversi metodi specifici per l'inserimento e la rimozione (push(), pop(), shift(), unshift( ), l'ordinamento (reverse(), sort( ), la manipolazione (concat(), slice(), splice( ), la ricerca (indexof(), lastindexof( ), l'iterazione (every(), filter(), foreach(),map(),some(),reduce(),reduceright( ).

12 Funzioni Sintassi di base (dichiarazione di funzione): function functionname(arg0, arg1,...,argn) {... } Ogni funzione può ritornare un valore anche senza specificarne il tipo Gli argomenti delle funzioni non sono necessari. Gli argomenti vengono passati tramite un oggetto argumentche si comporta come un array (si può quindi usare bracket notation ed esiste la proprietà length). Argomenti passati esplicitamente ed argomenti impliciti possono essere mescolati e sono sincronizzati. Non è supportato l'overloading.

13 Funzioni Ogni funzione è un'istanza del tipo Function (e quindi possiamo avere più nomi per la stessa funzione). Oltre alla sintassi precedente le funzioni si possono definire usando un'espressione: var sum = function(num1, num2){ return num1 + num2; }; Le dichiarazioni di funzione sono soggette a hoisting (vengono spostate in cima al codice) Ogni funzione ha una proprietà prototypeche rappresenta un oggetto che contiene le proprietà ed i metodi che dovrebbero essere disponibili ad ogni istanza di un tipo riferimento.

14 Oggetti Gli oggetti in ECMAScript sono insiemi di proprietà (coppie chiave/valore dove valore può essere un tipo primitivo o un tipo complesso incluse funzioni) Tutti gli oggetti derivano da Object. Anche gli array e le funzioni sono oggetti. Operatore newper creazione di istanze Ogni oggetto ha una proprietà constructorche rappresenta la funzione utilizzata per creare l'istanza (ad esempio, Object( )

15 Oggetti E' possibile creare oggetti derivando dal tipo di base Objecttramite invocazione del costruttore oppure in notazione letterale: var person = new Object(); person.name = "Nick"; person.age = 29; var person = { name : "Nick", age : 29 };

16 Creazione nuovi tipi di oggetto Il codice seguente illustra il pattern utilizzato più di frequente per definire un nuovo tipo di oggetto in ECMAScript. function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = { constructor: Person, sayname: function(){ alert(this.name); } }; // continua nella slide successiva

17 Creazione nuovi tipi di oggetto // continua dalla slide precedente var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); person1.friends.push("van"); alert(person1.friends); //"Shelby,Court,Van" alert(person2.friends); //"Shelby,Court" alert(person1.friends === person2.friends); //false alert(person1.sayname === person2.sayname); //true

18 Oggetti - Ereditarietà Il codice seguente illustra il pattern utilizzato più di frequente per definire l'ereditarietà in ECMAScript. function SuperType(name){ this.name = name; this.colors = [ red, blue, green ]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ //inherit properties SuperType.call(this, name); this.age = age; } // continua nella slide successiva

19 Oggetti - Ereditarietà // continua dalla slide precedente //inherit methods SubType.prototype = new SuperType(); SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType( Nicholas, 29); instance1.colors.push( black ); alert(instance1.colors); // red,blue,green,black instance1.sayname(); // Nicholas ; instance1.sayage(); //29 var instance2 = new SubType( Greg, 27); alert(instance2.colors); // red,blue,green instance2.sayname(); // Greg ; instance2.sayage(); //27