Post con tag Javascript

Mootools e la classe Events

La classe Events di Mootools consente di aggiungere ad una classe semplici quanto utili capacità di gestione degli eventi. Una classe che implementa Events può infatti aggiungere, rimuovere e scatenare degli eventi (fire).

Continua >

JQuery e la funzione parseXML

JQuery consente il parsing di una stringa XML, utilizzando le funzioni native del browser, in modo da trasformarla in un oggetto Document e renderla manipolabile.
Tale oggetto può essere inoltre wrappato all’interno di un oggetto JQuery in modo tale da poter utilizzare i metodi della libreria per trattarlo.
Il metodo in questione è jQuery.parseXML(data), e il parametro data è la stringa XML well-formed.

Continua >

Eseguire una funzione con delay utilizzando Mootools

Mootools consente di creare funzioni eseguibili dopo un periodo di tempo specificato.
Nell’esempio qui di seguito, dopo un secondo dal caricamento della pagina verrà avviata una funzione che mostrerà un paragrafo nascosto:

<html>
  <head>
    <style>
      .invisible {
        display: none;
      }
      .visible {
        display: inline;
      }
    </style>
    <script src="mootools-core-latest.js"></script>
    <script>
      var func = function() {
        var id = arguments[0]
    	  var attr = arguments[1];
    	  var val = arguments[2];
    	  $(id).set(attr, val);
      }

      func.delay(1000, null, ["Text", "class", "visible"]);
    </script>
  </head>
  <body>
    <p id="Text" class="invisible">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Morbi metus quam, hendrerit at adipiscing quis, lacinia quis lectus.<br/>
      Etiam in urna ac odio dapibus vulputate sed eget orci. <br/>
      Pellentesque eget mollis libero. <br/>
      Pellentesque nec tortor pharetra est volutpat sagittis.<br/>
      Vivamus nunc nisl, viverra sed facilisis eu, fringilla id enim<br/>
    </p>
  </body>
</html>

Definire una classe in Javascript

La definizione di una classe in Javascript avviene utilizzando una funzione come template.
Le classi possono contenere sia proprietà che metodi.
Le proprietà vengono specificate utilizzando la parola chiave this.
I metodi possono essere aggiunto all’oggetto prototype della Function (o si può assegnare ad una proprietà una funzione).
Consideriamo ad esempio l’oggetto Person:

function Person(firstname, lastname) {
	this.firstname = firstname;
	this.lastname = lastname;
}

Person.prototype.formattedName = function() {
	return this.firstname + " " + this.lastname;
};

Tale classe contiene le proprietà firstname e lastname, più il metodo formattedName, aggiunto nel prototipo della function (Prototype-based programming)

Continua >

Informazioni sul brower dell’utente

L’oggetto navigator, in Javascript, contiene le informazioni riguardanti il browser dell’utente.
Il seguente script mostra all’utente le informazioni essenziali riguardo il suo browser (l’esempio è accessibile qui):

<script type="text/javascript">
  document.write("<h1>Navigator Info</h1>");

  document.write("<p>User-Agent: " + navigator.userAgent + "</p>");
  document.write("<p>Applicazione: " + navigator.appName + " " +
    navigator.appVersion + "</p>");
  document.write("<p>Sistema Operativo: " + navigator.platform + "</p>");
  document.write("<p>Cookie Abilitati: " +
    navigator.cookieEnabled + "</p>");
</script>

Input di dati user friendly

La pagina che segue mostra, un form che richiede il nome e il cognome di un utente.
Le caselle di testo saranno inizialmente piene, e indicheranno l’azione da eseguire. Quando l’utente clicca su una di esse, tutto il testo verrà selezionato facendo si che al primo tasto in input, il testo scomparirà.
Se l’utente lascia la casella di testo vuota, essa verrà riempita di nuovo con il testo iniziale:

Continua >

HTML/CSS/Javascript: div a scomparsa

Breve pagina contenente un div che può essere mostrato o nascosto cliccando su un testo:
Continua >