Come creare un contatore di parole in JavaScript
Un contatore di parole è uno strumento che puoi utilizzare per contare il numero di parole in una parte di testo. Puoi usarlo per controllare la lunghezza di un documento o per monitorare se stai rispettando un limite di conteggio delle parole.
Puoi creare il tuo contatore di parole utilizzando HTML, CSS e JavaScript. Apri il tuo contatore di parole in un browser web, inserisci il testo in un campo di input e guarda quante parole stai usando.
Questo progetto può anche essere utile per aiutarti a praticare e consolidare la tua conoscenza di JavaScript.
Come creare l’interfaccia utente per il contatore di parole
Per creare l’interfaccia utente per il contatore di parole, aggiungi un input per l’area di testo a una pagina HTML di base. Qui è dove puoi inserire la frase o il paragrafo di cui desideri contare le parole.
- Crea un nuovo file HTML chiamato “index.html”.
- All’interno del file, aggiungi la struttura di base per una pagina Web HTML:
<!doctype html>
<html lang="en-US">
<head>
<title> Word Counter </title>
</head>
<body>
<div class="container">
<h1> Count Words </h1>
</div>
</body>
</html> - All’interno del contenitore div e sotto l’intestazione, aggiungi un’area di testo:
<textarea id="input" rows="10"></textarea> - Sotto l’area di testo, aggiungi un pulsante:
<button id="count-button">Count Words</button> - Aggiungi un tag span per visualizzare il conteggio delle parole quando l’utente fa clic sul pulsante in alto:
<div>
Words: <span id="word-count-result">0</span>
</div> - Nella stessa cartella del tuo file HTML, crea un nuovo file chiamato “styles.css”.
- Popola il file CSS con alcuni CSS per dare uno stile alla tua pagina web:
body {
margin: 0;
padding: 0;
background-color: #f0fcfc;
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color: #202C39;
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
} - Collega il file CSS al tuo file HTML includendo un tag link all’interno del tag head HTML:
<link rel="stylesheet" href="styles.css"> - Per testare l’interfaccia utente della pagina Web, fare clic sul file “index.html” per aprirlo in un browser Web.
Come contare ogni parola all’interno dell’area di testo
Quando un utente inserisce una frase nell’area di testo, la pagina Web dovrebbe contare ogni parola quando fa clic sul pulsante Conta parole .
Puoi aggiungere questa funzionalità all’interno di un nuovo file JavaScript. Se necessario, rivedi altre idee di progetti JavaScript per principianti se hai bisogno di rispolverare la tua conoscenza di JavaScript.
- Nella stessa cartella dei file “index.html” e “styles.css”, aggiungi un nuovo file chiamato “script.js”.
- Collega il tuo file HTML al tuo file JavaScript aggiungendo un tag script nella parte inferiore del tag body:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - All’interno di script.js, utilizza la funzione getElementById() per recuperare gli elementi textarea, button e span HTML. Memorizza questi elementi in tre variabili separate:
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - Aggiungi un listener di eventi clic. Questa funzione verrà eseguita quando l’utente fa clic sul pulsante Conta parole :
button.addEventListener("click", function() {
}); - All’interno del listener di eventi click, ottieni il valore che l’utente ha inserito nella textarea. Puoi trovare questo valore nella variabile di input, che memorizza l’elemento HTML textarea.
let str = input.value; - Utilizzare la funzione split() per separare la stringa in parole separate. Ciò si verificherà ogni volta che c’è uno spazio nella stringa. Questo memorizzerà ogni parola come elemento di un nuovo array. Ad esempio, se la frase immessa fosse “I love dogs”, l’array risultante sarebbe [“I”, “love”, “dogs”].
let wordsList = str.split(""); - Trova il conteggio delle parole utilizzando la lunghezza dell’array:
let count = wordsList.length; - Per visualizzare il risultato all’utente, modificare il contenuto dell’elemento span HTML per visualizzare il nuovo valore:
wordCountResult.innerHTML = count;
Come utilizzare il contatore di parole di esempio
Puoi testare la tua pagina web contatore di parole utilizzando un browser web.
- Apri index.html in qualsiasi browser web.
- Inserisci una frase o un paragrafo nell’area di testo:
- Fare clic sul pulsante Conta parole per aggiornare il conteggio delle parole. Questo mostrerà il conteggio delle parole, proprio come se avessi controllato il conteggio delle parole su Google Docs, Microsoft Word o qualsiasi altro editor con un conteggio delle parole.
Creazione di semplici applicazioni utilizzando JavaScript
Ora si spera che tu abbia una conoscenza di base su come utilizzare JavaScript per contare le parole e interagire con gli elementi su una pagina HTML. Per migliorare la tua comprensione della programmazione, continua a creare piccoli progetti utili in JavaScript.
Lascia un commento