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.
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');
}
});
});
});
In questa lezione parleremo del metodo map in JavaScript, utilizzato con gli array. Questo metodo crea un nuovo array con i risultati della chiamata di una funzione per ciascun elemento dell’array di partenza.
La sintassi è la seguente: nomearray.map(function)
Dove function può essere una funzione già esistente come ad esempio la funzione valore assoluto: Math.abs. Oppure può anche essere una funzione definita dall’utente.
Il metodo restituisce un nuovo array.
Inoltre si può indicare un valore opzionale nomearray.map(function, thisValue) che indica il valore da passare alla funzione da utilizzare come valore this. Altrimenti il valore passato sarà undefined.
Facciamo degli esempi d’utilizzo del metodo map().
map JavaScript – primo esempio
Applichiamo la funzione cubo a tutti gli elementi di un array.
In questo primo esempio creiamo innanzitutto un array di numeri.
Quindi implementiamo una funzione cubo che restituisce semplicemente il cubo di un numero. Dopo vogliamo applicarla a tutti gli elementi dell’array. Bene possiamo utilizzare proprio il metodo map sull’array di partenza.
Il risultato sarà un nuovo array dove ciascun elemento è stato elevato alla terza.
Ecco il semplice codice di esempio:
var numeri = [5,4,3,2,6,12];
function cubo(n) {
return n * n * n;
}
var cuboNumeri = numeri.map(cubo);
console.log(cuboNumeri);
Per semplicità visualizziamo il risultato sempre nella console del browser.
map JavaScript – secondo esempio
Trasformare un array di numeri in un array di stringhe con la parola pari o dispari.
In questo secondo esempio prendiamo un array di numeri.
Poi realizziamo una funzione che verifichi se un numero è pari oppure dispari. Se è pari facciamo ritornare la parola pari, se invece è dispari la parola dispari.
Dunque applichiamo con il metodo map questa funzione a ciascun elemento dell’array. Come risultato avremo un array dove al posto dei numeri comparirà il valore pari o dispari.
Ecco il codice completo dell’esempio che illustra il funzionamento del metodo map in JavaScript.
var numeri = [5,4,3,2,6,12];
console.log(numeri);
function pariDispari(n) {
if (n % 2 == 0) {
return 'pari';
}
return 'dispari';
}
var arrayStringa = numeri.map(pariDispari);
console.log(arrayStringa);
Al solito visualizziamo nella console l’array modificato.
Questi sono solo alcuni semplici esempi d’utilizzo del metodo map in JavaScript, più avanti vedremo altri campi di applicazione.
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.
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.
In questa lezione svilupperemo un algoritmo sui numeri primi in JavaScript.
Ricordiamo innanzitutto che un numero è primo quando ha due divisori, cioè 1 e se stesso.
La successione dei numeri primi comincia con 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, …
Anche in altri linguaggi di programmazione abbiamo sviluppato lo stesso algoritmo, potete guardare, se vi interessa, l’implementazione ai seguenti link:
Realizziamo un algoritmo sui numeri primi in JavaScript
Verificare se un numero preso in input è primo.
Per verificare se un numero è primo occorre utilizzare un divisore che di volta in volta si incrementa di 1.
In definitiva comincio a dividere il numero preso in input, prima per 1, poi per 2, poi per 3, ecc..
Chiaramente per poter fare questo devo utilizzare un ciclo, facendo incrementare il divisore di 1, dopo ogni iterazione.
Dunque se ad esempio il numero fosse 3 allora prima lo dividerei per 1, poi per 2 e poi per 3. Contemporaneamente posso contare i divisori utilizzando una variabile apposita, ad esempio di nome conta.
Se alla fine abbiamo trovato 2 divisori, cioè 1 ed il numero stesso, in tal caso la variabile conta varrà 2, allora il numero è primo. Altrimenti il numero non è primo.
Ma possiamo fare di meglio. Possiamo considerare che il divisore si può fermare alla metà del numero stesso in quanto è scontato che dividendo un numero per un valore maggiore della sua metà si ottiene un numero decimale. Quindi possiamo contare un solo divisore per definire che un numero è primo.
Dunque ecco una possibile soluzione all’algoritmo sui numeri primi realizzato in JavaScript:
var n = prompt('Inserisci un numero: ');
while (n < 0){
n = prompt('Inserisci un numero: ');
}
var div = 1;
var conta=0;
while(conta <= 1 && div <= n/2) {
if(n % div == 0) {
conta++;
}
div++;
}
if (conta == 1){
document.write('Il numero è primo ');
}
else {
document.write('Il numero non è primo ');
}
In questo algoritmo innanzitutto abbiamo controllato che l’utente inserisca un numero positivo con un ciclo while, allo stesso modo si poteva utilizzare anche il do while.
La condizione nel while che abbiamo inserito si ferma non appena la variabile count è uguale ad 1 e il divisore è arrivato alla metà del numero.
Conclusione
Chiaramente questa è solo una possibile soluzione dell’algoritmo sui numeri primi in JavaScript, proponete pure la vostra e discutiamone nei commenti sotto.
In questa lezione realizzeremo un semplice esempio di chiamate GET in AJAX con jQuery, utilizzando una semplicissima API che restituisce l’immagine di alcuni cani.
Un’API dog che potete trovare al seguente link: https://dog.ceo/dog-api/ e che non ha bisogno di nessuna API key per poterla utilizzare.
Chiamate GET in AJAX con jQuery – esempio
Creiamo, nella pagina html, una lista di razze di cani e, dopo aver cliccato su ogni voce facciamo comparire 5 foto del cane selezionato.
Quindi innanzitutto costruiamo la nostra pagina html dove inseriremo un elenco puntato con 5 razze di cane terrier.
Dopo inseriamo un div dove andremo ad inserire 5 immagini segnaposto in formato png.
Questo segnaposto verrà poi sostituito con l’immagine del cane utilizzando il selettore attr di jQuery.
Script di esempio per le chiamate GET in AJAX con jQuery
Ragioniamo su quello che occorre implementare.
Quando facciamo click sulle voci dell’elenco, dobbiamo innanzitutto ricavare il testo inserito nella voce cliccata, attraverso il metodo text. Memorizziamo questo valore nella variabile image.
Dopo, richiamiamo l’url inserendo il valore della variabile appena ricavata:
Poi utilizziamo il metodo ajax per effettuare la nostra chiamata GET e, se ha successo, richiamiamo la funzione leggiDati che abbiamo creato.
La funzione leggiDati, con un ciclo form seleziona semplicemente 5 immagini e le visualizza nella nostra pagina html, ricavando la posizione attraverso il metodo eq di jQuery.
Chiamate GET in AJAX con jQuery – Ecco dunque il codice completo:
$(document).ready(function() {
$('#scelta li').click(function(){
$('.cane').hide();
image = $(this).text();
console.log(image);
var url = 'https://dog.ceo/api/breed/terrier/'+image+'/images';
$.ajax(
{
'url': url,
'method': 'GET',
'success': function(risposta){
leggiDati(risposta.message);
},
'error':function(){
alert('errore!');
}
}
);
});
});
function leggiDati (data){
for (var i = 0; i < 5; i++){
var immagine = data[i];
$('.cane img').eq(i).attr('src', immagine);
console.log($('.cane img'));
}
}
Invece di copiare le immagini vuote nell’html si potrebbe utilizzare handlebars per clonare dei template oppure il metodo clone di jQuery.
Dato che le immagini sono contenute in un array, posso andare a realizzare un ciclo for e creare un mio oggetto che chiamo context con la proprietà animale impostata al valore dell’array.
Ecco dunque una possibile soluzione:
$(document).ready(function() {
$('#scelta li').click(function(){
$('.cane').hide();
image = $(this).text();
var url = 'https://dog.ceo/api/breed/terrier/'+image+'/images';
$.ajax(
{
'url': url,
'method': 'GET',
'success': function(risposta){
leggiDati(risposta.message);
},
'error':function(){
alert('errore!');
}
}
);
});
});
function leggiDati (data){
var source = $('#entry-template').html();
var template = Handlebars.compile(source);
for (var i = 0; i < 5; i++){
var context = {
'animale': data[i]
};
var html = template(context);
$('.container').append(html);
}
}
Nelle prossime lezioni faremo altri esempi di chiamate GET in AJAX con jQuery.
