Blog

5 esercizi jquery per skillarti

 Fare pratica nella programmazione è molto importante, così da prendere confidenza con la sintassi e semantica di uno specifico linguaggio. Cercare esercizi di coding online può essere un’ottima soluzione per skillarti nella stesura del codice.

In questo articolo vedremo cinque esercizi per fare pratica con jQuery. 

Cos’è jQuery?

È una libreria di funzioni in javascript destinata ad applicazioni web, si propone come obiettivo quello di semplificare la programmazione delle pagine HTML. L’API di jQuery consente di gestire con semplicità delle attività che risulterebbero lunghe o complesse in javascript.

Gli esercizi che verranno proposti sono di difficoltà graduale, riguardo le jQuery function, l’interazione jQuery HTML e anche l’utilizzo di diverse parole chiave in jQuery. Alla fine dell’articolo troverete le soluzioni. Non sbirciate!

  1. Come ottenere il valore di un textbox usando jQuery? (Il codice HTML puoi scriverlo come meglio preferisci, non ci sono vincoli si quello, purchè sia corretto ai fini del completamento dell’esercizio)
  2. Trova un elemento che contiene una specifica classe tramite jQuery. Codice d’esempio:

 

<body>
    <div id="div1" class="divclass"></div>
    <div id="div2" </div>
    <div id="div3" </div>
</body>
<style>
    .divclass {
        width: 90px;
        height: 75px;
        margin: 5px;
        background-color:#F3E2A9
    }
</style>
  1. Recupera il valore archiviato dall’elemento div.
  2. Esegui un’animazione modificando il numero dei frame. Codice di esempio:
<body>
    <p><input type="button" value="Run"></p>
    <div></div>
</body>
  1. Eventi jQuery: mostra i testi quando si attivano gli eventi mouseup e mousedown.

 

In questi esercizi potrai esercitarti con alcune delle caratteristiche cruciali di jQuery, le quali aiutano a semplificare molto i compiti, piuttosto che svilupparli tramite codice JavaScript puro (senza l’ausilio di librerie).

Conoscere jQuery è un vantaggio come sviluppatore web, in quanto permette di accrescere il proprio bagaglio culturale anche per dare più appeal al proprio curriculum.

Dopo aver provato a risolvere gli esercizi, vediamo le soluzioni con relativa spiegazione dello svolgimento:

  1. In questo esercizio conta anche l’utilizzo dell’HTML. Ovviamente il linguaggio di markup serve solo a mostrare gli elementi a schermo, con cui si andrà ad interagire. In questo esercizio viene utilizzato il jQuery this diverso da quello che conosciamo in JavaScript. $(this) si riferisce all'oggetto a cui appartiene. Fondamentalmente, è uguale alla parola chiave che troviamo in JS. Ma quando questa parola chiave viene utilizzata all'interno di $(), diventa un oggetto jQuery e ora possiamo utilizzare tutte le proprietà di jQuery su questo metodo.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Come ottenere il valore di un textbox usando jQuery:</title>
</head>
<body>
    <input type="text" value="Inserisci l’input">
</body>
</html>

JavaScript:

$( "input" )
.keyup(function() {
    var tvalue = $( this ).val();
    console.log(tvalue);
})
.keyup();

 

  1. Nel codice di esempio c’è sia CSS che HTML, perciò dovremmo scrivere HTML, CSS e JavaScript. In questo esercizio è importante evidenziare quanto jQuery semplifichi le operazioni da svolgere quando lo si fa interagire con i due linguaggi di markup. Bastano poche righe per ottenere l’elemento desiderato. Il metodo hasClass restituirà un valore booleano a seconda della presenza (o assenza) dell’elemento all’interno della classe specificato. In questo esercizio usiamo anche jQuery-CSS per evidenziare la semplicità della libreria jQuery.

HTML + CSS:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="div1" class="divclass"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>
.divclass {  
    width: 90px;
    height: 75px;
    margin: 5px;
    background-color:#F3E2A9
}

JavaScript:

console.log($( "#div1" ).hasClass( "divclass" ).toString());
console.log($( "#div2" ).hasClass( "divclass" ).toString());
console.log($( "#div3" ).hasClass( "divclass" ).toString());

 

  1. Questo esercizio è molto semplice. Sulla falsa riga del precedente, jQuery è molto versatile quando si tratta di estrarre dati. Spesso può rivelarsi utile nella programmazione web. In questo caso .data è un metodo built-in che memorizza dati associati agli elementi corrispondenti o restituisce il valore denominato per il primo elemento nell'insieme di elementi corrispondenti.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Recupera il valore archiviato dall’elemento div.</title>
</head>
<body>
    <div>
        I miei colori preferiti sono
        <span></span>
        e
        <span></span>
    </div>
</body>
</html>

18.  

JavaScript:

$( "div" ).data( "test", { first: "Red", last: "Green." });
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );

 

  1. In questo esercizio le cose si fanno interessanti. Apprendiamo l’utilizzo dei jQuery events tramite le jQuery function. In jQuery il metodo toggle( [duration ] [, complete ] ) viene utilizzato per visualizzare o nascondere gli elementi corrispondenti. Ha i seguenti parametri: duration – una stringa o un numero che determina per quanto tempo verrà eseguita l'animazione. [Tipo: numero o stringa]

complete : una funzione da chiamare una volta completata l'animazione. [Type: Function()].

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <style>
        div {
            width: 150px;
            height:85px;
            margin: 5px;
            float: left;
            background: #254BF4;
        }
    </style>
    <meta charset="utf-8">
    <title>Esegui un'animazione modificando il numero di frame</title>
</head>
<body>
    <p><input type="button" value="Run"></p>
    <div></div>
</body>
</html>

JavaScript:

jQuery.fx.interval = 200;
$( "input" ).click(function() {
    $( "div" ).toggle(3000);
});

 

  1. Un esercizio molto utile a farci capire quanto jQuery sia più rapido di JS nativo. Gestire eventi, funzioni e animazioni diventa molto semplice, risparmiando righe di codice considerevoli. jQuery ha una serie di funzioni built-in dedicate che permettono anche di gestire direttamente gli eventi o le animazioni quando si interagisce con il mouse sulla pagina web. Leggere la documentazione della libreria in questo senso è molto importante.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>Mostra il testo quando gli eventi mouseup e mousedown si attivano</title>
</head>
<body>
    <p>Premi mouse e rilascia qui.</p>
</body>
</html>

JavaScript:

$( "p" )
.mouseup(function() {
    $( this ).append("Mouse up." );
})
.mousedown(function() {
    $( this ).append( "Mouse down" );
});

 

Abbiamo brevemente visto l’efficienza di jQuery attraverso alcuni esercizi di diverso tipo. Senza trascurare la dinamicità di un sito web e sfruttando poche ma efficaci righe di codice al nostro servizio. Gli strumenti a disposizione di uno sviluppatore web sono davvero tanti, per questo è importante conoscerli e farli propri, così da aver più consapevolezza del codice che si sta scrivendo. 

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
UI UX design: un settore dalle mille sfaccettature Il design dell’esperienza utente (UX) e dell’interfaccia utente (UI) costituisce il fondamento su cui si costruiscono le interazioni digitali coinvo…
Nel contesto dello sviluppo web, il backend riveste un ruolo cruciale nell’assicurare il corretto funzionamento di un sito. Il backend, si occupa delle operazioni non visibili agli utenti finali, gest…
Il Data Analyst è una figura professionale sempre più richiesta nel mondo del lavoro, grazie alla sua capacità di analizzare e interpretare grandi quantità di dati per supportare le decisioni azie…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.