HTML and JavaScript

HTML and JavaScript

HTML and JavaScript work together to create interactive web pages.

HTML → structure (what appears on the page)
JavaScript → behavior (what happens on user action)

HTML = body, JavaScript = brain

1. How HTML and JavaScript Work Together

HTML creates elements like:

buttons
forms
text
images

JavaScript:

reads HTML
changes HTML
reacts to user actions (click, input, submit)

2. Adding JS to HTML

Method 1: Internal JavaScript (<script> tag)

JavaScript changes Hypertext Markup Language content

Method 2: External JavaScript (Best Practice)

index.html

script.js

Clean code
Reusable JS file

3. JS Events in HTML

Button Click Example

onclick is an event

4. JS Manipulating HTML (DOM)

Change Text

Change Style

Hide Element

5. Using `id` and `class` in JavaScript

Access by ID

Access by Class

Modern Way (Recommended)

6. Form + JavaScript Example

<form onsubmit="return checkName()">
<input type="text" id="name">
<button type="submit">Submit</button>
</form>
<script>
function checkName() {
let name = document.getElementById("name").value;
if (name === "") {
alert("Name is required");
return false;
}
return true;
}
</script>

<button type="submit">Submit</button>

</form>

function checkName() {

let name = document.getElementById("name").value;

if (name === "") {

alert("Name is required");

return false;

}

return true;

}

</script>

JavaScript validates form before submit

7. Best Practice: JS Without Inline HTML

Cleaner
Professional approach

Common Mistakes

Writing JS before HTML loads
Using too much inline JS
Forgetting id / class
Mixing logic inside HTML heavily
Tip: Place <script> before </body>

Key Points to Remember

HTML builds structure
JavaScript adds interaction
JS can read & change HTML (DOM)
Events connect user actions to JS
Use external JS files for real projects

HTML and JavaScript