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.
In questa lezione implementeremo un algoritmo sulla successione di Fibonacci in JavaScript.
Innanzitutto ricordiamo che la successione di Fibonacci è una successione di numeri interi positivi in cui ciascun numero, a cominciare dal terzo, è la somma dei due precedenti e i primi due sono 1, 1.
Quindi ad esempio se voglio vedere i primi 10 termini della successione di Fibonacci ho: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55.
Algoritmo sulla successione di Fibonacci in JavaScript
Chiedere in input, attraverso un prompt, quanti numeri calcolare e visualizzarli uno sotto l’altro.
Per sviluppare questo algoritmo innanzitutto ragioniamo sulle variabili che ci serviranno. Sicuramente occorre utilizzare due variabili per memorizzare i primi due termini. Dunque, ad esempio, primo=1 e poi secondo=1.
Poi ci servirà una terza variabile dove memorizzare la somma del primo termine con il secondo. Dunque terzo = primo + secondo.
Bene, dopo aver definito questo ragionamento, occorre andare a ripetere alcune operazioni.
All’inizio abbiamo questa situazione: primo=1, secondo=1 e terzo=1+1=2.
Quindi occorre spostare il valore di secondo in primo ed il valore di terzo in secondo, in modo da sommarli. Dunque: primo=1, secondo=2 e terzo=3.
Andando avanti con questo procedimento avremo primo=2, secondo=3 e terzo=5.
In definitiva dobbiamo dunque ripetere (iterare alcune istruzioni).
Soluzione all’algoritmo sulla successione di Fibonacci in JavaScript
Ecco una possibile soluzione dell’algoritmo in JavaScript.
Chiediamo attraverso un prompt quanti numeri della successione di Fibonacci visualizzare. Dopo dichiariamo le variabili necessarie e facciamo gli assegnamenti.
Con un ciclo for poi ripetiamo le seguenti istruzioni: c = a + b e poi a=b e b=c, cioè scambiamo a con b e b con c.
Ecco dunque il codice completo:
N = prompt('Quanti numeri vuoi visualizzare?: ');
var a = 1;
var b = 1;
var c;
document.write(a + ' ' + b + ' ');
for (var i = 0; i< N-2; i++){
c = a + b;
a = b;
b = c;
document.write(c + ' ');
}
Possiamo anche aggiungere un controllo dell’input su N utilizzando ad esempio il ciclo do while. Facciamo in modo dunque che l’utente inserisca un numero maggiore di 2.
do {
N = prompt('Quanti numeri vuoi visualizzare?: ');
} while (N <= 2);
Analogamente si poteva trovare una soluzione per il controllo dell’input utilizzando il while.
N = prompt('Quanti numeri vuoi visualizzare?: ');
while (N <= 2){
N = prompt('Quanti numeri vuoi visualizzare?: ');
}
In questa lezione abbiamo semplicemente visto un esempio sulla successione di Fibonacci, nelle prossime lezioni affronteremo altri esempi utilizzando i cicli in JavaScript.
Il ciclo do while in JavaScript, così come negli altri linguaggi dove questo costrutto esiste, consente di eseguire le istruzioni almeno una volta. Se la condizione è vera allora si ripete nuovamente il ciclo, altrimenti si passa all’istruzione successiva.
Il ciclo do-while è difatti un costrutto post-condizionale.
Sintassi do while JavaScript
La sintassi del do while è dunque questa:
do {
// istruzioni;
} while (condizione);
Si può chiaramente avere anche una singola istruzione da eseguire.
La semantica del costrutto do-while è dunque questa:
1. Si esegue l’istruzione (o più di una);
2. Dopo si valuta la condizione, la quale può essere vera o falsa.
3. Quindi se la condizione è vera si ritorna al punto 1; altrimenti si passa all’istruzione successiva.
Come primo esempio ripropongo un esercizio già sviluppato con il ciclo while nella precedente lezione.
Visualizziamo i numeri da 0 a 9 in ordine crescente.
Per questo esempio inizializziamo sempre una variabile contatore: c = 0.
Poi, con il ciclo do while, stampiamo la prima istruzione, incrementiamo c di 1 e solo dopo valutiamo la condizione. Se la condizione è vera allora il ciclo ripartirà nuovamente eseguendo le stesse istruzioni.
Da notare che se avessi erroneamente inserito la condizione c >10, comunque le istruzioni all’interno del do-while sarebbero state eseguite almeno una volta.
Ecco di seguito il codice completo:
let c = 0;
do {
console.log(c + '</br>');
c++;
} while (c < 10);
Esempio 2 – do while JavaScript
In questo secondo esempio utilizzeremo il ciclo do while per effettuare un controllo dell’input. Questo infatti è uno dei maggiori casi in cui il ciclo do while viene utilizzato.
Controllare che un numero preso in input sia positivo e richiederlo in caso contrario.
All’interno del ciclo inseriamo l’istruzione che serve a prendere un dato in input. Solo dopo controlliamo se tale valore è negativo. Se questa condizione è vera il ciclo verrà ripetuto.
Ecco dunque il codice completo:
let a;
do {
a = prompt("Inserisci un numero:");
} while (a<0);
console.log(a);
In questo esempio abbiamo utilizzato la funzione prompt di JavaScript che serve per aprire una finestra del browser con un campo di input per l’inserimento dei dati.
Esempio 3 – controllo dell’input su due dati in input
In questo terzo esempio sul ciclo do while in JavaScript prendiamo in input due numeri e controlliamo se entrambi sono positivi, altrimenti li richiediamo.
La risoluzione dell’esercizio è simile al precedente, ma occorre prestare attenzione alla condizione. Infatti, occorre testare se a oppure b sono minori di zero. Si può indurre, erroneamente, ad utilizzare l’operatore logico and ( && ), ma in questo caso il programma non riesegue il ciclo se uno dei due numeri è negativo.
Provate a riflettere proprio su questo!
Di seguito il codice completo:
let a, b;
do {
a = prompt("Inserisci il numero a:");
b = prompt("Inserisci il numero b:");
} while ((a<0) || (b<0));
console.log(a + '</br>');
console.log(b);
In questa lezione abbiamo introdotto il ciclo do while in JavaScript, nelle prossime lezioni proporrò tanti altri esempi.
Il metodo indexOf in JavaScript restituisce la posizione di partenza di un elemento all’interno di un array o di una stringa.
La sintassi di questo metodo è la seguente: nomeArray.indexOf(element)
Dove element è dunque l’elemento di cui si vuole conoscere la posizione.
Così come con il metodo includes, anche in questo caso, opzionalmente si può specificare la posizione dalla quale iniziare, aggiungendo un secondo parametro come argomento di indexOf.
nomeArray.indexOf(element, start).
Il metodo restituisce un valore numerico che corrisponde alla posizione dell’elemento nell’array o nella stringa.
indexOf JavaScript – primo esempio
Conosciamo la posizione di un elemento in un array utilizzando il metodo indexOf().
Supponiamo dunque di avere il seguente array:
var oggettiScolastici = ['gomma', 'quaderno', 'matita'];
Applichiamo quindi il metodo indexOf per conoscere, ad esempio, la posizione dell’elemento quaderno.
var risultato = oggettiScolastici.indexOf('quaderno');
console.log(risultato);
Nella console del browser visualizzerò il valore 1 che corrisponde alla posizione dell’elemento.
indexOf JavaScript – secondo esempio
Visualizzare tutti gli elementi di posizione pari di un array utilizzando il metodo indexOf.
Questo algoritmo si può risolvere anche in altri modi. Qui utilizzeremo il metodo indexOf per analizzare un altro campo di applicazione del seguente metodo.
Creiamo un array di numeri interi. Dopo, con un ciclo for, analizziamo la posizione di ciascun elemento, controllando se è un numero pari. Per farlo utilizziamo, come già visto negli esercizi precedenti, l’operatore modulo ( % ) e calcoliamo il resto della divisione del numero diviso 2.
Quindi solo se è pari visualizziamo il numero, per semplicità, nella console del browser.
Ecco dunque il codice di esempio del metodo indexOf di JavaScript:
var arrayNumeri = [6,12,34,67,89,98,5,2,7,13];
console.log(arrayNumeri);
for (var i = 0; i < arrayNumeri.length; i++) {
if (arrayNumeri.indexOf(arrayNumeri[i]) % 2 == 0){
console.log(arrayNumeri[i]);
}
}
Ricoridamo inoltre che lo stesso algoritmo si poteva risolvere semplicemente in questo modo:
for (var i = 0; i < arrayNumeri.length; i++) {
if (arrayNumeri[i] % 2 == 0){
console.log(arrayNumeri[i]);
}
}
In questa lezione abbiamo affrontato due semplici esempi di utilizzo del metodo indexOf di JavaScript, nelle prossime lezioni proporrò altri esempi.
In questa lezione utilizzeremo AJAX e JSON per ottenere dati da un server web. Spesso le due tecnologie infatti vengono utilizzate assieme.
AJAX e JSON esempio
Facciamo subito un esempio per capire meglio come avviene una chiamata ajax su un file json che sta su un server web. E’ importante dire che tutto ciò deve funzionare su un server web e può essere anche un server installato sulla propria macchina (localhost).
In questo file scrivo una stringa JSON che rappresenta i dati di un’automobile. Poi attraverso il parsing questa stringa verrà convertita in un oggetto JavaScript.
Se vado a vedere sul browser Mozilla Developer ottengo questa visualizzazione:
Che viene rappresentata in JSON in questo modo:
Adesso scriviamo il nostro codice JavaScript che, attraverso una chiamata AJAX sul file JSON, consente di caricare i dati da questo file in formato .json.
Dunque sull’istanza salvata nella variabile xhttp richiamiamo il metodo open per aprire il file dal server e dopo il metodo send per inviare al richiesta al server.
Utilizziamo poi la proprietà onreadystatechange per controllare la risposta del server e se tutto è andato bene, facciamo il parsing della stringa JSON in modo da ottenere un oggetto.
Quindi visualizziamo il contenuto del file all’interno della nostra pagina html.
Possiamo dunque scrivere la funzione che descrive la chiamata AJAX sul file JSON:
function load() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://www.codingcreativo.it/json/auto.json", true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var automobile = JSON.parse(xhttp.responseText);
document.getElementById("dati-file").innerHTML =
automobile.marca + ' ' + automobile.modello + ' ' + automobile.colore + ' ' + automobile.alimentazione;
}
};
}
Lato html poi inseriamo un div dove visualizzare i dati e poi un pulsante che serve a generare l’evento.
Commenti recenti