מה זה JavaScript ולמה אנחנו צריכים אותה?

מה זה JavaScript?

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

בעצם, JavaScript היא השפה שמאפשרת לאתרים להגיב לפעולות של המשתמשים ולהתעדכן בזמן אמת, בלי שהדף יתמלא מחדש.

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

למה אנחנו צריכים JavaScript?

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

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

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

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

יאלה בואו נתחיל לדבר קוד😁💻

משתנים (Variables)

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

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

let name = "אלמיהו";
console.log(name); // 'זה יציג את 'אלמיהו

מה שחשוב להבין הוא ש-let הוא משתנה שניתן לשנות את ערכו במהלך הזמן לדוגמה:

let age = 25;
age = 26; //'age' שינינו את הערך של
console.log(age); // יציג '26'

בנוסף, משתנה שהוגדר עם let יהיה זמין רק באותו בלוק קוד שבו הוא הוגדר (פונקציה, לולאה, תנאי if וכו').

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

const message = "!JavaScript-שלום!, ברוך הבא ל";

function displayMessage() {
  console.log(message);
}

displayMessage();

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

למה זה חשוב?

המשתנה: בשורה הראשונה יצרנו משתנה בשם message שמכיל את הטקסט "שלום!, ברוך הבא ל-JavaScript! " המילה const אומרת שהמשתנה הזה לא משתנה אחרי שהוא נקבע (זאת אומרת, לא ניתן לשנות את ערכו בהמשך).

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

הפלט: כאשר אנחנו קוראים לפונקציה ()displayMessage בשורה האחרונה, המחשב יבצע את הפקודה בתוכה, ויציג את ההודעה שמאוחסנת בתוך המשתנה message.

פונקציות יותר לעומק

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

function greet() {
  console.log("שלום עולם!");
}

greet(); // זה יציג 'שלום עולם!' במסך

הסבר: המילה function מציינת שאנחנו יוצרים פונקציה.

אחרי המילה function, אנחנו נותנים לפונקציה שם — במקרה הזה greet.

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

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

אובייקטים (Objects)

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

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

const person = {
  name: "אלמיהו",
  age: 26,
  profession: "מתכנת",
};

console.log(person.name); // 'אלמיהו'
console.log(person.age); // 30

הסבר: יצרנו אובייקט בשם person. בתוך האובייקט יש לנו מאפיינים (name, age, profession) שמכילים ערכים שונים. כדי לגשת למאפיין בתוך האובייקט, אנחנו משתמשים בנקודה (Dot Notation), כמו person.name.

תחזיקו חזק! עכשיו מתחילים עם מערכים – לא כל כך מפחיד כמו זה נשמע! 😜

מערכים (Arrays)

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

למשל, אם נרצה לאחסן רשימת שמות, נעשה זאת במערך:

const names = ["יוסף", "מרים", "אלמיהו"];
console.log(names[0]); // 'אלמיהו'

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

מה שחשוב לדעת הוא שמערך ב-JavaScript תמיד מתחיל מ-0, כלומר, האלמנט הראשון במערך הוא names[0], שהוא 'אלמיהו'. האלמנט השני הוא names[1], שהוא 'מרים', וכן הלאה.

אז אם נשאל מהו האלמנט הראשון, התשובה היא names[0] ולא names[1], כי המערך מתחיל מ-0!

סיכום:

משתנים מאחסנים ערך אחד.

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

אובייקטים מאחסנים הרבה פרטים שונים, כמו תיבה עם הרבה חפצים בתוכה.

מערכים הם רשימות של פריטים מסודרים.