Javascript
Mootools e la classe Events
16 mar
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).
JQuery e la funzione parseXML
14 mar
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.
Mootools e la classe Chain
1 dic
Mootools consente, attraverso la classe Chain, di poter aggiungere delle funzioni ad un oggetto, da eseguire in sequenza. I metodi esposti sono:
myClass.chain(fn[, fn2[, fn3[, ...]]]); myClass.callChain([any arguments]); myClass.clearChain();
rispettivamente per aggiungere una o più funzioni, per richiamare la prossima funzione nella catena e per pulire la catena.
Eseguire una funzione con delay utilizzando Mootools
21 ott
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>
Validazione di un form con JQuery
12 set
La validazione di un form può avvenire in maniera molto semplice utilizzando il plugin Validation di JQuery.
In questo articolo verrà mostrato un semplice esempio di validazione.
I campi saranno tutti richiesti e, inoltre, l’URL dovrà essere valido per poter essere accettato:
<html>
<head>
<style>
body {
text-align:center;
margin:0 auto;
}
.content {
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
align: center;
}
.content table {
margin-left: auto;
margin-right: auto;
align: center;
}
td {
padding: 15 20 5 50;
}
tr.submitButton td {
padding-bottom: 50px;
padding-top: 50px;
text-align: center
}
p.title {
font-family:"Adobe Caslon Pro",
"Hoefler Text",Georgia,Garamond,Times,serif;
font-size:18pt;
font-variant:small-caps;
letter-spacing:0.2em;
text-align:center;
}
div.jqError {
height: 50px;
color: red;
font-style: oblique;
font-family: serif;
font-weight: bolder;
}
img.errGif {
padding-right: 20px;
}
input.error {
border: 2px solid red;
background-color: #FFFF53;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
// sovrascriviamo i messaggi standard
$.validator.messages.required = "";
$.validator.messages.url = "";
var formName = "#AnagForm";
$(document).ready(function()
{
$(formName).validate({
rules:
{
Name: { required: true },
Lastname: { required: true },
Site: {required: true, url: true},
Username: {required: true}
},
invalidHandler: function(e, v)
{
var errs = v.numberOfInvalids();
if(errs)
{
var str = errs>1 ?
("Ci sono " + errs + " errori") :
("C'è un errore");
$("div[class=jqError]").html(
"<img class=\"errGif\" src=\"error.gif\"/>" + str);
}
}
});
});
</script>
<body>
<form id="AnagForm" action="http://antoniotancredi.altervista.org">
<div class="content">
<p class="title">REGISTRAZIONE</p>
<div class="jqError"></div>
<table>
<tr>
<td><label for="Name">Nome: </label></td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td><label for="Lastname">Cognome: </label></td>
<td><input type="text" name="Lastname"/></td>
</tr>
<tr>
<td><label for="Site">Sito Web: </label></td>
<td><input type="text" name="Site"/></td>
</tr>
<tr>
<td><label for="Username">Username: </label></td>
<td><input type="text" name="Username"/></td>
</tr>
<tr class="submitButton">
<td colspan="2"><input type="submit" value="Conferma"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Definire una classe in Javascript
27 giu
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)
Informazioni sul brower dell’utente
23 feb
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
22 feb
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:
HTML/CSS/Javascript: div a scomparsa
11 gen
Breve pagina contenente un div che può essere mostrato o nascosto cliccando su un testo:
Continua >
Generazione in tempo reale del codice HTML
8 gen
In un precedente articolo, ho segnalato la pagina messa a disposizione dal sito w3schools.com per testare in tempo reale il codice HTML scritto.
L’aspetto negativo è che è necessario effettuare un submit, tramite un tasto, ogni volta che vogliamo osservare il risultato del nostro codice.
Molto più comodo sarebbe ottenere il risultato durante la digitazione.
Continua >
Loading ...