תרגיל - הוספת אינטראקטיביות באמצעות JavaScript

10 דקות

JavaScript (או ECMAScript) היא שפת תיכנות שמסייעת לך להוסיף אינטראקטיביות לעמודי האינטרנט שלך.

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

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

קישור ל- JavaScript

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

<script>alert('Hello World')</script>

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

תג ה- Script של HTML <script> לנו לקשר לקובץ JavaScript חיצוני, שבו אתה מגדיר את יישום האינטרנט בתרגיל זה.

ב- Visual Studio Code, פתח את index.html הקובץ.
אתר את הרכיב </body> הסיום ומקם את הסמן בשורה חדשה שמעליו. הזן script:src והקש על Enter. תגי הפתיחה והסיום של רכיב <script> נוספים לקוד שלך.

שנה את <script> כדי לטעון את app.js הקובץ, כפי שמוצג בדוגמה הבאה. ודא שהוא ממוקם לאחר סגירת </ul> עבור הרשימה.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

באפשרותך למקם את <script> של הרכיב <head> או במקום אחר <body>. עם זאת, הצבת הרכיב <script> בסוף המקטע <body> מאפשרת תחילה להציג את כל תוכן העמוד על המסך, לפני שקובץ ה- Script נטען.

הוספת עמידות בפני תקלות

בקובץ HTML, הוסף רכיב <noscript> לאחר סיום </script>, שניתן להשתמש בו כדי להציג הודעה אם הפעלת JavaScript מבוטלת.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
הוספת הרכיב <noscript> היא דוגמה של עמידות בפני תקלות או מבוקרת. בעת שימוש ברכיב <noscript>, הקוד שלך יכול לזהות ולתכנן מתי תכונה אינה נתמכת או זמינה.

הגדרת מצב קפדני

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

עבור למצב קפדני כדי לקבל שגיאות שימושיות יותר בעת ביצוע טעויות.

ב- Visual Studio Code, פתח את app.js הקובץ והזן את הטקסט הבא:
```
'use strict';
```

הוסף לחצן

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

בקובץ ה- HTML שלך (index.html), הוסף רכיב <button> חדש. מקם את הלחצן בתוך רכיב <div> והוסף אותו מיד לאחר סוף הרשימה (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
שים לב שרכיב <button> בדוגמה זו כולל מחלקה שניתן להשתמש בה להחלת סגנונות CSS.
שמור את השינויים בקובץ ה- HTML באמצעות קיצור המקשים Control+S ב- Windows או ב- Command+S ב- macOS.
בקובץ CSS (main.css), הוסף כלל חדש עם בורר .btn מחלקה עבור לחצן ה- HTML שלך. כדי להפוך את צבעי הלחצן לצבעים שונים מצבעים כלליים של ערכת נושא בהירה או כהה, הגדר את color המקשים background-color המאפיינים בכלל זה. כאשר הדף מוצג, מאפיינים .btn עוקפים את מאפייני ברירת המחדל המוגדרים body כלל ה- CSS שלך.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
לאחר מכן, .btn את הכלל כדי להוסיף כמה סגנונות עבור הגודל, הצורה, המראה והמיקום של הלחצן. ה- CSS הבא יוצר לחצן עגול משמאל לכותרת העמוד.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

לאחר מכן, עדכן את ה- CSS עבור ערכת הנושא בהירה וכהה. הגדר כמה משתנים חדשים, --btnBg ו- --btnFontColor, כדי לציין את צבע הרקע וצבע הגופן הספציפיים ללחצן.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

שמור את השינויים בקובץ CSS באמצעות קיצור המקשים Control+S ב- Windows או Command+S ב- macOS.

הוספת מטפל באירועים

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

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

בקובץ JavaScript (app.js), השתמש document.querySelector כדי לקבל את חומר ההפניה ללחצן.
```
const switcher = document.querySelector('.btn');
```
הפונקציה document.querySelector משתמשת בבחרי CSS, בדיוק כמו אלה שבהם השתמשת בקובץ ה- CSS. switcher הוא כעת הפניה ללחצן בדף.
לאחר מכן, הוסף את המטפל באירועים עבור click האירוע. בקוד הבא, עליך להוסיף מאזין עבור אירוע click ולהגדיר פונקציית מטפל באירועים שהדפדפן מבצע כאשר מתרחש click האירוע.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

בקוד הקודם, השתמשת בפעולת השירות toggle כדי לשנות את <body> המחלקה של הרכיב. שיטה זו מוסיפה או מסירה באופן light-theme את dark-theme הכיתות. קוד זה מחיל את הסגנונות הכהים במקום סגנונות בהירים אם תלחץ על ולאחר מכן סגנונות בהירים במקום סגנונות כהים אם תלחץ שוב.

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

כך ייראה קוד ה- JavaScript שלך עם הוספת המטפל באירועים:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

זו מוסכמה של JavaScript להשתמש גמל עבור שמות משתנים עם יותר ממילה אחת; לדוגמה, המשתנה className.

הודעת קונסולה

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

בקובץ JavaScript, הוסף שיחה console.log אחרי if, אך בתוך מאזין האירוע.

לאחר שתבצע שינוי זה, קוד ה- JavaScript המלא שלך אמור להיראות כך.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

כאשר אתה נמצא בקובץ JavaScript ב- Visual Studio Code, באפשרותך להשתמש בהשלמה אוטומטית עבור console.log על-ידי הזנת log והקשה על Enter.

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

פתח בדפדפן

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

בדוק את הדף בכלים למפתחים

פתח את כלי הפיתוח על-ידי לחיצה באמצעות לחצן העכבר הימני בדוק, או באמצעות קיצור המקשים F12. לחלופין, השתמש בקיצור Ctrl+Shift+I ב- Windows או ב- Linux וב- Option+Command+I ב- macOS.
בחר את הרכיבים ולאחר מכן בחר את סגנונות הכרטיסיה.
בחר את <body> הרכיב. בכרטיסיה סגנונות, עיין בערכת הנושא שהוחלה. אם ערכת הנושא הנוכחית כהה, dark-theme הסגנונות יוחלו.

ודא שערכת הנושא הכהה נבחרה.
בחר את המסוף כדי לראות את console.log, current class name: dark-theme.

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

לקבלת מידע נוסף על הקונסולה, עיין במאמר המסוף זה.

משוב

האם עמוד זה היה מועיל?