Articles
מבוא ל-JavaScript
JavaScript ו-HTML

JavaScript ו-HTML

מאמר זה מסביר על JavaScript ו-HTML.

YouTube Video

אובייקט window ב-JavaScript

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

תכונות עיקריות של אובייקט window

מאפיינים 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: גישה למסמך ה-HTML הנוכחי.
  • window.location: ניהול ה-URL הנוכחי וניווט בדפדפן.
  • window.history: גישה למידע היסטוריית הדפדפן ואפשרות ניווט קדימה ואחורה.
  • window.navigator: מספק מידע על הדפדפן והמכשיר.
  • window.innerWidth / window.innerHeight: מאחזר את הרוחב והגובה של ה-viewport.

שיטות 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): מציג תיבת הודעה.
  • window.confirm(): מציג תיבת הודעה לבקשת אישור המשתמש ומחזיר תוצאה של אישור או ביטול.
  • window.prompt(): מציג תיבת הודעה לבקשת קלט מהמשתמש ומחזיר את הערך שהוזן.
  • window.open(): פותח חלון או טאבים חדשים.
  • window.setTimeout() / window.setInterval(): קובע טיימר לביצוע פונקציה אחרי זמן מסוים או במרווחים קבועים.

ניהול אירועים 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: אירוע שמופעל כאשר הדף נטען במלואו.
  • window.onresize: אירוע שמופעל כאשר גודל החלון משתנה.
  • window.onscroll: אירוע שמופעל כאשר המשתמש גולל את הדף.

תפקיד במשתנה גלובלי 

1var myVar = 10;
2console.log(window.myVar); // 10
  • האובייקט window מחזיק משתנים ופונקציות גלובליים. במילים אחרות, משתנים ופונקציות שמוצהרים הופכים אוטומטית למאפיינים של window.

מניפולציה של DOM בג'אווה סקריפט

מניפולציה של DOM (מודל אובייקט המסמך) בג'אווה סקריפט משמשת לאינטראקציה דינמית עם אלמנטים בדף האינטרנט. ה-DOM מציג את מבנה מסמך ה-HTML כעץ, שניתן לשנות באמצעות ג'אווה סקריפט כדי לעדכן את המבנה ולשלוט בתצוגת הדף.

יסודות ה-DOM

ה-DOM מתייחס ל-HTML של דף אינטרנט כאובייקטים, ומאפשר גישה ושינוי של אלמנטים ותכונות. השתמש באובייקט document כדי לגשת אל מסמך ה-HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

שליפת אלמנטים מה-DOM

לג'אווה סקריפט יש מספר שיטות לגישה לאלמנטים ב-DOM.

  • document.getElementById(): אחזר אלמנט לפי תכונת id
  • document.getElementsByClassName(): אחזר אלמנטים לפי שם מחלקה (HTMLCollection)
  • document.getElementsByTagName(): אחזר אלמנטים לפי שם תגית (HTMLCollection)
  • document.querySelector(): אחזר את האלמנט הראשון שתואם באמצעות בורר CSS
  • document.querySelectorAll(): אחזר את כל האלמנטים התואמים באמצעות בורר CSS (NodeList)

דוגמה: getElementById ו-querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

מניפולציה על ה-DOM

ניתן לבצע פעולות שונות על האלמנטים שנשלפו.

שינוי טקסט

כדי לשנות את הטקסט של אלמנט, השתמש ב-textContent או innerHTML.

  • textContent: אחזר או שנה את תוכן הטקסט של אלמנט. תגיות HTML אינן מפורשות.
  • innerHTML: אחזר או שנה את תוכן ה-HTML של אלמנט. מחרוזות המכילות תגיות HTML מעובדות גם כן.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

שינוי תכונות

השתמש ב-setAttribute() ו-getAttribute() כדי לשנות תכונות של אלמנט.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

שינוי CSS

השתמש במאפיין style כדי לשנות סגנונות CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

ניהול מחלקות

השתמש ב-classList כדי להוסיף או להסיר מחלקות מאלמנט.

  • add(): הוסף מחלקה
  • remove(): הסר מחלקה
  • toggle(): הוסף או הסר מחלקה בהתאם לקיומה
  • contains(): בדוק אם מחלקה קיימת
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

יצירה ומחיקה של אלמנטים ב-DOM

יצירת אלמנטים חדשים

השתמש ב-document.createElement() כדי ליצור אלמנט חדש ולהוסיף אותו ל-DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

מחיקת פריטים

השתמש בשיטת remove() כדי למחוק אלמנט.

1newDiv.remove();  // Remove the created element

הוספת אירועים

כחלק ממניפולציות ב-DOM, ניתן להוסיף מטפלי אירועים שמגיבים לאינטראקציות משתמש. השתמש ב-addEventListener() כדי לטפל באירועים כמו לחיצות ואינטראקציות במקלדת.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

בדוגמה זו, לחיצה על כפתור משנה את הטקסט של האלמנט #content.

ניווט בעץ ה-DOM

ניתן לנווט ב-DOM כדי לגשת לאלמנטים הורה ואחים.

  • parentNode: גישה לצומת ההורה
  • childNodes: גישה לצמתים ילד (מכל הסוגים)
  • firstChild / lastChild: אלמנט הילד הראשון/האחרון
  • nextSibling / previousSibling: אלמנט האח הבא/האח הקודם
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

דוגמה: הוספת פריט חדש לרשימה

להלן דוגמה להוספת פריט חדש לרשימה.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

בקוד הזה, לחיצה על כפתור "הוסף פריט" מוסיפה אלמנט <li> חדש לרשימה.

סיכום

  • מניפולציה של DOM ב-JavaScript מאפשרת לכם לקבל, לשנות, ליצור ולמחוק אלמנטים בתוך מסמך HTML.
  • ניתן לקבל אלמנטים באמצעות שיטות כמו getElementById() ו-querySelector().
  • השתמשו ב-textContent או innerHTML לשינוי טקסט ו-HTML, וב-setAttribute() למניפולציה של מאפיינים.
  • השתמשו ב-createElement() כדי ליצור אלמנטים חדשים וב-remove() כדי למחוק אותם.
  • ניתן ליצור דפי אינטרנט אינטראקטיביים שמגיבים לפעולות משתמש באמצעות טיפול באירועים.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

פונקציות גנרטור בג'אווהסקריפט