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.

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

const 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(” “).

const str = "Coding Creativo";
const 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:

const str = "Coding Creativo";
const 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.

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

let 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

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

[ays_quiz id=’2′] 

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

Counter JavaScript

Counter JavaScript

In questo articolo, esploreremo la creazione di un counter in JavaScript, fornendo implementazioni che consentono sia l’incremento che il decremento in modi diversificati e interessanti.

Realizziamo un counter in JavaScript

In questo primo progetto, ci immergeremo nella creazione di un counter utilizzando esclusivamente JavaScript Vanilla. Sperimentate cliccando sui pulsanti sottostanti per incrementare o decrementare la variabile del counter, partendo dal valore iniziale di 0.

JavaScript Counter

0

Codice HTML

Per iniziare dunque, esploriamo il codice HTML necessario per il nostro progetto.

<div class="container">
    <h3>JavaScript Counter</h3>
    <button id="minus">-</button>
    <span id="number">0</span>
    <button id="plus">+</button>
</div>

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.

Codice CSS per la realizzazione del counter in JavaScript

Successivamente, possiamo arricchire il nostro progetto aggiungendo del codice CSS a piacere. Nel mio caso, ho incluso il seguente:

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

Codice JavaScript per la realizzazione del counter

Adesso, presentiamo il codice JavaScript che fa uso del metodo addEventListener per catturare il click del mouse sui pulsanti “più” e “meno”. Al click di ciascun pulsante, l’azione svolta sarà l’incremento oppure il decremento della variabile, con successiva scrittura del suo valore nell’elemento con id “number”, attraverso la proprietà innerHTML.

Ecco di seguito una possibile implementazione:

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;
}

Counter con diversi valori di incremento

In questo secondo esempio, effettuiamo l’incremento del counter utilizzando valori differenti: 1, 5, 10 o 100. Cliccate dunque sui rispettivi pulsanti per osservare l’incremento della variabile di partenza:

JavaScript Counter

0

In questo secondo esempio, abbiamo adottato l’uso dell’evento onclick direttamente sui pulsanti nel codice HTML.



<div class="container">
        <h3>JavaScript Counter</h3>
        <span id="number">0</span>
        <button onclick="add(1)">1</button>
        <button onclick="add(5)">5</button>
        <button onclick="add(10)">10</button>
        <button onclick="add(100)">100</button>
</div>

È importante notare che abbiamo incluso un secondo parametro in base al valore desiderato per l’incremento. Di seguito, presento il codice JavaScript che ho sviluppato:

const number = document.getElementById('number');

let value = 0;

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

Conclusione

In questo articolo, abbiamo presentato un semplice counter implementato in JavaScript. Prossimamente, esploreremo una serie di progetti affascinanti basati su JavaScript.

Alcuni link utili

Indice 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