Multipli con Algobuild

Multipli con Algobuild

Risolviamo alcuni esercizi sui multipli con Algobuild, al fine di esercitarci ancora con la selezione.


Esercizio 1 sui multipli con Algobuild

Dati in input due numeri A e B, controllare se A è multiplo di B.

Per verificare che A é un multiplo di B, basta controllare che il resto della divisione di A per B sia uguale a zero.

Per lo sviluppo dell’algoritmo mi serviranno queste forme:

Ellisse per l’inizio e per la fine;

Parallelogramma per inserire l’input, ovvero in questo caso per prendere i due numeri A e B e per visualizzare in output il risultato;

Rombo per effettuare un test che può essere vero o falso.

Quindi chiedo in input i due numeri e controllo semplicemente se A%B==0, cioè se il resto della divisione di A per B è uguale a zero. Se è vero allora A è multiplo di B, altrimenti A non è un multiplo. In entrambi i casi visualizzo in output il messaggio opportuno.

Ecco il diagramma di flusso che rappresenta la risoluzione dell’algoritmo sui multipli con Algobuild.

multipli Algobuild

Esercizio 2

Vediamo un altro semplice esercizio sui multipli con Algobuild.

Dati in input due numeri A e B controllare se A è multiplo di B, oppure B è multiplo di A.

L’esercizio è molto simile a quello di prima. Dobbiamo aggiungere nel ramo del falso un’altra condizione, cioè che B%A==0. Se questa condizione è vera allora B è multiplo di A. Altrimenti B non è multiplo di A.

Allego il diagramma di flusso realizzato con Algobuild.

multipli diagrammi di flusso

Chiaramente questi sono solo alcuni semplici algoritmi che risolvono quesiti sui multipli con Algobuild.

Alcuni link utili

Indice argomenti diagramma a blocchi

1 – Diagramma a blocchi

2 – Primi esercizi con i diagrammi di flusso (perimetro triangolo; area di un trapezio)

3 – Altro semplice esercizio sui flow chart (calcolare uno sconto)

4 – Area del cerchio

5 – Precedente e successivo di un numero

6 – Introduzione agli algoritmi di selezione

7 – Minore tra due numeri

8 – Maggiore fra tre numeri

9 – Algoritmo di selezione sugli angoli

Divisori di un numero con Algobuild

Divisori di un numero con Algobuild

Oggi impareremo a creare un algoritmo per trovare i divisori di un numero con Algobuild.

Quindi mi serviranno queste forme:

Ellisse per l’inizio e per la fine;

Rettangolo per effettuare le operazioni e per l’assegnamento;

Parallelogramma per inserire l’input, ovvero in questo caso per prendere il numero e per visualizzare in output il risultato;

Rombo per effettuare un test che può essere vero o falso.


Algoritmo per trovare i divisori di un numero con Algobuild

Per trovare i divisori di un numero posso dividere per tutti i numeri fino ad arrivare al numero stesso.

Ma ci sono delle operazioni che potrei risparmiare per guadagnare velocità di calcolo. Infatti potrei dividere partendo da 1 fino ad arrivare alla metà del numero stesso.

Se ad esempio consideriamo 10 i suoi divisori sono 1,2,5,10.

Quindi tra il 5 e il 10 ci sono i numeri 6,7,8,9. Bene se divido 10 per questi numeri sicuramente ottengono un numero non intero.

Allora posso tralasciarli.

Iniziamo a costruire il nostro algoritmo per calcolare i divisori di un numero preso in input.

Prendo in input il numero e lo memorizzo in una variabile. Dopo calcolo il divisore con la seguente formula:

divisore=floor(numero/2);

In questo modo arrotondo per difetto il numero diviso due.

Ad esempio se come numero metto 10 allora divisore sarà uguale a 5; se inserisco 11 il divisore sarà sempre uguale a 5.

Dopo, con un ciclo while, finché il divisore è maggiore di 1, partendo da divisore=floor(numero/2) vado a trovare i resti della divisione.

Se il resto della divisione è uguale a zero allora è un divisore. Per calcolare il resto uso l’operatore modulo ( % ).

Ecco il diagramma di flusso per trovare i divisori di un numero con Algobuild.

divisori algobuild

Si poteva anche partire al contrario, dividendo per 1 fino ad arrivare a numero/2.

Chiaramente questo è solo una possibile soluzione all’algoritmo per trovare i divisori di un numero con Algobuild.

Alcuni link utili

Indice argomenti diagramma a blocchi

Numeri primi da 1 a 100

Array con algobuild

Divisori di un numero con algobuild

Algoritmi di selezione sugli angoli

Algoritmi di selezione

Triangoli con algobuild

Fibonacci con algobuild

Serie buffa con algobuild

Numeri amicabili con algobuild

Numeri perfetti con algobuild

Massimo fra tre numeri

Minore fra tre numeri

Algoritmi di selezione sugli angoli

Algoritmi di selezione

Triangoli con algobuild

Fibonacci con algobuild

Serie buffa con algobuild

Numeri amicabili con algobuild

Numeri perfetti con algobuild

Massimo fra tre numeri

Minore fra tre numeri


Canvas con JavaScript

Canvas con JavaScript

In questo articolo parleremo ancora dei canvas con JavaScript.

Faremo un esempio molto semplice graficamente. Più avanti infatti vedremo come implementare i grafici utilizzando la libreria Chart.js, oggi vi indico per il momento solo il link alla libreria: chartjs.org.

Ipotizziamo quindi di prendere dei dati dalle caselle di input e realizzare un grafico a torta utilizzando proprio questi dati.

Inserite dunque i dati nelle caselle di input e dopo cliccate sul pulsante crea. Subito sotto vedrete il grafico a torta che si è generato.

Ecco come dovrebbe risultare l’esempio di utilizzo dei canvas con javascript:

Spiacente non supporto i canvas di HTML5

Procedimento – uso di canvas con JavaScript per creare grafici

Innanzitutto inseriamo le caselle di input di tipo number, specificando l’id e aggiungiamo il button dove all’evento onclick() richiamiamo la funzione creaGrafico().

<input type="number" id="dato1">
<input type="number" id="dato2">
<input type="number" id="dato3">
<input type="number" id="dato4">
<button onclick="creaGrafico()" type ="button">crea</button>

Dopo inseriamo l’area dove generare il nostro grafico:

<canvas id="disegno" width="400" height="200">
Spiacente non supporto i canvas di HTML5 </canvas>

Infine creiamo la nostra funzione JavaScript.

Per crearla iniziamo a rendere disponibile l’oggetto come nell’esempio precedente:

var disegno=document.getElementById('disegno');
var context=disegno.getContext('2d');

Poi leggiamo i dati dalla casella di testo, utilizzando il metodo getElementById() come abbiamo spiegato negli articoli precedenti.

Adesso dobbiamo calcolare le ampiezze degli angoli dal valore immesso in input. Utilizziamo questa semplice proporzione:

angolo=valore * 2 PiGreco/totale.

Quindi calcoliamo il totale dei valori immessi in input e dopo ricaviamo gli angoli.

Infine iniziamo a creare le nostre porzioni di torta utilizzando il metodo beginPath() e closePath() per ogni porzione.

Allego lo script completo che utilizza i canvas con JavaScript per creare grafici a torta.

<script type="text/javascript">
function creaGrafico(){
   var disegno=document.getElementById('disegno');
   var context=disegno.getContext('2d');
   var input1=eval(document.getElementById('dato1').value);
   var input2=eval(document.getElementById('dato2').value);
   var input3=eval(document.getElementById('dato3').value);
   var input4=eval(document.getElementById('dato4').value);
   
   var total=input1+input2+input3+input4;

   var angle1=2*Math.PI*input1/total;
   var angle2=2*Math.PI*input2/total;
   var angle3=2*Math.PI*input3/total;
   var angle4=2*Math.PI*input4/total;
   
   context.beginPath();
      context.arc(100,100,50,0,angle1, false);
      context.lineWidth=2;
      context.lineTo(100,100);  
      context.fillStyle="rgba(255,255,0,1)";
      context.fill();
   context.closePath();

   context.beginPath();
      context.arc(100,100,50,angle1,angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100);
      context.fillStyle="rgba(0,240,255,1)";
      context.fill();
   context.closePath();
   
   
   context.beginPath();
      context.arc(100,100,50,angle2+angle1,angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(255,0,255,1)";
      context.fill();
   context.closePath(); 
  
   context.beginPath();
     context.arc(100,100,50,angle3+angle2+angle1,angle4+angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(200,155,255,1)";
      context.fill();
   context.closePath();
}
</script>

In maniera simile si potrebbero ad esempio creare degli istogrammi, mi servirà in questo caso ad esempio il metodo fillRect().

Chiaramente questi sono solo dei semplici esempi di come realizzare grafici utilizzando i canvas con JavaScript.

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


Divisori di un numero con Scratch

Divisori di un numero con Scratch

In questo articolo parleremo di come trovare i divisori di un numero con Scratch.

Chiediamo quindi un numero in input e il programma trova i divisori in automatico.

Ad esempio se prendiamo in input il numero 6 i divisori sono 6, 3, 2, 1.

Quindi realizziamo con Scratch questo semplice programma.


Procedimento per il calcolo dei divisori di un numero con Scratch

Partiamo da alcune considerazioni.

Ogni numero è divisibile per se stesso e per 1, quindi facciamo senza a controllare se il resto della divisione è zero.

Inoltre possiamo restringere il campo delle divisioni ad n/2 in quanto ciascun numero diviso un numero maggiore della sua metà dà sempre resto diverso da zero.

Quindi potremmo dividere da 2 fino ad n/2. Nel caso in cui il numero sia dispari arrotondiamo il valore con la funzione arrotonda di Scratch.

Ecco quindi lo sfondo e lo sprite che ho scelto.

sfondo divisori

Creiamo poi le variabili numero e divisore:

variabili divisori

Ecco il codice a blocchi completo per il calcolo dei divisori di un numero con Scratch.

Ho comunque diviso il numero per uno ma come spiegato prima potevo anche farne a meno.

divisori di un numero

Potevamo procedere anche iniziando a dividere da numero/2 fino ad 1, cioè al contrario.

Chiaramente questa è una possibile soluzione per trovare i divisori di un numero con Scratch, dunque proponete pure la vostra nei commenti sotto.


Alcuni link utili

Multipli di un numero con scratch

Numeri pari con scratch

Esercizi con scratch

Potenze con scratch

Quoziente potenze stessa base con scratch

Palindroma con scratch

Storiella con scratch

Serie buffa con scratch

Operazioni matematiche con scratch

Come sommare un intervallo di numeri con scratch

Anno bisestile con scratch

Selezione con scratch

Olimpiadi di informatica con scratch

Olimpiadi di matematica con scratch

Figure equivalenti con scratch

Come riconoscere gli angoli con scratch

Morra cinese con scratch

Giochi matematici autunno 2018

Esempi di giochi matematici Bocconi

Gioco della tabellina con scratch

Disegnare poligoni regolari con scratch

Numeri primi in Scratch


Libreria jsPDF

Libreria jsPDF

Abbiamo già visto degli esempi con la libreria jsPDF continuiamo ancora a vedere come generare un pdf da una pagina web.

Inserire immagini in un pdf con la libreria jsPDF

In questo esempio vediamo come inserire delle immagini in un documento pdf che andremo a creare facendo clic sul link dell’immagine.

L’operazione da fare è molto semplice, ma dobbiamo convertire la nostra immagine in base64.

Ma che cos’è la codifica base64? E’ una tecnica di conversione che consente la traduzione di dati binari (0,1) in stringhe di testo ASCII sulla base di 64 caratteri diversi.

Vi elenco alcuni convertitori di immagini a base64, che potete utilizzare per convertire le vostre immagini da inserire nel documento pdf.

https://www.base64-image.de/

https://www.drogbaster.it/convertire-immagini-in-base64.html

https://www.browserling.com/tools/image-to-base64

Funzionano tutti allo stesso modo: si carica l’immagine e dopo si genera il codice base64. Questo codice ci servirà quindi per caricare la nostra immagine nel file pdf.

Ecco il nostro esempio, se cliccate su crea immagine, si genera un file pdf con l’immagine che ho codificato in precedenza a base64.

Crea immagine


L’esempio si realizza includendo, come abbiamo già spiegato negli altri tutorial, la libreria jsPDF:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

Creo quindi il link che genera la creazione del pdf.

<a href="javascript:immagine()">Coding Creativo</a>

Poi si scrive la semplice funzione che prende la nostra immagine e la memorizza nella variabile imgData che segue la specifica:

var imgData=’data:image/jpeg;base64, codice generato base64‘;

dove codice generato base64 và sostituito con il vostro codice dell’immagine generato come spiegato sopra.

Ho inserito anche un semplice titolo dell’immagine e un sottotitolo.

<script type="text/javascript">
function immagine() {
    var doc = new jsPDF();
    var imgData='data:image/jpeg;base64, **codice generato base64**';

    doc.setFontSize(26);
    doc.text(20, 20, 'Angoli con scratch');
    doc.setFontSize(18);
    doc.text(20, 40, 'Immagine codificata base64');
    doc.addImage(imgData, 'JPEG', 15, 60, 170, 170);

    doc.save('CodingCreativo.pdf');
}
</script>

Chiaramente questo è solo un semplice esempio di utilizzo della libreria jsPDF.

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