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.
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.
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.
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.
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.
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.
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.
