Ajax è una tecnologia JavaScript che abbiamo già capito essere essenziale per una web-app moderna e che risponda alle esigenze di UI/UX simili alle applicazioni tradizionali da desktop ma con i dovuti vantaggi. JQuery è una libreria Javascript che abbiamo già visto su queste pagine semplifica enormemente alcune funzionalità e Ajax è una di queste! Vediamo come.
jquery
Esercizio cumulativo con JQuery: una semplice calcolatrice
Ora che abbiamo visto un po’ le cose interessanti e fondamentali di JQuery, proviamo a vedere qualche applicazione pratica. Ad esempio, realizziamo una calcolatrice, magari inizialmente un po’ spartana, ma che sfrutta le cose viste nei precedenti post.
Esempio 04 – Eventi Focus e Blur
Un esempio un po’ più complesso questa volta con gli eventi fratelli focus e blur. Il loro utilizzo ha senso con i campi di input delle form HTML. Provate a cliccare dentro la casellina, questa cambierà di colore grazie alla funzione css che modifica il colore in grigio e lo riporta a bianco se si clicca in altro punto dello schermo.
Esempio 02 – Ancora sui selettori annidati
Riproponiamo lo stesso esempio in realtà ma questa volta con altri selettori. Diamo un’occhiata al codice.
Esempio 03 – Gli eventi
Prima di addentrarci nel nuovo esempio, diamo un’occhiata agli eventi supportati da JQuery e col quale cerchiamo di familiarizzare nelle nostre funzioni.
Esempio 01 – Evento click
Dopo aver introdotto JQuery e compreso il concetto di selettore (leggi qui), vediamo un esempio un po’ più complesso: vogliamo far sparire dei frammenti di testo cliccandoci sopra con il mouse. L’esempio è utile per introdurre la gestione degli eventi in JQuery con particolare riferimento all’evento più utilizzato per eccellenza: il click
Esempio 00 – Hello World in JQuery
Il classico esempio Hello World. Poco interessante dal punto di vista della spettacolarità, ma ci permette di introdurre alcuni concetti fondamentali per utilizzare la libreria JQuery in modo agevole.