Jak utworzyć licznik słów w JavaScript

Licznik słów to narzędzie, za pomocą którego można policzyć liczbę słów w fragmencie tekstu. Możesz go użyć do sprawdzenia długości dokumentu lub do śledzenia, czy osiągasz limit liczby słów.

Możesz utworzyć własny licznik słów za pomocą HTML, CSS i JavaScript. Otwórz licznik słów w przeglądarce internetowej, wprowadź tekst w polu tekstowym i zobacz, ile słów używasz.

Ten projekt może być również pomocny w ćwiczeniu i utrwalaniu wiedzy na temat języka JavaScript.

Jak utworzyć interfejs użytkownika dla licznika słów

Aby utworzyć interfejs użytkownika licznika słów, dodaj pole tekstowe do podstawowej strony HTML. W tym miejscu możesz wpisać zdanie lub akapit, dla którego chcesz policzyć słowa.

1. Utwórz nowy plik HTML o nazwie „index.html”.
2. W pliku dodaj podstawową strukturę strony HTML:

   HTML>
   <HTMLlang=„en-US”>
   <głowa>
   <tytuł> Licznik słów tytuł>
   głowa>
   <ciało>
   
   klasa="pojemnik">
   <h1> Policz słowa h1>
   dz>
   ciało>
   HTML>

3. Wewnątrz elementu div kontenera i pod nagłówkiem dodaj pole tekstowe:

   <pole tekstoweID="wejście"wydziwianie="10">pole tekstowe>

4. Pod obszarem tekstowym dodaj przycisk:

   <przyciskID=„przycisk liczenia”>Policz słowaprzycisk>

5. Dodaj tag span, aby wyświetlić liczbę słów, gdy użytkownik kliknie przycisk powyżej:

   <dz>
    Słowa: <ZakresID=„wynik-liczby słów”>0Zakres>
   dz>

6. W tym samym folderze co plik HTML utwórz nowy plik o nazwie „styles.css”.
7. Wypełnij plik CSS kodem CSS, aby nadać styl swojej stronie internetowej:

   ciało {
    margines: 0;
    wypełnienie: 0;
    kolor tła: #f0fcfc;
   }
   * {
    rodzina czcionek: „Arial”, bezszeryfowe;
   }
   .pojemnik {
    wypełnienie: 100px 25%;
    wyświetlacz: elastyczny;
    kierunek zginania: kolumna;
    wysokość linii: 2rem;
   rozmiar czcionki: 1.2rem;
    kolor: #202C39;
   }
   pole tekstowe {
    wypełnienie: 20px;
    rozmiar czcionki: 1rem;
    margines dolny: 40px;
   }
   przycisk {
    wypełnienie: 10px;
    margines dolny: 40px;
   } 

8. Połącz plik CSS z plikiem HTML, umieszczając tag linku w tagu head HTML:

   <połączyćrel=„arkusz stylów”href="style.css">

9. Aby przetestować interfejs użytkownika strony internetowej, kliknij plik „index.html”, aby otworzyć go w przeglądarce internetowej.

Jak policzyć każde słowo w polu tekstowym

Kiedy użytkownik wpisuje zdanie w polu tekstowym, strona internetowa powinna liczyć każde słowo po kliknięciu na Policz słowa przycisk.

Możesz dodać tę funkcję w nowym pliku JavaScript. Jeśli trzeba, popraw inne pomysły na projekty JavaScript dla początkujących jeśli chcesz odświeżyć swoją wiedzę o języku JavaScript.

1. W tym samym folderze co pliki „index.html” i „styles.css” dodaj nowy plik o nazwie „script.js”.
2. Połącz swój plik HTML z plikiem JavaScript, dodając tag script na dole tagu body:

   <ciało>
    Twój kod tutaj 
   <scenariuszźródło=„skrypt.js”>scenariusz>
   ciało>

3. W pliku script.js użyj funkcji getElementById(), aby pobrać elementy HTML textarea, button i span. Zapisz te elementy w trzech oddzielnych zmiennych:

   pozwalać wejście = dokument.getElementById("wejście");
   pozwalać przycisk = dokument.getElementById(„przycisk liczenia”);
   pozwalać WordCountResult = dokument.getElementById(„wynik-liczby słów”);

4. Dodaj detektor zdarzeń kliknięcia. Ta funkcja zostanie wykonana, gdy użytkownik kliknie na Policz słowa przycisk:

   button.addEventListener("Kliknij", funkcjonować() {
   });

5. Wewnątrz detektora zdarzeń kliknięcia uzyskaj wartość wprowadzoną przez użytkownika w polu tekstowym. Możesz znaleźć tę wartość w zmiennej wejściowej, która przechowuje element HTML textarea.

   pozwalać str = wejściowa.wartość;

6. Użyj funkcji split(), aby rozdzielić łańcuch na osobne słowa. Stanie się tak za każdym razem, gdy w łańcuchu pojawi się spacja. Spowoduje to przechowywanie każdego słowa jako elementu nowej tablicy. Na przykład, jeśli wprowadzone zdanie brzmiałoby „Kocham psy”, wynikowa tablica wyglądałaby tak: [„Ja”, „miłość”, „psy”].

   pozwalać lista słów = str.split(" ");

7. Znajdź liczbę słów, używając długości tablicy:

   pozwalać liczba = lista słów.długość;

8. Aby wyświetlić wynik z powrotem użytkownikowi, zmień zawartość elementu HTML span, aby wyświetlić nową wartość:

   wordCountResult.innerHTML = liczba; 

Jak korzystać z przykładowego licznika słów

Możesz przetestować swoją stronę internetową licznika słów za pomocą przeglądarki internetowej.

1. Otwórz plik index.html w dowolnej przeglądarce internetowej.
2. Wpisz zdanie lub akapit w polu tekstowym:
3. Kliknij na Policz słowa przycisk, aby zaktualizować liczbę słów. Spowoduje to wyświetlenie liczby słów, tak jak w przypadku sprawdził liczbę słów w Dokumentach Google, Microsoft Word lub jakikolwiek inny edytor z licznikiem słów.

Tworzenie prostych aplikacji przy użyciu JavaScript

Mam nadzieję, że teraz masz podstawową wiedzę na temat używania JavaScript do liczenia słów i interakcji z elementami na stronie HTML. Aby lepiej zrozumieć programowanie, kontynuuj tworzenie małych, użytecznych projektów w JavaScript.