JavaScript Tutorial

JavaScript is the programming language of the Web.

All modern HTML pages use JavaScript, which can be applied to enhance design, validate forms, detect browsers, create cookies, and more.

JavaScript is very easy to learn.

This tutorial will guide you through JavaScript, from beginner to advanced concepts.

JavaScript Online Examples

This tutorial contains many JavaScript examples.
You can copy the code and click "Run Code" to view the examples online.

Example

My First JavaScript Program

Below is the simplest JavaScript program example. It shows the current date and time when you click the button:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginner Tutorial</title>
<script>
function displayDate(){
  document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>

<h1>My First JavaScript Program</h1>
<p id="demo">This is a paragraph</p>

<button type="button" onclick="displayDate()">Show Date</button>

</body>
</html>

Run Result:

At first, the page displays a paragraph of text.
After clicking the “Show Date” button, the text will be replaced with the current date and time.

💡 Key Points:

JavaScript is written inside the <script> tag.
The function displayDate() defines the action to be executed.
document.getElementById("demo").innerHTML is used to modify page content.
onclick="displayDate()" means the function runs when the button is clicked.

On each page, you can click the “Run Online Tool” on the right to view and run the examples.
Try editing the code—for example, change the paragraph text or modify the function—and observe the results.

Why Learn JavaScript?

JavaScript is one of the three core languages that every web developer must learn:

HTML defines the content of web pages
CSS describes the layout of web pages
JavaScript controls the behavior of web pages

This tutorial focuses on JavaScript and explains how it works together with HTML and CSS.

Who Should Read This Tutorial?

If you are new to JavaScript:
You will learn how JavaScript interacts with HTML and CSS.
If you already have experience with JavaScript:
JavaScript is constantly evolving, so it’s important to keep up with new features and best practices.

Prerequisites

Before reading this tutorial, you should be familiar with:

HTML
CSS

HTML/CSS/JS Online Tools

The HTML/CSS/JS online tools allow you to edit code directly in your browser and see live results.