trim JavaScript

trim JavaScript

Il metodo trim in JavaScript è utilizzato per rimuovere gli spazi bianchi (spazi, tabulazioni e ritorni a capo) dall’inizio e dalla fine di una stringa. Questo è particolarmente utile quando si gestiscono input utente o quando si manipolano stringhe che potrebbero contenere spazi aggiuntivi indesiderati.

La sintassi di questo metodo è piuttosto semplice, infatti si richiama il metodo semplicemente sulla stringa che si vuole ripulire: stringa.trim().

Dove stringa rappresenta dunque la stringa da manipolare.

Il metodo trim() in JavaScript non accetta parametri. Esso opera direttamente sulla stringa a cui è applicato, rimuovendo gli spazi bianchi (spazi, tabulazioni e ritorni a capo) solo dall’inizio e dalla fine della stringa.

Esempio d’uso di trim in JavaScript

Facciamo quindi un semplice esempio di utilizzo di questo metodo.

Prendiamo in input una stringa di esempio ‘Coding Creativo‘ con degli spazi vuoti inseriti all’inizio e alla fine e per comodità la visualizziamo nella console del browser.

const frase = '   Coding Creativo  ';
console.log(frase);

Noteremo che la stringa di esempio è visualizzata con tutti i suoi spazi.

Se quindi, alla stringa applichiamo il metodo trim di JavaScript, ci accorgiamo che sia gli spazi iniziali, sia quelli finali, sono stati eliminati.

Ecco quindi il codice di esempio che fa uso del metodo trim():

let frase = '   Coding Creativo  ';
frase = frase.trim();
console.log(frase);

Con ECMAScript 2019 (ES10) sono stati inseriti anche i metodi trimStart() e trimEnd(), questi metodi rimuovono gli spazi bianchi solo dall’inizio (parte sinistra) o dalla fine (parte destra) di una stringa. Possono essere dunque utilizzati quando si richiede l’eliminazione di spazi vuoti solo da un’estremo.

Conclusione

In questa lezione abbiamo visto semplicemente a cosa è utile il metodo trim di JavaScript, utilizzato sulle stringhe di testo. Nelle prossime lezioni vedremo altri modi per togliere spazi vuoti dall’inizio e dalla fine di una stringa.

Alcuni link utili

Tutorial JavaScript

Come utilizzare JavaScript alert

Come utilizzare JavaScript confirm

Variabili in JavaScript

Creare elementi nel Dom con JavaScript

indexOf in JavaScript

indexOf in JavaScript

Il metodo indexOf in JavaScript può essere utilizzato sia con gli array, sia con le stringhe. indexOf in questa lezione è applicato alle stringhe.

La sintassi di questo metodo JavaScript è dunque la seguente: stringa.indexOf(value, inizio).

In particolare la stringa rappresenta dove ricercare il valore. Dove il valore, cioè il primo argomento passato come parametro, può essere una parola, un numero oppure una frase. Se viene trovata più di un’occorrenza di questo valore, il metodo restituisce comunque l’indice del primo valore trovato.

Il secondo parametro, inizio, rappresenta il punto da dove partire per effettuare la ricerca, in quanto in qualche caso può essere necessario non partire dall’inizio. Se non è specificato si parte da 0.

Esempi d’uso di indexOf con le stringhe in JavaScript

Facciamo un semplice esempio d’utilizzo di questo metodo.

Creiamo una frase e attraverso il metodo indexOf ricerchiamo ad esempio la parola pensiero.

const coding = 'Programmare aiuta lo sviluppo del pensiero logico, divertiamoci ad imparare JavaScript';

const indiceStringa = coding.indexOf('pensiero');
console.log(indiceStringa);

Come risultato nella console troveremo il valore 34 che indica la posizione della parola pensiero.

Se ad esempio la frase dovesse contenere più volte la parola pensiero, darebbe comunque sempre la posizione 34.

Abbiamo detto che se non trova l’elemento il metodo indexOf in JavaScript restituisce il valore -1, quindi facciamo la prova a modificare il valore da ricercare nella stringa, come nell’esempio sotto:

const coding = 'Programmare aiuta lo sviluppo del pensiero logico, divertiamoci ad imparare JavaScript';

const indiceStringa = coding.indexOf('il pensiero');

console.log(indiceStringa);

Dunque in questo caso nella console vedremo come risultato -1 in quanto il valore passato come argomento non è contenuto nella stringa.

Conclusione

In questa lezione abbiamo studiato l’utilizzo del metodo indexOf in JavaScript con le stringhe, lo stesso metodo si può applicare agli array, come vedremo in questa lezione: indexOf con gli array.

Alcuni link utili

Tutorial JavaScript

Come utilizzare JavaScript alert

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Cicli for annidati

Tavola pitagorica

includes in JavaScript

includes in JavaScript

Il metodo includes in JavaScript sulle stringhe consente di verificare se un testo è contenuto in una stringa. Il metodo includes può essere anche applicato agli array, come vedremo più avanti nel tutorial.

La sintassi di questo metodo è dunque la seguente: stringa.includes(valore, inzio).

Dove stringa rappresenta la stringa dove ricercare il valore. Il parametro valore può essere una parola, un numero o una frase. Non ha importanza quante volte sia contenuto il valore nella stringa, in ogni caso l’importante è trovarlo almeno una volta.

Invece il parametro inizio rappresenta il punto da dove partire per effettuare la ricerca, poiché in taluni casi si preferisce non partire dall’inizio. Se il parametro inizio non è specificato il valore di default è 0.

Il metodo restituisce un valore booleano, cioè true oppure false.

Corso su JavaScript

Esempi d’utilizzo di includes in JavaScript

Facciamo adesso dei semplici esempi d’utilizzo del metodo includes() con le stringhe.

Data una frase contenuta in una variabile stringa, controllare se una parola è contenuta in questa frase.

Nell’esempio sotto proviamo dunque a cercare la parola pensiero all’interno di una frase d’esempio. Utilizziamo a questo scopo il metodo includes di JavaScript.

const coding = 'Programmare aiuta lo sviluppo del pensiero logico, divertiamoci ad imparare JavaScript';

const includeStringa = coding.includes('pensiero');

console.log(includeStringa);

Nella console del browser visualizzeremo il valore true, in quanto la parola pensiero è contenuta nella nostra stringa di esempio.

Chiaramente si possono ricercare anche più parole, purché siano contenute nell’ordine esatto.

Quindi anche nell’esempio riportato sotto il risultato è true.

const coding = 'Programmare aiuta lo sviluppo del pensiero logico, divertiamoci ad imparare JavaScript';

const includeStringa = coding.includes('pensiero logico');

console.log(includeStringa);

Nel momento in cui la sequenza non è corretta, oppure non tutte le parole sono contenute nella frase allora il risultato è false.

Ecco quindi un esempio in cui il valore restituito è false:

const coding = 'Programmare aiuta lo sviluppo del pensiero logico, divertiamoci ad imparare JavaScript';

const includeStringa = coding.includes('il pensiero logico');

console.log(includeStringa);

Conclusione

In questa lezione abbiamo svolto alcuni esempi sull’utilizzo di includes con le stringhe in JavaScript. Questo metodo può essere utilizzato anche con gli array e la lezione può essere consultata al seguente link: inlcudes con gli array.

Alcuni link utili

Tutorial JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Math floor JavaScript

Math floor JavaScript

In questo articolo parleremo di Math.floor in JavaScript, un metodo utilizzato per arrotondare un numero per difetto, ovvero all’intero più vicino più basso.

La sintassi è dunque la seguente: Math.floor(numero).

Dove numero è un parametro obbligatorio e rappresenta il numero da arrotondare per difetto.

Esempi d’utilizzo di Math floor in JavaScript

Un semplicissimo esempio d’utilizzo del seguente metodo lo facciamo passando direttamente un numero decimale come argomento.

Come possiamo vedere nel semplice esempio mostrato sotto:

console.log(Math.floor(8.73));

Come risultato si avrà 8, cioè il numero arrotondato per difetto senza decimali, ovvero all’intero più basso.

Ma possiamo passare anche una variabile, come in quest’altro esempio:

var n = 13.89;
console.log(Math.floor(n));

Anche in questo caso si otterrà il numero arrotondato all’intero più basso, ovvero 13.

Math floor in JavaScript e Math random

Un utilizzo molto frequente di Math.floor in JavaScript è assieme alla funzione Math.random, utile a generare dei numeri pseudo-casuali.

Quindi ad esempio se voglio ottenere dei numeri casuali compresi tra 1 e 10, posso scrivere:

var casuali = Math.floor((Math.random() * 10) + 1);
console.log(casuali);

Descriviamo i passaggi effettuati dall’algoritmo realizzato sopra.

– innanzitutto genero i numeri casuali da 0 a 9: Math.random() * 10.

Ottengo in questo modo i risultati da 0.000 a 9.999 (chiaramente con maggiore precisione, li ho troncati solo per comodità).

– Aggiungo 1: (Math.random() * 10) + 1. In questo modo ottengo i risultati da 1.000 a 10.999 (li sto sempre approssimando per semplicità).

– Dopo arrotondo all’intero più basso per avere, in questo modo, i numeri da 1 a 10: Math.floor((Math.random() * 10) + 1).

In questa lezione abbiamo proposto dei semplicissimi esempi d’utilizzo del metodo Math.floor in JavaScript.

Alcuni link utili

Indice argomenti tutorial JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Funzioni JavaScript e istruzione return

Console log JavaScript

Console log JavaScript

Il metodo console.log() in JavaScript riveste un ruolo cruciale nella fase di sviluppo, consentendo agli sviluppatori di visualizzare messaggi nella console del browser. Questi messaggi possono essere semplici stringhe di testo, variabili o anche strutture dati complesse di JavaScript, rendendo il console log uno strumento diagnostico essenziale.

Console log in JavaScript

Innanzitutto vediamo un esempio di come stampare una variabile nella console del browser:

const a = 13;
console.log(a); //visualizza 13

Poi vediamo anche come stampare una frase qualunque:

console.log('Ciao da coding creativo');

Inoltre è possibile stampare assieme varaibili e testo:

const a = 13;
console.log('la variabile è', 13);
//oppure in alerternativa possiamo usare il + 
console.log('la variabile è' + 13);

Gli esempi a seguire utilizzano argomenti che verranno approfonditi più avanti, come le istruzioni condizionali e gli array.

Altro esempio di utilizzo del metodo console.log in JavaScript

Un esempio pratico di utilizzo del console.log() riguarda la verifica della positività di un numero.

Realizziamo un programma che testi se un numero è positivo, visualizzando il messaggio nella console del browser.

Iniziamo con l’inizializzazione di una variabile a con un valore positivo, ad esempio, 13. Successivamente, attraverso un’istruzione condizionale, testiamo se il valore è positivo o meno e visualizziamo il risultato nella console:

const a = 13;

if(a > 0) {
  console.log('il numero è positivo');
} else {
  console.log('il numero non è positivo');
}

È possibile arricchire la visualizzazione includendo la variabile a nel messaggio, utilizzando l’operatore di concatenazione (+) o la virgola:

console.log('il numero ' + a + ' è positivo');

oppure la virgola:

console.log('il numero ', a ,' è positivo');

È possibile utilizzare le template string (usando i backtick ` `) per rendere più pulito e leggibile il codice quando si concatenano stringhe e variabili.

Ecco come sarebbe l’esempio precedente con l’uso della sintassi template string:

console.log(`Il numero ${a} è positivo`);

Nella console posso stampare anche un valore booleano, come ad esempio il test che ho inserito nell’if.

Nel nostro caso:

console.log(a > 0);

Nella console visualizzeremo il valore booleano true.

Corso su JavaScript

Stampare gli array nella console del browser

Creiamo un array di numeri e visualizziamo il risultato nella console del browser.

Per affrontare questo esempio si devono dunque conoscere gli array presentati in questa lezione: introduzione agli array in JavaScript.

const numeri = [14, 8, 2, 11, 6, 7];

console.log(numeri);

Nella console vedremo il nostro array come da figura sotto:

console log array

Allo stesso modo ad esempio potrei voler stampare un oggetto:

const auto = {
  modello: 'fiat',
  colore: 'bianco'
};

console.log(auto);

Nella console vedremo il nostro oggetto come da figura sotto:

oggetto javascript

Oggetto console

In JavaScript, l’oggetto console è duqnue uno strumento essenziale che fornisce metodi per interagire con la console del browser. La console è un ambiente di debugging che consente agli sviluppatori di visualizzare messaggi, errori e varie informazioni durante lo sviluppo del codice.

Oltre al metodo console.log(), comunemente usato per stampare messaggi nella console ci sono altri metodi, vediamone alcuni:

1. console.error(): Utilizzato per stampare messaggi di errore nella console. Questi messaggi sono spesso contrassegnati con un’icona distintiva per attirare l’attenzione sugli errori.

console.error("Errore!");

2. console.warn(): Visualizza un avviso nella console. Anche questi messaggi sono contrassegnati con un’icona specifica.

console.warn("Attenzione!");

3.console.info(): Utilizzato per visualizzare informazioni nella console. Può essere utile per comunicare dettagli o informazioni aggiuntive.

console.info("Informazioni aggiuntive");

4. console.clear(): Pulisce la console, rimuovendo tutti i messaggi precedenti. Utile per mantenere la console ordinata durante il debugging.

console.clear();

5. console.table(): Visualizza un array o un oggetto sotto forma di tabella, rendendo più leggibile la visualizzazione di dati strutturati.

const studenti = [  { nome: 'Alice', voto: 90 }, 
  { nome: 'Bob', voto: 85 }
]; 

console.table(studenti);

6. console.group() e console.groupEnd(): Questi metodi consentono di creare gruppi di messaggi nella console, rendendo più ordinata la visualizzazione di output correlati.

console.group('Dettagli studenti'); 
console.log('Nome: Alice'); console.log('Voto: 90'); 
console.groupEnd();

7. console.time() e console.timeEnd(): Questi metodi vengono utilizzati per misurare il tempo di esecuzione di un blocco di codice.

console.time('Tempo di esecuzione'); 
// Codice da misurare 
console.timeEnd('Tempo di esecuzione');

L’utilizzo di console è fondamentale durante lo sviluppo, poiché consente di monitorare e analizzare il comportamento del codice, individuare errori e ottimizzare le prestazioni. Tuttavia, è buona pratica rimuovere o commentare le istruzioni console prima del rilascio del codice in produzione per evitare la presenza di informazioni di debug non necessarie.

Corso su JavaScript

Conclusioni

Il metodo console.log di JavaScript come abbiamo visto consente di stampare messaggi, variabili e strutture dati. Risulta dunque essere utile agli sviluppatori per fare dei test veloci sul codice scritto.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Come utilizzare JavaScript confirm

Utilizzare JavaScript prompt

Ciclo do while

Ciclo for

Esempi ciclo for in JavaScript