jQuery ajax chiamate asincrone

jQuery ajax chiamate asincrone

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 i dati che ci restituisce l’API opportunamente impostata:

Tra tutte le proprietà, prestiamo attenzione alle coordinate, al tempo ed alla temperatura in quanto sono quelle che ci serviranno.

jQuery ajax chiamate asincrone – esempio

L’esempio che vogliamo realizzare è dunque questo:

Una casella di input con la possibilità di inserire il nome della città ed un pulsante che al click calcola i dati che ci servono.

jQuery ajax chiamate asincrone – implementazione

Per l’implementazione pensiamo dapprima alla semplice pagina html, inserendo una casella di input, un pulsante e un container dove verranno visualizzati i dati.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>

  <input type="text" id="citta" placeholder="inserisci la città">
  <button id="meteo">Meteo</button>

  <div class="container">
     <div>LON: <span id="dati-lon"></span></div>
     <div>LAT: <span id="dati-lat"></span></div>
     <div>Tempo: <span id="tempo"></span></div>
     <div>Temperatura: <span id="temperatura"></span></div>
  </div>

  <script src="js\script.js" charset="utf-8"></script>

</body>
</html>

Realizziamo adesso la chiamata asincrona utilizzando il metodo ajax in jQuery.

Al clic sul pulsante meteo, prendiamo quanto scritto nella casella di input e lo memorizziamo in una variabile, ad esempio di nome citta.

Andiamo poi a creare una variabile url in cui inseriamo come valore della chiave q, la variabile appena ricavata. Chiaramente al posto di codice-key, inserite il codice che vi è stato fornito da openweather.

Richiamiamo dunque la chiamata asincrona ajax sull’url così definito. Se la chiamata ha successo, visualizziamo i dati che ci servono nella pagina html, utilizzando semplicemente i selettori jQuery.

Convertiamo la temperatura in gradi Celsius, in quanto quella fornita è in gradi Kelvin.

Ecco dunque il codice completo in jQuery della chiamata ajax asincrona:

$(document).ready(function(){
  $('#meteo').click(function(){
    var citta = $('#citta').val();
    
    var url = 'https://api.openweathermap.org/data/2.5/weather?q='+citta+'&appid=codice-key';

    $.ajax({
        url: url,
        method: 'GET',
        success: function(risposta) {
          $('#dati-lon').text(risposta.coord.lon);
          $('#dati-lat').text(risposta.coord.lat);
          $('#tempo').text(risposta.weather[0].main);
          var temp = risposta.main.temp;
          temp = Math.round(temp - 273);
          $('#temperatura').text(temp);

          }
        },
        error: function() {
          console.log('Si è verificato un errore');
        }
      });
      });
});

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF

Esempio di chiamata AJAX

Esempio di chiamata AJAX

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 formati JSON che possiamo andare a manipolare per i nostri scopi. In particolare ci dà il codice ISO dello Stato ed il nome.

json api

Esempio di chiamata AJAX

Utilizzando quest’API dunque realizziamo una pagina html che consente di selezionare il codice ISO che rappresenta uno stato e dunque visualizza il codice e il nome dello Stato corrispondente.

Ecco l’esempio completo di ciò che vogliamo realizzare: filtra-Stato.

Esempio di chiamata AJAX – implementazione

Lato html realizziamo quindi una semplice pagina con una select che conterrà tutti i codici ISO degli Stati ed un container che conterrà il nome dello Stato ed il relativo codice ISO.

Per realizzare l’esercizio utilizziamo anche HandleBars, strumento utile per la creazione di template dinamici.

Inseriamo poi due template da clonare:

entry-template che conterrà il codice che vogliamo inserire nel container con i segnaposti del nostro oggetto.

– ed elenco che servirà a visualizzare una casella di testo con tutti le voci.

Ecco dunque il codice HTML completo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
<!--qui inserisco in automatico i codici degli Stati -->
  <select id="sigle"></select>

<!--qui inserisco in automatico il codice dello Stato e il nome -->
  <div class="container"></div>

<!--template che verrà inserito all'interno del container -->
  <script id="entry-template" type="text/x-handlebars-template">
    <div class="stato {{isocode}}">
      <span>{{isocode}}</span>
      <h3>{{country}}</h3>
    </div>
  </script>

<!--template che verrà inserito all'interno dell'elenco-->
  <script id="elenco" type="text/x-handlebars-template">
    <option value="{{isocode}}">{{isocode}}</option>
  </script>

  <script src="js\script.js" charset="utf-8"></script>

</body>
</html>

Continuiamo con il nostro esempio di chiamata AJAX sviluppando adesso lo script.

Utilizziamo dunque il metodo $.ajax() per effettuare la chiamata all’API libera utilizzando GET.

AJAX riconosce i dati in formato JSON e dunque il primo parametro passato all’interno della funzione success, nel nostro caso risposta, restituisce un oggetto.

Se la chiamata ha successo, dunque, visualizziamo i dati contenuti nella proprietà con chiave results. Analizzando questa chiave results notiamo che contiene un array di oggetti. Quindi, per leggere ciascun elemento, realizzo una funzione leggiDati in cui scorro tutto l’array e per ogni elemento faccio un clone con Handlebars.

Tramite handlebars dunque creo e compilo i template, aggiungendo i dati desiderati.

Dopo aver creato la funzione la richiamo sull’array riposta.result.

Realizzo poi una funzione per l’ordinamento dell’array, basato sulla chiave dell’oggetto, così come avevamo visto in questa lezione: ordinare i dati di un oggetto.

Richiamo dunque la funzione leggiDati sull’array ordinato.

Per creare il filtro con le sigle degli stati possono semplicemente nascondere gli elementi che hanno la classe stato e visualizzare gli elementi che hanno la stato stato e la provincia giusta.

Ecco dunque il codice completo dell’esempio di chiamata AJAX:

$(document).ready(function() {
  $.ajax(
    {
      'url': 'https://apiv3.iucnredlist.org/api/v3/country/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee',
      'method': 'GET',
      'success': function(risposta){		
	  var ordinato = risposta.results.sort(maggiore);
	  leggiDati(ordinato);
      },
      'error':function(){
         alert('errore!');
       }
     }
   );

   $('#sigle').click(function(){
	var filtro = $(this).val();
	console.log(filtro);
	$('.stato').hide();
	$('.stato.'+ filtro).show();
   });

});


function leggiDati (data){
	var source = $('#entry-template').html();
	var template = Handlebars.compile(source);

	var source2 = $('#elenco').html();
	var template2 = Handlebars.compile(source2);

	for (var i = 0; i < data.length; i++){
		var elemento = data[i];
		var html = template(elemento);
		$('.container').append(html);

		var html2 = template2(elemento);
		$('#sigle').append(html2);
	}
}

function maggiore(a,b) {
  if (a.isocode < b.isocode){
    return -1;
  }
  else if (a.isocode > b.isocode){
    return 1;
  }
  return 0;
}

In questa lezione abbiamo implementato un semplice esempio di chiamata AJAX verso un’API disponibile senza token-key.

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF

AJAX jQuery e JSON

AJAX jQuery e JSON

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 all’esempio inerente la creazione della chiamata AJAX per i file JSON, realizzata in JavaScript: AJAX e JSON.

Esempio utilizzando AJAX jQuery e JSON

Dunque creiamo lato html questo semplice codice, composto da un pulsante che consente di inviare dei dati e da un div che consente di visualizzare i dati json.

<div id="dati-file"></div>
<button type="button" id="load">Carica dati</button>

Dopo, lato jQuery, creo una chiamata AJAX al file JSON caricato sul server web.

Questo file contiene le seguenti informazioni in formato stringa che il metodo provvede direttamente a trattare come oggetto.

{
"marca": "Fiat",
"modello": "500",
"colore": "bianco",
"alimentazione": "benzina",
"anno": "2010"
}

Ecco dunque il link al file: https://www.codingcreativo.it/json-ex/auto.json

Per il corretto funzionamento non dimentichiamo, inoltre, di inserire nella pagina html il link alla cdn jQuery:

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

Inseriamo anche il link al nostro script che andremo a creare.

Quindi utilizzeremo innanzitutto il metodo affrontato nella lezione precedente $.ajax e impostiamo l’url e i parametri method, success ed error.

Success è la funzione che verrà eseguita in caso di successo della chiamata a cui passiamo come parametro risposta che rappresenta i dati restituiti dal server web. Risposta è dunque in questo caso l’oggetto restituito in caso di successo. Di conseguenza, per richiamare le proprietà dell’oggetto basta seguire la notazione utilizzata per gli oggetti JavaScript.

Error invece verrà eseguita in caso di errore, visualizzando semplicemente il messaggio: ‘Si è verificato un errore‘.

Ecco di seguito il codice completo realizzato utilizzando AJAX jQuery e JSON:

$(document).ready(function(){
  $('#load').click(function (){
    $.ajax({
      url: 'https://www.codingcreativo.it/json-ex/auto.json',
      method: 'GET',
      success: function(risposta) {
        var dati = risposta.marca + ' ' + risposta.modello + ' ' + risposta.colore + ' ' + risposta.alimentazione + ' ' + risposta.anno;
        $('#dati-file').html(dati);
      },
      error: function() {
        console.log('Si è verificato un errore');
      }
    });
    });
});

Prova l’esempio che utilizza AJAX jQuery e JSON

Lo stesso risultato si poteva ottenere con un ciclo for in. Quindi modifichiamo il codice in questo modo:

success: function(risposta) {
        for (k in risposta){
           var dati = risposta[k] + ' ';
            $('#dati-file2').append(dati);
        }
      },

Alcuni link utili

Tutorial jQuery

Tutorial JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Come creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Alcuni esempi con javascript alert

AJAX e jQuery

AJAX e jQuery

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 metodo jQuery.ajax o $.ajax

jQuery dispone del metodo $.ajax() che permette di effettuare una chiamata asincrona e anche di personalizzarla.

Questo metodo restituisce un oggetto jqXHR che contiene tutte le informazioni sull’oggetto Javascript XMLHttpRequest originale.

Sintassi del metodo

$.ajax ({url[, settings]})

Quindi all’interno delle parentesi si possono specificare dei parametri, tra cui l’url.

Studiamo i principali parametri che è possibile impostare in questo metodo, in quanto sono veramente tantissimi. Per un maggiore approfondimento rimando inoltre al link del sito ufficiale: metodo jquery.ajax.

url

L’url rappresenta il percorso del file richiesto, cioè la nostra risorsa.

settings

Valore opzionale che rappresenta un insieme di coppie/valore, le quali caratterizzano la richiesta AJAX in jQuery, infatti consentono di specificare numerosi parametri tra cui:

method: rappresenta il metodo HTTP che serve per la richiesta. Può avere questi valori: POST, GET oppure PUT. Mentre il valore di default è GET.

dataType: serve a specificare il tipo di dati che si riceve dal server web. I possibili valori sono: json, xml, txt, ecc.

success (data, textStatus, jqXHR): è una funzione che verrà eseguita in caso di successo della chiamata. I parametri opzionali che accetta sono tre, data che rappresenta i dati restituiti dal server, textStatus lo stato e l’oggetto jqXHR.

error (jqXHR, textStatus, errorThrown): è una funzione che verrà eseguita in caso di errore nella chiamata effettuata, ad esempio perché la risorsa non è accessibile. I parametri sono opzionali.

Esempio di chiamata AJAX con jQuery

Facciamo adesso un semplice esempio in cui applicheremo queste tecnologie.

Lato html inseriamo un div dove andremo a visualizzare i dati del documento da richiedere ad un server web.

<p>Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.</p>
<button type="button" id="load">Carica dati</button>
<div id="dati-file" style="background:yellow"></div>

Non dimentichiamo nella pagina html di inserire anche il link alla cdn jQuery:

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

Dopo, lato JavaScript, al click sul pulsante richiamiamo il metodo ajax dove, oltre alla url impostiamo il metodo al valore get, ed implementiamo le funzioni in caso di successo e di errore.

Ecco dunque l’esempio completo che utilizza la tecnologia AJAX e jQuery.

   $(document).ready(function(){
      $('#load').click(function (){
        $.ajax({
          method: "GET",
          // specifico la URL della risorsa da contattare
          url: "https://www.codingcreativo.it/ajax.txt",  
          // imposto l'azione in caso di successo
          success: function(risposta){
          //visualizzo il contenuto del file nel div htmlm
            $("#dati-file").html(risposta);
          },
          //imposto l'azione in caso di insuccesso
          error: function(stato){
            alert("Qualcosa è andato storto");
          }
        });
        });
    });

Prova l’esempio

Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.

In questa lezione abbiamo semplicemente introdotto il concetto di AJAX e jQuery, nella prossima lezione vederemo come interagire con i file JSON.

Alcuni link utili

Tutorial jQuery

Tutorial JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Alcuni esempi con javascript alert

jQuery slider

jQuery slider

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 di jQuery slider

Potete vedere l’esempio seguendo il link: slider immagini con jQuery (ho messo un po’ di immagini della mia città, voi mettete pure le immagini che preferite).

Scegliete 5 immagini qualsiasi e salvatele nella cartella images, chiaramente il numero delle immagini può essere superiore o inferiore.


Codice html per lo slider

Cominciamo a costruire la nostra pagina web partendo dal codice html. Inseriamo un livello (div) a cui assegniamo una classe di nome container che conterrà le nostre immagini dello slider. Quindi inseriamo le immagini utilizzando il tag figure a cui assegniamo la classe imageslide.

Poi inseriamo le frecce per scorrere lo slide. Daremo, in seguito, una formattazione con il foglio di stile per visualizzare le frecce ai lati delle immagini. Attenzione per avere la freccia verso sinistra ❮, dunque il pulsante prev dovete inserire questo carattere speciale &#10094 seguito dal ; mentre per il carattere freccia destra ovvero il pulsante next ❯ dovete inserire &#10095 separato dal ;.

Infine creiamo il menù di navigazione a pallini (dot o punti) che di solito va in basso. Questo menù è utile perché agevola lo scorrimento delle immagini in maniera non sequenziale.

Ecco il codice html completo per creare il nostro semplicissimo jQuery slider.

<div class="container">
	<figure class="imageslide"><img src="images/modica.jpg"></figure>
	<figure class="imageslide"><img src="images/marzamemi.jpg"></figure>
	<figure class="imageslide"><img src="images/modica2.jpg"></figure>
	<figure class="imageslide"><img src="images/mare.jpg"></figure>
	<figure class="imageslide"><img src="images/stradina.jpg"></figure>
	<a class="prev">❮</a>
	<a class="next">❯</a>
</div>
<div class="pulsanti" style="text-align: center">
	<span class="dot" data-num='1'></span>
	<span class="dot" data-num='2'></span>
	<span class="dot" data-num='3'></span>
	<span class="dot" data-num='4'></span>
	<span class="dot" data-num='5'></span>
</div>

Adesso creiamo il foglio di stile esterno, a cui diamo ad esempio il nome di stile.css.

Quindi dobbiamo inserire il collegamento al foglio di stile, che andremo ad inserire, nella pagina html, magari prima della chiusura del tag head.

<link rel="stylesheet" type="text/css" href="style.css">


Codice CSS per lo slider

Dopo cominciamo a creare il foglio di stile, dando una formattazione adeguata.

Innanzitutto diamo margine 0 al body, in modo che le immagini risultino attaccate ai bordi.

Inoltre è importante impostare questa classe:

.imageslide{
display: none;
}

Altrimenti le immagini verrebbero visualizzate una sotto l’altra. Con questa proprietà le rendo invisibili e successivamente tramite il codice jQuery ne permetto la visualizzazione.

Infatti successivamente con $(‘.imageslide:first’).show(); mostro la prima immagine.

Le frecce prev e next sono posizionate a una distanza dall’alto del 35%, con larghezza automatica, dimensione del font di 60 pixel, di colore grigio e con una trasparenza (opacity 0.7). Inoltre facciamo in modo che quando siamo sulle frecce compare la manina del mouse impostando cursor: pointer.

Poi, per posizionare la freccia destra dò un margine di soli 4 pixel dal bordo destro.

Lo stesso discorso per il menù di navigazione a pallini (dot). Creiamo i pallini di altezza e larghezza 18 px, utilizziamo la proprietà border-radius: 50% per creare gli angoli arrotondati (altrimenti avremmo dei quadrati) e li coloriamo di grigio chiaro: #ccc.

Infine la classe grigio, a cui diamo un colore grigio scuro e una trasparenza, verrà applicata ai dot quando l’immagine relativa è selezionata.

Imposto anche le media queries per le diverse visualizzazioni.

body{
	margin: 0;
}

.imageslide{
	display: none;
}

figure { margin:0;}

img{
	width: 100%;
	height:auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 18px;
  color: #d2d2d2;
  font-size: 60px;
  opacity: 0.7;
}

.next {
  right: 4px;
}

.pulsanti{
	width: 100%;
	position: absolute;
	height:20px;
}

.dot{
	cursor:pointer;
	height: 18px;
	width: 18px;
	margin: 8px;
	background-color: #ccc;
	border-radius: 50%;
  	display: inline-block;
}
.grigio{
	background-color: #1c1818;
	opacity: 0.8;
}

@media (min-width: 768px) and (max-width: 1024px) {
.prev, .next {
  top: 20%;
  width: auto;
  font-size: 50px;
}

}

@media (min-width: 481px) and (max-width: 767px) {
.prev, .next {
  top: 10%;
  width: auto;
  font-size: 40px;
}
}

@media (max-width: 480px) {	
.prev, .next {
  top: 4%;
  width: auto;
  padding: 6px;
  font-size: 40px;
}

.dot{
	height: 12px;
	width: 12px;
	margin: 5px;
}
}


Codice jQuery

Adesso realizziamo lo script per il nostro jQuery slider.

Possiamo creare un file a parte, ad esempio di nome slider.js e poi nella pagina html lo inseriamo insieme alla libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script src="slider.js"></script>

Come dicevamo con $(‘.imageslide:first’).show(); mostro la prima immagine.

Impostiamo una variabile current_img, che rappresenta l’indice delle nostre immagini, che parte da 0 e si ferma a 4, perché ho deciso di inserire 5 immagini.

Dopo selezioniamo il primo dei pallini (punti- dot) in basso e gli diamo un colore grigio scuro tramite il metodo addClass(): (‘.pulsanti>span:first’).addClass(‘grigio’);

Infatti il primo dot rappresenta la prima immagine.

Dopo costruiamo la navigazione dei pulsanti in basso, facendo in modo che quando si clicca su di un pallino l’immagine precedente si nasconde con il metodo hide() e quella selezionata compare con effetto dissolvenza grazie al metodo fadeIn().

Per selezionare l’indice corrente utilizzo il metodo eq().

Allo stesso modo ci costruiamo i pulsanti next e prev, facendo attenzione all’indice dell’immagine. Infatti, se l’indice è minore di 4 vado avanti nella sequenza, altrimenti lo riporto a 0.

Analogamente costruiamo il pulsante prev.

Ecco lo script completo.

$(document).ready(function(){
	$('.imageslide:first').show();
	var current_img=0;
	$('.pulsanti>span:first').addClass('grigio');
	
	$('.dot').click(function(){
		$('.dot').eq(current_img).removeClass('grigio');
		$(this).addClass("grigio");
		$('figure').eq(current_img).hide();
		current_img=+$(this).data('num')-1;
		$('figure').eq(current_img).fadeIn();
	});
	
	$('.next').click(function(){
		$('.imageslide').eq(current_img).hide();
		$('.dot').eq(current_img).removeClass('grigio');
		if(current_img<4)
			current_img++;
		else
			current_img=0;
		$('.imageslide').eq(current_img).fadeIn();
		$('.dot').eq(current_img).addClass('grigio');
	});
	
	$('.prev').click(function(){
		$('.imageslide').eq(current_img).hide();
		$('.dot').eq(current_img).removeClass('grigio');
		if(current_img>0)
			current_img--;
		else 
			current_img=4;
		$('.imageslide').eq(current_img).fadeIn();
		$('.dot').eq(current_img).addClass('grigio');
	});

});

Chiaramente questo è un esempio molto semplice di jQuery slider, più avanti vedremo altri esempi.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

jQuery eq()

jQuery eq()

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 un elenco puntato, volessi selezionare la voce dell’elenco che indica jQuery potrei utilizzare il metodo eq() specificando l’indice 2.

Ricordiamo infatti che l’indice parte da zero.

<ul>
   <li>Scratch</li>
   <li>Algobuild</li>
   <li>jQuery</li>
   <li>Algobuild</li>
</ul>

Posso dunque utilizzare questo metodo:

$("li").eq(2);

L’indice può essere anche negativo, ma in questo caso si partirà a contare dal basso e non dall’alto e si inizia da -1 (consultate il secondo esempio di questa lezione).


Esempio di utilizzo di jQuery eq()

Facciamo quindi un esempio completo per capire come applicare questo metodo.

Guardate dunque l’elenco sotto, noterete che ho applicato alla voce jQuery dell’elenco una formattazione diversa.

  • Scratch
  • Algobuild
  • jQuery
  • Algobuild


Innanzitutto includiamo la libreria jQuery:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo inseriamo, in un punto qualunque della pagina, il nostro elenco a cui assegniamo un id. Ciò è importante perchè l’id mi servirà quando userò il selettore nella funzione jQuery.

<ul id="argomenti">
   <li>Scratch</li>
   <li>Algobuild</li>
   <li>jQuery</li>
   <li>Algobuild</li>
</ul>

Infine creo la mia semplicissima funzione in cui utilizzo il metodo eq() e il metodo css(). Notate che come selettore ho utilizzato l’id argomenti e la voce li dell’elenco puntato. Ho utilizzato l’id per distinguere l’elenco da altri possibili elenchi presenti nella pagina.

<script type="text/javascript">
$(document).ready(function(){
  $("#argomenti>li").eq(2).css("background-color", "#ffff00");
});
</script>


Secondo esempio d’uso del metodo eq()

Facciamo un secondo esempio utilizzando un indice negativo.

Guardate quindi l’elenco sotto, noterete che www.codingcreativo.it è di colore blu.

Coding Creativo

Blog sul coding

www.codingcreativo.it


Innanzitutto inserite il codice html:

<div class="testo">
<p>Coding Creativo</p>
<p>Blog sul coding</p>
<p>www.codingcreativo.it</p>
</div>

Poi inserite una semplicissima funzione che utilizza i metodi eq() e css().

<script type="text/javascript">
$(document).ready(function(){
  $(".testo>p").eq(-1).css("color", "blue");
});
</script>

Ovviamente questi sono solo dei semplici esempi d’uso del jQuery eq() method presentati a scopo didattico.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript