2.1 הקדמה לג׳אווהסקריפט תרגול

תרגול - הקדמה לג׳אווהסקריפט¶

תרגיל 1 - הרצה בדפדפן¶

צרו קובץ HTML בשם index.html וקובץ JS בשם script.js.
- חברו את קובץ ה-JS ל-HTML באמצעות תגית <script> עם defer
- בקובץ ה-JS, כתבו console.log שמדפיס את השם שלכם
- פתחו את הקובץ בדפדפן ובדקו בקונסול (F12) שההודעה מופיעה

תרגיל 2 - הרצה בטרמינל¶

צרו קובץ hello.js והריצו אותו עם Node.js מהטרמינל.
- הקובץ צריך להדפיס 5 שורות:
1. את השם שלכם
2. את הגיל שלכם
3. את העיר שלכם
4. את השפות שאתם יודעים
5. משפט שמשלב את כל הפרטים למשפט אחד (השתמשו ב-template literals עם backticks)

תרגיל 3 - היכרות עם הקונסול¶

בקובץ JS חדש, נסו את כל מתודות הקונסול שלמדנו:
- השתמשו ב-console.log להדפסת הודעה רגילה
- השתמשו ב-console.warn להדפסת אזהרה
- השתמשו ב-console.error להדפסת שגיאה
- השתמשו ב-console.table להצגת מערך של מספרים כטבלה

פתחו את הקונסול בדפדפן ושימו לב להבדלים בצבעים ובאייקונים בין הסוגים השונים.

תרגיל 4 - alert, prompt, confirm¶

צרו דף HTML עם קובץ JS מחובר. הקוד צריך לעשות את הדברים הבאים בסדר:
1. להציג alert עם ברכה "!ברוכים הבאים לאתר"
2. לבקש מהמשתמש את שמו עם prompt
3. לשאול את המשתמש עם confirm אם הוא רוצה לראות הודעה מיוחדת
4. אם המשתמש לחץ OK, להציג alert עם הודעה שכוללת את שמו
5. אם המשתמש לחץ Cancel, להציג alert עם הודעה "אולי בפעם הבאה"

תרגיל 5 - תרגום מפייתון ל-JS¶

תרגמו את הקוד הבא מפייתון לג׳אווהסקריפט. שימו לב להבדלי תחביר:

name = "Alice"
age = 25
is_student = True

print(f"Name: {name}")
print(f"Age: {age}")
print(f"Student: {is_student}")

if age >= 18:
    print(f"{name} is an adult")
else:
    print(f"{name} is a minor")

# print numbers 0 to 4
for i in range(5):
    print(i)

תרגיל 6 - defer מול בלי defer¶

צרו שני קבצי HTML שונים:

קובץ ראשון - without-defer.html:
- שימו תגית <script> (בלי defer) ב-<head>
- הסקריפט מנסה לגשת לתוכן של אלמנט <h1> שנמצא ב-body

קובץ שני - with-defer.html:
- שימו תגית <script defer> ב-<head>
- אותו סקריפט בדיוק

קובץ script.js:

let title = document.querySelector("h1");
console.log("Title content:", title);

פתחו את שני הקבצים בדפדפן ובדקו בקונסול מה קורה. בקובץ הראשון title יהיה null כי ה-HTML עוד לא נטען. בקובץ השני זה יעבוד.

תרגיל 7 - מחשבון פשוט עם prompt¶

צרו סקריפט שמשמש כמחשבון פשוט:
1. בקשו מהמשתמש מספר ראשון עם prompt
2. בקשו מהמשתמש מספר שני עם prompt
3. הציגו ב-alert את תוצאות ארבע פעולות החשבון: חיבור, חיסור, כפל וחילוק

שימו לב: prompt תמיד מחזיר מחרוזת. תצטרכו להמיר למספר עם Number().

תרגיל 8 - strict mode¶

צרו שני קבצי JS:

קובץ ראשון - בלי strict mode:

x = 10;
console.log(x);

קובץ שני - עם strict mode:

"use strict";
x = 10;
console.log(x);

הריצו את שני הקבצים (עם Node.js או בדפדפן) ותראו את ההבדל. הקובץ הראשון ירוץ בלי בעיה, הקובץ השני יזרוק שגיאה כי x לא הוגדר עם let או const.

שאלות¶

למה הגיוני לשים את תגית ה-<script> עם defer ב-<head> ולא בסוף ה-body?
מה ההבדל בין defer ל-async? מתי תשתמשו בכל אחד?
מה ההבדל בין console.log ל-alert?
מה מחזירה הפונקציה prompt אם המשתמש לוחץ Cancel?
למה מומלץ להשתמש ב-strict mode?
רשמו 5 הבדלי תחביר בין פייתון לג׳אווהסקריפט.