Introduction to JavaScript

What is JavaScript?

JavaScript is a lightweight, interpreted programming language primarily used to make web pages interactive. It allows developers to create features like sliders, pop-ups, form validation, and dynamic content updates without reloading the page.

JavaScript is:

  • Client-side (runs in the browser)
  • Object-based
  • Event-driven
  • A key part of the web development trio: HTML (structure), CSS (style), JavaScript (behavior)

History and Evolution

  • 1995: JavaScript was created by Brendan Eich at Netscape and originally called Mocha.
  • Later renamed LiveScript, and finally JavaScript (for marketing reasons, to ride Java's popularity).
  • Standardized as ECMAScript (ES) by ECMA International.
  • Major Versions:
    • ES3 (1999): First widely adopted version.
    • ES5 (2009): Introduced strict mode, JSON, and more.
    • ES6 (2015): Huge update — introduced let, const, arrow functions, classes, promises, etc.
    • Later versions (ES7 to ES13): Continued improving language features, performance, and async programming.

JavaScript vs Other Languages

Feature JavaScript Java Python
Typing Dynamic Static Dynamic
Execution Interpreted (in browsers) Compiled (JVM) Interpreted
Use Case Web interactivity, apps Enterprise apps, Android Data science, scripting
Syntax Simplicity Medium Complex Simple
Popularity Very High (Front-end dev) High High

JavaScript is mainly used in the browser, unlike many languages that run on servers or local machines.

How to Add JavaScript to HTML

JavaScript can be added in three main ways:

1. Inline Script

You can write JavaScript directly inside an HTML element using the onclick, onmouseover, or similar attributes.

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

✅ Simple

❌ Not recommended for large projects (mixes JS with HTML)

2. Internal Script

JavaScript can be embedded within the <script> tag in the <head> or <body> of your HTML file.

<!DOCTYPE html>
<html>
<head>
    <script>
    function greet() {
        alert("Welcome to JavaScript!");
    }
    </script>
</head>
<body>
    <button onclick="greet()">Greet</button>
</body>
</html>

✅ Good for small projects or testing

❌ Not reusable

3. External Script

JavaScript is placed in a separate .js file and linked using the <script src=""> tag.

index.html 
<script src="app.js"></script>
app.js 
function greet() {
    alert("Hello from external JS!");
}

✅ Clean, reusable, modular

✅ Recommended for real-world projects

JavaScript Output Methods

JavaScript can output data in various ways:

1. alert()

Shows a pop-up message box to the user.

alert("Welcome!");

2. console.log()

Prints output to the browser's developer console. Useful for debugging.

console.log("This is a log message.");

3. document.write()

Writes directly into the HTML document.

document.write("Hello, World!");

⚠️ Overwrites the whole document if used after the page loads — use with caution.

4. innerHTML

Changes the content of an HTML element.

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "Hello from JS!";
</script>

✅ Most commonly used for dynamic content updates

Previous Next