HOWTO: App per Firefox OS – parte 3: JavaScript

Eccoci alla terza parte del nostro viaggio nella creazione di una applicazione per Firefox OS.

Siamo arrivati al momento di aggiungere le funzionalità che faranno della nostra applicazione un successone (forse). Per farlo dobbiamo scoprire il javascript.

Ovviamente non faremo un corso sul javascript, ma introdurremo solo i concetti che ci servono per far funzionare la nostra applicazione. Alla fine dell'articolo trovate il link per scaricare il codice completo.

Dice Wikipedia:

JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nella creazione di siti web (programmazione Web). Fu originariamente sviluppato da Brendan Eich della Netscape Communications con il nome di Mocha e successivamente di LiveScript, ma in seguito è stato rinominato "JavaScript" [...] JavaScript è stato standardizzato per la prima volta tra il 1997 e il 1999 dalla ECMA con il nome ECMAScript. L'ultimo standard, di marzo 2011, è ECMA-262 Edition 5.1. È anche uno standard ISO.

JavaScript è il linguaggio che muove il web. Se l'HTML è il telaio e il CSS la carrozzeria e gli interni in pelle, Javascript è il motore.

Diciamo subito una cosa importante: JavaScript non c'entra nulla con Java, se non per alcune similitudini nella sintassi; non serve quindi aver installato il Runtime Java (JRE) per eseguire del codice JavaScript: il browser contiene già un interprete JavaScript.

Gli script in JavaScript possono essere inseriti nel documento stesso, utilizzando il tag <script></script>, o salvati in un file esterno (di solito con estensione .js) e inseriti nella pagina utilizzando l'attributo src del tag <script>

<script src="codice.js"></script>

Va notato che in questo caso l'uso del tag di chiusura è obbligatorio.

Gli script JavaScript possono essere inseriti ovunque nella pagina: il browser esamina la pagina dall'alto verso il basso e gli script verranno eseguiti nel momento in cui vengono incontrati, interrompendo il caricamento della pagina.

Solitamente gli script sono inseriti o all'inizio, all'interno di <head> o alla fine della pagina, dopo la chiusura di </body>. Viene preferita quest'ultima soluzione perchè così nel momento in cui il browser comincia ad eseguire il codice javascript, la pagina è già caricata, e l'utente percepisce una maggiore velocità di caricamento della pagina, dato che il browser è già in grado di mostrargliela per intero).

JavaScript permette di interagire con l'utente attraverso due importanti concetti: il DOM (Document Object Model, Modello a Oggetti del Documento) e gli eventi.

Il DOM è una rappresentazione in JavaScript della pagina HTML corrente: permette di accedere ai vari tag, modificarne attributi e contenuto, rimuoverli o aggiungerli.

Per recuperare un tag dal documento, la via più facile è utilizzare il suo ID. Facciamo un esempio. Abbiamo questa semplice pagina:

<!DOCTYPE html>
<html>
  <body>
    <p id="testo1" title="titolo del tag">Paragrafo di testo nella pagina</p>
  </body>
</html>

Un paragrafo di testo, con un ID e un attributo "title". Ora aggiungiamo codice JavaScript che recupera il tag P#testo1.

<!DOCTYPE html>
<html>
  <body>
    <p id="testo1" title="titolo del tag">Paragrafo di testo nella pagina</p>
  </body>
  <script>
    var p1 = document.getElementById("testo1");
    console.log(p1);
  </script>
</html>

Questo piccolo codice recupera l'oggetto JavaScript che corrisponde all'elemento con ID="testo1" nel documento corrente, lo salva in una variabile che chiamiamo p1 e stampa sulla console di debug il valore di questa variabile.

Se apriamo Firefox, avviamo la Console Web (dal menu' di Firefox->Sviluppo Web->Console Web o con Ctrl+Shift+K) e apriamo il file html qui sopra, vedremo questo:

Vediamo che Firefox ci dice che il contenuto di p1 è un oggetto HTMLParagraphElement, ovvero un elemento paragrafo HTML. Tutto torna!

Analiziamo cosa abbiamo fatto:

  <script>   // qui apriamo il tag <script>,  e cominciamo a scrivere il nostro codice
   // document è una variabile che il browser definisce per noi, e rappresenta il documento corrente
   // quindi chiediamo di recuperare nel documento l'elemento con ID "testo1"
   // il risultato lo salviamo nella variabile che definiamo noi e che decidiamo di chiamare "p1"
    var p1 = document.getElementById("testo1");
   // quindi ne stampiamo il valore nella console web
    console.log(p1);
  </script>

Ora aggiungiamo un po' di codice:

  <script> 
    var p1 = document.getElementById("testo1");
    console.log(p1);

    // recuperiamo il valore dell'attributo "title";
    var titolo = p1.getAttribute("title"); 
    // recuperiamo il testo contenuto nel tag
    var testo = p1.textContent;

    // stampiamo tutto nella console
    console.log(titolo, testo);
  </script>

ed ecco il risultato nella console:

Vediamo che siamo riusciti a recuperare il valore dell'attributo e il contenuto testuale del tag. Ora agiungiamo il valore dell'attributo al testo del tag:

<script> 
    var p1 = document.getElementById("testo1");
    console.log(p1);
    var titolo = p1.getAttribute("title");
    var testo = p1.textContent;
    console.log(titolo, testo);

    // impostiamo il contenuto testuale del tag 
    p1.textContent = testo + " - " + titolo; 
</script>

Risultato:

Magia! Vediamo che il contenuto della pagina è stato modificato.

Ora sappiamo come modificare il contenuto di un tag: ci servirà per poter mostrare all'utente il risultato dei calcoli nella nostra bella applicazione.

Resta da capire come sapere quando l'utente interagisce con la nostra applicazione, per esempio quando clicca su un bottone. Qui entrano in gioco gli eventi. Il browser "lancia" un sacco di eventi, per ogni minima cosa che succede nella pagina. E' come se qualcuno dicesse ad alta voce tutto quello che succede: a noi non resta che restare in ascolto e agire quando succede qualcosa che ci interessa. Il browser ci fa sapere quando succedono cose tipo "la pagina si è caricata" o "il mouse è stato spostato" o "è stato cliccato con il mouse". Ognuno di questi eventi ha un "target", ovvero un elemento su cui questo evento è avvenuto, tipo "il mouse è stato cliccato sul tag P#testo1". Noi possiamo metterci in ascolto degli eventi che interessano un particolare tag e reagire di conseguenza.

Modifichiamo la nostra piccola pagina di esempio:

<!DOCTYPE html>
<html>
  <body>
    <p id="testo1" title="titolo del tag">Paragrafo di testo nella pagina</p>
    <button id="bottone1">cliccami!</button>
  </body>
  <script>
        var p1 = document.getElementById("testo1");
        console.log(p1);
        var titolo = p1.getAttribute("title"); 
        var testo = p1.textContent;
        console.log(titolo, testo);

  </script>
</html>

Abbiamo aggiunto un bottone e rimosso il codice javascript che modificava il contenuto del paragrafo: vogliamo che il paragrafo si modifichi solo quando l'utente clicca sul bottone.

Per poter metterci in ascolto di un evento, usiamo la funzione addEventListener:

  <script>
        var p1 = document.getElementById("testo1");
        console.log(p1);
        var titolo = p1.getAttribute("title"); 
        var testo = p1.textContent;
        console.log(titolo, testo);

        // recuperiamo il bottone dalla pagina
        var bottone = document.getElementById("bottone1");
        // quando l'utente clicca sul bottone
        // cambiamo il testo del paragrafo
        bottone.addEventListener("click", function(){
          // questo codice, compreso tra 'function() {' e '}',
          // viene eseguito quando il browser ci dice 
          // "l'utente ha cliccato il bottone con id "bottone1"

          p1.textContent = testo + " - " + titolo;
        });

  </script>

Vediamo il risultato in esecuzione qui: https://thimble.webmaker.org/en-US/project/50459/edit

Ora siamo pronti ad aggiungere gli script alla nostra applicazione web. Scarichiamo il codice della scorsa puntata: bitcoin-euro-0.1.zip

Estraiamo lo zip da qualche parte e apriamo la cartella bitcoin-euro-0.1. Qui creiamo un nuovo file, che chiameremo applicazione.js . Il nome non è importante, ma è meglio se ci fa capire cosa fa il codice al suo interno: nel nostro caso è il file principale della nostra applicazione.

Apriamo il file html e aggiungiamo il riferimento al nostro script:

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>Bitcoin in Euro v.0.1</title>
        <link rel="stylesheet" href="style.css"> 
  </head>
  <body>
        <h1>Bitcoin in Euro</h1>
        <div class="inputbox">
                <label for='valore'>Valore in bitcoin</label>
                <input id='valore' name='valore'>
        </div>
        <div class="inputbox">
                <input type='button' id='calcola' value='Calcola'>
        </div>
        <div class="outputbox">
                <span id="risultato">Qui scriveremo il risultato</span>
        </div>
  </body>
  <!-- script principale della nostra applicazione -->
  <script src="applicazione.js"></script>
</html>

Ora il browser quando caricherà index.html, caricherà anche il nostro javascript.

Ed ecco il nostro JavaScript:

// la nostra applicazione comincia a funzionare solo quando
// il browser ci dice che la pagina è stata caricata
window.addEventListener("load", function() {

        // recuperiamo l'elemento input, 
        // il bottone e l'elemento di output
        var input = document.getElementById("valore");
        var bottone = document.getElementById("calcola");
        var output = document.getElementById("risultato");

        // restiamo in attesa che l'utente
        // clicchi sul bottone
        bottone.addEventListener("click", function(){

                // l'utente ha cliccato sul bottone!
                // recuperiamo il valore che ha scritto nell'input
                var valore_btc = input.value;

                // calcoliamo il valore in euro
                var valore_eur = valore_btc * 313.11

                // aggiorniamo la pagina con il risultato
                risultato.textContent = valore_eur + "€";

        });

});

Ora quando l'utente cliccherà sul bottone, vedrà comparire il corrispettivo valore in euro.

Tre cose da notare: tutto il codice viene eseguito solo quando il browser emette l'evento "load" su window. window, come document, è una variabile che il browser definisce per noi e rappresenta la finestra che contiene il documento caricato. L'envento load viene inviato quando la pagina è caricata. Questo ci permette di essere sicuri che tutto il contenuto di cui lo script puo' aver bisogno è presente: se il browser non ha finito di caricare il documento e lo script chiede un elemento che ancora non è conosciuto, lo script non funzionerà come previsto!

Seconda cosa abbiamo moltiplicato il valore inserito dall'utente per un numero: JavaScript quando deve eseguire operazione come somma o moltiplicazioni cerca di capire che tipo di dato ci vuole per completare l'operazione. Siccome in questo caso moltiplichiamo il valore contenuto in valore_btc per un numero, JavaScript proverà a convertire il testo che l'utente ha inserito in un numero prima di eseguire la moltiplicazione. Se pero' l'utente ha inserito dei caratteri testuali, l'operazione fallirà e il risultato sarà NaN : Not a Number , non è un numero. Si puo' scrivere del codice che controlli che questo non avvenga, avvisando l'utente che puo' inserire solo numeri, o ancora meglio possiamo informare il browser che ci si aspetta che l'utente inserisca solo numeri, aggiungendo l'attributo type="number" al tag input:

<input id='valore' name='valore' type="number">

Questa cosa non è supportata sul desktop con Firefox 28 (dovrebbe arrivare con Firefox 29) ma su FirefoxOS funziona, mostrando all'utente una tastera numerica:

Terza cosa: il valore 313.11 è stato preso da questo sito http://www.coindesk.com/ . Ovviamente sarà diverso nel momento in cui lo guarderete voi. In una futura puntata vedremo di recuperare il valore in Euro dei Bitcoin direttamente da internet.

Nella prossima puntata vedremo come far funzionare la nostra applicazione sul simulatore di FirefoxOS.

Cosa serve:

Il codice della puntata di oggi: bitcoin-euro-0.2.zip
Un computer con installato una versione abbastanza recente di Firefox (no, su Android non funziona)
Aver installato il simulatore da qui https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ (scegliete una versione stabile, al momento 1.2 o 1.3 )