Owen C137
Administrator
Staff
LEVEL 5
225 XP
JavaScript for Beginners – Adding Interactivity to Your Site
JavaScript is what brings a webpage to life! While HTML creates the structure and CSS makes it look good, JavaScript lets you make things happen when users interact with your site.
In this tutorial, we’ll cover how to use JavaScript to add simple interactivity to a webpage.
You’ve just learned how to add basic interactivity to your website! Keep practicing, and soon you’ll be able to build fully interactive web apps.
JavaScript is what brings a webpage to life! While HTML creates the structure and CSS makes it look good, JavaScript lets you make things happen when users interact with your site.
In this tutorial, we’ll cover how to use JavaScript to add simple interactivity to a webpage.
1. What is JavaScript?
- JavaScript is a programming language built into web browsers.
- It allows you to make dynamic changes to content, respond to user actions, and create interactive features.
- It runs directly on the user’s computer — no need for extra installations.
2. Setting Up Your First Script
Let’s start by creating a simple HTML page with some JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome!</h1>
<button onclick="showMessage()">Click Me!</button>
<script>
function showMessage() {
alert("Hello! You just clicked the button.");
}
</script>
</body>
</html>- Save this as index.html and open it in your browser.
- Click the button — you’ll see a pop-up message appear!
3. How This Works
- onclick in the `<button>` tag tells the browser to run a function when the button is clicked.
- function showMessage() defines what happens — in this case, we use `alert()` to show a pop-up.
- The `<script>` tag contains the JavaScript code.
4. Changing HTML Content with JavaScript
JavaScript can also change the content of a webpage without reloading it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Change Text Example</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "You changed the text!";
}
</script>
</body>
</html>- document.getElementById("title") finds the element with the ID "title".
- .innerHTML changes its content.
5. Next Steps
Now that you know the basics:- Experiment with different events like onmouseover or onkeydown.
- Learn about variables, loops, and conditions in JavaScript.
- Explore JavaScript documentation for more advanced features.
You’ve just learned how to add basic interactivity to your website! Keep practicing, and soon you’ll be able to build fully interactive web apps.