Sintesi della lezione

Strumenti utilizzati

eval()

La funzione eval() valuta o esegue un del codice javascript.

Se l'argomento è un'espressione, eval () valuta l'espressione. Se l'argomento è una o più istruzioni JavaScript, eval () esegue le istruzioni.

document.getElementById('output-js').value += 
  eval(document.getElementById('input-js').value) + '\n';

try... catch

Durante l'esecuzione di codice JavaScript, possono verificarsi diversi errori. Gli errori possono essere errori di scrittura del codice da parte del programmatore, errori dovuti a un input sbagliato, o altro.

L'istruzione try consente di definire un blocco di codi in cui gli eventuali errori vengono "gestiti" e non inviati al sistema.

L'istruzione catch definisce un blocco di codice che viene eseguito, se si verifica un errore nel blocco try.

L'istruzione catch restituisce un parametro che contiene l'errore.

try {
  // Codice durante l'esecuzione del quale gli 
  // errori sono intercettati
} catch (e) {
  // Codice che viene eseguito in caso di errore 
  // Il parametro 'e' contiene il messaggio di  // errore
}

 

try {
  document.getElementById('output-js').value +=    		  
     eval(document.getElementById('input-js').value) +'\n'; 
} catch (e) {
  document.getElementById('output-js').value += e + '\n';
}

 Calcolatrice

Il processo

1. Compongo un espressione secondo la sintassi Javascript e la scrivo nel campo immissione
2. Se premo '=' calcolo il valore dell'espressione utilizzando la funzione eval().
3. Se si verifica un errore mostro il testo dell'errore nel campo immissione
4. Se no sostituisco l'espressione con il risultato ottenuto

La parola chiave this

In JavaScript la parola chiave this si riferisce all'oggetto a cui appartiene la funzione o il metodo in esecuzione.

Ha valori diversi a seconda di dove viene utilizzato:

• In un metodo, this si riferisce all'oggetto a cui il metodo viene applicato.
• In un evento, this si riferisce all'elemento che ha ricevuto l'evento.

 Gli attributi data-...

HTML prevede un gruppo di attributi custom, che mi consentono di aggiungere informazioni personalizzate agli elementi HTML.

 <button type="button" class="tasto" data-value="/">
	&divide;
  </button>

 

/**
 * Calcolatrice
 * Esegue le quattro opazioni utilizzando eval()
 */

// Inizializzazione variabili
var tastiera = document.getElementById("tastiera");
var output = document.getElementById("immissione");
var error = false;

// Gestore degli eventi click di tutti i tasti della
// calcolatrice
var tastoClick = function() {
    // L'atrributo data-value è l'attributo custo che 
    // mi serve ad identificare la funzione del bottone
    var buttonValue = this.attributes["data-value"].value;

    // Al primo bottone premuto dopo un errore elimino 
    // da output il messaggio di errore
    if (error) {
        output.innerText = '0';
        error = false;
    }

    // Evito che alla pressione dei tasti numerici o 
    // degli operatori rimanga lo 0 iniziale
    if (output.innerText == '0') {
        output.innerText = '';
    }
    // Bottone 'C'
    if (buttonValue == 'cancella') {
        output.innerText = '0';
    // Bottone '='
    } else if (buttonValue == 'calcola') {
        // valuto l'espressione se si verifica
        // un errorre scrivo il messaggio di errore
        var result;
        try {
            result = eval(output.innerText);
        } catch (e) {
            result = e;
            error = true;
        }
        output.innerText = result;
    } else if (buttonValue == 'backspace') {
        // Elimino ultimo carattere della stringa
        // di immissione dopo avere eliminato gli 
        // eventuali spazi in coda
        var temp = output.innerText.trimRight();
        output.innerText = temp.substr(0, temp.length-1);
        // Se lascringa rimasta è vuota scrivo '0'
        if (output.innerText == '') {
            output.innerText = '0';
        }
    } else {
        // Aggiungo un carattere ad autput
        output.innerText += buttonValue;
    }

}

// Assegno il gestore a tutti i tasti
var tasti = tastiera.querySelectorAll('[data-value]');
for (var i = 0; i < tasti.length; i++) {
    var t = tasti[i];
    t.addEventListener('click', tastoClick);
}