Introduzione a JavaScript

HTML e CSS sono (per il momento, perlomeno) privi di capacità di programmazione. Niente variabili, niente strutture di controllo di flusso, niente strutture iterative. Il cervello della elaborazione di pagine sempre più ricche, sempre più complesse (o apparentemente semplici) è scritto in JavaScript.

Anche per questa parte la traccia è Matthew Mc Donald, "HTML5 - the missing manual", all'Appendice B.

• Per eseguire una porzione di codice Javascript basta includerlo nel markup HTML al punto desiderato:
  <script>
 // Codice da eseguire:  alert("Interrompiamo le trasmissioni per un annuncio speciale.");
</script>

• I commenti ammettono entrambe le sintassi del C++ (// e /* */).
• L'uso del punto e virgola al termine di ogni riga non è obbligatorio, ma fortemente raccomandato per maggiore leggibilità e per evitare errori durante l'editing.
• È possibile anche includere script contenuti in file appositi che contengono soltanto codice JavaScript:
  <script src="MagicoScript.js"></script>


Eventi e funzioni

 function showMessage(additional_text)
  {
    alert("This is an announcement from showMessage: " + additional_text);
  }

 var showMessage = function (additional_text)
  {
    alert("This is an announcement from showMessage: " + additional_text);
  };

Variabili, tipi di dati e scope

In Javascript ogni variabile, indipendentemente dal tipo di dati che conterrà (e che può essere testo, un numero intero, un numero a virgola mobile, un array o un 'oggetto' - array associativo), viene dichiarata sempre con la stessa keyword var:
 var variabileGlobale = "Tutti vanno matti per le variabili.";
typeof variabileGlobale restituisce il tipo della variabile (→ 'string') - cambiando il valore cambia il tipo:

 variabileGlobale = 123; //typeof(variabileGlobale == 'number')
 variabileGlobale = true; //typeof(variabileGlobale == 'boolean')
 variabileGlobale = undefined; //typeof(variabileGlobale == 'undefined')

Le variabili dichiarate all'interno di una funzione sono visibili solo all'interno della funzione (e delle funzioni inline lì definite - lexical scope):

 function dumpVariable() { alert("variabileLocale == "+variabileLocale); }
 function aFunction() {
   variabileLocale = "Wunderbar.";
   setTimeout( function() { dumpVariable(); }, 2000);
 }

Strutture condizionali e di controllo di flusso

if (myNumber < 100) {
  // (Questo codice viene eseguito se il valore di myNumber è minore di 100)
}
else if (myNumber < 200) {
  // (Questo codice viene eseguito se il valore di myNumber è minore di 200
  // ma maggiore o uguale a 100.)
}
else {
  // Questo codice viene eseguito in tutti gli altri casi.
}

for (var i = 0; i < 5; i++) {
  // Questo codice viene eseguito per cinque volte.
  alert("Messaggio numero: " + i);
}

Array

for (var i = 0; i < myColors.length; i++) {
  alert("Ho trovato il colore: " + myColors[i]);
}

for (var i in myColors) {
  alert("Ho trovato il colore: " + myColors[i]);
}

Oggetti (1)

 var oggetto = {}; // Vuoto, anche 'null'.
 var oggetto = {elemento1: "Elemento 1"}; // Inizializzato con 1 elemento.
 oggetto.elemento2 = "Elemento 2"; // oppure - equivalente:
 oggetto['elemento2'] = "Elemento 2";

function Person() {
 this.firstName = "Mino";
 this.lastName  = "Cancelli";
 this.getName = function() { return (this.firstName + " " + this.lastName); }
}
var p = new Person;
(...)
delete p;

Oggetti (2)

Le caratteristiche di un linguaggio di programmazione OO vengono realizzate così:

1. Ereditarietà - si realizza attraverso il membro prototype:

    Person.prototype.speak = function () {
      alert("Parlo italiano!");
    };
    function Student(first, last, school) {
      Person.call();
      this.firstName = first;
      this.lastName = last;
      this.school = school;
    };
    Student.prototype = Object.create(Person.prototype); // ECMAScript 5 and above.
    Student.prototype.constructor = Student;
     

2. Polimorfismo - gli oggetti (e in particolare le funzioni) sono qualificati solo dal loro nome e non dal numero (e men che meno dal tipo) degli argomenti, quindi l'unica possibilità è:

    function Student(first, last, school) {
    {
      if (school === 'undefined') school = "Bicocca";
      (...)
    }
    

Oggetti (3)

3. Incapsulamento - le uniche variabili non pubbliche sono quelle interne a una funzione. Ma possono essere accessibili altrove attraverso le closures:

      var person = (function () {
      var fullName = "Mino Cancelli";
      return {
       "setFullName" : function (newValue) {
           fullName = newValue;
       },
       "getFullName" : function () {
        return fullName;
       }
      }; }()); // Invoca la funzione appena creata
   
      alert(person.getFullName()); // Al nome si può accedere così
      person.fullName = "Junk"; // Ma non così.
    

Manipolazione di elementi della pagina