Sviluppo Web
Tre interessanti metodi con cui puoi manipolare la tua struttura HTML utilizzando jQuery
Tre interessanti metodi con cui puoi manipolare la tua struttura HTML utilizzando jQuery
Una delle abilità principali di uno sviluppatore Javascript consiste nella manipolazione della struttura HTML di un documento. La struttura HTML (chiamata anche DOM – Document Object Model) non è nient'altro che la rete di elementi HTML che compongono la pagina web, qualsiasi sia il suo grado di complessità.
Saper manipolare gli elementi HTML ti porta ad un livello di programmazione molto più avanzato rispetto alla semplice costruzione di tale struttura, rendendoti capace di produrre un alto grado di interattività al suo interno.
Essere in grado di, ad esempio, modificare il colore del testo di un paragrafo in modo dinamico, di compiere una determinata azione al verificarsi del "click" dell'utente sopra un determinato collegamento ipertestuale e di modificare il contenuto di una collezione di elementi, sono solo alcune delle innumerevoli capacità che ti si schiudono con la conoscenza della manipolazione dinamica dell'HTML.
In questo articolo ti mostriamo come puoi interagire con il DOM delle tue pagine HTML per produrre effetti davvero impressionanti, sfruttando le capacità del framework jQuery, con tre tecniche utilizzate dai migliori sviluppatori a tal scopo.
Ma cos'è, davvero, il framework jQuery? Prima di tutto devi sapere che un "framework" non è nient'altro che codice Javascript scritto da un team di sviluppatori (in questo caso di altissimo livello) che ti fornisce una collezione di strumenti pronti all'uso per risolvere determinate problematiche. In una maniera molto spartana, possiamo paragonare il framework alla tecnologia del cambio automatico di un'automobile: una sorta di assistente per un determinato compito svolto dalla macchina.
jQuery è un progetto iniziato nel lontano 2006 ad opera del famoso sviluppatore John Resig (con cui ho avuto il piacere di collaborare in più occasioni). Le sue caratteristiche uniche lo rendono il prodotto client-side più conosciuto ed utilizzato nel panorama open-source del Front-End: jQuery ha cambiato per sempre la storia del Web Development, e di conseguenza la vita degli sviluppatori web.
Il motto di jQuery è "Write less, Do more" ("scrivi meno, ottieni di più"), ed in effetti con poche righe possiamo ottenere davvero molto in termini produttivi. Vediamo dunque le potenti tecniche che abbiamo a disposizione.
Prima tecnica: selezionare gli elementi HTML.
Prima di manipolarli, gli elementi HTML vanno selezionati. Per selezionare gli elementi HTML dobbiamo utilizzare la funzione dollaro "$", che accetta una stringa indicante il selettore CSS che rappresenta l'elemento o la collezione di elementi che vogliamo ottenere:
// seleziona l'elemento <div> avente ID "box"
$("div#box")
// seleziona tutti gli elementi <h1> aventi classe "red"
$("h1.red")
// seleziona tutti i <div>, tutti gli <span> e tutti i <p> con classe "hello"
$("div, span, p.hello")
Ora che abbiamo terminato con successo la procedura di selezione degli elementi desiderati, possiamo manipolarli a nostro piacimento. Ad esempio, possiamo registrare i loro "eventi". Un evento non è nient'altro che una determinata azione che si verifica nell'interazione dell'elemento stesso con l'utente, come ad esempio il click del mouse da parte di quest'ultimo.
Se vogliamo fare in modo di cambiare il colore del testo del div con ID "box" quando l'utente clicca su di esso, agiremo nel seguente modo:
$("div#box").click(function() {
$(this).css("color", "red");
});
Come puoi vedere, grazie a jQuery bastano solo tre linee di codice per ottenere questo risultato: il metodo "click" agganciato al nostro elemento accetta una funzione che svolge il compito da eseguire al verificarsi dell'evento. Il metodo "css" andrà ad impostare un valore per una determinata proprietà CSS (in questo caso il colore del testo diventa rosso). La parola chiave "this" indica semplicemente l'elemento corrente all'interno del gestore degli eventi.
Terza tecnica: modificare il contenuto di un elemento
Tra le tante possibilità offerte dalla manipolazione degli elementi, troviamo anche la modifica dinamica del loro contenuto. Grazie al metodo "html" possiamo modificare tutto ciò che è racchiuso negli elementi selezionati, ad esempio, aggiungendo un semplice testo:
$("p.myParagraph").html("Nuovo testo!");
oppure inserendo un vero e proprio elemento HTML:
$("p.myParagraph").html("<strong>Nuovo testo in grassetto!</strong>");
Ora che conosci le tecniche per lavorare dinamicamente con la struttura HTML tramite Javascript sei pronto per elevare l'interattività delle tue pagine web e di conseguenza la loro user-experience a nuove vette.
