Blog

28 Marzo 2023

Giuseppe Piccininni

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!

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)
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>

Recupera il valore archiviato dall’elemento div.
Esegui un’animazione modificando il numero dei frame. Codice di esempio:

<body>
    <p><input type="button" value="Run"></p>
    <div></div>
</body>

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:

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();

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());

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 );

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);
});

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.