Generatore di frasi random

Generatore di frasi random

In questa lezione svilupperemo un generatore di frasi random.

Faremo in modo che cliccando su un pulsante, di volta in volta, si generi una nuova frase.

Provate l’esempio sotto, cliccando sul pulsante:

Generatore di frasi random

Sviluppo del generatore di frasi random

Innanzitutto sviluppiamo il semplice codice HTML necessario per creare il generatore.

Inseriamo un container per contentere tutto dove all’interno inseriamo dapprima un titolo, dopo un div dove inseriremo la frase generata random ed infine un button per generare l’evento al click.

Ecco di seguito il codice HTML:





Inserite del codice CSS a piacere per dare un pò di grafica al progetto.

Sviluppiamo poi il codice JavaScript.

Innanzitutto prepariamo l’array che conterrà tutte le frasi scegliendo alcune citazioni di personaggi famosi.

Poi attraverso l’evento addEventListener richiamiamo la funzione per generare un elemento random dell’array al click sul button.

Possiamo utilizzare semplicemente una funzione che genera un numero random tra 0 e la lunghezza dell’array meno 1. Dopo individuiamo la frase nell’array utilizzando questo numero come indice.

Ecco di seguito il codice completo:



myQuotes = [
    'A volte sono le persone che nessuno immagina che possano fare 
    certe cose quelle che fanno cose che nessuno può immaginare.',
    'La fantasia è più importante del sapere, perché il sapere è limitato.',
    'Chi dice che è impossibile non dovrebbe disturbare chi ce la sta facendo.',
    'C\'è una forza motrice più forte del vapore, 
      dell’elettricità e dell’energia atomica: la volontà.',
    'La misura dell\'intelligenza è data dalla capacità di cambiare 
        quando è necessario.',
    'La logica ti porta da A a B, l’immaginazione ti porta ovunque.',
    'Gli occhi sono lo specchio dell’anima… cela i tuoi se non vuoi che 
       ne scopra i segreti.',
    'Imparerai a tue spese che nel lungo tragitto della vita incontrerai 
        tante maschere e pochi volti.',
    'Ma guardi signora è facilissimo, le insegno io ad esser pazza. 
     Basta gridare la verità in faccia a tutti, loro non ci crederanno 
       e ti prenderanno per pazza.'
];

const buttonQuote = document.getElementById('new-quote');

buttonQuote.addEventListener('click',generate);

function generate(){
    randomQuote = randomNumber(myQuotes);

    const quote =  document.getElementById('quote');
    quote.innerHTML = myQuotes[randomQuote];
}

function randomNumber(array) {
    const num = Math.round(Math.random() * (array.length - 1));
    return num;
}

Conclusioni

In questa lezione abbiamo sviluppato un semplice generatore di frasi random, scegliendo alcune citazioni famose tra cui Pirandello, Turing ed Albert Einstein.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

slice in JavaScript

slice in JavaScript

Il metodo slice sulle stringhe in JavaScript consente di estrarre una parte di una sottostringa da una stringa.

La sua sintassi è la seguente: string.slice(inizio, fine)

Dove i due parametri inizio e fine sono opzionali. Il valore di inizio è un valore numerico che indica da dove deve partire la selezione, mentre il valore fine è un valore numerico che indica deve finire la selezione.

La stringa di partenza non sarà modificata, dunque per salvare la sottostringa occorre utilizzare una nuova variabile.

slice in JavaScript – primo esempio

Data una stringa estrarre una sottostringa partendo dal secondo carattere fino al 5.



var str = "Coding Creativo";

Dopo, utilizzando il metodo slice selezioniamo i caratteri dal secondo al quinto.

Memorizziamo la selezione effettuata in una nuova variabile, ad esempio di nome risultato.

Infine visualizziamo il risultato nella console del browser.



var risultato = str.slice(2,5);
console.log(risultato);

Nella console del browser visualizzeremo questo outpu: din.

slice in JavaScript – secondo esempio

Questa volta estraiamo la sottostringa prendendo la parola a partire dal primo carattere vuoto di una stinga composta da sole due parole.

Dato che la frase è composta da sole due parole, la soluzione è molto semplice.

Infatti possiamo utilizzare il metodo indexOf per trovare la posizione. Dunque riusciamo facilmente ad individuare la posizione del carattere vuoto con questo metodo: str.indexOf(” “).



var str = "Coding Creativo";
var risultato = str.slice(str.indexOf(" "));
console.log(risultato);  

Il risultato in output comprenderà il carattere vuoto, se vogliamo escluderlo possiamo aggiungere 1 alla posizione ottenuta.

Ecco un esempio:



var str = "Coding Creativo";
var risultato = str.slice(str.indexOf(" ") + 1);
console.log(risultato);  

slice in JavaScript – terzo esempio

Estrarre la terza parola di una frase.

Questo esempio è molto simile al secondo, la differenza consiste nello specificare il parametro end all’interno del metodo slice e nel fatto che ci sono più parole.

La terza posizione corrisponde al secondo carattere vuoto trovato nella frase.

La frase che prendiamo in considerazione è: A volte sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare!

La parola che vogliamo estrarre è la terza dunque è sono.

Possiamo risolvere l’algoritmo in vari modi, ecco una prima soluzione grossolana che estre più volte le sottostringhe e che utilizza due metodi: indexOf e slice.



var str = "A volte sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare!";

str = str.slice(str.indexOf(" ") + 1);
str = str.slice(str.indexOf(" ") + 1);
str = str.slice(0, str.indexOf(" "));
console.log(str);

Vi presento poi un’altra possibile soluzione, più ottimale rispetto alla prima.

Dapprima trasformiamo la stringa stringa in un array con il metodo split e poi stampiamo semplicemente la terza parola. In questo caso non si utilizza slice.



var str = "A volte sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare!";

str = str.split(" ");
console.log(str[2]);

Conclusione

In questa lezione abbiamo studiato il metodo slice sulle stringhe in JavaScript, nelle prossime lezioni studieremo altri metodi sulle stringhe.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

createTextNode JavaScript

createTextNode JavaScript

Continuiamo il nostro tutorial utilizzando il metodo createTextNode in JavaScript, ovvero il metodo che ci consente di inserire del testo in un nodo.

Infatti, dopo aver creato un nuovo elemento oppure su un elemento già esistente, si può avere la necessità di inserire del testo al suo interno.

Per fare ciò si può utilizzare ad esempio il metodo createTextNode() di JavaScript, dove all’interno delle parentesi tonde specifico il nuovo testo da inserire.

La sintassi di questo metodo è la seguente:

element.createTextNode()

createTextNode JavaScript – first example

In questo esempio creeremo un nuovo paragrafo, dove all’interno inseriremo un testo a piacere. Il nuovo paragrafo sarà creato al click sul pulsante.

Provatelo cliccando sul pulsante sotto:

Procedimento

Spieghiamo dettagliatamente il procedimento per realizzare questo esempio.

Nel codice HTML inseriamo come prima un pulsante ‘Aggiungi nuovo paragrafo‘ e sotto di esso aggiungiamo un livello (div), dove apparirà il nuovo paragrafo generato.

La nostra funzione aggiungi() svolgerà delle semplicissime istruzioni:

  • dapprima creerà il nuovo elemento paragrafo,
  • poi scriverà del testo all’interno di questo paragrafo utilizzando il metodo createTextNode di JavaScript
  • e poi utilizzanado il metodo appendChild() aggiungerà questi contenuti appena creati nel punto desiderato. Il punto desiderato si ottiene grazie al metodo getElementById.

Ecco quindi il codice html per creare l’esempio:

<button onclick="aggiungi()">Aggiungi paragrafo</button>
<div id="testo"></div>

Ed il codice JavaScript:



function aggiungi() {
  var paragrafo= document.createElement("p");
  var testo = document.createTextNode("Coding Creativo");
  paragrafo.appendChild(testo);
  document.getElementById("testo").appendChild(paragrafo);
}

Conclusione

Quindi, riassumendo in questa lezione abbiamo imparato a creare elementi nel DOM con JavaScript e ad utilizzare i metodi createElement(), createTextNode() e appendChild().

Nella prossima lezione continueremo ancora a parlare del DOM con JavaScript.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Come realizzare un form in html

Tag strong

Collegamenti interni ad una pagina web

Test JavaScript

Test JavaScript

Ecco un test per valutare le competenze acquisite sul linguaggio JavaScript.

Valuta le tue competenze su concetti di base ed avanzati di JavaScript con i test creati su Coding Creativo.

403

JavaScript

JavaScript

1 / 10

Quale di questi non è un oggetto in JavaScript?

2 / 10

Può una funzione essere assegnata ad una variabile?

3 / 10

Che cosa restituisce questo programma?

x = 5;
console.log(x);
var x;

4 / 10

Che cosa restituisce questo programma?

x = 5;console.log(x);let x;

5 / 10

Come si dichiara una variabile in JavaScript?

6 / 10

Che cosa si intende per undefined in JavaScript?

7 / 10

A cosa serve il metodo includes applicato alle stringhe in JavaScript?

8 / 10

Che cosa restituisce 3 === '3' ?

9 / 10

Quale di questi non è un modo valido per definire una funzione?

10 / 10

Che cosa ritorna 3 == '3' ?

Il tuo punteggio è

Il punteggio medio è 49%

0%

 

Scrivi nei commenti eventuali dubbi o difficoltà o se c’è qualcosa di errato secondo voi!

Segui il nostro tutorial per apprendere sempre nuovi concetti al seguente link tutorial JavaScript!

Ecco alcuni link utili che puoi trovare sul blog:

Metodo includes

Proprietà length

Gioco indovina numero in JavaScript

Semplice quiz utilizzando gli array

Come sviluppare il gioco del 15 in JavaScript

Gioco della slot machine in JavaScript

Memory Game in JavaScript

Funzioni JavaScript e istruzione return

Funzioni di callback

Esempi funzioni di callback

Callback e setTimeout

Conversione binario decimale

Conversione binario decimale

In questa lezione svilupperemo un sistema di conversione da binario a decimale in JavaScript.

Innanzitutto proviamo il simulatore sotto. Inseriamo nel campo di input un numero binario, in automatico nel campo sotto si vedrà il corrispettivo numero decimale.

Decimale:

Conversione da binario a decimale in JavaScript

Innanziutto impostiamo la parte di codice inerente l’HTML.

Nel nostro caso saranno semplicemente due caselle di input:


 

Ho inserito sulla casella di input in ingresso, ovvero quella dove scriveremo il numero binario, due eventi:

  • onkeyup che utilizzo per attivare la funzione change;
  • onkeypress che utilizzo per controllare se il numero è valido.

Chiaramente potrei gestire anche diversamente questi eventi lato JavaScript.

Sviluppiamo quindi la funzione isValidNumber, la quale verifica che il numero in ingresso sia 0 oppure 1. In questo modo se proviamo a digitare altri numeri o lettere non verranno presi in considerazione.


        function isValidNumber(e) {

            if (e.keyCode == 48 || e.keyCode == 49) {
                return true;
            }

            return false;
        }

Sviluppiamo adesso una funzione che consente di trasformare in decimale il numero binario preso in considerazione.

Seguiamo questo metodo:

  • Trasformiamo in una lista il numero inserito nel campo di input con id binario;
  • Invertiamo la lista;
  • Applichiamo il metodo forEach per scorrere la lista.
    • Dunquem, per ogni elemento controlliamo che il numero sia 1. Se la condizione è soddisfatta si aggiunge alla variabile decimale la potenza di riferimento, ottenuta grazie all’utilizzo di index.
  • Si restituisce il numero decimale ottenuto.

Ecco dunque una possibile implementazione dell’algoritmo per la conversione binario decimale in JavaScript:


        function bin_dec(num){
           decimal = 0;

            num = Array.from(String(num), Number);
            num = num.reverse();

            num.forEach((number, index) => {

                    if (number == 1) {
                        decimal += Math.pow(2, index);
                    }

                })  

            return decimal;
        }

Creiamo adesso la funzione change che richiama la funzione di conversione.



        function change(name) {
                b = document.getElementById("binary").value;
                conversion = bin_dec(b);
          
                result.value = conversion;
        }

Chiaramente questo è uno dei metodi per il sistema di conversione da binario a decimale in JavaScript, scrivete il vostro metodo nei commenti sotto.

Alcuni link utili

Indice argomenti tutorial JavaScript

Template responsive con html

Come creare un css responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

PDF da un form con JavaScript

Gioco confronta numeri in JavaScript

Gioco confronta numeri in JavaScript

In questa lezione vi spiego passo passo come realizzare un semplice gioco che confronta i numeri in JavaScript.

Lo scopo di questo gioco, adatto a far giocare dei bambini della primaria, è quello di approfondire l’utilizzo delle funzioni, il metodo getElementById, la classe className, ecc.

Innanzitutto provate il gioco base cliccando sul pulsante gioca in basso, oppure andate al seguente link per il gioco completo: gioco confronta numeri.

Confronta i numeri!

Gioco confronta numeri in JavaScript – Implementazione

Innanzitutto costruiamo la sezione html del gioco. Inseriamo un div che conterrà il primo numero, poi una select con le opzioni (maggiore, minore, uguale) e poi un altro div che contiene il secondo numero.

Inseriamo poi due pulsanti, uno per verificare la correttezza delle risposte e l’altro per far partire il gioco.

Infine sotto inseriamo un div in cui scriveremo il risultato.

Ecco dunque una possibile implementazione:



Personalizziamo adesso il codice html con il CSS.

Creiamo le classi per i numeri, per la select e per i pulsanti. Dopo creiamo anche le classi visible e invisible per nascondere o visualizzare gli elementi nella pagina web.


#game{
     border-radius: 5px;
     background-color: #3889c4;
     margin-top: 30px;
     padding: 20px;
     max-width: 500px;
     margin: auto;
     text-align: center;
}
#number_one, #number_two{
     color: white;
     font-size: 28px;
     text-align: center;
     padding:10px;
}
select#confronto{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 5px;
     padding: 5px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
}
#button-verifica, #button-play{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 25px;
     padding: 10px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
 }     
#button-verifica:hover{
     background-color: #16486c;
}
div#risultato{
     max-width: 300px;
     margin: 10px auto;
     border: 1px solid #87c6f4;
     border-radius: 15px;
     background-color: #87c6f4;
     padding: 10px;
     font-size: 26px;
 }
.invisible{
     display: none;
 }
.visible{
     display: inline;
}

Programmiamo adesso la parte di JavaScript.

Innantitutto creiamo lo script del pulsante gioca. Appena si clicca sul pulsante dobbiamo far si che si generino due numeri random e si posizionino nei div opportuni.


let num1;
let num2;
let tentativi = 3;
let punteggio = 0;

document.getElementById("button-play").addEventListener("click", gioca);

function random_number() {
    const num = Math.round(Math.random() * 100);
    return num;
}

function gioca() {
    num1 = random_number();
    num2 = random_number();
    
    document.getElementById('number_one').innerHTML = num1;
    document.getElementById('number_two').innerHTML = num2;

    document.getElementById('button-play').className = "invisible";
    document.getElementById('button-verifica').className = "visible ";
    document.getElementById('confronto').className = "visible";
   
  }

Gestiamo il controllo della risposta. Impostaimo 3 tentativi in tutto e ad ogni click sul pulsante verifica decrementiamo la variabile tentativo di 1. Poi controlliamo se i numeri soddisfano la condizione scelta. Se si, assegniamo un punto, altrimenti diciamo che ha sbagliato a rispondere.


document.getElementById("button-verifica").addEventListener("click", controllo);

function controllo() {
    tentativi -= 1;

    let confronto = document.getElementById('confronto').value;

    if (num1 == num2 && confronto == "uguale" 
        || num1 < num2  && confronto == "minore" 
        || num1 > num2 && confronto == "maggiore"){
        punteggio += 1;
        document.getElementById("risultato").innerHTML = 'Ottimo! Punti: ' + punteggio;    
      } else {
        document.getElementById("risultato").innerHTML = 'Hai sbagliato, concentrati!';
      } 
      if(tentativi > 0){
        gioca()
      } else {
        document.getElementById("risultato").innerHTML = 'Totale: ' + punteggio;
        document.getElementById("button-play").innerHTML = 'Rigioca';
        document.getElementById('number_one').innerHTML = " ";
        document.getElementById('number_two').innerHTML = " ";
        document.getElementById('button-verifica').className = "invisible ";
        document.getElementById('confronto').className = "invisible ";
        document.getElementById('button-play').className = "visible";
        punteggio = 0;
        tentativi = 3;
      }
}

Chiaramente questa è solo una possibile implementazione del gioco confronta numeri in JavaScript, divertitevi a creare la vostra versione.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript