Πώς να δημιουργήσετε έναν μετρητή λέξεων σε JavaScript

Ο μετρητής λέξεων είναι ένα εργαλείο που μπορείτε να χρησιμοποιήσετε για να μετρήσετε τον αριθμό των λέξεων σε ένα κομμάτι κειμένου. Μπορείτε να το χρησιμοποιήσετε για να ελέγξετε το μήκος ενός εγγράφου ή για να παρακολουθήσετε εάν πληροίτε ένα όριο πλήθους λέξεων.

Μπορείτε να δημιουργήσετε τον δικό σας μετρητή λέξεων χρησιμοποιώντας HTML, CSS και JavaScript. Ανοίξτε τον μετρητή λέξεων σε ένα πρόγραμμα περιήγησης ιστού, εισαγάγετε το κείμενό σας σε ένα πεδίο εισαγωγής και δείτε πόσες λέξεις χρησιμοποιείτε.

Αυτό το έργο μπορεί επίσης να σας βοηθήσει να εξασκηθείτε και να ενισχύσετε τις γνώσεις σας στο JavaScript.

Πώς να δημιουργήσετε τη διεπαφή χρήστη για τον μετρητή λέξεων

Για να δημιουργήσετε τη διεπαφή χρήστη για τον μετρητή λέξεων, προσθέστε μια εισαγωγή περιοχής κειμένου σε μια βασική σελίδα HTML. Εδώ μπορείτε να εισαγάγετε την πρόταση ή την παράγραφο για την οποία θέλετε να μετρήσετε τις λέξεις.

1. Δημιουργήστε ένα νέο αρχείο HTML που ονομάζεται "index.html".
2. Μέσα στο αρχείο, προσθέστε τη βασική δομή για μια ιστοσελίδα HTML:

   html>
   <htmllang="en-US">
   <κεφάλι>
   <τίτλος> Μετρητής λέξεων τίτλος>
   κεφάλι>
   <σώμα>
   
   τάξη="δοχείο">
   <h1> Μετρήστε λέξεις h1>
   div>
   σώμα>
   html>

3. Μέσα στο κοντέινερ div και κάτω από την επικεφαλίδα, προσθέστε μια περιοχή κειμένου:

   <textareaταυτότητα="εισαγωγή"σειρές="10">textarea>

4. Κάτω από την περιοχή κειμένου, προσθέστε ένα κουμπί:

   <κουμπίταυτότητα="κουμπί μέτρησης">Μετρήστε λέξειςκουμπί>

5. Προσθέστε μια ετικέτα span για να εμφανίσετε τον αριθμό των λέξεων όταν ο χρήστης κάνει κλικ στο παραπάνω κουμπί:

   <div>
    Λόγια: <σπιθαμήταυτότητα="λέξεις-μέτρηση-αποτέλεσμα">0σπιθαμή>
   div>

6. Στον ίδιο φάκελο με το αρχείο HTML, δημιουργήστε ένα νέο αρχείο που ονομάζεται "styles.css".
7. Συμπληρώστε το αρχείο CSS με κάποιο CSS για το στυλ της ιστοσελίδας σας:

   σώμα {
    περιθώριο: 0;
    padding: 0;
    χρώμα του φόντου: #f0fcfc;
   }
   * {
    γραμματοσειρά-οικογένεια: "Arial", Σανς σέριφ;
   }
   .δοχείο {
    padding: 100px 25%;
    οθόνη: flex;
    flex-direction: στήλη;
    Ύψος γραμμής: 2 εκ.
   μέγεθος γραμματοσειράς: 1.2ρεμ;
    χρώμα: #202C39;
   }
   textarea {
    padding: 20px;
    μέγεθος γραμματοσειράς: 1rem;
    margin-bottom: 40px;
   }
   κουμπί {
    padding: 10px;
    margin-bottom: 40px;
   } 

8. Συνδέστε το αρχείο CSS με το αρχείο HTML, συμπεριλαμβάνοντας μια ετικέτα συνδέσμου μέσα στην ετικέτα κεφαλής HTML:

   <Σύνδεσμοςσχετ="φύλλο στυλ"href="styles.css">

9. Για να δοκιμάσετε τη διεπαφή χρήστη της ιστοσελίδας, κάντε κλικ στο αρχείο "index.html" για να το ανοίξετε σε ένα πρόγραμμα περιήγησης ιστού.

Πώς να μετρήσετε κάθε λέξη μέσα στο Textarea

Όταν ένας χρήστης εισάγει μια πρόταση στην περιοχή κειμένου, η ιστοσελίδα θα πρέπει να μετράει κάθε λέξη όταν κάνει κλικ σε αυτήν Μετρήστε λέξεις κουμπί.

Μπορείτε να προσθέσετε αυτήν τη λειτουργία μέσα σε ένα νέο αρχείο JavaScript. Εάν χρειάζεται, αναθεωρήστε άλλα ιδέες για αρχάριους έργου JavaScript εάν πρέπει να αναβαθμίσετε τις γνώσεις σας στο JavaScript.

1. Στον ίδιο φάκελο με τα αρχεία "index.html" και "styles.css", προσθέστε ένα νέο αρχείο που ονομάζεται "script.js".
2. Συνδέστε το αρχείο HTML με το αρχείο JavaScript προσθέτοντας μια ετικέτα σεναρίου στο κάτω μέρος της ετικέτας σώματος:

   <σώμα>
    Ο κωδικός σας εδώ 
   <γραφήsrc="script.js">γραφή>
   σώμα>

3. Μέσα στο script.js, χρησιμοποιήστε τη συνάρτηση getElementById() για να ανακτήσετε την περιοχή κειμένου, το κουμπί και τα στοιχεία HTML. Αποθηκεύστε αυτά τα στοιχεία σε τρεις ξεχωριστές μεταβλητές:

   αφήνω είσοδος = έγγραφο.getElementById("εισαγωγή");
   αφήνω κουμπί = έγγραφο.getElementById("κουμπί μέτρησης");
   αφήνω wordCountResult = έγγραφο.getElementById("λέξεις-μέτρηση-αποτέλεσμα");

4. Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων κλικ. Αυτή η λειτουργία θα εκτελεστεί όταν ο χρήστης κάνει κλικ στο Μετρήστε λέξεις κουμπί:

   button.addEventListener("Κάντε κλικ", λειτουργία() {
   });

5. Μέσα στο πρόγραμμα ακρόασης συμβάντων κλικ, λάβετε την τιμή που εισήγαγε ο χρήστης στην περιοχή κειμένου. Μπορείτε να βρείτε αυτήν την τιμή στη μεταβλητή εισόδου, η οποία αποθηκεύει το στοιχείο HTML της περιοχής κειμένου.

   αφήνω str = input.value;

6. Χρησιμοποιήστε τη συνάρτηση split() για να διαχωρίσετε τη συμβολοσειρά σε ξεχωριστές λέξεις. Αυτό θα συμβεί κάθε φορά που υπάρχει κενό στη συμβολοσειρά. Αυτό θα αποθηκεύσει κάθε λέξη ως στοιχείο ενός νέου πίνακα. Για παράδειγμα, εάν η πρόταση που εισαγάγατε ήταν "I love dogs", ο πίνακας που θα προέκυπτε θα ήταν ["I", "love", "dogs"].

   αφήνω wordsList = str.split(" ");

7. Βρείτε τον αριθμό των λέξεων χρησιμοποιώντας το μήκος του πίνακα:

   αφήνω count = wordsList.length;

8. Για να εμφανίσετε το αποτέλεσμα πίσω στον χρήστη, αλλάξτε το περιεχόμενο του στοιχείου span HTML για να εμφανιστεί η νέα τιμή:

   wordCountResult.innerHTML = καταμέτρηση; 

Πώς να χρησιμοποιήσετε το Παράδειγμα μετρητή λέξεων

Μπορείτε να δοκιμάσετε την ιστοσελίδα μετρητή λέξεων χρησιμοποιώντας ένα πρόγραμμα περιήγησης ιστού.

1. Ανοίξτε το index.html σε οποιοδήποτε πρόγραμμα περιήγησης ιστού.
2. Εισαγάγετε μια πρόταση ή παράγραφο στην περιοχή κειμένου:
3. Κάνε κλικ στο Μετρήστε λέξεις κουμπί για να ενημερώσετε τον αριθμό των λέξεων. Αυτό θα εμφανίσει το πλήθος των λέξεων, όπως και αν εσείς έλεγξε τον αριθμό των λέξεων στα Έγγραφα Google, το Microsoft Word ή οποιοδήποτε άλλο πρόγραμμα επεξεργασίας με αριθμό λέξεων.

Δημιουργία απλών εφαρμογών με χρήση JavaScript

Τώρα ελπίζουμε να έχετε μια βασική κατανόηση του τρόπου χρήσης JavaScript για τη μέτρηση λέξεων και την αλληλεπίδραση με στοιχεία σε μια σελίδα HTML. Για να βελτιώσετε την κατανόηση του προγραμματισμού σας, συνεχίστε να δημιουργείτε μικρά χρήσιμα έργα σε JavaScript.