Questo articolo spiega come sia possibile utilizzare file javascript di grandi dimensioni senza tuttavia appesantire il caricamento del proprio sito web. Quando si lavora framework di ultima generazione, è assolutamente necessario adottare un sistema per accellerare il caricamento dei file .js .
Ma qui ci occupiano di tutt’altro: nonostante le innumerevoli risorse disponibili, non è facile trovare una guida che spieghi in modo chiaro e utile come in effetti sia possibile utilizzare uno tra i framework javascript più potenti in circolazione, JQuery.
Per questo motivo, andremo a scrivere il codice per creare qualche simpatico effetto: imparerete così le basi dell’utilizzo del framework, e non vi rimarrà che studiare in dettaglio la documentazione per approfondire le vostre conoscenze.
Eseguiti i passi come indicato nell’articolo a questo indirizzo qui, abbiamo a disposizione il framework per iniziare il nostro lavoro…vediamo qualche esempio!
Esempio 1
Visto che qualsiasi cosa noi facciamo con JQuery manipola o “legge” il DOM (Document Object Model), dobbiamo assicurarci che tutto ciò che intendiamo svolgere (comandare eventi con il click del mouse, ad esempio) sia “letto” non appena è letto il DOM. Per questo motivo, la prima funzione che vedremo sarà:
$(document).ready(function() {
// azioni da svolgere quando il DOM è pronto
});
Questa è la funzione principale per JQuery, quella che solitamente non mancherà mai nei vostri script. Ma vediamo il nostro primo effetto, un div che compare e scompare cliccando su un link:
$(document).ready(function() {
$(’a#link-toggle’).click(function(){$(’#div-box’).toggle(400);
return false;});
});
Potremmo spiegare questa funzione a parole in questo modo:
- Quando si clicca [ click(function(){... ] sul link identificato dall’id “link-toggle” [ $('a#link-toggle') ] si richiama la funzione “toggle(400);” sul div identificato dall’id “div-box” [ $('#div-box') ]. Fatto questo ritorna”false”;
A questo punto, possiamo creare la nostra pagina html, in cui richiamiamo lo script e inseriamo gli elementi che ci servono, ovvero il link e il div:
<a id=”link-toggle” href=”#”>Clicca qui</a>
<div id=”div-box”>Qui ci vuole un testo abbastanza lungo</div>
A questo punto, se tutto è stato fatto correttamente, sarà possibile cliccare sul link che abbiamo creato e…..avete visto che effetto?? E abbiamo scritto solo 3-4 righe di codice!! Provate ora ad immaginare cosa è possibile fare con JQuery…
Per chi avesse dubbi, segue il codice della pagina come dovrebbe risultare a conclusione lavori:
<html>
<head>
<title>JQuery - Div scorrevole</title>
<script src=”jquery-1.2.1.js”></script>
<script>
$(document).ready(function() {
$(’a#link-toggle’).click(function(){$(’#div-box’).toggle(400);
return false;});
});
</script>
</head>
<body>
<a id=”link-toggle” href=”#”>Clicca qui</a>
<div id=”div-box”>
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
</div>
</body>
</html>
Esempio funzionante disponibile al seguente indirizzo
Esempio scaricabile al seguente indirizzo
Non vi resta che salvare questo codice in un file html, scaricare JQuery a questo indirizzo e sistemare il file nella stessa cartella della pagina html…ed ecco a voi un div a comparsa con un gran effetto grafico!!
