כעת אנו מגיעים לחלק המעניין. אנו רוצים לחבר את כל מה שלמדנו.
למדנו בhtml איך ליצור את האלמנטים של הדף.
למדנו בCSS על העיצוב הבסיסי של האלמנטים.
ולמדנו לכתוב קוד בג׳אווהסקריפט, כאשר עברנו על היסודות – משתנים, תנאים, לולאות, פונקציות ועוד..
כעת אנו רוצים ׳לחבר׳ ביניהם. מה כוונתנו?
כשיוצרים אלמנטים בhtml – הם סטטיים. כלומר ברגע שאנו יוצרים אותם הם יהיו ככה ולא ישתנו לעולם. אבל כשנכתוב דף אנו נרצה שהוא יהיה דינאמי! שיהיה אפשר ללחוץ על כפתורים והוא ישנה דברים, שכל בוקר ב6:00 בבוקר יקפוץ חלון שמאחל בוקר טוב, ובערב לילה טוב. אם ניצור מחשבון, כשנלחץ על הספרות של המחשבון נרצה: א׳- שהחישובים יתבצעו, ב׳- שזה יופיע על המסך של המחשבון. אם ניצור משחק שחמט, נרצה לאפשר להעביר את החיילים ממקום אחד לשני לפי החוקים ועוד..
לכן אנחנו צריכים דרך כדי לאפשר לנו להיות יותר דינאמיים, לשנות דברים תוך כדי תנועה!
ג׳אווהסקריפט – בעזרת היכולות שלה, כגון תנאים, לולאות, וכו׳ מאפשרת לנו להיות יותר דינאמיים! לכן היינו רוצים דרך לגשת לדף הhtml בעזרת ג׳אווהסקריפט!
למזלנו, יש דבר כזה! יש ׳מתאם׳ כזה אשר מהווה מעין ׳גשר׳ בין ג׳אווהסקריפט לhtml, אשר בעזרתו נוכל לבצע מגוון פעולה למשל לשנות אלמנטים, להוסיף אלמנטים חדשים ועוד.
המתאם
ראשית, השם הרשמי של המתאם שלנו נקרא DOM (שזה ראשי תיבות של Document Object Model)
בשלב זה נתייחס אליו פשוט כמתאם. מתאם בין ג׳אווהסריפט לHTML.
המתאם בעצם מאפשר לי באמצעות ג׳אווהסקריפט, ׳לדבר׳ עם דף הhtml שכתבנו.
׳לדבר׳ הכוונה היא שבעזרת המתאם אני יכול לגשת לאלמנטים שנמצאים בדף ולבצע בהם שינויים, או ליצור אלמנטים חדשים ולהוסיף אותם לדף ועוד..
לדוגמא: ניצור בhtml את הכותרת הבאה:
