Javascript a oggetti

Siamo abituati a pensare a Javascript come a un linguaggio di scripting semplice che non supporta la programmazione a oggetti.

In effetti questo è sbagliato; JS si è evoluto molto ultimamente, tanto più che HTML5 ne fa ampio uso.

Ed inoltre molti framework supportano già da tempo la OOP.

Basti pensare a Sencha touch ad esempio.

E' probabile che noi nelle nostre pagine web non ne faremo mai uso diretto, ma solo attraverso plugin o script già fatti che magari andremo a modificare.

Ma è comunque una cosa importante.

Quindi oggi facciamo una piccola introduzione agli oggetti in JS.

Creiamo una semplice classe User per contenere le info dell'utente:

 function User(nome, cognome, email) {

  this.nome = nome;

  this.cognome = cognome;

  this.email = email;

 

  this.getUser = function() {

   document.write("Nome: " + this.nome + "<br/>");

   document.write("Cognome: " + this.cognome + "<br/>");

   document.write("Email: " + this.email + "<br/>");

  }

 }

Questa classe ha tre parametri: nome, cognome e email.

E ha la "classica" funzione get per rappresentare i dati.

Validazione form con LiveValidation

LiveValidation libreria Javascript che serve per validare i form in tempo reale.

Può essere usato in modalità stand-alone o come plugin di Prototype.

Io ho optato per la prima soluzione.

Scaricate la libreriria da qua e aggiungetela alla pagina:

<script type="text/javascript" src="lib/livevalidation.js"></script>

Le opzioni che ha sono molte, come anche i validatori:

• campo vuoto
• email
• numeri
• ecc

Qui trovate vari esempi.

Io vi mostro quelli che ho usato io nel mio form:

<form name="comments-form" action="">
<p>
<label>Email</label>          
<input type="text" name="email" value="" size="22" id="com_email" />
<script type="text/javascript">
var campo = new LiveValidation('com_email', { validMessage: "\u221a" });
campo.add(Validate.Presence);
campo.add(Validate.Email);
</script>
</p>
<p>
<textarea name="text" cols="40" rows="8" id="com_text"></textarea>
<script type="text/javascript">
var campo = new LiveValidation('com_text', { validMessage: "\u221a" });
campo.add(Validate.Presence);
</script>
</p>
<div>
<input type="submit" value="Invia il tuo commento" name="sumbit-comment" />
</div>
</form>

Prendiamo il campo email: