כיצד ליצור מונה מילים ב-JavaScript

מונה מילים הוא כלי שניתן להשתמש בו כדי לספור את מספר המילים בקטע טקסט. אתה יכול להשתמש בו כדי לבדוק את אורך המסמך או כדי לעקוב אחר האם אתה עומד במגבלה של ספירת מילים.

אתה יכול ליצור מונה מילים משלך באמצעות HTML, CSS ו-JavaScript. פתח את מונה המילים שלך בדפדפן אינטרנט, הזן את הטקסט שלך בשדה קלט וראה בכמה מילים אתה משתמש.

פרויקט זה יכול להיות שימושי גם בסיוע לך לתרגל ולגבש את הידע שלך ב-JavaScript.

כיצד ליצור את ממשק המשתמש עבור מונה המילים

כדי ליצור את ממשק המשתמש עבור מונה המילים, הוסף קלט אזור טקסט לדף HTML בסיסי. זה המקום שבו אתה יכול להזין את המשפט או הפסקה שאתה רוצה לספור את המילים עבורם.

1. צור קובץ HTML חדש בשם "index.html".
2. בתוך הקובץ, הוסף את המבנה הבסיסי עבור דף אינטרנט HTML:

   html>
   <htmllang="en-US">
   <רֹאשׁ>
   <כותרת> מונה מילים כותרת>
   רֹאשׁ>
   <גוּף>
   
   מעמד="מְכוֹלָה">
   <h1> לספור מילים h1>
   div>
   גוּף>
   html>

instagram viewer
3. בתוך div מיכל ומתחת לכותרת, הוסף אזור טקסט:

   <אזור טקסטתְעוּדַת זֶהוּת="קֶלֶט"שורות="10">אזור טקסט>

4. מתחת לאזור הטקסט, הוסף לחצן:

   <לַחְצָןתְעוּדַת זֶהוּת="כפתור ספירה">לספור מיליםלַחְצָן>

5. הוסף תג span כדי להציג את ספירת המילים כאשר המשתמש לוחץ על הכפתור למעלה:

   <div>
    מילים: <לְהַקִיףתְעוּדַת זֶהוּת="תוצאה של ספירת מילים">0לְהַקִיף>
   div>

6. באותה תיקיה כמו קובץ ה-HTML שלך, צור קובץ חדש בשם "styles.css".
7. אכלס את קובץ ה-CSS ב-CSS כלשהו לסגנון דף האינטרנט שלך:

   גוף {
    שוליים: 0;
    ריפוד: 0;
    צבע רקע: #f0fcfc;
   }
   * {
    משפחת גופן: "אריאל", פונט סאנס סריף;
   }
   .מְכוֹלָה {
    ריפוד: 100px 25%;
    תצוגה: flex;
    flex-direction: עמודה;
    גובה קו: 2rem;
   גודל גופן: 1.2rem;
    צֶבַע: #202C39;
   }
   textarea {
    ריפוד: 20px;
    גודל גופן: 1rem;
    margin-bottom: 40px;
   }
   כפתור {
    ריפוד: 10px;
    margin-bottom: 40px;
   } 

8. קשר את קובץ ה-CSS לקובץ ה-HTML שלך על ידי הכללת תג קישור בתוך תג head HTML:

   <קישורrel="גיליון סגנונות"href="styles.css">

9. כדי לבדוק את ממשק המשתמש של דף האינטרנט, לחץ על הקובץ "index.html" כדי לפתוח אותו בדפדפן אינטרנט.

כיצד לספור כל מילה בתוך אזור הטקסט

כאשר משתמש מזין משפט לאזור הטקסט, דף האינטרנט צריך לספור כל מילה כאשר הוא לוחץ על לספור מילים לַחְצָן.

אתה יכול להוסיף פונקציונליות זו בתוך קובץ JavaScript חדש. אם אתה צריך, תקן אחר רעיונות לפרויקט JavaScript למתחילים אם אתה צריך לרענן את הידע שלך ב-JavaScript.

1. באותה תיקיה כמו קבצי "index.html" ו-"styles.css", הוסף קובץ חדש בשם "script.js".
2. קשר את קובץ ה-HTML שלך לקובץ ה-JavaScript על ידי הוספת תג סקריפט בתחתית תג הגוף:

   <גוּף>
    הקוד שלך כאן 
   <תַסרִיטsrc="script.js">תַסרִיט>
   גוּף>

3. בתוך script.js, השתמש בפונקציה getElementById() כדי לאחזר את רכיבי ה-textarea, הלחצן ו-span HTML. אחסן את האלמנטים הללו לשלושה משתנים נפרדים:

   לתת קלט = מסמך.getElementById("קֶלֶט");
   לתת כפתור = מסמך.getElementById("כפתור ספירה");
   לתת wordCountResult = מסמך.getElementById("תוצאה של ספירת מילים");

4. הוסף מאזין אירוע קליק. פונקציה זו תפעל כאשר המשתמש ילחץ על לספור מילים לַחְצָן:

   button.addEventListener("נְקִישָׁה", פוּנקצִיָה() {
   });

5. בתוך המאזין אירועי קליק, קבלו את הערך שהמשתמש הזין לאזור הטקסט. אתה יכול למצוא ערך זה במשתנה הקלט, המאחסן את רכיב ה-HTML של textarea.

   לתת str = input.value;

6. השתמש בפונקציה split() כדי להפריד את המחרוזת למילים נפרדות. זה יתרחש בכל פעם שיש רווח במחרוזת. זה יאחסן כל מילה כרכיב של מערך חדש. לדוגמה, אם המשפט שהוזן היה "אני אוהב כלבים", המערך שיתקבל יהיה ["אני", "אהבה", "כלבים"].

   לתת wordsList = str.split(" ");

7. מצא את ספירת המילים באמצעות אורך המערך:

   לתת count = wordsList.length;

8. כדי להציג את התוצאה בחזרה למשתמש, שנה את התוכן של רכיב ה-HTML span כדי להציג את הערך החדש:

   wordCountResult.innerHTML = count; 

כיצד להשתמש במונה המילים לדוגמה

אתה יכול לבדוק את דף האינטרנט שלך נגד מילים באמצעות דפדפן אינטרנט.

1. פתח את index.html בכל דפדפן אינטרנט.
2. הזן משפט או פסקה לאזור הטקסט:
3. הקלק על ה לספור מילים לחצן לעדכון ספירת המילים. זה יציג את ספירת המילים, בדיוק כמו אם אתה בדק את ספירת המילים ב-Google Docs, Microsoft Word, או כל עורך אחר עם ספירת מילים.

יצירת יישומים פשוטים באמצעות JavaScript

כעת יש לך בתקווה הבנה בסיסית כיצד להשתמש ב-JavaScript כדי לספור מילים ולקיים אינטראקציה עם אלמנטים בדף HTML. כדי לשפר את הבנת התכנות שלך, המשך ליצור פרויקטים שימושיים קטנים ב-JavaScript.