خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد یک ورد شمار در جاوا اسکریپت

ارشیا یوسفی ادیب ۲۰ فروردین, ۱۴۰۳ 3 min read

این ابزار کوچک مفید را برای خود بسازید و در طول مسیر کمی در مورد جاوا اسکریپت بیاموزید.

شمارشگر کلمات ابزاری است که با استفاده از آن می توانید تعداد کلمات یک متن را بشمارید. می‌توانید از آن برای بررسی طول یک سند یا ردیابی اینکه آیا محدودیت تعداد کلمات را رعایت می‌کنید استفاده کنید.

شما می توانید کلمه شمارنده خود را با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کنید. شمارنده کلمه خود را در یک مرورگر وب باز کنید، متن خود را در یک قسمت ورودی وارد کنید و ببینید از چند کلمه استفاده می کنید.

این پروژه همچنین می تواند در تمرین و تقویت دانش جاوا اسکریپت به شما کمک کند.

نحوه ایجاد رابط کاربری برای Word Counter

برای ایجاد رابط کاربری برای کلمه شمارشگر، یک ورودی ناحیه متنی را به یک صفحه HTML اصلی اضافه کنید. اینجاست که می‌توانید جمله یا پاراگرافی را که می‌خواهید برای آن‌ها شمارش کنید وارد کنید.

  1. یک فایل HTML جدید به نام “index.html” ایجاد کنید.
  2. در داخل فایل، ساختار اصلی یک صفحه وب HTML را اضافه کنید:       Word Counter         
          

    تعداد کلمات

        

      

  3. در داخل کانتینر و زیر عنوان، یک ناحیه متنی اضافه کنید:
  4. در زیر قسمت نوشتار، یک دکمه اضافه کنید:شمارش کلمات
  5. وقتی کاربر روی دکمه بالا کلیک می‌کند، یک تگ span اضافه کنید تا تعداد کلمات نمایش داده شود:
        Words: 0
  6. در همان پوشه فایل HTML خود، یک فایل جدید به نام “styles.css” ایجاد کنید.
  7. فایل CSS را با مقداری CSS پر کنید تا به صفحه وب خود استایل دهید:body {  margin: 0; بالشتک: 0; background-color: #f0fcfc;}* {  font-family: “Arial”, sans-serif;}.container {  padding: 100px 25%; صفحه نمایش: انعطاف پذیر; flex-direction: ستون. ارتفاع خط: 2 ريم; اندازه فونت: 1.2rem; رنگ: #202C39;}textarea {  padding: 20px; اندازه فونت: 1rem; margin-bottom: 40px;}button {  padding: 10px; حاشیه پایین: 40 پیکسل؛}
  8. فایل CSS را با قرار دادن یک تگ پیوند در داخل تگ head HTML به فایل HTML خود پیوند دهید:
  9. برای تست رابط کاربری صفحه وب، روی فایل “index.html” کلیک کنید تا در یک مرورگر وب باز شود.
<!doctype html>
<html lang="en-US">
  <head>
    <title> Word Counter </title>
  </head>
  <body>
    <div class="container">
      <h1> Count Words </h1>
    </div>
  </body>
</html>
<textarea id="input" rows="10"></textarea>
<button id="count-button">Count Words</button>
<div>
    Words: <span id="word-count-result">0</span>
</div>
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;
} 
<link rel="stylesheet" href="styles.css">

رابط کاربری برای کلمه شمارشگر در مرورگر باز می شود

نحوه شمارش هر کلمه در داخل Textarea

وقتی کاربر جمله ای را در قسمت متن وارد می کند، صفحه وب باید با کلیک روی دکمه شمارش کلمات، هر کلمه را بشمارد.

می توانید این قابلیت را در یک فایل جاوا اسکریپت جدید اضافه کنید. در صورت نیاز، در صورت نیاز به تقویت دانش جاوا اسکریپت خود، سایر ایده های پروژه مبتدی جاوا اسکریپت را اصلاح کنید.

  1. در همان پوشه فایل های “index.html” و “styles.css” خود، یک فایل جدید به نام “script.js” اضافه کنید.
  2. با افزودن یک تگ اسکریپت در پایین تگ بدنه، فایل HTML خود را به فایل جاوا اسکریپت خود پیوند دهید:        
  3. در داخل script.js، از تابع getElementById() برای بازیابی textarea، button و span عناصر HTML استفاده کنید. این عناصر را در سه متغیر جداگانه ذخیره کنید: let input = document.getElementById(“input”);let button = document.getElementById(“count-button”); let wordCountResult = document.getElementById(“word-count-result”);
  4. یک شنونده رویداد کلیکی اضافه کنید. این تابع زمانی اجرا می شود که کاربر روی دکمه شمارش کلمات کلیک کند:button.addEventListener(“click”, function() {});
  5. در داخل شنونده رویداد کلیک، مقداری را که کاربر در ناحیه متنی وارد کرده است، دریافت کنید. می توانید این مقدار را در متغیر ورودی پیدا کنید، که textarea HTML element.let str = input.value;
  6. از تابع split() برای جدا کردن رشته به کلمات جداگانه استفاده کنید. هر زمان که در رشته فاصله وجود داشته باشد این اتفاق می افتد. این هر کلمه را به عنوان عنصری از یک آرایه جدید ذخیره می کند. به عنوان مثال، اگر جمله وارد شده “I love dogs” باشد، آرایه حاصل به صورت [“I”, “love”, “dogs”] خواهد بود.let wordsList = str.split(” “);
  7. تعداد کلمات را با استفاده از طول آرایه پیدا کنید: let count = wordsList.length;
  8. برای نمایش نتیجه به کاربر، محتوای عنصر span HTML را برای نمایش مقدار جدید تغییر دهید:wordCountResult.innerHTML = count;
<body>
    <!-- Your code here -->
    <script src="script.js"></script>
</body>
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result");
button.addEventListener("click", function() {

});
let str = input.value;
let wordsList = str.split(" ");
let count = wordsList.length;
wordCountResult.innerHTML = count;

نحوه استفاده از مثال شمارنده کلمه

می توانید صفحه وب پیشخوان کلمه خود را با استفاده از یک مرورگر وب آزمایش کنید.

  1. index.html را در هر مرورگر وب باز کنید.
  2. یک جمله یا پاراگراف را در قسمت متن وارد کنید:
  3. برای به روز رسانی تعداد کلمات، روی دکمه شمارش کلمات کلیک کنید. با این کار تعداد کلمات نمایش داده می شود، درست مانند زمانی که تعداد کلمات را در Google Docs، Microsoft Word یا هر ویرایشگر دیگری با تعداد کلمات بررسی کرده باشید.

رابط کاربری برای کلمه شمارش JSکلمه شمارش JS با جمله در textareaکلمه شمارش JS در مرورگر با تعداد کلمات به روز شده

ایجاد برنامه های کاربردی ساده با استفاده از جاوا اسکریپت

اکنون امیدواریم درک اولیه ای از نحوه استفاده از جاوا اسکریپت برای شمارش کلمات و تعامل با عناصر در صفحه HTML داشته باشید. برای افزایش درک برنامه نویسی خود، به ایجاد پروژه های مفید کوچک در جاوا اسکریپت ادامه دهید.

مطلب مرتبط:   چگونه از PostCSS برای تمیز کردن طراحی وب خود استفاده کنید
Tags: