למה שעון עצר פשוט מלמד יותר JavaScript מקורס שלם

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

למה בכלל בלי פריימוורק

React, Vue וכל פריימוורק אחר בעצם עוטפים את ה-DOM ונותנים לכם דרך נוחה יותר לעדכן אותו. הבעיה היא שאם אתם לומדים פריימוורק לפני שהבנתם מה הוא בעצם עוטף, אתם לומדים "כישוף" - אתם יודעים לכתוב סינטקס בלי להבין למה זה עובד. כשמשהו נשבר, ואיפשהו תמיד נשבר, אתם תקועים. בניית טיימר בג'אווהסקריפט טהור מכריחה אתכם לגעת ישירות ב-DOM, ואת ההבנה הזאת אי אפשר לעקוף.

מתכננים את מצבי הטיימר

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

הלב של הפרויקט - setInterval

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

let intervalId = null;

function startTimer() {
  intervalId = setInterval(() => {
    secondsLeft--;
    updateDisplay();
    if (secondsLeft <= 0) {
      clearInterval(intervalId);
      switchMode();
    }
  }, 1000);
}

function pauseTimer() {
  clearInterval(intervalId);
}

עדכון ה-DOM בלי לבזבז ביצועים

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

פורמט הזמן

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

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${minutes}:${secs.toString().padStart(2, '0')}`;
}

המלכודות הנפוצות

הבעיה הכי שכיחה היא הפעלת כמה אינטרוולים במקביל, כי שכחתם לבדוק אם אחד כבר רץ לפני שהתחלתם חדש - זה גורם לטיימר לרוץ מהר פי כמה ממה שאמור. בעיה שנייה היא לחשב את הזמן שנותר לפי מספר הטיקים במקום לפי חותמת זמן אמיתית, מה שגורם לטיימר "לגלוש" אחרי כמה דקות כי setInterval לא מדויק לחלוטין. הפתרון המקצועי משתמש ב-Date.now() כדי לחשב כמה זמן באמת עבר, לא רק סופר טיקים.

מה מקבלים בסוף

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

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

הצטרפו לקהילה בדיסקורד