Introduction to JavaScript - </> CoderMantra

Q: Q2. Is JavaScript good for beginners?

Yes. JavaScript for beginners can start with a web browser and a simple HTML file without installing complicated software. Beginners can gradually move from basic syntax to interactive websites and modern applications.

Q: Q5. What are the three ways to add JavaScript to HTML?

The three common methods are inline JavaScript , internal JavaScript , and external JavaScript . External JavaScript is generally preferred for larger projects because it keeps the HTML and JavaScript code separate.

JavaScript is one of the most popular programming languages used to make websites interactive and dynamic.

HTML creates the structure of a webpage, CSS adds styling, and JavaScript adds behavior and interaction.

For example, JavaScript can make a button respond to a click, change text on a webpage, validate a form, create a calculator, display a message, and much more.

In this Introduction to JavaScript tutorial, you will start with the basics of JavaScript and gradually move toward modern JavaScript concepts and practical projects.

What is JavaScript?

JavaScript is a scripting language used to add logic, interaction, and dynamic behavior to websites and web applications. For example, when you click a button and something changes on a webpage, JavaScript can perform that action.

JavaScript can also be used outside the browser. Node.js allows developers to use JavaScript for server-side applications.

What Can JavaScript Do?

JavaScript can be used to:

Change webpage content
Change HTML and CSS
Respond to user actions
Validate forms
Create interactive features
Perform calculations
Work with APIs
Store data in the browser
Build web applications
Create server-side applications with Node.js

Let’s see a simple example.

Example: Change Text with JavaScript

The following program displays a heading and a button. When you click the button, JavaScript changes the heading.

Copy the complete code below and save it as index.html.

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

    <h1 id="message">Hello, JavaScript!</h1>

    <button onclick="changeMessage()">Click Me</button>

    <script>
        function changeMessage() {
            document.getElementById("message").textContent = "Welcome to JavaScript!";
        }
    </script>

</body>
</html>

Open index.html in your web browser.

You will see:

Hello, JavaScript!

When you click the Click Me button, the heading changes to:

Welcome to JavaScript!

Here, JavaScript performs three simple tasks:

It creates a function called changeMessage().
It finds the heading using its id.
It changes the heading text when the button is clicked.

You will learn about functions, HTML elements, and events in later chapters.

Features of JavaScript

JavaScript has several useful features that make it popular for web development.

Easy to Start

You do not need a complicated setup to begin JavaScript. A modern web browser is enough to run simple JavaScript programs.

Interactive

JavaScript can respond to user actions such as clicks, typing, scrolling, and form submission.

Fast

Modern browsers have JavaScript engines that can execute JavaScript code very quickly.

Works on Different Platforms

JavaScript can run on Windows, macOS, Linux, Android, and other platforms through supported browsers and runtime environments.

Used for Frontend and Backend Development

JavaScript can be used in the browser for frontend development and on the server using Node.js.

Large Ecosystem

JavaScript has many libraries, frameworks, and tools. React.js, Angular, Vue.js, Node.js, and Express.js are some popular technologies in the JavaScript ecosystem.

JavaScript in Web Development

A website commonly uses three main technologies:

Technology	Purpose
HTML	Creates the structure
CSS	Adds styling and layout
JavaScript	Adds behavior and interaction

For example, imagine a button on a webpage.

HTML creates the button.

CSS changes its appearance.

JavaScript decides what happens when someone clicks it.

You can think of them like this:

HTML → Structure

CSS → Design

JavaScript → Behavior

Together, they help create modern websites and web applications.

How JavaScript Works

When you open a webpage containing JavaScript, your web browser reads and executes the JavaScript code. Modern browsers contain JavaScript engines that process the code. Some popular JavaScript engines are:

Google Chrome — V8
Microsoft Edge — V8
Firefox — SpiderMonkey
Safari — JavaScriptCore

You do not need to understand how these engines work internally right now. For now, remember this:

You write JavaScript code → the browser executes it → you see the result.

Your First JavaScript Program

Let’s create your first JavaScript program.

The easiest way to start is by placing JavaScript inside an HTML file.

Copy the complete code below:

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript Program</title>
</head>
<body>

    <h1>My First JavaScript Program</h1>

    <script>
        console.log("Hello, JavaScript!");
    </script>

</body>
</html>

Save the file as: index.html

Now open the file in your browser. You will see the heading on the webpage, but you will not see Hello, JavaScript! on the page. The message is displayed in the browser’s Console.

How to Open the Browser Console

You can usually open the console by pressing F12 on your keyboard.

Then:

Open the Console tab.
Look at the output.
You should see:

Hello, JavaScript!

The following line is responsible for displaying the message:

console.log("Hello, JavaScript!");

console.log() is commonly used to display information in the browser console. You will use it frequently while practicing JavaScript.

Adding JavaScript to HTML

There are three common ways to add JavaScript to an HTML page:

Inline JavaScript
Internal JavaScript
External JavaScript

For beginners, it is useful to know all three methods.

Inline JavaScript

Inline JavaScript is written directly inside an HTML element.

Here is a complete example:

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

    <h1>JavaScript Example</h1>

    <button onclick="alert('Hello from JavaScript!')">
        Click Me
    </button>

</body>
</html>

Open the file in your browser and click the button. A message will appear saying:

Hello from JavaScript!

Inline JavaScript is fine for simple examples, but it is not usually the best choice for larger projects.

Internal JavaScript

Internal JavaScript is written inside the <script> element in the same HTML file.

Example:

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

    <h1>Internal JavaScript</h1>

    <script>
        console.log("JavaScript is running!");
    </script>

</body>
</html>

The browser knows that the code inside the <script> element is JavaScript.

External JavaScript

In larger projects, JavaScript is usually kept in a separate .js file.

For example, you may have:

index.html and script.js

The HTML file can connect to the JavaScript file using the <script> element.

Here is a complete example:

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

    <h1 id="heading">JavaScript Tutorial</h1>

    <button onclick="changeHeading()">Click Me</button>

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

</body>
</html>

The JavaScript file contains:

function changeHeading() {
    document.getElementById("heading").textContent = "JavaScript is working!";
}

Keep both files in the same folder. When you open index.html and click the button, the heading will change to:

JavaScript is working!

External JavaScript is commonly used in larger projects because it keeps HTML and JavaScript separate.

JavaScript Comments

Comments are notes written inside your code. The browser does not execute comments. Comments are useful when you want to explain what a part of your code does.

JavaScript has two common types of comments.

Single-Line Comment

Use // for a single-line comment.

// This is a single-line comment

console.log("Hello, JavaScript!");

The browser ignores the first line and executes the console.log() statement.

Multi-Line Comment

Use /* to start a multi-line comment and */ to end it.

/*
This is a
multi-line
comment
*/

console.log("Hello, JavaScript!");

Everything between /* and */ is treated as a comment.

Practical Example

Let’s combine what you have learned so far.

This program displays a heading, a message, and a button. When the button is clicked, JavaScript changes the message.

Copy the complete code:

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

    <h1>JavaScript Practice</h1>

    <p id="message">Click the button to change this message.</p>

    <button onclick="changeMessage()">Change Message</button>

    <script>
        // This function changes the paragraph text
        function changeMessage() {
            document.getElementById("message").textContent = "You just used JavaScript!";
        }
    </script>

</body>
</html>

Save it as index.html and open it in your browser.

Before clicking the button, you will see:

Click the button to change this message.

After clicking the button, it changes to:

You just used JavaScript!

This small example already shows an important idea in JavaScript:

User action → JavaScript code runs → webpage changes

You will use this idea many times when building interactive websites.

Try It Yourself

Now make a small change to the previous program.

Change:

"You just used JavaScript!"

to your own message.

For example:

"JavaScript is fun!"

Run the program again and click the button.

Try changing the heading, paragraph, and button text as well.

Key Points

JavaScript is a programming language used to create interactive and dynamic websites.
HTML creates the structure of a webpage.
CSS controls the appearance of a webpage.
JavaScript adds behavior and interaction.
JavaScript can run in web browsers and on servers using Node.js.
The <script> element is used to add JavaScript to HTML.
console.log() displays information in the browser console.
JavaScript supports single-line and multi-line comments.
External JavaScript files are commonly used in larger projects.

In the next chapter, we will look at JavaScript Variables and Data Types and learn how JavaScript stores different types of information.

Frequently Asked Questions (FAQs)

Q1. What is JavaScript used for?

JavaScript is used to add behavior and interaction to websites. JavaScript programming can handle button clicks, change webpage content, validate forms, perform calculations, work with APIs, and build web applications.

Q2. Is JavaScript good for beginners?

Yes. JavaScript for beginners can start with a web browser and a simple HTML file without installing complicated software. Beginners can gradually move from basic syntax to interactive websites and modern applications.

Q3. How does JavaScript work with HTML and CSS?

HTML provides the structure, CSS controls the design, and JavaScript adds behavior. A JavaScript tutorial typically introduces these three technologies together because they form the foundation of frontend web development.

Q4. How can I run JavaScript code?

You can run JavaScript directly in a browser using an HTML file with a <script> element. You can also use the browser’s Developer Console to test JavaScript code quickly.

Q5. What are the three ways to add JavaScript to HTML?

The three common methods are inline JavaScript, internal JavaScript, and external JavaScript. External JavaScript is generally preferred for larger projects because it keeps the HTML and JavaScript code separate.

Q6. Can JavaScript be used for backend development?

Yes. JavaScript can also be used for server-side development with Node.js. This allows developers to use JavaScript beyond the browser and build backend applications, APIs, and other server-side solutions.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Nidhi Srivastav