JavaScript Introduction

JavaScript Features

JavaScript has many useful features that make it one of the most popular programming languages for web development.

It can make web pages interactive, handle user actions, change HTML content, update CSS styles, validate forms, fetch data from servers, and build modern web applications.

Because of these features, JavaScript is widely used in frontend development, backend development, mobile apps, browser extensions, and web tools.

Main Features of JavaScript

JavaScript provides many important features.

Feature	Description
Lightweight	JavaScript is easy to write and runs quickly in the browser
Interpreted	JavaScript code runs directly without manual compilation
Client-side	JavaScript can run inside the user's browser
Dynamic	JavaScript can change content and styles while the page is running
Event-based	JavaScript can respond to user actions like clicks and keypresses
Case-sensitive	Uppercase and lowercase letters are treated differently
Object-based	JavaScript supports objects and object methods
Asynchronous	JavaScript can handle delayed tasks and API requests
Platform-independent	JavaScript can run on different devices and operating systems
Browser-supported	JavaScript is supported by all modern browsers

JavaScript is Lightweight

JavaScript is a lightweight language. It does not require heavy setup to run.

You can write JavaScript directly inside an HTML file using the <script> tag.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Lightweight JavaScript</title>
</head>
<body>
  <h1>JavaScript Example</h1>
  <script>
    document.write("JavaScript runs directly in the browser.");
  </script>
</body>
</html>

JavaScript is Interpreted

JavaScript is an interpreted language. This means the browser reads and runs JavaScript code directly.

You do not need to compile JavaScript manually before running it.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Interpreted JavaScript</title>
</head>
<body>
  <h2>JavaScript is Interpreted</h2>
  <script>
    let message = "This code is executed directly by the browser.";
    document.write(message);
  </script>
</body>
</html>

JavaScript Runs in the Browser

JavaScript can run directly inside web browsers such as Chrome, Edge, Firefox, Safari, and Opera.

This makes JavaScript very useful for frontend development.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript in Browser</title>
</head>
<body>
  <h2>JavaScript Runs in Browser</h2>
  <button onclick="alert('This JavaScript code is running in your browser!')">
    Click Me
  </button>
</body>
</html>

JavaScript Can Change HTML Content

JavaScript can change the content of an HTML element after the page has loaded.

This feature is commonly used in interactive websites.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Change HTML Content</title>
</head>
<body>
  <h2>JavaScript Can Change HTML</h2>
  <p id="demo">This is the original text.</p>
  <button onclick="changeContent()">Change Text</button>
  <script>
    function changeContent() {
      document.getElementById("demo").innerHTML = "This text was changed by JavaScript.";
    }
  </script>
</body>
</html>

JavaScript Can Change CSS Style

JavaScript can also change the style of HTML elements.

It can change color, font size, background color, visibility, width, height, and many other CSS properties.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Change CSS with JavaScript</title>
</head>
<body>
  <h2 id="heading">JavaScript Can Change CSS</h2>
  <button onclick="changeStyle()">Change Style</button>
  <script>
    function changeStyle() {
      document.getElementById("heading").style.color = "green";
      document.getElementById("heading").style.fontSize = "32px";
    }
  </script>
</body>
</html>

JavaScript is Event-Based

JavaScript can respond to user actions. These actions are called events.

Common JavaScript events include:

Event	Meaning
<code>click</code>	Runs when a user clicks an element
<code>mouseover</code>	Runs when a user moves the mouse over an element
<code>keydown</code>	Runs when a keyboard key is pressed
<code>submit</code>	Runs when a form is submitted
<code>load</code>	Runs when a page finishes loading

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Events</title>
</head>
<body>
  <h2>JavaScript Event Example</h2>
  <button onclick="showMessage()">Click Me</button>
  <p id="result"></p>
  <script>
    function showMessage() {
      document.getElementById("result").innerHTML = "Button was clicked!";
    }
  </script>
</body>
</html>

JavaScript is Case-Sensitive

JavaScript is case-sensitive. This means uppercase and lowercase letters are treated differently.

For example, name and Name are two different variables.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Case Sensitive JavaScript</title>
</head>
<body>
  <h2>JavaScript is Case-Sensitive</h2>
  <script>
    let name = "Amit";
    let Name = "Rahul";

    document.write(name + "<br>");
    document.write(Name);
  </script>
</body>
</html>

JavaScript Supports Objects

JavaScript supports objects. Objects are used to store related data together.

An object can contain properties and values.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Object</title>
</head>
<body>
  <h2>JavaScript Object Example</h2>
  <script>
    let student = {
      name: "Amit",
      age: 20,
      course: "JavaScript"
    };

    document.write(student.name);
  </script>
</body>
</html>

In this example, student is an object, and name, age, and course are its properties.

JavaScript Supports Asynchronous Programming

JavaScript can handle tasks that take time without stopping the whole program.

This is useful for timers, API calls, server requests, file loading, and animations.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Asynchronous JavaScript</title>
</head>
<body>
  <h2>Asynchronous JavaScript Example</h2>
  <p id="message">Wait for the message...</p>
  <script>
    setTimeout(function() {
      document.getElementById("message").innerHTML = "This message appeared after 2 seconds.";
    }, 2000);
  </script>
</body>
</html>

JavaScript Can Validate Forms

JavaScript can check user input before submitting a form.

For example, it can check whether a required field is empty or not.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Form Validation</title>
</head>
<body>
  <h2>Form Validation Example</h2>
  <form onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="Enter your name">
    <button type="submit">Submit</button>
  </form>
  <p id="error"></p>
  <script>
    function validateForm() {
      let username = document.getElementById("username").value;

      if (username === "") {
        document.getElementById("error").innerHTML = "Please enter your name.";
        return false;
      }

      document.getElementById("error").innerHTML = "Form submitted successfully.";
      return false;
    }
  </script>
</body>
</html>

JavaScript is Platform Independent

JavaScript can run on different operating systems and devices.

It can run on:

Platform	Support
Windows	Yes
macOS	Yes
Linux	Yes
Android	Yes
iOS	Yes

JavaScript usually needs only a browser to run on the client side.

JavaScript is Supported by Modern Browsers

JavaScript is supported by all modern browsers.

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Partially

Most basic JavaScript features work in all modern browsers. Some very old browsers may not support modern JavaScript features.

Try It Yourself

Copy any example from this lesson and run it in the Try It Editor.

Try changing the text, color, variable names, or button message to understand how JavaScript works.

Important Notes

JavaScript is one of the core technologies of web development.
JavaScript can work with HTML and CSS to create interactive web pages.
JavaScript is case-sensitive, so spelling and capitalization are important.
JavaScript can run in the browser and also on the server using Node.js.
Modern JavaScript includes many powerful features such as promises, modules, classes, arrow functions, and async/await.

Common Mistakes

Beginners often write wrong uppercase or lowercase letters in JavaScript.

For example, getElementByID is wrong, but getElementById is correct.

Another common mistake is forgetting to place JavaScript code inside the <script> tag when writing JavaScript inside an HTML file.

Also, remember that JavaScript strings should be written inside quotes.

Conclusion

JavaScript has many powerful features that make it useful for modern web development.

It can change HTML content, update CSS styles, handle events, validate forms, work with objects, and perform asynchronous tasks.

Because of these features, JavaScript is an essential language for building interactive and dynamic websites.

PreviousWhat is JavaScript NextJavaScript Syntax