كيفية إنشاء عداد الكلمات في جافا سكريبت

عداد الكلمات هو أداة يمكنك استخدامها لحساب عدد الكلمات في جزء من النص. يمكنك استخدامه للتحقق من طول المستند أو لتعقب ما إذا كنت تفي بحد عدد الكلمات.

يمكنك إنشاء عداد الكلمات الخاص بك باستخدام HTML و CSS و JavaScript. افتح عداد الكلمات في متصفح الويب ، وأدخل النص في حقل الإدخال ، وشاهد عدد الكلمات التي تستخدمها.

يمكن أن يكون هذا المشروع مفيدًا أيضًا في مساعدتك على ممارسة وترسيخ معرفتك بـ JavaScript.

كيفية إنشاء واجهة المستخدم لعداد الكلمات

لإنشاء واجهة المستخدم لعداد الكلمات ، أضف إدخال منطقة النص إلى صفحة HTML أساسية. هذا هو المكان الذي يمكنك فيه إدخال الجملة أو الفقرة التي ترغب في حساب الكلمات لها.

1. قم بإنشاء ملف HTML جديد يسمى "index.html".
2. داخل الملف ، أضف البنية الأساسية لصفحة ويب HTML:

   لغة البرمجة>
   <لغة البرمجةلانج="en-US">
   <رأس>
   <عنوان> عداد الكلمات عنوان>
   رأس>
   <جسم>
   
   فصل="حاوية">
   <h1> عد الكلمات h1>
   شعبة>
   جسم>
   لغة البرمجة>

instagram viewer
3. داخل الحاوية div وتحت العنوان ، أضف منطقة نص:

   <منطقة النصبطاقة تعريف="مدخل"صفوف="10">منطقة النص>

4. أسفل منطقة النص ، أضف زرًا:

   <زربطاقة تعريف="زر العد">عد الكلماتزر>

5. أضف علامة span لعرض عدد الكلمات عندما ينقر المستخدم على الزر أعلاه:

   <شعبة>
    كلمات: <فترةبطاقة تعريف="عدد الكلمات">0فترة>
   شعبة>

6. في نفس المجلد مثل ملف HTML الخاص بك ، قم بإنشاء ملف جديد يسمى "styles.css".
7. قم بتعبئة ملف CSS ببعض CSS لتصميم صفحة الويب الخاصة بك:

   جسم {
    الهامش: 0؛
    حشوة: 0 ؛
    لون الخلفية: # f0fcfc ؛
   }
   * {
    خط العائلة: "اريال"، بلا الرقيق؛
   }
   .حاوية {
    الحشو: 100 بكسل 25٪ ؛
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
    ارتفاع الخط: 2rem ؛
   حجم الخط: 1.2rem;
    لون: رقم 202C39 ؛
   }
   منطقة النص {
    الحشو: 20 بكسل ؛
    حجم الخط: 1rem ؛
    الهامش السفلي: 40 بكسل ؛
   }
   زر {
    الحشو: 10 بكسل ؛
    الهامش السفلي: 40 بكسل ؛
   } 

8. اربط ملف CSS بملف HTML عن طريق تضمين علامة ارتباط داخل علامة رأس HTML:

   <وصلةrel="ورقة الأنماط"href="styles.css">

9. لاختبار واجهة المستخدم لصفحة الويب ، انقر فوق ملف "index.html" لفتحه في متصفح الويب.

كيف نحسب كل كلمة داخل Textarea

عندما يقوم المستخدم بإدخال جملة في منطقة النص ، يجب أن تحسب صفحة الويب كل كلمة عند النقر فوق ملف عد الكلمات زر.

يمكنك إضافة هذه الوظيفة داخل ملف JavaScript جديد. إذا كنت بحاجة إلى مراجعة أخرى أفكار مشروع جافا سكريبت للمبتدئين إذا كنت بحاجة إلى تحسين معرفتك بجافا سكريبت.

1. في نفس المجلد مثل ملفات "index.html" و "styles.css" ، أضف ملفًا جديدًا يسمى "script.js".
2. اربط ملف HTML بملف جافا سكريبت الخاص بك عن طريق إضافة علامة البرنامج النصي في الجزء السفلي من علامة النص الأساسي:

   <جسم>
    الكود الخاص بك هنا 
   <النصيsrc="script.js">النصي>
   جسم>

3. داخل script.js ، استخدم الدالة getElementById () لاسترداد عناصر 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 لعرض القيمة الجديدة:

   wordCountResult.innerHTML = count ؛ 

كيفية استخدام مثال عداد الكلمات

يمكنك اختبار صفحة ويب عداد الكلمات الخاصة بك باستخدام متصفح الويب.

1. افتح index.html في أي متصفح ويب.
2. أدخل جملة أو فقرة في منطقة النص:
3. اضغط على عد الكلمات زر لتحديث عدد الكلمات. سيعرض هذا عدد الكلمات ، تمامًا كما لو كنت فحص عدد الكلمات في محرر مستندات Googleأو Microsoft Word أو أي محرر آخر مع عدد الكلمات.

إنشاء تطبيقات بسيطة باستخدام JavaScript

الآن نأمل أن يكون لديك فهم أساسي لكيفية استخدام JavaScript لحساب الكلمات والتفاعل مع العناصر على صفحة HTML. لتحسين فهم البرمجة لديك ، استمر في إنشاء مشاريع صغيرة مفيدة في JavaScript.