4.1 הקדמה הרצאה

הקדמה

שפת java script (או בקיצור js) היא שפת. התכנות הפופולרית ביותר בעולם.
היא נוסדה לראשונה בשביל להיות שפת סקריפטים שמתווספת לאתרים עם html כדי להוסיף ״לוגיקה״ לאתרי אינטרנט. והיום משתמשים בה גם לפיתוח frontend מורכב- אתרים, משחקי מחשב, תוכנות למחשב, או אפליקציות וגם לפיתוח backend וapi.
כדי לפתח frontend מודרני, מומלץ מאוד ללמוד ולדעת java-script ובגלל הפופולריות שלה בfrontend, כתיבת backend-ים בjs נהייתה סטנדרט גם היא בתעשייה.

לכן, ללמוד js והתנסות בשפה- זה מיומנות חשובה למפתח backend.

הבסיס

כדי להתאמן על כתיבת קוד בשפה, תוכלו לפתוח את ה״developer tools" בדפדפן שלכם.
פתחו את הדפדפן שלכם ולחצו על ״f12" או ״ctrl + shift + i".

יפתח לכם חלונית כזו, מצד ימין.
- אני משתמש בfirefox ובdark mode, אולי אצלכם העיצוב יראה קצת שונה.

למעלה יהיה לכם כל הלושניות השונות- כרגע אנחנו בלושנית הinspector, שאיתה אנחנו יכולים לראות את הhtml + css שמוצג לפנינו.
לחצו על לושנית ה"console"

כאן תוכלו לכתוב איזה קוד js שתרצו בconsole אינטרקטיבי (כמו ipython).

מעבר זריז על java script

שלום עולם

כדי להדפיס בconsole נוכל להשתמש ב:

console.log("hello");
console.log(5);
console.log(10+10*2);

כל ביטוי בjava script נגמר ב;

משתנים

כדי להציב משתנים בjava script אנחנו צריכים לכתוב את המילה השמורה ״let" ואז שם המשתנה והערך.

let age = 30; // number
let name = "דני"; // string
let isStudent = true; // boolean
let fruits = ["תפוח", "בננה"]; // array
let person = { name: "דני", age: 30 }; // object
let empty = null; // null
let notDefined; // undefined

כדי ליצור משתנה גלובלי, (לרוב לא נרצה) במקום להשתמש בlet נוכל להשתמש בvar.

var a = 1;

כדי ליצור משתנה constant (שערכו לא משתנה) במקום בvar נשתמש בconst

const a = 1;

תנאים

let hour = 14;
if (hour < 12) {
  console.log("בוקר טוב!");
} else if (hour < 18) {
  console.log("צהריים טובים!"); // יודפס
} else {
  console.log("ערב טוב!");
}

לולאות

// לולאה על מערך
let fruits = ["תפוח", "בננה", "אגס"];
fruits.forEach(fruit => console.log(fruit));

// לולאת for-of
for (let fruit of fruits) {
  console.log(fruit);
}

פונקציות

function greet(name="guest") {
  return `hello, ${name}!`;
}
console.log(greet());

בjava script יש גם למבדות, הן נקראות ״arrow functions"

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

בקשות http

נוכל לגרום לקוד הjs שלנו לעשות בקשות לapi.
נוכל להשתמש בfetch כדי לבצע בקשת http.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("שגיאה:", error));

שליחת post

fetch("https://api.example.com/data", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "amit pinchasi", age: 17 })
});