מבנה דינמי עם JavaScript

JavaScript מאפשרת להוסיף אינטראקטיביות ודינמיות לדפי HTML, מה שמאפשר לאתרי אינטרנט להיות יותר מעניינים ויעילים.

הוספת JavaScript למסמך HTML

JavaScript יכולה להיות מוטמעת בדף HTML באמצעות תגית <script>.

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            console.log('הדף נטען!');
          });
        </script>
        

שימוש בפונקציות JavaScript

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

        <button onclick="changeText()">שנה טקסט</button>
        <p id="text">טקסט ישן</p>
    
        <script>
          function changeText() {
            document.getElementById('text').innerText = 'טקסט חדש!';
          }
        </script>
        

אירועים ב-JavaScript

JavaScript תומכת באירועים המאפשרים לבצע פעולות בתגובה לפעולות המשתמש, כמו לחיצה על כפתור, הזזת עכבר ועוד.

        <button id="myButton">לחץ כאן</button>
    
        <script>
          document.getElementById('myButton').addEventListener('click', function() {
            alert('כפתור נלחץ!');
          });
        </script>
        

שימוש ב-Document Object Model (DOM)

ה-DOM מאפשרת גישה ותח manipulation של מבנה ה-HTML באמצעות JavaScript.

        <ul id="myList">
          <li>פריט 1</li>
        </ul>
    
        <script>
          var ul = document.getElementById('myList');
          var li = document.createElement('li');
          li.textContent = 'פריט 2';
          ul.appendChild(li);
        </script>
        

כאן אנחנו מוסיפים פריט חדש לרשימה דינמית באמצעות JavaScript.