Дмитрий Лаврик Watch on YouTube

Понимание javascript - работа с DOM

3 min read 14 days ago
Published on May 08, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial aims to help you understand JavaScript and how to work with the Document Object Model (DOM). By following these steps, you'll learn essential concepts such as connecting your first script, interacting with DOM properties and methods, handling events, and creating a simple photo slider. This foundational knowledge is key to advancing your web development skills.

Step 1: Connect Your First Script

To get started with JavaScript, you need to connect your script to an HTML document.

  1. Create an HTML file:

    • Use a text editor to create a file named index.html.

  2. Add the basic HTML structure:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

  3. Create a JavaScript file:

    • In the same directory, create a file named script.js.

  4. Add a simple JavaScript code:

    console.log("JavaScript is connected!");

  5. Open your HTML file in a browser:

    • Right-click the index.html file and open it with your preferred browser to see the console message.

Step 2: Understand the Document Object Model

The DOM is a programming interface that represents the structure of your HTML document.

  • Key Concepts

    • The DOM allows JavaScript to interact with HTML elements.
    • Each element in the HTML is represented as a node in the DOM tree.

Step 3: Use Properties and Methods

JavaScript provides properties and methods to manipulate DOM elements.

  1. Accessing elements:

    • Use document.getElementById() to select an element.
    • Example:
    const heading = document.getElementById("myHeading");

  2. Changing content:

    • Use the innerHTML property to modify the content of an element.
    • Example:
    heading.innerHTML = "New Heading Content";

  3. Styling elements:

    • Use the style property to change CSS styles directly.
    • Example:
    heading.style.color = "blue";

Step 4: Handle Events

JavaScript can respond to user interactions through events.

  1. Add an event listener:

    • Use addEventListener to execute a function when an event occurs.
    • Example:
    heading.addEventListener("click", function() {
    alert("Heading clicked!");
});

  2. Common events:

    • Click, mouseover, keypress, etc.

Step 5: Create a Simple Photo Slider

You can create a basic photo slider using JavaScript and the DOM.

  1. HTML for the slider:

    <div id="slider">
    <img id="slide" src="photo1.jpg" alt="Photo Slider" />
</div>

  2. JavaScript for functionality:

    const images = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let currentIndex = 0;

function changeImage() {
    currentIndex = (currentIndex + 1) % images.length;
    document.getElementById("slide").src = images[currentIndex];
}

setInterval(changeImage, 2000);

Conclusion

In this tutorial, you learned how to connect a JavaScript file to an HTML document, understand the DOM, utilize properties and methods, handle events, and create a simple photo slider. These foundational skills will help you build more complex web applications. As a next step, consider experimenting with more DOM manipulation techniques and exploring JavaScript libraries for enhanced functionality.

Table of Contents

Recent