Welcome to the fifth lesson in our HTML, CSS, and JavaScript learning series! 🎉

In this lesson, we will begin our journey with JavaScript , the programming language that adds interactivity and dynamism to web pages. We will learn how to add interactive effects such as buttons that show or hide elements, dynamic sliders, and more.

1. Quick Review

In the previous lessons, we learned:

• How to use HTML to create the structure of a page.
• Styling pages using CSS .
• Advanced techniques like Flexbox and Grid for flexible design.

Now, we will move on to JavaScript to add interactivity!

2. Introduction to JavaScript

What is JavaScript?

JavaScript is a programming language used to add interactivity to web pages. It can:

• Dynamically modify the content of a page.
• Respond to user actions (like clicking a button).
• Control styles (CSS ) and structure (HTML ).

How Does JavaScript Work?

JavaScript is usually written inside an HTML file using <script>, or in an external file linked to the page.

3. Writing Your First JavaScript Code

A. Writing Code Directly in HTML:

<script>
alert("Hello, World!");
</script>

B. Linking an External JavaScript File:

<script src="script.js"></script>

4. Adding Interactivity with JavaScript

A. Handling Events:

You can use JavaScript to respond to events like clicks (click) or input (input).

Example: A "Show/Hide" Button for Text

<button onclick="toggleText()">Show/Hide Text</button>
<p id="text" style="display: none;">This text will appear and disappear!</p>


<script>
function toggleText() {
var text = document.getElementById("text");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>

B. Dynamically Modifying Styles:

You can use JavaScript to dynamically change CSS styles.

Example: Changing the Background Color on Click

<button onclick="changeColor()">Change Color</button>


<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>

5. Creating a Dynamic Slider

A. Creating the Slider:

<div>
<label for="slider">Choose a value:</label>
<input type="range" id="slider" min="0" max="100" value="50">
<p>Current Value: <span id="value">50</span></p>
</div>


<script>
const slider = document.getElementById("slider");
const value = document.getElementById("value");


slider.addEventListener("input", function() {
value.textContent = slider.value;
});
</script>

6. Animations Using JavaScript

A. Moving Elements:

You can use JavaScript to animate elements by modifying their style.

Example: Moving a Box Horizontally

<div id="box" style="width: 100px; height: 100px; background-color: lightgreen; position: relative;"></div>
<button onclick="moveBox()">Move the Box</button>


<script>
function moveBox() {
const box = document.getElementById("box");
let pos = 0;
const interval = setInterval(() => {
if (pos >= 300) {
clearInterval(interval);
} else {
pos += 5;
box.style.left = pos + "px";
}
}, 10);
}
</script>

7. Practical Exercise

Try creating an HTML page that includes the following:

• "Show/Hide" Button for Text :

  • When the button is clicked, the text appears or disappears.

• Dynamic Slider :

  • Displays the current value of the slider.

• Moving Box :

  • When a button is clicked, the box moves horizontally.

• Background Color Change :

  • When a button is clicked, the background color of the page changes.

8. What’s Next?

In the next lesson, we will learn:

• How to use AJAX to load data without refreshing the page.
• Working with APIs to fetch data from the internet.
• Building more complex interactive web applications.

📌 Tip : Don’t hesitate to experiment with the code yourself and modify it to see the results. Practice is the key to mastery! 🚀