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 = "Danny"; // string
let isStudent = true; // boolean
let fruits = ["apple", "banana"]; // array
let person = { name: "Danny", 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("Good morning!");
} else if (hour < 18) {
  console.log("Good afternoon!"); // printed
} else {
  console.log("Good evening!");
}

לולאות

// loop over array
let fruits = ["apple", "banana", "pear"];
fruits.forEach(fruit => console.log(fruit));

// for-of loop
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:", error));

שליחת post

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