עבודה עם Id ב-JavaScript

נושא מספר 8 ב-קורס תכנות לילדים.

תיאור השיעור:

בשיעור הזה נלמד איך להשתמש בתכונת id ב-JavaScript כדי לגשת ולשנות אלמנטים בדף HTML. נבין איך בעזרת מזהים (ID) אפשר לשלוט בתוכן ובעיצוב של אלמנטים בדף, ונבצע תרגולים שיאפשרו להבין את התהליך בצורה ברורה ושלב אחר שלב.

מטרות השיעור:

• להבין מהו id וכיצד הוא משמש ב-HTML וב-JavaScript.
• ללמוד איך לגשת לאלמנטים ב-HTML דרך id ולשנות את התוכן והעיצוב שלהם.
• לתרגל שינויים בסיסיים בעזרת JavaScript, כמו שינוי טקסט, צבע או סגנון.

מהלך השיעור:

1. מה זה id ולמה הוא חשוב?

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

דוגמה:

בואו נתחיל עם דוגמה פשוטה של אלמנט HTML עם id:

<h1 id="myTitle">ברוכים הבאים לאתר שלי!</h1>

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

2. איך לגשת לאלמנט עם id בעזרת JavaScript?

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

דוגמה:

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

<script>
   document.getElementById("myTitle").innerHTML = "שלום, עולם!";
</script>

ב-JavaScript הזה, אנחנו ניגשים לכותרת באמצעות ה-id שלה ("myTitle") ומשנים את התוכן שלה ל-"שלום, עולם!".

3. שינוי עיצוב של אלמנט עם id

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

דוגמה:

בואו נראה איך אפשר לשנות את הצבע של הכותרת לדוגמה לצבע כחול:

<script>
   document.getElementById("myTitle").style.color = "blue";
</script>

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

4. תרגול בסיסי

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

תרגיל 1: שינוי טקסט

1. צרו עמוד HTML עם כותרת (<h1>) עם id כלשהו (למשל "header1").
2. בעזרת JavaScript, שנו את הטקסט של הכותרת ללמשהו חדש (כמו "שלום לכולם!").

תרגיל 2: שינוי צבע

1. צרו פסקה (<p>) עם טקסט כלשהו ו-id.
2. הוסיפו כפתור בדף (תגית <button>).
3. כשילחצו על הכפתור, הצבע של הטקסט בפסקה ישתנה לאדום בעזרת JavaScript.

5. הבנה מתקדמת: שילוב תוכן ועיצוב עם JavaScript

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

דוגמה:

בואו ניצור כפתור שמחליף את הכותרת ואת הצבע שלה ביחד:

<h1 id="myTitle">ברוכים הבאים!</h1>
<button onclick="changeTitle()">שנה כותרת וצבע</button>

<script>
   function changeTitle() {
      var title = document.getElementById("myTitle");
      title.innerHTML = "הכותרת השתנתה!";
      title.style.color = "green";
   }
</script>

כאן, כשילחצו על הכפתור, התוכן של הכותרת ישתנה ל-"הכותרת השתנתה!" והצבע שלה ישתנה לירוק.

6. תרגול מתקדם

בתרגול הזה נשתמש בידע המשולב שלנו לשנות גם תוכן וגם עיצוב.

תרגיל 3: כפתור שמשנה תוכן ועיצוב

1. צרו עמוד HTML עם כותרת ו-id.
2. הוסיפו כפתור, וכאשר לוחצים עליו, הכותרת תשתנה גם בתוכן וגם בצבע.

סיכום השיעור

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

קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.