JQuery è un insieme di librerie che sono state scritte in linguaggio JavaScript e sono utilizzate per realizzare applicazioni web concise ed efficienti
In questa lezione parleremo del metodo di jQuery ajax e di come gestire le chiamate asincrone. Realizzeremo un esempio utilizzando un’API per il meteo free a cui però bisogna richiedere un’api key. Troviamo su questo sito openweathermap l’API da utilizzare. Una volta ottenuta l’API key possiamo utilizzarla all’interno della nostra chiamata asincrona con AJAX. Ecco … Leggi tutto
Realizziamo un semplice esempio di chiamata AJAX utilizzando delle API libere. L’API free che andremo ad utilizzare è questa: https://apiv3.iucnredlist.org/api/v3/country/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee Questa API può essere utilizzata senza chiedere nessuna apy-key, dunque si può copiare direttamente il link indicato sopra nel parametro url da inserire nel metodo $.ajax che andremo ad utilizzare. L’API restituisce dei dati in … Leggi tutto
In questa lezione utilizzeremo le tecnologie AJAX jQuery e JSON per realizzare una chiamata asincrona ad un file presente sul server. Dunque proveremo a leggere i dati da un file JSON. Inoltre, per chi volesse approfondire l’argomento inerente i file JSON, indico un semplice tutorial che ho creato: Introduzione a JSON. Allego anche il link … Leggi tutto
AJAX e jQuery sono tecnologie utili per implementare delle chiamate asincrone, in maniera piuttosto semplice. Abbiamo già parlato di AJAX in questa lezione: Introduzione ad AJAX e abbiamo visto come creare chiamate asincrone utilizzando JavaScript. Inoltre abbiamo fatto degli esempi su come leggere da un file presente su un server web, utilizzando l’oggetto xmlhttprequest. Il … Leggi tutto
In questo tutorial impareremo a creare un semplicissimo jQuery slider. Realizzeremo questo slider utilizzando i metodi che abbiamo studiato in precedenza, ma più avanti vedremo altri metodi con cui poter realizzare uno slider in jQuery. Quindi i metodi che ci serviranno per questo esempio sono: fadeIn(), fadeOut(), eq(), click(), addClass() e removeClass(). Esempio di utilizzo … Leggi tutto
jQuery eq() method è un metodo che serve ad individuare elementi specifici all’interno di un set di elementi. All’interno del metodo eq() si specifica infatti un indice che indica la posizione dell’elemento che vogliamo selezionare. La sintassi è dunque questa: $(selettore).eq(indice) dove indice rappresenta un numero intero. Quindi se, data una serie di voci di … Leggi tutto
jQuery fadeIn() method serve, non solo a mostrare un elemento, ma anche ad applicare un effetto dissolvenza. Questo metodo infatti è molto simile al metodo show(), così come il metodo fadeOut() è simile a hide(). La sintassi è dunque la seguente: $(selettore).fadeIn(velocità, modalità, funzione) $(selettore).fadeOut(velocità, modalità, funzione) Ricordiamo inoltre che i parametri indicati sono opzionali … Leggi tutto
In questa lezione studieremo il metodo jQuery hover(). Nella scorsa lezione abbiamo studiato i metodi mouseover(), mouseout(), mousemove(), mouseenter() e mouseleave(), cercando di capirne le differenze d’uso. Il metodo hover() specifica due funzioni da eseguire quando il mouse passa sopra l’elemento e quando si allontana. La prima funzione specifica cosa succede quando il puntatore del … Leggi tutto
Altri metodi utilizzati per gestire il movimento del mouse nella pagina che vi spiegherò sono mouseenter(), mousemove() e mouseleave(). Questi metodi hanno la stessa sintassi dei metodi precedenti, ma hanno scopi differenti. Esempio con utilizzo del metodi mouseenter(), mousemove() e mouseleave() Fate dunque la prova a passare sopra il testo inserito sotto, comparirà del testo … Leggi tutto
jQuery mouseover() method – In questa lezione studieremo il metodo mouseover() che si verifica quando, come suggerisce già il nome, passiamo su un elemento di una pagina web con il nostro mouse. Quindi potremmo ad esempio desiderare di mostrare una descrizione quando passiamo su un’immagine o su un titolo, ecc… La sintassi di questa funzione … Leggi tutto
Realizziamo una jQuery Gallery, ovvero una galleria con jQuery per lo scorrimento delle immagini. Per realizzare un semplice esempio di jQuery gallery utilizzeremo il metodo attr(). Successivamente utilizzeremo altri metodi per creare gallerie più accattivanti, quindi considerate questo esempio puramente didattico. Abbiamo già realizzato in precedenza una galleria semplicemente utilizzando JavaScript a questo link: galleria … Leggi tutto
In questa lezione studieremo il jQuery attr() method, un semplice metodo per assegnare un attributo al valore selezionato. La sintassi per ritornare un valore di un attributo è questa: $(selettore).attr(attributo) Quindi un possibile uso potrebbe essere questo: $(h1).attr(“id”) in cui mi ritorna il valore id del tag h1. La sintassi per impostare il valore di … Leggi tutto
jQuery removeClass() method permette di rimuovere una classe (remove class) da un elemento selezionato. La sintassi è dunque questa: .removeClass (nome_classe, funzione (index, classe_corrente)) Dove nome_classe e funzione hanno le stesse caratteristiche del metodo addClass(), che abbiamo studiato nella lezione precedente: addClass(). Esempio di utilizzo di jQuery removeClass() Analizziamo un primo esempio di utilizzo del … Leggi tutto
jQuery addClass() method – Questo metodo aggiunge una classe (add class), o anche più di una, ad uno o più elementi di una pagina web. Quindi, ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa, dopo un determinato evento, lo posso fare utilizzando il metodo addClass(). La sintassi è dunque questa: addClass(nome_classe, … Leggi tutto
jQuery css() method è il metodo che serve a dare una formattazione ad uno o più elementi di una pagina web. Con jQuery css() infatti posso dare, ad esempio, un colore di sfondo ad un paragrafo oppure un colore di testo ad un titolo e così via. La sintassi è dunque molto semplice: css(“nome_proprietà“). Dove … Leggi tutto
Oggi studieremo il jQuery show() method, che consente di mostrare uno o più elementi. Nelle lezioni precedenti abbiamo studiato il metodo hide() e slideToggle(). La sintassi del metodo è questa: selettore.show(velocità, modalità, funzione) I parametri velocità, modalità e funzione sono uguali ai due metodi precedenti, quindi chiaramente non sto qui a ripetervi le stesse cose. … Leggi tutto
jQuery hide() method – In questa lezione studieremo questo metodo che serve a nascondere uno o più elementi in una pagina web. Metodo jQuery hide() come si utilizza Il metodo hide(), come detto prima, nasconde uno o più elementi. Per chi ha dimestichezza con i CSS3, ha la stessa funzionalità della proprietà display:none. La sintassi … Leggi tutto
In questo articolo vedremo come utilizzare jQuery document ready. Per specificare che le funzioni, con le relative istruzioni, devono essere eseguite dopo il caricamento della pagina, si utilizza questa funzione: $(document).ready(function() { …. }); Infatti il metodo ready esegue il codice contenuto nella relativa funzione solo quando il documento è stato interamente caricato, ovvero quando … Leggi tutto