Simone Biles ‘ ginnasta is currently impossible.

In questo articolo svilupperemo dei semplici progetti JavaScript, come ad esempio visualizzare un counter che si incrementa in vari modi.Progetti JavaScript – counterIn questo primo progetto realizzeremo un counter utilizzando solo JavaScript Vanilla.Provate a cliccare sui pulsanti sotto per incrementare o decrementare la variabile counter che parte dal valore inziale 0.JavaScript Counter – 0 +Come possiamo sviluppare il codice?Dapprima ecco il semplice codice html necessario per il nostro progetto. Abbiamo inserito il button minus che ha la funzione di decrementare la variabile number ed il button plus che invece ha la funzione di incrementarla.Per identificare ogni elemento abbiamo utilizzato un id, allo scopo di poter poi utilizzare il metodo getElementById in JavaScript.Aggiungiamo poi del semplice codice CSS a piacere. Io ad esempio ho inserito questo:

.container {
background-color: #2c45a3;
text-align: center;
padding: 20px;
color: white;
}

h3 {
font-size: 30px;
}

button {
font-size: 30px;
background-color: #fc7180;
color: #2c45a3;
border: none;
border-radius: 10px;
padding: 10px 20px;
cursor: pointer;
}

#number {
font-size: 40px;
padding: 0 50px;
}

Ed ecco dunque il codice JavaScript che utilizza il metodo addEventListener per intercettare il clik del mouse sui due pulsanti più e meno.Quello che faremo al click del mouse su ciascun button sarà semplicemente incrementare o decrementare il valore della variabile e scriverla nell’elemento che ha id number attraverso la proprietà innerHTML.

const number = document.getElementById(‘number’);
const buttonPlus = document.getElementById(‘plus’);
const buttonMinus = document.getElementById(‘minus’);

buttonPlus.addEventListener(‘click’, add);
buttonMinus.addEventListener(‘click’, subtract);

let value = 0;

function add() {
value++;
number.innerHTML = value;
}

function subtract() {
value–;
number.innerHTML = value;
}

Progetti JavaScript – counter con diversi valori di incrementoIn questo secondo esempio incrementiamo il counter con valori diversi: 1, 5, 10 oppure 100.Cliccate dunque sui vari button per vedere l’incremento della variabile di partenza.JavaScript Counter 0 1 5 10 100 In questo secondo esempio abbiamo utilizzato l’evento onclick direttamente sul pulsante nel codice HTML. Potete notare che abbiamo passato un secondo parametro a seconda del valore che vogliamo incrementare.Ecco di seguito il codice JavaScript:

const number = document.getElementById(‘number’);

let value = 0;

function add(n) {
value = value + n;
number.innerHTML = value;
}

ConclusioneIn questo articolo abbiamo sviluppato un semplice counter. Continueremo poi nei prossimi articoli a sviluppare tanti interessanti progetti in JavaScript.Alcuni link utiliIndice tutorial JavaScriptIl linguaggio JavaScriptCome utilizzare JavaScript alertGioco indovina numero in JavaScriptGioco della morra cinese in JavaScriptSemplice quiz utilizzando gli arrayCome realizzare il gioco dei dadi online

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 esempioData 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 esempioQuesta 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 esempioEstrarre 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]);

ConclusioneIn questa lezione abbiamo studiato il metodo slice sulle stringhe in JavaScript, nelle prossime lezioni studieremo altri metodi sulle stringhe.Alcuni link utiliIndice tutorial JavaScriptIntroduzione al tutorial JavaScriptIl linguaggio JavaScriptCome utilizzare JavaScript alertUtilizzare JavaScript promptVariabili in JavaScriptGioco indovina numero in JavaScriptGioco della morra cinese in JavaScriptSemplice quiz utilizzando gli array