מדריך JavaScript

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

פקודות בסיסיות ב-JavaScript:

console.log() - הדפסה לקונסול

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

<script>
  console.log("שלום עולם!");
  let myVar = 123;
  console.log("הערך הוא:", myVar);
</script>
var, let, const - הצהרת משתנים

מילות מפתח להצהרה על משתנים. `let` ו-`const` עדיפים בדרך כלל על `var`.

<script>
  let name = "אליס";
  const PI = 3.14;
  console.log(name, PI);
</script>
data types - סוגי נתונים

JavaScript תומכת בסוגי נתונים: String, Number, Boolean, Array, Object, null, undefined.

<script>
  let text = "Text";      // String
  let num = 42;         // Number
  let isReady = true;   // Boolean
  let list = [1, 2];    // Array
</script>
operators - אופרטורים

לביצוע פעולות חשבוניות (+, -, *, /), השוואות (==, ===, >, <), ולוגיות (&&, ||).

<script>
  let x = 10, y = 5;
  console.log(x + y);    // 15
  console.log(x > y);    // true
</script>
functions - פונקציות

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

<script>
  function add(a, b) {
    return a + b;
  }
  console.log(add(2, 3)); // 5
</script>
if...else - תנאים

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

<script>
  let age = 15;
  if (age >= 18) {
    console.log("מבוגר");
  } else {
    console.log("קטין");
  }
</script>
for loop - לולאת for

חוזרת על בלוק קוד מספר קבוע של פעמים.

<script>
  for (let i = 0; i < 3; i++) {
    console.log(i);
  }
</script>
while loop - לולאת while

חוזרת על בלוק קוד כל עוד תנאי מסוים נכון.

<script>
  let counter = 0;
  while (counter < 2) {
    console.log(counter);
    counter++;
  }
</script>
arrays - מערכים

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

<script>
  let colors = ["red", "green", "blue"];
  console.log(colors[0]); // "red"
</script>
array.push(), array.pop() - הוספה והסרה למערך

`push()` מוסיף לסוף; `pop()` מסיר מהסוף.

<script>
  let nums = [1, 2];
  nums.push(3); // [1, 2, 3]
  nums.pop();   // [1, 2]
  console.log(nums);
</script>
objects - אובייקטים

אוספים של זוגות מפתח-ערך (properties), לייצוג ישויות.

<script>
  let car = { make: "Ford", model: "Focus" };
  console.log(car.make); // "Ford"
</script>
document.getElementById() - גישה לאלמנט

לגישה לאלמנט HTML ספציפי לפי ה-ID שלו.

<div id="myDiv">טקסט</div>
<script>
  let div = document.getElementById("myDiv");
  div.innerHTML = "טקסט חדש!";
</script>
document.querySelector() - גישה לפי סלקטור

מחזירה את האלמנט הראשון שמתאים לסלקטור CSS.

<p class="item">פריט.</p>
<script>
  let p = document.querySelector(".item");
  p.style.backgroundColor = "lightgray";
</script>
document.createElement() - יצירת אלמנט חדש

יוצר אלמנט HTML חדש בזיכרון.

<div id="parentDiv"></div>
<script>
  let newEl = document.createElement("p");
  newEl.textContent = "נוצר עכשיו.";
  document.getElementById("parentDiv").appendChild(newEl);
</script>
element.appendChild() - הוספת אלמנט ילד

מוסיפה אלמנט קיים כילד לאלמנט אחר.

<div id="cont"></div>
<script>
  let parent = document.getElementById("cont");
  let child = document.createElement("span");
  parent.appendChild(child);
</script>
element.remove() - הסרת אלמנט

מסירה אלמנט מה-DOM.

<button id="remBtn">הסר</button>
<script>
  document.getElementById("remBtn").addEventListener("click", function() {
    this.remove();
  });
</script>
addEventListener() - טיפול באירועים

מצרפת פונקציה שתופעל כאשר אירוע מתרחש (לדוגמה, click).

<button id="clickMe">לחץ</button>
<script>
  document.getElementById("clickMe").addEventListener("click", function() {
    alert("נלחץ!");
  });
</script>
setTimeout(), setInterval() - טיימרים

`setTimeout()` מבצע פונקציה פעם אחת. `setInterval()` מבצע באופן חוזר.

<script>
  setTimeout(function() {
    console.log("לאחר 1 שניה.");
  }, 1000);
</script>
try...catch - טיפול בשגיאות

מאפשר לטפל בשגיאות שעלולות להתרחש בקוד.

<script>
  try {
    let result = unknownVar;
  } catch (error) {
    console.error("שגיאה:", error.message);
  }
</script>
Fetch API - בקשות רשת

לביצוע בקשות רשת (HTTP) לטעינת נתונים.

<script>
  fetch('https://jsonplaceholder.typicode.com/todos/1') // דוגמה ל-API ציבורי
    .then(res => res.json())
    .then(data => console.log(data));
</script>
Arrow Functions - פונקציות חץ

תחביר מקוצר להגדרת פונקציות.

<script>
  const multiply = (a, b) => a * b;
  console.log(multiply(4, 2)); // 8
</script>
Template Literals - מחרוזות תבנית

ליצירת מחרוזות בקלות, כולל הטמעת משתנים (` `` ` ו-`${}`).

<script>
  const item = "כוס";
  const msg = `יש לי ${item}.`;
  console.log(msg);
</script>