HTML JavaScript Tutorial for Beginners – Simple Explanation

JavaScript makes HTML pages come alive. Without JavaScript, web pages are static. With JavaScript, things can change, move, react, and respond to users.

What is JavaScript?

JavaScript is a programming language that runs in your browser. It can:

Change content on the page without reloading
Respond to button clicks, mouse movements, and keyboard typing
Validate forms before sending data
Create animations and interactive features
Fetch data from other websites (like showing live weather or news)

HTML gives you structure. CSS gives you style. JavaScript gives you behavior and interactivity.

The HTML script Tag

The <script> tag is used to add JavaScript to your HTML page. You can put JavaScript code directly inside the tag, or link to an external JavaScript file.

To select an HTML element, JavaScript often uses document.getElementById(). This finds an element by its id and lets you change it.

When you click the button, the demoChangeText() function runs. It finds the paragraph with id “demoMessage” and changes its content.

📘 Note: JavaScript examples work best when you save the code as an HTML file and open it in your browser. The preview above shows the interactive button. Try clicking it!

What JavaScript Can Do

Here are some of the things JavaScript can do. Try each button to see the effect.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Examples</h2>

<div id="demoTarget" style="background-color: #f0f0f0; padding: 20px; border-radius: 10px; margin: 15px 0; text-align: center;">
  <p>This is the target area. Click the buttons below to change me.</p>
</div>

<div class="demo-btn-group">
  <button class="demo-action-btn" onclick="demoChangeContent()">Change Content</button>
  <button class="demo-action-btn" onclick="demoChangeStyle()">Change Style</button>
  <button class="demo-action-btn" onclick="demoReset()">Reset</button>
</div>

function demoChangeStyle() {
  document.getElementById("demoTarget").style.backgroundColor = "#ffeb3b";
  document.getElementById("demoTarget").style.color = "#333";
  document.getElementById("demoTarget").style.fontSize = "18px";
  document.getElementById("demoTarget").style.fontWeight = "bold";
}

function demoReset() {
  document.getElementById("demoTarget").innerHTML = "<p>This is the target area. Click the buttons below to change me.</p>";
  document.getElementById("demoTarget").style.backgroundColor = "#f0f0f0";
  document.getElementById("demoTarget").style.color = "#333";
  document.getElementById("demoTarget").style.fontSize = "16px";
  document.getElementById("demoTarget").style.fontWeight = "normal";
}
</script>

</body>
</html>

JavaScript can change content, change styles (colors, fonts, sizes), and even change attributes of elements like images.

JavaScript Can Change HTML Attributes

You can also change attributes like the src of an image. This is how image sliders and lightboxes work.

<!DOCTYPE html>
<html>
<body>

<h2>Image Changer</h2>

<div class="demo-img-btn-group">
  <button class="demo-img-btn" onclick="demoShowImage1()">Trulli Houses</button>
  <button class="demo-img-btn" onclick="demoShowImage2()">Girl in Jacket</button>
  <button class="demo-img-btn" onclick="demoShowImage3()">Flowers in Chania</button>
</div>

</body>
</html>

Click the buttons. The image changes because JavaScript is changing the src attribute.

Where to Put JavaScript

You can put JavaScript in three places:

Inside the <script> tag – Usually placed at the end of the <body> or inside the <head>.
In an external file – Use <script src="script.js"></script>. This keeps your HTML clean and lets you reuse the same JavaScript on multiple pages.
Inside an HTML attribute – Like onclick="demoFunction()" (we have been doing this).

Here is an example of linking to an external JavaScript file:

External JavaScript

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

Tip: For real websites, put your JavaScript in external files. They load faster, are easier to manage, and can be cached by the browser.

The noscript Tag

The <noscript> tag shows content to users who have JavaScript disabled in their browser. Very few users disable JavaScript today, but it is good practice to include a fallback message.

If a user has JavaScript disabled, they will see the message inside the <noscript> tag instead.

Quick Summary

JavaScript makes web pages interactive and dynamic.
Use the <script> tag to add JavaScript to HTML.
document.getElementById() finds an element by its id so you can change it.
JavaScript can change content, styles, and attributes.
You can put JavaScript inside the HTML file or in an external .js file.
Use <noscript> to show a message for users without JavaScript.

What Just Happened? Let Me Explain

JavaScript is a full programming language. We are only scratching the surface here. You will learn much more in the JavaScript tutorial.
The document.getElementById() method is one of the most used JavaScript functions. It is how you grab elements and change them.
When you see websites that update without refreshing the page, that is JavaScript (often using AJAX or Fetch).
Put your <script> tags just before the closing </body> tag. This makes your page load faster.
Almost all modern websites use JavaScript. It is not optional if you want to build interactive sites.

Tip: Open VS Code and create a file called javascript-demo.html. Write a page with a button and a paragraph. When the button is clicked, change the paragraph text to something else. Then add another button that changes the paragraph color. This is how you start learning JavaScript.

HTML JavaScript Reference

Here are the tags we covered in this chapter:

Tag	Description
`<script>`	Defines a client-side script (usually JavaScript)
`<noscript>`	Defines alternate content for users without JavaScript