Cos’è jQuery, inclusione e sintassi base

Cosa è jQuery?

jQuery è una libreria di funzioni (framework) javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework consente ai Designer di sviluppare pagine web con funzionalità interattive in maniera semplice. L'obiettivo è gestire al meglio gli aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall' interprete javascript del browser.

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script> (si noti che il tag <script> dovrebbe essere all'interno della sezione <head>). Per ottenere la libreria: http://jquery.com/download/

Da notare che:

  1. Production version - questa versione è per il vostro sito web di produzione il codice è minimizzato e compresso;

  2. Development version - versione di sviluppo e di test, il codice è facilmente leggibile;

  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi locali:

<head>

<script src="jquery-3.3.1.min.js"></script>

<script src="mioscript.js"></script>

</head>

Con percorsi remoti:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>


Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento ( Leggere qui per maggiori dettagli).

Qual è la sintassi di base?

$(selector).action()

  1. Il $ per definire jQuery

  2. Un (selector) per "query (trovare)" elementi HTML

  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato

Per esempio:

  • $(selector).action();

  • jQuery(‘p’).css(‘color’, ‘blue’);

  • $(‘p’).css(‘color’, ‘blue’);

  • $(this).hide();

  • $("p").hide();

  • $(".test").hide();

  • $("#test").hide();

Ovvero: selettore, azione, parametri.

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.

Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.

  1. http://code.jquery.com/jquery-1.12.1.min.js

  2. http://code.jquery.com/ui/1.12.1/jquery-js

  3. http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-css

In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

Se invece usiamo il CDN di Google:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Cosa sono i Widget di jQuery UI?

Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.

jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.

  • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.

  • Autocomplete: suggerisce parole mentre l'utente sta scrivendo.

  • Button: inserisce pulsanti personalizzabili

  • Datepicker: Visualizza un calendario

  • Dialog: visualizza finestre di dialogo personalizzabili

  • Menu: crea menu nidificabili.

  • Progressbar: consente di visualizzare un indicatore di stato

  • Slider: Visualizza diapositive accessibili tramite tastiera

  • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.

  • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.

  • Tooltip: mostra informazioni addizionali.

Come inserisco un accordion?

<div id="accordion">

<h3><a href="#">Primo headerheader</a></h3>

<div>First contenuto</div>

<h3><a href="#">Secondo header</a></h3>

<div>Secondo contenuto</div>

</div>


A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget

$("#accordion").accordion();

L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:

  • active : (selettore, jQuery, elemento DOM, numero, booleano – 'first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.

  • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.

  • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.

  • Per esempio:

<script>

$( function() {

$( ".accordion" ).accordion({

collapsible: true,

active: false,

heightStyle: "content"

});

} );

</script>

Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

Come inserisco un tabulatore?

<div id="tabs">

<ul>

<li><a href="#fragment-1"><span>Uno</span></a></li>

<li><a href="#fragment-2"><span>Due</span></a></li>

<li><a href="#fragment-3"><span>Tre</span></a></li>

</ul>

<div id="fragment-1">

<p>Testo 1</p>

</div>

<div id="fragment-2">

<p>Testo 2</p>

</div>

<div id="fragment-3">

<p>Testo 3</p>

</div>

</div>


A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $("#tabs"). tabs ();

Cosa è il Themeroller/temi di jQuery UI?

la struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.

Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.

N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

Cosa sono i Plugin jQuery?

In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:

  1. Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin

  2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.

Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

Come integro il plugin Colorbox?

<link rel="stylesheet" href="colorbox.css" />

<script src="../jquery.colorbox-min.js"></script>

Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.


Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel="gipso"

per poi utilizzare il selettore di attributi di jQuery per trovari tali immagini. $(document).ready(function(){

//Examples of how to assign the Colorbox event to elements

$(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, });

$(".flora").colorbox();

});



Installare Wordpress in 4 semplici passi il locale

#1 Installa e configura MAMP/XAMPP
MAMP/XAMPP permette di creare un server personale in locale. Questo pacchetto include Apache, MySql e PHP (necessari per l’installazione di WordPress).
Per prima cosa, visita il sito ufficiale MAMP/XAMPP e clicca Download. Sarà avviato il download di un pacchetto contenente MAMP/XAMPP. Terminato il download aprilo per avviare l’installazione di MAMP/XAMPP e completa i vari passaggi. Avvia MAMP/XAMPP.
In caso di problemi con le porte setta le “Preferences”: seleziona la tab “Ports” e digita nel campo “Apache Port:” il numero 80. Nel campo “MySQL Port:” digita invece “3306”.
Ora cerca la posizione della cartella dove caricherai i file che andranno a costituire il tuo sito (questa è detta root). La posizione default è Applications > MAMP > htdocs o C > XAMPP > htdocs. A questo punto, ti consiglio di provare a navigare all’interno della cartella htdocs, così da familiarizzare con la posizione della root del tuo sito.
Assicurarsi che i servizi MAMP/XAMPP Apache e MySQL siano correttamente avviati e digita localhost sul tuo browser.

#2 Crea il database per il tuo sito
Il primo passo per avere il tuo sito WordPress è il database; per crearlo usa phpMyAdmin; sul pannello di controllo phpMyAdmin, clicca “Databases” nel menu in alto.
Su questa nuova pagina, trovi una seziona chiamata “Create database”. All’interno del campo bianco digita un nome per il tuo database. Ti consiglio di usare un nome con lettere minuscole (non usare caratteri speciali). Lascia la selezione “Collation” nel menu a tendina così com’è. Digitato il nome, clicca “Create”.
Il tuo nuovo database apparirà ora nella lista di quelli disponibili.
Prendi nota del nome del database che hai creato; ne avrai bisogno fra poco per installare WordPress in locale.

#3 Carica i file core WordPress
Un sito WordPress è costituito da un database, che abbiamo già creato, e da una cartella di file “Core”.
Per scaricare la cartella contenente i file Core, visita il sito ufficiale WordPress: https://wordpress.org/
Terminato il download della cartella .zip, tasto destro per estrarla.
Ora naviga all’interno della cartella root che hai configurato precedentemente con MAMP/XAMPP (htdocs).
Quando ti trovi in htdocs, sposta al suo interno la cartella che hai appena scaricato ed estratto, la cartella si chiama wordpress; ti consiglio però di rinominarla con il nome che vuoi dare al tuo sito. Nel mio caso, la chiamerò sitolocale.
Arrivato a questo punto, sei pronto per l’installazione.

#4 Installazione e configurazione di WordPress
Apri una scheda nel tuo browser e digita nella barra di ricerca http://localhost/nomedeltuosito. Io digito quindi http://localhost/sitolocale.
A questo punto, si aprirà una schermata dove ti viene chiesto di configurare il file wp-config.php. Clicca “Iniziamo” per procedere con la configurazione.
Si aprirà un’altra pagina con dei campi da completare.
Nel campo “Nome database”, digita il nome che hai dato al tuo database, di cui hai preso nota qualche passo fa.
Nel campo “Nome utente”, digita root.
Nel campo “Password”, digita root.
Il campo “Host del database” è completato automaticamente con la voce localhost, mentre “Prefisso tabella” con la voce wp_. Questi due campi, in questo contesto locale, vanno bene così e non è necessario modificarli.
Quando hai terminato clicca “Invia”, aspetta qualche secondo e sulla nuova pagina clicca “Eseguire l’installazione”. Fatto questo, ti sarà richiesto di digitare le “Informazioni necessarie”: il Titolo del sito, il nome dell’utente, la password ed un indirizzo e-mail associato. Quando hai completato tutti i campi, clicca Installa WordPress. Dopo questo ultimo passaggio, vedrai un messaggio di congratulazioni e potrai fare il login nel tuo nuovo sito WordPress!

Questi sono tutti i passaggi per installare WordPress in locale utilizzando MAMP/XAMPP. Con un po’ di attenzione, non dovresti riscontrare grossi problemi nel seguire queste istruzioni ed in pochi minuti sarai pronto per iniziare a configurare il tuo sito WordPress.
Ora, per visualizzare il tuo sito, digita nella barra di ricerca del tuo browser: http://localhost/nomedeltuosito. Come prima, nel mio caso sarebbe quindi http://localhost/sitolocale.

Cos’è jQuery, inclusione e sintassi base

Cosa è jQuery? jQuery è una libreria di funzioni (framework) javascript , cross-browser destinata ad applicazioni web ...