إنشاء timer بإستخدام لغة الجافاسكربت خطوة بخطوة

محمد محفوظ / 07/03/2024

تعد لغة الجافاسكريبت (JavaScript) واحدة من أهم لغات البرمجة في عالم تطوير الويب. تأتي JavaScript بإمكانيات تسمح بتحسين تفاعل المستخدم مع صفحات الويب وتحقيق تجارب مستخدم فعّالة. في هذه المقالة، سنستعرض بإيجاز ماهية لغة الجافاسكريبت، ثم سنركز على وظيفة setinterval وكيفية استخدامها لتنفيذ التوقيتات الدورية في تطبيقات الويب.

JavaScript هي لغة برمجة متعددة الأغراض تستخدم أساساً في تطوير الويب. صممت لإضافة تفاعلية للصفحات الويب، حيث يتم تنفيذها مباشرة في متصفح المستخدم. تتميز JavaScript بالميزات التالية:

• ⦿ سهولة الاستخدام: JavaScript مفهومة وسهلة للمطورين الجدد، مما يجعلها مناسبة للتعلم السريع.
• ⦿ التفاعلية: تتيح JavaScript تغيير محتوى الصفحة وسلوكها استنادًا إلى إجراءات المستخدم، مما يخلق تجربة تفاعلية.
• ⦿ التوافق مع متصفحات الويب: يدعم جميع المتصفحات الرئيسية JavaScript، مما يجعلها لغة متوافقة مع مختلف البيئات.
• ⦿ الدعم الواسع: يستخدم JavaScript على نطاق واسع في تطوير الواجهات الأمامية والتفاعل بين العناصر على الصفحة.

SetInterval في JavaScript:

تعتبر setInterval وظيفة في JavaScript تُستخدم لتنفيذ كتلة من الكود بشكل دوري ومتكرر بين فترات زمنية محددة. إليك كيفية استخدامها:

    // مثال بسيط: تنفيذ الكود كل ثانية
    setInterval(function() {
    console.log("مرحبًا بك في JavaScript!");
    }, 1000);

الخطوة الأولي: HTML

قم بإنشاء ملف HTML جديد واسمه، مثلاً، "index.html". في هذا الملف، قم بإنشاء هيكل الصفحة الأساسي كالتالي:

<div id="js_timer">
    <div id="timer">
        00:00
    </div>
    <button onclick="pause()">pause</button>
<div>

الخطوة الثانية: CSS

بداخل style tag قم باضافة خصائص الـ css التالية:

    <style>
        body{
            background: #f8d638;
            font-size: 25px;
        }
        #js_timer {
            text-align: center;
        }
        #timer{
            background: #fff;
            color: #000;
            width: 100px;
            margin: 50px auto;
        }
    </style>

الخطوة الأخيرة: JavaScript

وهي الخطوة الأهم التي من خلالها يتم التفاعل مع عناصر الـ DOM في الصفحة، واضافة setInterval ليتم العدّ بشكل دوري ومتكرر

    var timer;
    var ele = document.getElementById('timer');

    (function (){
      var sec = 0;
      timer = setInterval(()=>{
        ele.innerHTML = '00:'+sec;
        sec ++;
      }, 1000) // each 1 second
    })()

    function pause(){
      clearInterval(timer);
    }

فيديو توضحيي للنتيجة النهائية لجافاسكربت timer باستخدام setInterval في الجافاسكربت

يمكنك مشاهدة الشرح بالتفصيل علي يويتيوب