Lesson 24 of 30

HTML JavaScript

2 min read · Free · No login needed

JavaScript is the programming language of the web. HTML builds the page, CSS styles it, and JavaScript makes it do things: respond to clicks, check a form before it is sent, show and hide content, load new data without refreshing the page.

Adding JavaScript to a page

Write it inside a <script> tag, usually just before the closing </body> so the page content loads first. Or keep it in a separate .js file and link it: <script src="app.js"></script>. The separate-file way is better for real sites — one script file can serve every page.

What JavaScript can do

Change content: document.getElementById("demo").innerHTML = "Hello!"; replaces the text inside an element.
Change styles: element.style.color = "red"; recolours it.
React to events: run code when a button is clicked, a form is submitted, or a key is pressed.
Check input: make sure an email looks like an email before the form is sent.

Your first script

The example below has a button. When you click it, JavaScript changes the text of a paragraph. It is only three lines — but it is the same idea behind every interactive feature on the web, from a "like" button to a full quiz timer.

Tip: Open your browser's developer tools (F12) and click the Console tab. Any error in your JavaScript appears there, with the line number. It is the first place to look when a script does not work.

Example

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>

<p id="demo">Click the button to change this text.</p>
<button onclick="document.getElementById('demo').innerHTML = 'Hello, JavaScript!'">Click Me</button>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Iframes HTML File Paths