JavaScript Introduction

What is JavaScript

JavaScript is a programming language used to make web pages interactive and dynamic.

HTML creates the structure of a web page, CSS makes it beautiful, and JavaScript adds actions and behavior to it.

For example, JavaScript can be used to:

Show alert messages
Change HTML content
Change CSS styles
Validate forms
Create image sliders
Build calculators
Handle button clicks
Fetch data from servers
Create modern web applications

In simple words, JavaScript makes a website interactive.

Why Learn JavaScript?

JavaScript is one of the most important languages in web development. Almost every modern website uses JavaScript.

With JavaScript, you can create user-friendly features such as dropdown menus, popup boxes, form validation, tabs, sliders, live search, dark mode, and many other interactive elements.

If you want to become a frontend developer or full-stack developer, JavaScript is an essential language to learn.

JavaScript and Web Development

A complete web page usually uses three main technologies:

Technology	Use
HTML	Creates the structure of the web page
CSS	Designs and styles the web page
JavaScript	Adds interactivity and behavior

Example:

html

<h1>Hello World</h1>

HTML creates the heading.

css

h1 {
  color: green;
}

CSS changes the color of the heading.

javascript

alert("Welcome to JavaScript!");

JavaScript shows an alert message.

Simple JavaScript Example

html

<!DOCTYPE html>
<html>
<head>
  <title>What is JavaScript?</title>
</head>
<body>
  <h1>JavaScript Example</h1>
  <p id="demo">This is a paragraph.</p>
  <button onclick="changeText()">Click Me</button>
  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "JavaScript changed this text!";
    }
  </script>
</body>
</html>

Example Explanation

Code	Meaning
<code><p id="demo"></code>	Creates a paragraph with an id
<code><button></code>	Creates a clickable button
<code>onclick="changeText()"</code>	Runs the function when the button is clicked
<code>function changeText()</code>	Defines a JavaScript function
<code>document.getElementById("demo")</code>	Selects the paragraph using its id
<code>innerHTML</code>	Changes the content inside the selected element

When the user clicks the button, JavaScript changes the paragraph text.

Try It Yourself

Run the above code in the Try It Editor and click the button.

You will see that JavaScript changes the paragraph text without reloading the page.

What Can JavaScript Do?

JavaScript can do many useful things on a web page.

JavaScript Can Change HTML Content

html

<!DOCTYPE html>
<html>
<head>
  <title>Change HTML Content</title>
</head>
<body>
  <h2 id="heading">Old Heading</h2>
  <button onclick="document.getElementById('heading').innerHTML = 'New Heading'">
    Change Heading
  </button>
</body>
</html>

JavaScript Can Change CSS Style

html

<!DOCTYPE html>
<html>
<head>
  <title>Change CSS Style</title>
</head>
<body>
  <h2 id="title">JavaScript Style Example</h2>
  <button onclick="document.getElementById('title').style.color = 'green'">
    Change Color
  </button>
</body>
</html>

JavaScript Can Show Alert Messages

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Alert</title>
</head>
<body>
  <button onclick="alert('Welcome to JavaScript!')">
    Show Alert
  </button>
</body>
</html>

Where JavaScript is Used

Area	Example
Web pages	Buttons, forms, sliders, menus
Web applications	Dashboards, editors, tools
Mobile apps	Apps built with frameworks like React Native
Server-side apps	Backend development with Node.js
Games	Browser-based games
APIs	Fetching and sending data
Browser tools	Extensions and automation

Important Notes

JavaScript is case-sensitive. For example, name and Name are different.
JavaScript code can be written inside an HTML file or in a separate .js file.
JavaScript runs directly in the browser.
JavaScript is different from Java. Both are separate programming languages.
Modern JavaScript is used to build powerful websites, web apps, mobile apps, and backend applications.

Common Mistakes

Beginners often confuse JavaScript with Java, but both are different languages.
JavaScript is case-sensitive, so getElementById must be written exactly like this.
When writing JavaScript inside an HTML file, place the code inside the <script> tag.

Conclusion

JavaScript is a powerful programming language used to add interactivity to web pages.

HTML gives structure, CSS gives design, and JavaScript gives behavior.

With JavaScript, you can create dynamic and interactive websites. It is one of the most important languages for modern web development.

NextJavaScript Features