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

מה זה ג׳אווהסקריפט - JavaScript¶

ג׳אווהסקריפט (JavaScript, בקיצור JS) היא שפת התכנות של האינטרנט. כמעט כל אתר שאתם משתמשים בו - גוגל, יוטיוב, פייסבוק, אינסטגרם - משתמש ב-JavaScript כדי להפוך את הדף מדף סטטי לדף דינאמי ואינטראקטיבי.

את השפה יצר בראנדן אייך (Brendan Eich) ב-1995, תוך 10 ימים בלבד
השם "JavaScript" הוא טריק שיווקי - אין לה קשר אמיתי ל-Java. באותה תקופה Java היתה שפה פופולרית מאוד ורצו לרכב על הגל
השם המקורי היה Mocha, אחר כך LiveScript, ולבסוף JavaScript
למרות שנוצרה בחיפזון, היא הפכה לשפת התכנות הפופולרית בעולם
היום היא מנוהלת על ידי תקן בשם ECMAScript, וכל שנה יוצאות לה תוספות חדשות

איפה רצה ג׳אווהסקריפט¶

בדפדפן - browser¶

זה היעוד המקורי של JS. הדפדפן מכיל מנוע JavaScript שמריץ את הקוד:
- כרום משתמש במנוע V8
- פיירפוקס משתמש במנוע SpiderMonkey
- ספארי משתמש במנוע JavaScriptCore

בדפדפן, JS יכול:
- לשנות את תוכן הדף (להוסיף, למחוק, לשנות אלמנטים)
- להגיב לפעולות של המשתמש (לחיצות, הקלדות, גלילה)
- לשלוח ולקבל מידע מהשרת (AJAX, fetch)
- לשמור מידע מקומית (localStorage, cookies)
- ליצור אנימציות ואפקטים ויזואליים

בשרת - Node.js¶

ב-2009 ראיין דאל (Ryan Dahl) לקח את מנוע V8 מכרום והפעיל אותו מחוץ לדפדפן. ככה נולד Node.js.

עם Node.js אפשר לכתוב קוד צד-שרת ב-JavaScript
זה אומר שאפשר להשתמש באותה שפה גם בצד הלקוח וגם בצד השרת
Node.js יכול לגשת לקבצים, להתחבר למסדי נתונים, ליצור שרתי HTTP ועוד
אנחנו נשתמש ב-Node.js בעיקר להרצת קבצי JS מהטרמינל ולכלי פיתוח

הוספת JS לדף HTML¶

יש כמה דרכים להריץ JavaScript בתוך דף HTML:

תגית script ישירה¶

אפשר לכתוב קוד JS ישירות בתוך תגית <script>:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello!</h1>

    <script>
        console.log("Hello from JavaScript!");
    </script>
</body>
</html>

התגית מופיעה בדרך כלל בסוף ה-body
זה עובד, אבל לא מומלץ לפרויקטים אמיתיים - אותה סיבה שלא כותבים CSS inline

קובץ חיצוני¶

הדרך הנכונה - ליצור קובץ JS נפרד ולקשר אותו:

קובץ script.js:

console.log("Hello from an external file!");

קובץ index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello!</h1>

    <script src="script.js"></script>
</body>
</html>

זו הדרך שתמיד נעדיף - בדיוק כמו עם CSS חיצוני
הדפדפן יכול לשמור את הקובץ בזכרון (cache)
קוד מסודר ונקי יותר

התכונה defer¶

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

הפתרון - התכונה defer:

<head>
    <script src="script.js" defer></script>
</head>

הדפדפן ממשיך לבנות את הדף תוך כדי הורדת ה-JS
ה-JS ירוץ רק אחרי שכל ה-HTML נטען
זו הדרך המומלצת - תמיד נשתמש ב-defer

התכונה async¶

דומה ל-defer, אבל עם הבדל חשוב:

<head>
    <script src="analytics.js" async></script>
</head>

גם כאן הדפדפן ממשיך לבנות את הדף תוך כדי הורדת ה-JS
אבל ה-JS ירוץ מיד כשהוא מוכן, גם אם ה-HTML עדיין לא סיים להיטען
שימושי לסקריפטים שלא תלויים בתוכן הדף, כמו אנליטיקס

סיכום - מה להשתמש¶

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

הקונסול - console¶

הקונסול הוא הכלי הכי חשוב שלנו לפיתוח וניפוי שגיאות.

console.log¶

הפקודה הכי חשובה - מדפיסה מידע לקונסול:

console.log("Hello World!");
console.log(42);
console.log("The answer is", 42);
console.log("Name:", "John", "Age:", 30);

בפייתון אתם רגילים ל-print(). ב-JS זה console.log() - אותו רעיון בדיוק.

// JavaScript
console.log("Hello");

// Python equivalent
// print("Hello")

עוד מתודות של console¶

console.warn("This is a warning");   // warning in yellow
console.error("This is an error");   // error in red
console.table([1, 2, 3]);            // displays data as a table
console.clear();                      // clears the console

איך לפתוח את הקונסול¶

לחצו F12 בדפדפן (או לחצן ימני ואז Inspect)
עברו ללשונית Console
שם תראו את כל מה ש-console.log מדפיס
אפשר גם לכתוב ולהריץ JS ישירות בקונסול

השוואה בין JavaScript לפייתון¶

אתם כבר יודעים פייתון, אז בואו נראה את ההבדלים העיקריים:

נושא	Python	JavaScript
בלוקים של קוד	הזחה (indentation)	סוגריים מסולסלים `{ }`
סוף שורה	שורה חדשה	נקודה-פסיק `;` (אופציונלי אבל מומלץ)
הגדרת משתנה	`x = 5`	`let x = 5;`
קבוע	אין (מוסכמה: UPPER_CASE)	`const X = 5;`
הערה	`# comment`	`// comment`
הערה מרובת שורות	`""" comment """`	`/* comment */`
השוואה	`==`	`===` (השוואה מחמירה)
וגם / או	`and` / `or`	`&&` / `\|\|`
לא	`not`	`!`
הדפסה	`print()`	`console.log()`
ללא ערך	`None`	`null` / `undefined`
בוליאני	`True` / `False`	`true` / `false`
מוסכמת שמות	snake_case	camelCase
פונקציה	`def name():`	`function name() { }`
מחרוזת עם ביטוי	`f"Hello {name}"`	`Hello ${name}`

דוגמה להמחשת ההבדלים:

// JavaScript
let userName = "Alice";
const maxAge = 120;

if (userName === "Alice") {
    console.log("Hello Alice!");
} else {
    console.log("Who are you?");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

# Python equivalent
user_name = "Alice"
MAX_AGE = 120

if user_name == "Alice":
    print("Hello Alice!")
else:
    print("Who are you?")

for i in range(5):
    print(i)

שימו לב להבדלים:
- ב-JS יש let לפני שם המשתנה
- ב-JS הבלוק מוגדר על ידי { } ולא על ידי הזחה
- ב-JS התנאי עטוף בסוגריים ()
- ב-JS שמות משתנים ב-camelCase ולא ב-snake_case
- ב-JS === במקום ==

מצב מחמיר - strict mode¶

JavaScript היא שפה ותיקה ויש בה כמה התנהגויות מוזרות מהעבר. מצב מחמיר (strict mode) מבטל חלק מההתנהגויות הבעייתיות:

"use strict";

// now JavaScript is stricter:
// - can't use undeclared variables
// - can't delete variables
// - can't use duplicate parameter names
// - and more...

x = 10; // ERROR! x is not declared

מוסיפים "use strict"; בתחילת הקובץ
במודולים (modules) מצב מחמיר פועל אוטומטית
בפרויקטים מודרניים עם כלי build זה בדרך כלל מופעל אוטומטית
מומלץ תמיד להשתמש בזה - זה תופס שגיאות מוקדם

הרצת JS עם Node.js¶

בנוסף לדפדפן, אפשר להריץ JavaScript מהטרמינל עם Node.js:

// file: hello.js
console.log("Hello from Node.js!");

let name = "World";
console.log(`Hello, ${name}!`);

ואז בטרמינל:

node hello.js

זה דומה מאוד לאיך שמריצים פייתון:

python hello.py    # Python
node hello.js      # JavaScript

ודאו ש-Node.js מותקן אצלכם (בדקו עם node --version בטרמינל)
זה שימושי כשרוצים לבדוק קוד JS מהר בלי דפדפן

פונקציות דו-שיח בדפדפן¶

JavaScript בדפדפן מגיע עם שלוש פונקציות פשוטות לתקשורת עם המשתמש:

alert - התראה¶

alert("Hello! Welcome to my website!");

מציג חלון קופץ עם הודעה
המשתמש חייב ללחוץ OK כדי להמשיך
לא משתמשים בזה באתרים אמיתיים - זה חוסם את כל הדף ומעצבן את המשתמשים
שימושי ללמידה ולניפוי שגיאות מהיר

בפייתון אין מקבילה ישירה - הדבר הקרוב ביותר הוא print(), אבל alert חוסם את ממשק המשתמש.

prompt - קלט מהמשתמש¶

let name = prompt("What is your name?");
console.log("Hello, " + name + "!");

// with a default value
let age = prompt("How old are you?", "25");

מציג חלון קופץ עם שדה טקסט
מחזיר את מה שהמשתמש הקליד (כמחרוזת!)
אם המשתמש לחץ Cancel, מחזיר null

בפייתון המקבילה היא input():

// JavaScript
let name = prompt("Enter your name:");

// Python equivalent
// name = input("Enter your name: ")

הבדל חשוב: prompt תמיד מחזיר מחרוזת (או null), בדיוק כמו input() בפייתון.

confirm - אישור¶

let isAdult = confirm("Are you over 18?");
console.log(isAdult); // true or false

מציג חלון קופץ עם כפתורי OK ו-Cancel
מחזיר true אם המשתמש לחץ OK
מחזיר false אם המשתמש לחץ Cancel

בפייתון אין מקבילה מובנית. הדבר הקרוב ביותר:

# Python (no direct equivalent)
# answer = input("Are you over 18? (yes/no): ")
# is_adult = answer == "yes"

דוגמה משולבת¶

let name = prompt("What is your name?");

if (name !== null) {
    let isHappy = confirm("Are you happy today?");

    if (isHappy) {
        alert("Great to hear, " + name + "!");
    } else {
        alert("Hope your day gets better, " + name + "!");
    }
} else {
    alert("You cancelled!");
}

סיכום¶

ג׳אווהסקריפט היא שפת הפיתוח של האינטרנט, נוצרה ב-1995 תוך 10 ימים
היא רצה בדפדפן ועם Node.js גם בשרת
מוסיפים JS ל-HTML עם תגית <script> - מומלץ עם defer
הקונסול (console.log) הוא הכלי הכי חשוב שלנו - כמו print() בפייתון
ההבדלים העיקריים מפייתון: סוגריים מסולסלים, נקודה-פסיק, let/const, ===, camelCase
מומלץ להשתמש ב-strict mode
הפונקציות alert, prompt ו-confirm שימושיות ללמידה אבל לא לפרודקשן