JavaScript

Lezione 4

jQuery

Library VS Framework

Con l'avvento del web 2.0 nel 2008, ci fu la necessità di avere strumenti per interagire con le pagine web in modo più intelligente e agile.

Nacquero così diverse librerie JS per lo sviluppo veloce di applicativi 2.0.

 

La differenza tra una libreria e un framework, è che la libreria generalmente si occupa di un singolo aspetto dell'applicativo, mentre un framework si occupa di vari aspetti una web app.

 

Alcune delle prime librerie create furono MooTools / Prototype e poi arrivò jQuery.

jQuery

jQuery è una libreria che permette la manipolazione dell'HTML, dello stile grafico (CSS), permette di fare animazioni, chiamate AJAX e molto altro.

 

Il suo successo è dato dalla semplicità con cui permette di interagire con l'HTML.

 

Tutto il mondo di jQuery ruota intorno all'oggetto $; ossia un alias per la libreria jQuery.

 

 

// Vanilla JS / standard
document.getElementById('mioId').href;

// jQuery
$('#mioId').attr('href');

Pro e Contro

PRO:

  • più breve da scrivere
  • possiamo usare i selettori CSS per selezionare gli elementi
  • tanti plugin

 

CONTRO:

  • performance più scadenti rispetto a Vanilla JS

Scaricare jQuery

Dal sito jquery.com è possibile scaricare jQuery in modalità:

 

development

quindi il codice non è compresso, molto utile in fase di sviluppo e debug

 

production

il codice è compresso, molto utile quando si va online

 

Una volta scaricato il file, si andrà ad aggiungere nel nostro file HTML come un normale file JS; ma prima del file in cui vogliamo usare jQuery

[...]
    <script src="jquery-3.4.1.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

Gestione del DOM

Con jQuery possiamo operare con il DOM nel seguente modo:

  • selezionare elementi
  • creare nuovi elementi
  • aggiungere classi
  • rimuovere classi
let el = $('#mioID');

let elements = $('.miaClasse');

let elemento = $('<div></div>');

let window = $(window);

el.append(elemento);

el.addClass('miaClasse');

el.removeClass('miaClasse');

I Selettori

$('#mioID'); // SELEZIONE PER ID

$('.miaClasse'); // SELEZIONE PER CLASSE

$('a');  // SELEZIONE PER TAG

Selettori di base

// SELEZIONA TUTTI I LINK DENTRO ALL'ELEMENTO CON CLASSE miaClasse
$('.miaClasse a');

// SELEZIONA TUTTI I LI DENTRO ALL'ELEMENTO CON 
// UL DIRETTAMENTE DISCENDENTI, NON I "SOTTO FIGLI"
$('ul > li');

Selettore parent child (spazio e discendente)

// SELEZIONA TUTTI GLI SPAN DIRETTAMENTE VICINI AD UN DIV
$('div + span')

<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>No</span>

// SELEZIONA TUTTI GLI SPAN FRATELLI MA ANCHE NON DIRETTAMENTE ADIACENTI
$('div ~ span')
<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>Anche</span>

Selettore adiacenza ( + e tilde)

I Selettori

$("a[target='_blank']"); // SELEZIONA TUTTI I LINK CHE SI APRONO IN NUOVE FINESTRE

$("a[title^='nuova']"); // SELEZIONA I LINK CON TITOLO CHE INIZIA PER "nuova"

$("a[title$='pagina']"); // SELEZIONA I LINK CON TITOLO CHE FINISCONO PER "pagina"

Selettori per attributi

$("#menu li:first-child"); // SELEZIONA TUTTI IL PRIMO LI NEL MENU

$("#menu li:last-child"); // SELEZIONA TUTTI L'ULTIMO LI NEL MENU

$("#menu li:even"); // SELEZIONA TUTTI I LI PARI

$("#menu li:odd"); // SELEZIONA TUTTI I LI DISPARI

$("#menu li:eq(3)"); // SELEZIONA IL TERZO LI NEL MENU

Filtri sui selettori

I Selettori

$("div").find('a'); // SELEZIONA TUTTI I LINK DENTRO AI DIV

$("li").parent(); // SELEZIONA L'ELEMENTO PADRE DIRETTO

$("li").closest('div'); // SELEZIONA IL DIV PARENTE PIU' PROSSIMO

$("li").next(); // SELEZIONA L'ELEMENTO SUCCESSIVO

$("li").prev(); // SELEZIONA L'ELEMENTO PRECEDENTE

Ricerca e utility

Metodi sui selettori

$("#menu li").length; // RESTITUISCE IL NUMERO DI LI 

$("#menu li").each(function () {
     let id = this.id; 
});

// RESTITUISCE L'ATTRIBUTO HREF
$("a#mioLink").attr("href");

// IMPOSTA L'ATTRIBUTO HREF SUL ELEMENTO CON ID mioLink
$("a#mioLink").attr("href", "http://www.google.com");

// RIMUOVERE UN ATTRIBUTO DA UN ELEMENTO HTML
$("#menu li a").removeAttr("target");

// METODO DI CONTROLLO CHE RITORNA TRUE SE L'ELEMENTO HA UNA SPECIFICA CLASSE
$("a").hasClass('miaClasse');

// AGGIUNGI UNA CLASSE
$("a").addClass('miaClasse');

// RIMUOVI UNA CLASSE
$("a").removeClass('miaClasse');

// AGGIUNGE UNA CLASSE SE NON PRESENTE, ALTRIMENTI LA TOGLIE
$("a").toggleClass('miaClasse');

Manipolare il contenuto

<p>testo del <strong>paragrafo</strong></p>

// TEXT RESTITUISCE SOLO IL TESTO, GIà LAVORATO
$("p").text(); // "testo del paragrafo"

// HTML RESTITUISCE IL CONTENUTO IN FORMATO HTML
$("p").html(); // "testo del <strong>paragrafo</strong>"

// INSERISCE UN NUOVO TESTO NEL PARAGRAFO
$("p").text("Nuovo testo");

// INSERISCE UN NUOVO HTML NEL PARAGRAFO
$("p").html("Nuovo testo con <strong>HTML</strong>");

Manipolare i CSS

$("a").css("color"); //restituisce il colore esadecimale del primo elemento link
$("a").css("color","#FF0000"); //imposta il colore dei link


$("a").css({
    "color" : "#FF0000", //imposta il colore
    "display" : "block" // imposta la visualizzazione
});

Dimensione e posizione

// RESTITUISCE LA LARGHEZZA IN PIXEL
$("a").width();

// RESTITUISCE L'ALTEZZA' IN PIXEL
$("a").height();

// RESTITUISCE LA LARGHEZZA IN PIXEL, INCLUSO IL PADDING 
// MA NON IL BORDO E IL MARGINE
$("a").innerWidth();

// RESTITUISCE L'ALTEZZA' IN PIXEL, INCLUSO IL PADDING 
// MA NON IL BORDO E IL MARGINE
$("a").innerHeight();

// RESTITUISCE LA LARGHEZZA IN PIXEL, INCLUSO IL PADDING 
// E IL BORDO MA NON IL MARGINE
$("a").outerWidth();

// RESTITUISCE L'ALTEZZA' IN PIXEL, INCLUSO IL PADDING 
// E IL BORDO MA NON IL MARGINE
$("a").outerHeight();

// RITORNA UN OGGETTO CON LA DISTANZA DA SINISTRA E 
// DALL'ALTO DELL'ELEMENTO RISPETTO AL DOCUMENTO
$("a").offset();

// COME OFFSET; MA LE DISTANZE SONO RELATIVE AL CONTENITORE
$("a").position();

// TROVA O IMPOSTA SCROLL DELL'ELEMENTO RISPETTO AL DOCUMENTO
$("a").scrollTop();
$("a").scrollLeft();

Gestione degli eventi

let el = document.getElementById('mioID');
el.addEventListener('click', () => {
  alert('CIAO!');
});

$('#mioID').on('click', () => {
    alert('CIAO!');
});

$(document).ready( function() {
    alert('DOM CARICATO');
});

Effetti di base

// MOSTRA IL BLOCCO SE NASCOSTO
$('.blocco').show();

// MOSTRA IL BLOCCO SE NASCOSTO, MA CON UN ANIMAZIONE PIU' LENTA
$('.blocco').show('slow');

// NASCONDI IL BLOCCO SE NASCOSTO
$('.blocco').hide();

// NASCONDI IL BLOCCO SE NASCOSTO, MA CON UN ANIMAZIONE PIU' LENTA
$('.blocco').hide('slow');

// NASCONDE/MOSTRA UN ELEMENTO CON UN ANIMAZIONE SULL'ALTEZZA
$('.blocco').slideToggle();

// MOSTRA UN ELEMENTO LAVORANDO SULL'OPACITA'
$('.blocco').fadeIn();

// NASCONDI UN ELEMENTO LAVORANDO SULL'OPACITA'
$('.blocco').fadeOut();

Animazioni

// ANIMATE PERMETTE DI APPLICARE UNA SERIE DI PROPRIETA' CSS
// DECIDENDO IL TIMING ED AVENDO LA POSSIBILITà DI 
// ESEGUIRE UNA CALLBACK ALLA FINE DELL'ANIMAZIONE
$("#box").animate({
	"borderWidth" : "4px", //bordo a 4 pixel
	"width" : "+=20px" //aumenta la larghezza di 20 pixel
	},
	"slow", //animazione lenta
	"linear", //andamento lineare
	function () {
		//funzione di callback
		alert("Animazione conclusa!");
	}
);

AJAX

// AJAX E' UNA FUNZIONE CHE CI PERMETTE DI EFFETTUARE
// CHIAMATE XHR IN MODO MOLTO SEMPLICE

$.ajax({
    url : 'dati.php',
    data : {
        limit: 10,
        offset: 0
    },
    complete: function (righe, stato) {
        for (i=0; i < righe.length; i++) {
            let riga = righe[i];
            $("<tr/>")
              .append("<td>" + riga.colonna1 + "</td><td>" + riga.colonna2 + "</td>")
              .appendTo("#tabella");
        }
    }
});

Esercizi

1) Realizzare il gioco del memory utilizzando una tabella HTML, usare le funzionalità di jQuery per realizzarlo

 

2) Pagina Web ( HTML / CSS / JS ) con:

  • hamburger menu con animazione

  • comparsa di menù laterale

  • carosello (flickity / slick)

  • lista delle materie / corsi filtrate con isotope.js

NPM e YARN

SASS

GULP

WEBPACK

Made with Slides.com