Ciclo for else

Ciclo for else

Il ciclo for … else in Python è un costrutto modo potente per gestire situazioni in cui si desidera eseguire un blocco di codice solo se il ciclo for è stato completato con successo, senza l’uso di un flag o variabile di controllo aggiuntiva.

Il costrutto for…else è particolarmente utile quando si desidera eseguire un’azione se un elemento è trovato o se il ciclo termina con successo, senza dover aggiungere complessità al codice utilizzando variabili di controllo aggiuntive.

Ecco come funziona:

for elemento in sequenza:
    # Blocco di codice del ciclo
    if condizione:
        # Codice da eseguire se la condizione è soddisfatta
        break
else:
    # Blocco di codice da eseguire se il ciclo è stato completato senza interruzioni

Quando il ciclo “for” viene eseguito senza interruzioni, il blocco di codice sotto “else” verrà eseguito. Se viene incontrata un’istruzione “break” all’interno del ciclo, il blocco di codice sotto “else” non verrà eseguito.

Primo esempio ciclo for else in Python

Ecco un esempio pratico per illustrare l’utilizzo del ciclo for … else:

elenco = [1, 2, 3, 4, 5]

for elemento in elenco:
    if elemento == 6:
        print("Numero trovato!")
        break
else:
    print("Numero non trovato!")

In questo esempio, se il numero 6 è presente nell’elenco, verrà stampato “Numero trovato!”. Altrimenti, verrà stampato “Numero non trovato!”.

Secondo esempio ciclo for else in Python

In questo secondo esempio verifichiamo se un numero è primo con il ciclo for else:

numero = 17

for i in range(2, numero // 2 + 1):
    if numero % i == 0:
        print(f"{numero} non è un numero primo.")
        break
else:
    print(f"{numero} è un numero primo.")

In questo esempio, il programma verifica se il numero dato è un numero primo. Se trova un divisore diverso da 1 e se stesso, il ciclo si interrompe e viene stampato un messaggio che indica che il numero non è primo. Se il ciclo termina senza interruzioni, viene stampato un messaggio che indica che il numero è primo.

Migliora le tue capacità di programmazione Python seguendo i nostri corsi in diretta!

corsi Python

Terzo esempio ciclo for else

In questo esempio verifichiamo se un numero è un quadrato perfetto:

numero = 25

for i in range(numero):
    if i * i == numero:
        print(f"{numero} è un quadrato perfetto.")
        break
else:
    print(f"{numero} non è un quadrato perfetto.")

Il ciclo for scorre tutti i numeri da 0 a numero - 1. Se trova un numero il cui quadrato è uguale a numero, allora il numero è un quadrato perfetto e il messaggio corrispondente viene stampato. Se il ciclo termina senza interruzioni, significa che il numero non è un quadrato perfetto e viene stampato un messaggio appropriato.

Conclusioni

Il costrutto for…else in Python consente di gestire situazioni in cui si desidera eseguire un blocco di codice solo se il ciclo for è stato completato con successo, senza la necessità di utilizzare flag o variabili di controllo aggiuntive.

Questo costrutto è particolarmente utile quando si desidera eseguire un’azione se un elemento è trovato durante l’iterazione o se il ciclo termina con successo senza interruzioni, aggiungendo un’eleganza e una chiarezza al codice senza introdurre complessità inutile.

Abbiamo esaminato diversi esempi di utilizzo del costrutto for…else, dal trovare un elemento in un elenco alla verifica se un numero è primo o un quadrato perfetto, dimostrandone l’efficacia nel semplificare il codice e migliorare la sua leggibilità.

Seguite le prossime lezioni per altri importanti argomenti del linguaggio Python e se volete approfondire vi suggerisco il libro avvincente “50 Algoritmi per imparare Python” disponibile su Amazon.

Alcuni link utili

Corso in diretta su Python

Le liste

Contare gli elementi di una lista con count

Tuple

Numeri random

Introduzione ai dizionari in Python

Ordinare un dizionario in Python

Operazioni con i file in Python

Python Sort

Introduzione alla programmazione ad oggetti

Carosello immagini con Vue

Carosello immagini con Vue

In questa lezione svilupperemo un carosello di immagini con Vue. I caroselli di immagini sono componenti molto comuni nelle interfacce utente moderne. Con Vue.js, possiamo creare facilmente un carosello di immagini dinamico e reattivo che consentirà agli utenti di navigare attraverso diverse immagini in modo intuitivo.

Per seguire questo tutorial, è necessario avere una conoscenza di base di HTML, CSS e JavaScript, nonché una comprensione di base di Vue.js.

Impostazione del Progetto Carosello immagini con Vue

Innanzitutto creiamo un nuovo progetto Vue.js utilizzando Vue CLI:

vue create vue-carousel

Quindi seguiamo le istruzioni a schermo per la configurazione del progetto. Una volta creato il progetto, spostiamoci nella directory del progetto:

cd vue-carousel

Creazione del Componente Carosello con Vue

Ora creiamo il nostro componente carosello. All’interno della cartella src/components, creiamo un nuovo file chiamato CarouselComponent.vue e lavoriamo sul template, dove definiamo la struttura del caroselle in questo modo:

  • un contenitore principale carousel-container che racchiude l’intero carosello.
  • carousel è il contenitore degli elementi del carosello.
  • un altro contenitore carousel-inner che tiene le immagini e viene traslato per simulare lo scorrimento.
  • carousel-item rappresenta ciascun elemento dell’immagine nel carosello.
  • Gli attributi :style vengono utilizzati per applicare stili dinamici per la larghezza del carosello e per la trasformazione che muove le immagini.
  • Il ciclo v-for viene utilizzato per iterare attraverso l’array di immagini e renderizzarle dinamicamente.

Ecco di seguito la parte inerente il template:

<template>
  <div class="carousel-container" :style="{ width: carouselWidth + 'px' }">
    <h2>Carosello immagini</h2>
    <div class="carousel">
      <div class="carousel-inner" :style="{ transform: 'translateX(' + translateX + 'px)' }">
        <div v-for="(image, index) in images" :key="index" class="carousel-item">
          <img :src="image" alt="Carousel Image" />
        </div>
      </div>
    </div>
    <div class="carousel-controls">
      <button @click="prevSlide" :disabled="currentIndex === 0">Prev</button>
      <button @click="nextSlide" :disabled="currentIndex === totalItems - itemsPerPage">Next</button>
    </div>
  </div>
</template>

Continuiamo a lavorare con il carosello immagini con Vue, definendo la logica del componente nello script:

  • In data, definiamo lo stato iniziale del carosello, incluso l’indice corrente, la traslazione translateX, l’array di immagini e altre opzioni come il numero di immagini per pagina, la larghezza ed il margine di ciascuna immagine. Sostituite il valore 250 con la larghezza effettiva delle vostre immagini ed impostate anche il valore del margine desiderato.
  • Utilizziamo poi una proprietà computed carouselWidth per calcolare la larghezza totale del carosello in base alla larghezza dell’elemento e al margine tra di essi.
  • Definiamo i metodi nextSlide e prevSlide per gestire la navigazione avanti e indietro nel carosello.

Metodo nextSlide()

Questo metodo viene chiamato quando l’utente fa clic sul pulsante “Next” per scorrere avanti nel carosello.

  1. Prima di tutto, controlliamo se l’indice corrente currentIndex è inferiore al numero totale di elementi meno il numero di elementi visualizzati per pagina (totalItems - itemsPerPage). Questo controllo serve a garantire che non andremo oltre l’ultimo gruppo di immagini nel carosello.
  2. Se l’indice corrente è inferiore al valore massimo consentito, incrementiamo currentIndex di uno e spostiamo translateX verso sinistra. Questo viene fatto sottraendo dalla proprietà translateX la somma della larghezza di ciascuna immagine e del margine tra di esse (itemWidth + margin).

Metodo prevSlide()

Questo metodo viene dunque chiamato quando l’utente fa clic sul pulsante “Prev” per tornare indietro nel carosello.

  1. Prima di tutto, controlliamo se l’indice corrente currentIndex è maggiore di zero. Questo controllo serve a garantire che non andremo oltre la prima immagine nel carosello.
  2. Se l’indice corrente è maggiore di zero, decrementiamo currentIndex di uno e spostiamo translateX verso destra. Questo viene fatto aggiungendo alla proprietà translateX la somma della larghezza di ciascuna immagine e del margine tra di esse (itemWidth + margin).

In questo modo, ogni volta che l’utente preme i pulsanti “Next” o “Prev”, l’indice corrente viene aggiornato di conseguenza. Si aggiorna anche la proprietà translateX che determina la posizione del gruppo di immagini nel carosello, consentendo all’utente di scorrere tra le immagini in modo fluido.

Ecco dunque lo script:

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      translateX: 0,
      images: [
        'https://cdn.pixabay.com/photo/2024/03/05/14/33/purple-8614655_640.jpg',
        'https://cdn.pixabay.com/photo/2023/01/10/16/23/hedgehog-7710053_640.jpg',
        'https://cdn.pixabay.com/photo/2022/11/07/18/29/bird-7576994_640.jpg',
        'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg',
        'https://cdn.pixabay.com/photo/2024/02/15/15/29/crocus-8575610_640.jpg',
        'https://cdn.pixabay.com/photo/2015/04/10/01/41/fox-715588_960_720.jpg'
      ],
      itemsPerPage: 3, //sostituire con il numero di immagini desiderato
      itemWidth: 250, // Larghezza di ciascuna immagine
      margin: 20 // Margine delle immagini
    };
  },
  computed: {
    totalItems() {
      return this.images.length;
    },
    carouselWidth() {
      return (this.itemWidth + this.margin) * this.itemsPerPage;
    }
  },
  methods: {
    nextSlide() {
      if (this.currentIndex < this.totalItems - this.itemsPerPage) {
        this.currentIndex++;
        this.translateX -= this.itemWidth + this.margin;
      }
    },
    prevSlide() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.translateX += this.itemWidth + this.margin;
      }
    }
  }
};
</script>

Possiamo anche personalizzare lo stile del carosello aggiungendo regole CSS all’interno dello stile dello stesso componente:

<style scoped>
.carousel-container {
  margin: 0 auto;
  overflow: hidden;
}

.carousel {
  display: flex;
  margin-bottom: 10px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 auto;
}

.carousel img {
  width: 250px;
  height: auto;
  margin: 0 10px;
}

.carousel-controls {
  display: flex;
  justify-content: center;
}

.carousel-controls button {
  margin: 0 5px;
}
</style>

Corso su JavaScript

Conclusioni

In questo articolo, abbiamo esaminato come creare un carosello di immagini dinamico utilizzando Vue Abbiamo definito la struttura del nostro componente Vue, includendo elementi HTML per visualizzare le immagini e i controlli per navigare tra di esse.

Utilizzando il data binding di Vue, abbiamo anche collegato le immagini e le informazioni di navigazione al nostro componente, consentendo all’utente di scorrere avanti e indietro tra le immagini.

Abbiamo anche discusso l’importanza di calcolare dinamicamente la larghezza del carosello in base al numero di immagini e ai margini tra di esse, garantendo così che il carosello si adatti correttamente al contenuto e sia visualizzato correttamente su diversi dispositivi e dimensioni dello schermo.

Infine, abbiamo esaminato come personalizzare ulteriormente il carosello aggiungendo funzionalità come la navigazione automatica, gli indicatori di paginazione e altro ancora.

Dunque, con Vue.js è possibile creare facilmente caroselli di immagini interattivi e reattivi che migliorano l’esperienza utente sulle pagine web. Spero che questo articolo sia di aiuto a tanti aspiranti programmatori che desiderano creare progetti interattivi con Vue.js!

Alcuni link utili

Tutorial JavaScript

Componenti Vue.js

Option API

Composition API

Counter in Vue.js (con le due sintassi: Option API e Composition API)

Direttiva v-model

props con Option API

Galleria di immagini con Vue

Galleria di immagini con Vue

In questa lezione impareremo a realizzare una galleria di immagini con Vue. Le gallerie di immagini sono un elemento comune su molti siti web, che consentono agli utenti di visualizzare e navigare attraverso diverse immagini in modo intuitivo. Nel tutorial JavaScript di questo blog, ho già sviluppato una galleria di immagini che potete consultare al seguente link: https://www.codingcreativo.it/galleria-di-immagini-con-filtri/

Creazione della Galleria di Immagini con Vue

Iniziamo creando un nuovo progetto Vue.js e aggiungendo la nostra galleria di immagini. Quindi, esegui i seguenti comandi nel terminale:

vue create gallery-app

Seguiamo le istruzioni per l’installazione del nuovo progetto e poi entriamo dentro la cartella:

cd gallery-app

Dopo creiamo il componente per la galleria di immagini dove utilizziamo la direttiva v-for per iterare attraverso l’array di immagini e visualizzarle nella nostra galleria. Le immagini inoltre vengono filtrate in base alla categoria corrente utilizzando il metodo filterImages. Abbiamo cura di garantire che quando il componente è creato le immagini siano tutte visibili. Dopo creiamo il metodo showImage che controlla se l’immagine deve essere mostrata, in base alla categoria selezionata. Le immagini vengono visualizzate o nascoste dunque utilizzando la direttiva v-show.

Personalizziamo infine il CSS per rendere la galleria di immagini responsive e stilizzata.

Ecco di seguito il codice di esempio:

<template>
  <div class="container-gallery">
    <h2>Galleria di Immagini</h2>
    <div class="gallery-menu">
      <a @click="filterImages('all')">Tutte</a>
      <a @click="filterImages('fiori')">Fiori</a>
      <a @click="filterImages('animali')">Animali</a>
    </div>
  
    <div class="gallery">
      <img v-for="(image, index) in images" :key="index" class="image" :src="image.src" :alt="image.alt" :class="image.category" v-show="showImage(image.category)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: '...', alt: 'Immagine Fiori 1', category: 'fiori' },
        { src: '...', alt: 'Immagine Animali 1', category: 'animali' },
        { src: '...', alt: 'Immagine Animali 2', category: 'animali' },
        { src: '...', alt: 'Immagine Fiori 2', category: 'fiori' },
        { src: '...', alt: 'Immagine Fiori 3', category: 'fiori' },
        { src: '...', alt: 'Immagine Animali3', category: 'animali' }
      ],
      currentCategory: 'all'
    };
  },
  methods: {
    filterImages(category) {
      this.currentCategory = category;
    },
    showImage(category) {
      return this.currentCategory === 'all' || category === this.currentCategory;
    }
  },
  created() {
    this.filterImages('all');
  }
};
</script>

<style scoped>
.container-gallery {
  max-width: 800px;
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

h2 {
  text-align: center;
  color: #4CAF50; 
  margin: 20px 0;
}

.gallery-menu {
  text-align: center;
  padding: 10px;
  background-color: #4CAF50; /* Green */
}

.gallery-menu a {
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.gallery-menu a:hover {
  background-color: #45a049; 
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.image {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>

Galleria di Immagini con Vue con più componenti

È possibile suddividere il codice in più componenti per renderlo più modulare e manutenibile. Ecco dunque un esempio di come si potrebbe suddividere il codice in due componenti: uno per la galleria stessa e uno per il singolo elemento dell’immagine.

Realizziamo dapprima il componente GalleryFilter.vue:

<template>
  <div class="container-gallery">
    <h2>Galleria di Immagini</h2>
    <Menu @filter="filterImages" />
    <div class="gallery">
      <ImageItem v-for="(image, index) in filteredImages" :key="index" :image="image" />
    </div>
  </div>
</template>

<script>
import Menu from './MenuItems.vue';
import ImageItem from './ImageItem.vue';

export default {
  components: {
    Menu,
    ImageItem
  },
  data() {
    return {
      images: [
        { src: '...', alt: 'Immagine Fiori 1', category: 'fiori' },
        { src: '...', alt: 'Immagine Animali 1', category: 'animali' },
        { src: '...', alt: 'Immagine Animali 2', category: 'animali' },
        { src: '...', alt: 'Immagine Fiori 2', category: 'fiori' },
        { src: '...', alt: 'Immagine Fiori 3', category: 'fiori' },
        { src: '...', alt: 'Immagine Animali3', category: 'animali' }
      ],
      currentCategory: 'all'
    };
  },
  computed: {
    filteredImages() {
      if (this.currentCategory === 'all') {
        return this.images;
      } else {
        return this.images.filter(image => image.category === this.currentCategory);
      }
    }
  },
  methods: {
    filterImages(category) {
      this.currentCategory = category;
    }
  },
  created() {
    this.filterImages('all');
  }
};
</script>

Poi creiamo un componente per il menù di navigazione, MenuItems.vue:

<template>
  <div class="gallery-menu">
    <a @click="filter('all')">Tutte</a>
    <a @click="filter('fiori')">Fiori</a>
    <a @click="filter('animali')">Animali</a>
  </div>
</template>

<script>
export default {
  methods: {
    filter(category) {
      this.$emit('filter', category);
    }
  }
};
</script>

<style scoped>
.gallery-menu {
  text-align: center;
  padding: 10px;
  background-color: #4CAF50; /* Green */
}

.gallery-menu a {
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.gallery-menu a:hover {
  background-color: #45a049; 
}
</style>

Ed un altro componente per le immagini, ImageItem.vue:

<template>
  <img class="image" :src="image.src" :alt="image.alt">
</template>

<script>
export default {
  props: {
    image: Object
  }
};
</script>

<style scoped>
.image {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>

Corso su JavaScript

Conclusioni

In questo articolo, abbiamo esplorato come creare una galleria di immagini utilizzando Vue. Abbiamo iniziato con un esempio di codice che mostra una galleria di immagini filtrabile per categorie. Abbiamo quindi discusso di come questo codice possa essere ulteriormente migliorato attraverso la suddivisione in componenti separati.

La suddivisione del codice in componenti offre diversi vantaggi, tra cui una maggiore modularità, facilità di manutenzione e riutilizzo del codice. Abbiamo creato tre componenti separati: GalleryFilter.vue, Menuitems.vue e ImageItem.vue, ciascuno dei quali si occupa di una parte specifica della funzionalità della galleria.

Infine, abbiamo visto come utilizzare le proprietà dei componenti e gli eventi personalizzati per consentire una comunicazione efficace tra i componenti. Questo approccio favorisce una migliore separazione delle responsabilità e rende il codice più leggibile e manutenibile.

Spero che questo articolo vi abbia fornito una buona comprensione di come utilizzare Vue.js per creare una galleria di immagini interattiva e come strutturare il codice in componenti separati. Con un po’ di pratica e creatività, si può espandere e personalizzare ulteriormente questa galleria per adattarla alle vostre esigenze specifiche. Buon coding!

Alcuni link utili

Corso linguaggio JavaScript

Libro JavaScript

Tutorial JavaScript

Componenti Vue.js

Option API

Composition API

Counter in Vue.js (con le due sintassi: Option API e Composition API)

Direttiva v-model

props con Option API

Watch in Vue.js

Watch in Vue.js

In questa lezione parliamo di watch in Vue.js. I watchers in Vue.js consentono di eseguire del codice quando i dati reattivi cambiano. A differenza delle computed properties, i watchers non calcolano un valore; piuttosto, eseguono del codice quando si verificano specifiche modifiche di dati. Si possono utilizzare i watchers per eseguire azioni asincrone, effettuare chiamate AJAX o eseguire altre operazioni quando i dati cambiano.

Esempio Watch in Vue.js

Realizziamo un esempio di un componente Vue.js con un campo di input per inserire il raggio del cerchio e sotto un paragrafo che mostra dinamicamente l’area calcolata del cerchio utilizzando una watch property:

<template>
    <div>
      <label for="radius">Raggio del cerchio:</label>
      <input type="number" id="radius" v-model="radius">
      <p>L'area del cerchio è: {{ area }}</p>
    </div>
  </template>
 
<script>  
  export default {
    name: 'WatchComponent',
    data() {
      return {
        radius: 0,
        area: 0
      };
    },
    watch: {
        radius(newValue) {
           this.area = Math.PI * Math.pow(newValue, 2);
        }
    }
  };
  </script>
 

Ho dunque inserito un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model, inizializzata a 0. Ho anche inizializzato la variabile area che compare in un paragrafo a 0. Dopo ho utilizzato un watcher per osservare i cambiamenti nella variabile radius. Ogni volta che radius cambia, il watcher calcola l’area del cerchio e aggiorna la variabile area.

Differenza con computed

Se avessimo utilizzato una computed property, il calcolo dell’area del cerchio verrebbe eseguito solo quando il valore del raggio cambierebbe. Invece, utilizzando watch, la funzione associata è chiamata ogni volta che il valore di radius cambia, indipendentemente dal fatto che sia direttamente correlato al calcolo dell’area o meno. Questo potrebbe comportare una maggiore complessità e meno efficienza nel codice.

Inoltre Vue.js gestisce automaticamente la cache delle computed properties, quindi il valore dell’area verrebbe memorizzato nella cache e ricalcolato solo quando il valore del raggio cambia. Questo può portare a prestazioni migliori rispetto all’utilizzo di un watch.

Dunque nell’esempio precedente sarebbe preferibile usare computed al posto di watch.

Un esempio più appropriato per l’utilizzo di un watcher potrebbe essere il controllo della disponibilità di un prodotto in un negozio online. Supponiamo di avere un’applicazione Vue.js che visualizza i dettagli di un prodotto e dobbiamo controllare se il prodotto è attualmente disponibile o meno nel negozio online. In questo caso, un watcher può essere utilizzato per monitorare i cambiamenti nello stato di disponibilità del prodotto e reagire di conseguenza.

Corso su JavaScript

Conclusioni

In conclusione i watcher sono una risorsa fondamentale nel contesto di Vue.js, offrendo agli sviluppatori un meccanismo versatile per monitorare e rispondere a modifiche specifiche all’interno dei dati dell’applicazione. La loro flessibilità consente di eseguire azioni personalizzate in risposta a eventi specifici, estendendo così le capacità di gestione reattiva dei componenti Vue.js.

L’utilizzo accurato dei watcher richiede una valutazione oculata delle necessità dell’applicazione e una comprensione approfondita delle operazioni reattive richieste. Mentre sono preziosi per compiti come il controllo della validità dei dati o l’interazione con servizi esterni, è importante evitare un uso eccessivo che potrebbe compromettere le prestazioni dell’applicazione.

Bibbia Commentata dai nuovi padri

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e me

Computed in Vue.js

Computed in Vue.js

In questa lezione parleremo di computed in Vue.js, una funzionalità fondamentale di Vue.js per gestire la logica reattiva all’interno delle applicazioni.

Le computed properties in Vue.js sono funzioni calcolate dinamicamente che restituiscono un valore in base allo stato dei dati reattivi. Queste proprietà sono memorizzate nella cache e sono ricalcolate solo quando le dipendenze effettive cambiano. Questo significa che se una o più dipendenze cambiano, il valore calcolato sarà aggiornato automaticamente. Le computed properties sono ideali per calcoli derivati da uno o più dati reattivi.

Esempio Computed in Vue.js

Realizziamo un esempio completo di un componente Vue.js che include un campo di input per il raggio del cerchio e mostra dinamicamente l’area calcolata del cerchio utilizzando una computed property:

<template>
  <div>
    <label for="radius">Raggio del cerchio:</label>
    <input type="number" id="radius" v-model="radius">
    <p>L'area del cerchio è: {{ area }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'CircleArea',
  data() {
    return {
      radius: 0
    };
  },
  computed: {
    area() {
      const areaCerchio = Math.PI * Math.pow(this.radius, 2);
      return areaCerchio.toFixed(2);
    }
  }
};
</script>

In questo esempio ho utilizzato un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model. Poi ho utilizzato una computed property chiamata area per calcolare dinamicamente l’area del cerchio basata sul valore di radius. Nella sezione data, abbiamo inizializzato radius a 0. Il componente esporta sia radius che area, che possono essere utilizzati nel template.

Computed in Vue.js o Method?

Sviluppiamo lo stesso esempio utilizzando un metodo:

<template>
  <div>
    <label for="radius">Raggio del cerchio:</label>
    <input type="number" id="radius" v-model="radius">
    <p>L'area del cerchio è: {{ calculateArea() }}</p>
  </div>
</template>

<script>
export default {
  name: 'CircleArea',
  data() {
    return {
      radius: 0
    };
  },
  methods: {
    calculateArea() {
      const areaCerchio = Math.PI * Math.pow(this.radius, 2);
      return areaCerchio.toFixed(2); // Arrotonda l'area a due cifre decimali
    }
  }
};
</script>

La differenza principale tra l’utilizzo di una computed property e l’utilizzo di un metodo per calcolare e mostrare l’area del cerchio è nel modo in cui vengono gestiti i dati reattivi e l’ottimizzazione delle prestazioni.

  1. Computed Property:
    • Una computed property è calcolata dinamicamente in base allo stato dei dati reattivi. Vue.js gestisce automaticamente la cache e ricalcola il valore solo quando le dipendenze effettive cambiano.
    • Quando il valore del raggio cambia, Vue.js ricalcola automaticamente l’area del cerchio.
    • Le computed properties sono ideali per calcoli che dipendono da dati reattivi e sono ottimizzate per prestazioni, in quanto vengono memorizzate nella cache e ricalcolate solo quando necessario.
  2. Metodo:
    • Un metodo viene chiamato esplicitamente ogni volta che viene richiesto, ad esempio nel template o in risposta a un evento.
    • Quando il valore del raggio cambia, il metodo deve essere chiamato manualmente per ricalcolare l’area del cerchio e visualizzarla.
    • I metodi possono essere più flessibili e consentono di eseguire operazioni complesse o logiche aggiuntive al di là del semplice calcolo dell’area del cerchio.

L’utilizzo di una computed property in Vue.js per calcolare l’area del cerchio è preferibile quando si tratta di calcoli basati su dati reattivi e si desidera ottimizzare le prestazioni. D’altra parte, l’utilizzo di un metodo può essere più appropriato quando si necessita di flessibilità nell’esecuzione di operazioni complesse o quando non si desidera che il calcolo sia eseguito automaticamente in risposta ai cambiamenti dei dati.

Corso su JavaScript

Conclusioni

In conclusione, le computed properties in Vue.js si dimostrano uno strumento potente e flessibile per gestire calcoli basati su dati reattivi. Sfruttando la loro capacità di memorizzare nella cache e ricalcolare i valori solo quando necessario, possiamo ottimizzare le prestazioni delle nostre applicazioni, evitando calcoli ridondanti e migliorando l’esperienza dell’utente.

Bibbia Commentata dai nuovi padri

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e me

Applicazione con OpenLibrary in Vue

Applicazione con OpenLibrary in Vue

In questa lezione realizzeremo un’applicazione con l’uso di OpenLibrary, un progetto open source che si propone di creare un catalogo online completo e accessibile di tutti i libri. È gestito da Internet Archive, una organizzazione non profit che si impegna a preservare il patrimonio culturale digitale.

L’obiettivo principale di OpenLibrary è quello di fornire un’ampia gamma di informazioni sui libri, inclusi dettagli come titolo, autore, editore, anno di pubblicazione, trama e recensioni. Il progetto si basa su contributi volontari e dati disponibili pubblicamente, inclusi dati forniti da biblioteche, editori e utenti.

OpenLibrary offre anche funzionalità aggiuntive come la possibilità di prenotare libri, scrivere recensioni, creare elenchi di lettura personalizzati e altro ancora. L’accesso alle informazioni su OpenLibrary è gratuito e aperto a tutti gli utenti.

Applicazione con OpenLibrary in Vue – esempio

Nel nostro esempio realizzeremo un’applicazione con OpenLibrary in Vue che si occupa di mostrare i libri, effettuare una ricerca e filtrare le categorie.

Per la chiamata API utilizzeremo axios, una libreria JavaScript utilizzata per effettuare richieste HTTP. Viene importata all’inizio del componente per consentire il recupero dei dati dai servizi web, occorre installarla se non è già presente nel progetto con

npm install axios

Realizziamo lo script necessario, includendo un insieme di dati che include:

  • categories: Un array di categorie di libri predefinite.
  • books: Un array vuoto che verrà popolato con i risultati della ricerca dei libri.
  • loading: Una variabile booleana che indica se la ricerca è in corso.
  • searchTerm: Una stringa utilizzata per memorizzare il termine di ricerca inserito dall’utente.

Realizziamo poi questi metodi:

  • searchByCategory(category): Questo metodo viene chiamato quando un utente seleziona una categoria dalla lista predefinita. Imposta il termine di ricerca sulla categoria selezionata e chiama searchBooks() per avviare la ricerca.
  • searchBooks(): Effettua una richiesta HTTP per cercare libri basati sul termine di ricerca memorizzato in searchTerm. Utilizza l’API OpenLibrary per ottenere i risultati di ricerca, limitati a 10 libri. Una volta ottenuti i risultati, popola l’array books con i dati dei libri e chiama getBookCovers() per ottenere le copertine dei libri.
  • getBookCovers(): Per ogni libro trovato nei risultati della ricerca, controlla se è disponibile un’immagine di copertina. Se sì, genera l’URL dell’immagine di copertina utilizzando l’ID della copertina e aggiunge l’URL al libro.
<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      categories: ['Romance', 'Mystery', 'Fiction', 'Fantasy'], // Esempio di categorie
      books: [],
      loading: false,
      searchTerm: ''
    }
  },
  methods: {
    searchByCategory(category) {
      this.searchTerm = category;
      this.searchBooks();
    },
    searchBooks() {
      if (!this.searchTerm) {
        return;
      }
      this.loading = true;
      const url = `https://openlibrary.org/search.json?title=${encodeURIComponent(this.searchTerm)}&limit=10`;
      axios.get(url)
        .then(response => {
          this.books = response.data.docs;
          this.loading = false;
          this.getBookCovers();
        })
        .catch(error => {
          console.error('Error searching books:', error);
          this.loading = false;
        });
    },
    getBookCovers() {
      this.books.forEach(book => {
        if (book.cover_i) {
          const coverUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`;
          book.coverUrl = coverUrl;
        }
      });
    }
  }
}
</script>

Corso su JavaScript

Realizziamo poi il template, dove, sotto il testo introduttivo inseriamo un menù di navigazione che mostra le categorie disponibili per la ricerca. Le categorie vengono visualizzate come elenco non ordinato (<ul>) e ogni categoria è rappresentata da un elemento della lista (<li>). Quando un utente fa clic su una categoria, viene chiamato il metodo searchByCategory(category) per avviare la ricerca dei libri in quella categoria.

Ho inserito anche una casella di ricerca per cercare i libri per titolo. L’input è legato a searchTerm tramite v-model, in modo che il termine di ricerca inserito dall’utente venga memorizzato nell’oggetto dati del componente. L’evento @input viene utilizzato per chiamare il metodo searchBooks() ogni volta che l’utente modifica il contenuto della casella di ricerca.

Poi nella sezione principale, viene mostrato un messaggio di “Caricamento…” quando loading è true, indicando che la ricerca è in corso. Se loading è false, viene visualizzata la lista dei libri trovati. Ogni libro è rappresentato da un elemento <div> con la classe “book-card”. Per ogni libro, vengono visualizzati il titolo, l’autore (se disponibile), l’anno di pubblicazione (se disponibile) e l’immagine di copertina (se disponibile).

Ecco dunque come si presenta il template di esempio:

<template>
  <div id="app">
    <header>
      <h1>Open Library Book Search</h1>
      <p> Filtra per: </p>
      <nav>
        <ul>
          <li v-for="category in categories" :key="category" @click="searchByCategory(category)">
           {{ category }}
          </li>
        </ul>
        <input type="text" v-model="searchTerm" @input="searchBooks" placeholder="Cerca per titolo">
      </nav>
    </header>
    <main>
      <h2> Benvenuti nella nostra libreria</h2>
      <div v-if="loading">
        Caricamento...</div>
      <div v-else class="book-list">
        <div v-for="book in books" :key="book.key" class="book-card">
          <h2>{{ book.title }}</h2>
          <p v-if="book.author_name">Autore: {{ book.author_name.join(', ') }}</p>
          <p v-if="book.first_publish_year">Anno di pubblicazione: {{ book.first_publish_year }}</p>
          <img v-if="book.coverUrl" :src="book.coverUrl" alt="Cover">
        </div>
      </div>
    </main>
  </div>
</template>

Conclusioni

In questa lezione abbiamo realizzato un’applicazione con OpenLibrary in Vue, in un unico componente, anche in questo caso potremmo gestire il tutto con più componenti.

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e me