יצירת לוח הכפל בעזרת JavaScript HTML ו- CSS

יצירת לוח הכפל בעזרת JavaScript HTML ו- CSS

  • פרסומת

דוגמה לתוצאה הסופית

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

שימוש ב-JavaScript בשביל ליצור טבלאות או סדרות עם חוקיות

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

במאמר זה אנו ניצור את לוח הכפל, בצורה מתוחכמת בה לא נצטרך להזין מספר מספר בעצמנו, או לחשב כמה זה 5X5… אנו ניתן ל- JavaScript לעשות זאת בשבילנו!
אנו נשתמש במספר כלים הקיימים בשפת JavaScript כדי ליצור את הלוח שלנו:

לולאת FOR:

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

הפונקציה appendChild:

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

איזה שפות תכנות מעורבות בתהליך?

אנו נשתמש בשלוש שפות שונות כדי ליצור את המסמך שלנו, ונחלק את המאמר בהתאם:

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

הכנת המסמך בשפת HTML:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
        <script>
          <!--כאן נכניס את הסקריפט-->
        </script>
        <style type="text/css">
          <!--כאן נכנס העיצוב בעזרת CSS-->
        </style>
    </head>
    <body align="right">
        <h1 dir="rtl">טבלת מספרים פשוטה:</h1>
        <table id="board"></table>
        <h1 dir="rtl">לוח הכפל:</h1>
        <table id="math_board"></table>
    </body>
</html>

חלק ראשון: הגדרות המסמך

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

זוהי למעשה הגדרת המסמך. אגודת האינטרנט הבינלאומית (W3C) דורשת שכל מסמך אינטרנטי יכיל הגדרות על סוג המסמך בראש המסמך. מסמך שאינו מכיל את ההגדרות הללו אינו נחשב למסמך תקין.

חלק שני: הגדרת התווים והתוכן

<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

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

חלק שלישי: מיקום הסקריפט (JavaScript) והעיצוב (CSS)

<script>
  <!--כאן נכניס את הסקריפט-->
</script>
<style type="text/css">
  <!--כאן נכנס העיצוב בעזרת CSS-->
</style>

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

חלק רביעי: הכותרות והטבלאות

<body align="right">
    <h1 dir="rtl">טבלת מספרים פשוטה:</h1>
    <table id="board"></table>
    <h1 dir="rtl">לוח הכפל:</h1>
    <table id="math_board"></table>
</body>

כפי שאתם רואים, הכנסנו שתי כותרות בעברית, ושתי טבלאות ריקות עם id. את הטבלאות האלו אנו נמלא בתאים בהמשך, בעזרת JavaScript.

עיצוב המסמך בעזרת שפת CSS:

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

/*------ הגדרות הכותרת ------*/
h1 {
    margin:auto;
    font-size:18px;
    text-align:center;
    background:#EEE;
    border-radius:3px;
    padding:2px;
    width:300px;
    box-shadow: 2px 2px 2px #AAA;
}
/*------ הגדרות הטבלה ------*/
table {
    border-collapse:collapse;
    border:2px solid #777;
    margin:5px auto;
    border-spacing:0;
    box-shadow: 3px 3px 3px #CCC;
}
tr,td {
    border:1px solid #111;
    text-align: center;
    padding:3px;
}
.dark {
    background:#EEE;
    font-weight:bolder;
}

הגדרות הטבלה ב-CSS

border-collapse:collapse;
border-spacing:0;

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

העיצוב של המספרים הכהים

.dark {
    background:#EEE;
    font-weight:bolder;
}

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

בניית הפונקציה ליצירת לוח הכפל, בעזרת JavaScript:

window.onload = initALL; //קריאה להרצת הפונקציה בסוף טעינת הדף

function initALL() { 
    createBoard();
    createMathBoard();
}

//זהו הסקריפט של הטבלה הפשוטה
function createBoard() {

    //בחירת הטבלה ויצירת המשתנים:
    var boardTable = document.getElementById("board");
    var tRow,tCell;
    
    //יצירת הלולאה:
    for(var I=0; I < 10; I++) {
        tRow = document.createElement("TR"); //יצירת השורה
        boardTable.appendChild(tRow); //הזנת השורה אל תוך הטבלה
        var numStrt = I * 10; //כך אנו יוצרים מספרים חדשים בכל שורה, בקפיצות של 10
        //יצירת הלולאה של תאי הטבלה:
        for(var i=1; i < 11; i++) {
            tCell = document.createElement("TD"); //יצירת התא
            tCell.innerHTML = numStrt+i; //הזנת המספר אל תוך התא
            tRow.appendChild(tCell); //הזנת התא אל תוך השורה
        }
    }
}
//זהו הסקריפט של לוח הכפל
function createMathBoard() {

    //בחירת הטבלה ויצירת המשתנים:
    var mathBoardTable = document.getElementById("math_board");
    var tCell,tHead,tRow;
    var multiplyer = new Array(1,2,3,4,5,6,7,8,9,10);
    
    //יצירת השורה העליונה:
    tHead = document.createElement("TR"); //יצירת השורה
    mathBoardTable.appendChild(tHead); //הזנת השורה אל תוך הטבלה
    
    //יצירת הלולאה לשורה העליונה:
    for(var i= -1;i<multiplyer.length;i++) { //טווח הלולאה תלוי בגודל המערך multiplyer
        tCell = document.createElement("TD");
        tCell.className = "dark"; //שינוי הקלאס להענקת גוון אפור בהיר
        if(i>=0) {
            tCell.innerHTML = multiplyer[i]; //הזנת המספרים לתאי השורה הראשונה
        }
        else {
            tCell.innerHTML = "X"; //הזנת סימן הכפל לתא הראשון בלבד
        }
        tHead.appendChild(tCell); //הזנת התא לשורה
    }
    
    //הלולאה לשאר שורות הלוח:
    for(var I= 0;I<multiplyer.length;I++) {
        tRow = document.createElement("TR");
        mathBoardTable.appendChild(tRow);
        for(var i= -1;i<multiplyer.length;i++) {
            tCell = document.createElement("TD");
            if(i<0) {
                tCell.innerHTML = multiplyer[I];
                tCell.className = "dark";
            }
            else {
                tCell.innerHTML = multiplyer[I]*multiplyer[i];
            }
            tRow.appendChild(tCell);
        }
    }
}

כפי שאתם רואים, הקוד מלא לכל אורכו בהסברים על כל חלק ומה תפקידו. הקוד מתחלק לשני חלקים עקריים – לוח המספרים הרגיל, ולוח הכפל. כפי שפירטתי בתחילת המאמר, אנו משתמשים בלולאה הנקראת "for" אשר פועלת בצורה מחזורית על פי חוקיות מסויימת. להסבר מעמיק יותר על נושא זה, אתם מוזמנים לקרוא את המאמר שלי: שימוש בלולאת פור (For Loop) בשפת ג'אבה סקריפט.