JavaScript ו-HTML
מאמר זה מסביר על JavaScript ו-HTML.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>אובייקט window ב-JavaScript
אובייקט window ב-JavaScript הוא האובייקט הגלובלי בסביבה של דפדפן, והוא מספק פונקציות ומידע שקשורים לדף האינטרנט ולחלון הדפדפן. מאחר ש-window הוא ההיקף הגלובלי של הדפדפן, כל קוד JavaScript שפועל בדפדפן הופך להיות חלק מאובייקט window. אובייקט window ממלא תפקיד חשוב בהרצת JavaScript בסביבת הדפדפן, והוא מספק APIs ומאפיינים רבים.
תכונות עיקריות של אובייקט window
מאפיינים
1// Get and display the document's title
2console.log(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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.
שליפת אלמנטים מה-DOM
לג'אווה סקריפט יש מספר שיטות לגישה לאלמנטים ב-DOM.
document.getElementById(): מאחזר אלמנט לפי מאפיין ה-idשלו.document.getElementsByClassName(): מאחזר אלמנטים לפי שם מחלקה. מחזירHTMLCollection.HTMLCollectionהוא אוסף חי שמעודכן בזמן אמת בהתאם לשינויים ב-DOM.document.getElementsByTagName(): מאחזר אלמנטים לפי שם תגית. מחזירHTMLCollection.document.querySelector(): משתמש בבורר CSS כדי לאחזר את האלמנט התואם הראשון.document.querySelectorAll(): משתמש בבורר CSS כדי לאחזר את כל האלמנטים התואמים. מחזירNodeList.NodeListהוא אוסף סטטי שמחזיק את המצב בעת האחזור ואינו משקף שינויים מאוחרים ב-DOM.
דוגמה: getElementById ו-querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);שינוי 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: גישה לצמתים הבנים. ניתן לגשת ל-כל סוגי הצמתים, לא רק צמתי אלמנטים כמו תגיות HTML, אלא גם צמתי טקסט וצמתי הערה.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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});בקוד הזה, לחיצה על כפתור "הוסף פריט" מוסיפה אלמנט <li> חדש לרשימה.
סיכום
- מניפולציה של DOM ב-JavaScript מאפשרת לכם לקבל, לשנות, ליצור ולמחוק אלמנטים בתוך מסמך HTML.
- ניתן לקבל אלמנטים באמצעות שיטות כמו
getElementById()ו-querySelector(). - השתמשו ב-
textContentאוinnerHTMLלשינוי טקסט ו-HTML, וב-setAttribute()למניפולציה של מאפיינים. - השתמשו ב-
createElement()כדי ליצור אלמנטים חדשים וב-remove()כדי למחוק אותם. - ניתן ליצור דפי אינטרנט אינטראקטיביים שמגיבים לפעולות משתמש באמצעות טיפול באירועים.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.