Introduzione a JavaScript - Andrea Failli Front-end Engineer

Introduzione a JavaScript
         Andrea Failli
          Front-end Engineer

         andrea@andreafailli.it

Java…Script?
       (formalmente ECMAScript)

   Linguaggio di programmazione web

nessuna relazione particolare con Java

JavaScript… questo sconosciuto

• JavaScript
  – concepito da Netscape nel 1995
  – scopo:
     rendere più accattivanti ed efficienti le interazioni
     utente durante la navigazione di pagine web
  – interpretato dal browser
  – sintassi simile al C
                                       «Da un grande potere
  – debolmente tipizzato                 derivano grandi
                                          responsabilità»
  – molto espressivo

Linguaggio Object-Oriented
                        function Quadrato(lato) {
• oggetti                  this.lato = lato;
                           this.area = function(){
  – attributi                 return this.lato*this.lato;
                           }
  – metodi              }
                        var lato = 5;
                        var quadrato = new Quadrato(lato);
• ereditarietà          quadrato.area(); // 25
  – di tipo prototipale
  – non vere e proprie classi
  – oggetti che ereditano metodi e attributi da
    altri oggetti (prototype)

Tipi di dato

• Number  comprende interi e float
• String  sequenza di un qualsiasi numero
  di caratteri
• Boolean  true o false
• Object  un contenitore di attributi e/o
  metodi o di valori (nel caso di array)
• Undefined  è il valore di ogni variabile
  che non è ancora stata inizializzata
• Null  indica un valore nullo
• Function  funzione

Tipi di dato: typeof

JavaScript è un linguaggio debolmente tipizzato…
     come faccio a capire il tipo di un dato?
                      typeof

               var n = 5;
               typeof n;    // 'number'

               var s = 'foo';
               typeof s;     // 'string'

               var x;
               typeof x;     // 'undefined'

Tipi di dato: ===
           Attenzione agli operatori di
                [dis]uguaglianza!

         ==                              ===
Equality comparison         Equality and type comparison

1 == 1      // true         1 === 1     // true
1 == '1'    // true         1 === '1'   // false

'' == 0     // true         '' === 0     // false

Array

•   facili da definire  var a = [3,6,8];
•   indicizzati a partire da zero    Performance!

•   lunghezza variabile
•   possono contenere
    contemporaneamente variabili di tipi
    diversi  var a = [8,3.4,'foo'];

Array

var a = [8,75,9];

a.push(69);         //   [8,75,9,69]
a[0]=19;            //   [19,75,9,69]
a[1];               //   [19,75,9,69]
a.splice(2,1);      //   [19,75,69]

a.length;           // 3
typeof a            // 'object'

Funzioni
• raggruppano alcune istruzioni in modo
  da favorire la modularità e il riuso del
  codice
• sono variabili a tutti gli effetti
  – definizione  var f = function(…){ … }
  – invocazione  f(…);
• le variabili dichiarate con var all’interno
  delle funzioni sono locali

Funzioni
• possono essere "anonime", ovvero
  senza nome (succede spesso nelle
  callback)
   function(…) { … }
• funzioni "self-invoking": appena
  dichiarate vengono subito invocate
   (function(…) { … })(…);

Funzioni
• alert(msg)  il browser apre un
  finestra mostrando il messaggio
  all’utente
• confirm(msg)  il browser apre una
  finestra che consente all’utente di
  confermare o meno l’operazione
  descritta nel messaggio
• prompt(mgs,defValue)  il browser
  richiede l’inserimento di un valore
  all’utente

Oggetti

• contenitore di attributi e funzioni
   mappe chiave-valore
• facili da definire
• sono passati come riferimento se usati
  come parametri di funzioni
• ereditarietà di tipo prototipale
var o = {
   name: "andrea",
   sayHello: function(){ console.log(this.name); }
}

JavaScript nelle pagine web

codice interpretato dal browser (client-
  side) "allegato" ad una pagina web

          CSS stylesheets

          JS scripts            Pagina Web

         HTML body elements

JavaScript nelle pagine web

• principali utilizzi
  – modifiche ad elementi del DOM
      aggiunta di una riga ad una tabella
  – validazione dati inseriti in un form
      controllo campi obbligatori
  – gestione interazioni utente
      esecuzione di un’azione al click del mouse
  – interazione “in background” con web server
      recupero post meno recenti per “infinite
     scrolling”

RIA: Rich Internet Applications
    il contenuto delle pagine web diventa
             dinamico grazie a JS!

…                                           …

Document Object Model (DOM)

  rappresentazione di una pagina web da
  parte dal browser
   albero degli elementi HTML che
  compongono la pagina

è uno standard W3C

Document Object Model (DOM)

  il browser fornisce agli sviluppatori alcune
  API JavaScript per la manipolazione del
  DOM
  • aggiunta/rimozione di nodi
  • modifica di attributi di nodi
  • ricerca di nodi (DOM traversing)
  • …
                      possiamo modificare dinamicamente il
                     contenuto e il comportamento della pagina
                     web senza effettuare nuove richieste al server
è uno standard W3C

Cos’è A JAX

      Asynchronous Javascript And Xml
cioè…
la tecnica di realizzazione di applicazioni
web utilizzando interazioni asincrone
gestite con javascript con le quali il client
(browser) scambia xml con il server.
                                                 oppure JSON
  Interazione asincrona 
  il flusso d’esecuzione non viene bloccato fino alla ricezione della risposta,
  ma prosegue normalmente.
  La risposta sarà gestita attraverso l’invocazione di una "callback"

Interazioni A JAX
                                     la pagina viene ricaricata da capo
                                     durante la navigazione.
• prima di A JAX…                    Interazione sincrona  esecuzione bloccata

   navigazione web tradizionale
   richiesta di caricamento URL                 HTTP Request GET/POST
click su link o immissione diretta                intera pagina web

                                      Browser

                                                   HTTP Response
  rendering nuova pagina web
                                            intera pagina web con risorse
        appena caricata
                                                   HTML + CSS [+JS]

Interazioni A JAX
                                                                                la pagina non si ricarica!

  • con A JAX…                                                                  Interazione asincrona 

     Single Page Applications (o quasi)
                                      computazione
          interazione utente                                                   HTTP Request
         gestita da JavaScript                                                    risorsa
                                         JavaScript

                                                                A JAX Engine
                         JavaScript

                                                      Browser
                                         JavaScript
    aggiornamento                                                                   HTTP Response
        interfaccia                                                                risorsa richiesta,
       in risposta                    computazione
                                                                                      per esempio
all’interazione utente                  callback
                                                                                codificata in XML o JSON

Interazioni A JAX

• Vantaggi del modello con interazioni A JAX
  – applicazione può rispondere velocemente alle
    interazioni utente con un feedback visuale
  – l’utente può continuare ad utilizzare
    l’applicazione durante l’esecuzione delle
    richieste al server
  – minore quantità di dati scambiati con il server
  – il “grosso” dell’applicazione viene caricato
    all’avvio, le successive interazioni con il server
    saranno più veloci

Ambiente di Sviluppo

  ok… ma quali strumenti servono per
       sviluppare in JavaScript?

                                                       Test
                                                        su
                                                       altri
                                                     browser
                                                        !!!
                           Chrome e la sua
  Editor di testo         Developer Console
   (magari con
syntax highlighting)   Console / Breakpoints / DOM
                         Utilizzo CPU e Network

JavaScript Cross-Browser

• Implementazioni degli standard
  ECMAScript e DOM non sempre
  consistenti tra i vari browser  “quirks”
• E’ necessario garantire che
  l’applicazione web funzioni
  correttamente sui browser più diffusi (e
  a volte non basta!)

Librerie JavaScript

• si preoccupano di gestire e risolvere i
  quirks in maniera trasparente
• favoriscono lo sviluppo modulare del
  codice
• forniscono metodi già pronti per
  effettuare operazioni ricorrenti
  –   recupero elementi del DOM
  –   animazioni
  –   interazione con server web (A JAX)
  –   ….

Librerie (e frameworks) JavaScript

Librerie JavaScript: VanillaJS

• Vanilla JS
  – NON è una libreria!
  – significa “sviluppare in JavaScript senza
    utilizzare librerie o framework ”
  – applicazioni molto performanti (se scritte
    bene)
  – compatibilità cross-browser? Dobbiamo
    gestire i quirks

Librerie JavaScript: jQuery

• jQuery
  – fornisce metodi cross-browser per
    • manipolazione DOM
    • animazioni
    • interazioni client-server A JAX
  – libreria molto diffusa
  – community molto attiva
  – semplice, versatile, estendibile
     è molto semplice realizzare nuovi “plugin”

jQuery

cosa si può fare con un $...
  – attendere il caricamento del DOM per inziare
    ad eseguire codice JavaScript

         $(document).ready(function(){
              // your code here
         });

  è necessario attendere il caricamento completo del DOM poiché
 altrimenti si rischierebbe di operare su nodi non ancora caricati.

jQuery

cosa si può fare con un $...
  – recuperare un nodo (o alcuni nodi) dal DOM

                var $link = $('#myLink');

            convenzione!                          selettore DOM jQuery,
   indica un oggetto di tipo jQuery               simile ai selettori CSS,
                                              con qualche funzionalità in più

  si ottiene un oggetto di tipo jQuery che incapsula (wrappa) il nodo
 (o i nodi) DOM

jQuery

cosa si può fare con un $...
  – modificare lo stile inline CSS di un elemento

          $('#myLink').css('color','red');

  funziona da getter/setter:
  se non viene specificato il secondo parametro
  (il valore a cui impostare la proprietà color),
  la funzione ritorna il valore attuale della proprietà color.
   Pattern utilizzato spesso in jQuery

jQuery

 cosa si può fare con un $...
   – modificare un attributo di un nodo DOM

$('#myLink').attr('href','http://www.google.com');

jQuery

cosa si può fare con un $...
  – aggiungere un nodo figlio ad un elemento del
    DOM (ad esempio una lista ul di li

   $('#myList').append('new item');

jQuery

cosa si può fare con un $...
   – rispondere ad una interazione utente, ad esempio
     eseguire una funzione JavaScript al click dell’utente

          $('#myList').click(function(){
               alert('hello world');
          });
                                        callback invocata al click
                                     sull’area del nodo selezionato

jQuery

cosa si può fare con un $...
  – utilizzare funzioni di utilità generale
    ad esempio, for-each su un array

     var list = [27,52,11];
     var sum = 0;
     $.each(list,function(index,value){
         sum += value;
     });

VanillaJS vs. jQuery
                      recupero di nodi dal DOM

var link =                            var $link = $('#myLink');
document.getElementById('myLink');

var links =                           var $link = $('a');
document.getElementsByTagName('a');

var firstLinkInList =                 var $firstLinkInList =
document.getElementById(‘myList')     $('#myList > li:first > a:first');
        .childNodes[0]
        .childNodes[0];
                                                  selettore DOM jQuery
                                                  anche molto espressivi!

VanillaJS vs. jQuery
                   aggiunta di un nodo dal DOM

var list =                           $('#myList').append('foo');
document.getElementById('myList');

var newItem =
document.createElement('li');

newItem.innerHTML = 'foo';

list.appendChild(newItem);

VanillaJS vs. jQuery
                          animazione fade-out
var node =
document.getElementById('myLink');      $('#myLink').fadeOut();

node.style.opacity = 1;                 // oppure, in modo più verboso

function fade(){                        $('#myLink').animate({
   var opacity = node.style.opacity;       opacity: 0
   if (opacity

VanillaJS vs. jQuery
                                interazione A JAX

var r = new XMLHttpRequest();             $.ajax({
                                            type: 'POST',
r.open('POST', 'path/to/api', true);        url: 'path/to/api',
                                            data: {
r.onreadystatechange = function() {           foo: 'bar'
  if (r.readyState==4 && r.status==200)     },
        alert(r.responseText);              success: function (data) {
}                                             alert(data);
                                            }
r.send('foo=bar');                        });
                                                          callback invocata
                                                         in caso di successo

Taccuino

Domande?
 Andrea Failli
  Front-end Engineer

 andrea@andreafailli.it