JavaScript: Introduction to JavaScript

JavaScript is the programming language of the web — it brings static HTML pages to life.

This tutorial is designed for absolute beginners. We'll start with variables and functions, and work our way up to building a complete to-do list app on your own.

1. What You'll Learn

JavaScript basic syntax and core concepts
Working with arrays, objects, and functions
DOM manipulation and event handling
Asynchronous programming and modules
Hands-on project practice

2. Prerequisites

Before starting this tutorial, you should be familiar with:

HTML basics (tags, attributes, forms)
CSS basics (selectors, box model)

3. What Is JavaScript

JavaScript is a scripting language that runs directly in the browser — no compilation needed. The browser reads and executes your JS code line by line.

JS was originally designed for browsers only, but its reach has since expanded to servers (Node.js), desktop apps (Electron), and even mobile apps (React Native). In this tutorial, we'll focus on how JS works in web pages.

4. What Can JavaScript Do

JS handles virtually every aspect of web interaction:

Change HTML content — replace text on the page when a button is clicked
Respond to events — trigger logic when users click, scroll, or type
Validate forms — check email format and password length before submission
Manipulate CSS — dynamically change styles and create animations
Communicate with servers — fetch data without refreshing the page (AJAX)

In a nutshell: HTML builds the structure, CSS styles it, and JavaScript makes it interactive.

5. JavaScript and HTML/CSS — The Relationship

Think of a web page as a person:

HTML is the skeleton — it defines the page structure
CSS is the skin and clothing — it controls the appearance
JavaScript is the muscles — it makes the page move and react

Each has its own role. JS changes how the page looks and behaves by manipulating HTML elements and CSS styles.

6. A Brief History of JavaScript

In 1995, Brendan Eich at Netscape wrote the first version of JavaScript in just 10 days. Yes, the language that now dominates the web was born in less than two weeks.

A few common misconceptions:

JavaScript and Java are two completely different languages — like "JavaScript" and "Java" share a name, but that's about it
JS was originally called Mocha, then renamed to LiveScript, and finally renamed to JavaScript to ride Java's popularity
In 1997, JS was submitted to ECMA for standardization. Its official name became ECMAScript (ES). The ES6 you often hear about is the sixth edition, released in 2015

7. How Browsers Execute JavaScript

Every browser has a built-in JS engine that translates your code into machine instructions:

Chrome / Edge: V8 engine
Firefox: SpiderMonkey engine
Safari: JavaScriptCore engine

The process is straightforward: the browser loads HTML → encounters a script tag → the JS engine parses and executes line by line → the results appear on the page.

▶ Example: Changing Page Text with JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Intro - Changing Text</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    #msg { font-size: 24px; color: #333; transition: all 0.3s; }
    button { padding: 12px 28px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; background: #4CAF50; color: #fff; }
    button:hover { background: #45a049; }
  </style>
</head>
<body>
  <p id="msg">Hello, World!</p>
  <button id="changeBtn">Click to Change Text</button>
  <script>
    document.getElementById("changeBtn").onclick = function() {
      document.getElementById("msg").textContent = "JavaScript brings the page to life!";
      document.getElementById("msg").style.color = "#e91e63";
    };
  </script>
</body>
</html>

▶ Try it Yourself

▶ Example: JavaScript Responding to User Events

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Intro - Event Handling</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    .card { display: inline-block; padding: 40px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
    .card:hover { border-color: #2196F3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    .card.active { border-color: #e91e63; background: #fce4ec; }
    #info { margin-top: 20px; font-size: 18px; color: #555; }
  </style>
</head>
<body>
  <div class="card" id="myCard">
    <p>Hover over this card</p>
  </div>
  <p id="info"></p>
  <script>
    var card = document.getElementById("myCard");
    var info = document.getElementById("info");
    card.onmouseenter = function() {
      info.textContent = "You entered the card area!";
      card.classList.add("active");
    };
    card.onmouseleave = function() {
      info.textContent = "You left the card area!";
      card.classList.remove("active");
    };
  </script>
</body>
</html>

▶ Try it Yourself

▶ Example: JavaScript Form Validation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Intro - Form Validation</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 400px; margin: 60px auto; }
    label { display: block; margin-top: 16px; font-weight: bold; }
    input { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    input:focus { outline: none; border-color: #2196F3; }
    button { margin-top: 20px; padding: 10px 24px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; font-size: 16px; }
    button:hover { background: #1976D2; }
    .error { color: #e91e63; font-size: 14px; margin-top: 4px; display: none; }
    .success { color: #4CAF50; font-size: 16px; margin-top: 12px; display: none; }
  </style>
</head>
<body>
  <h2>User Registration</h2>
  <label for="username">Username</label>
  <input type="text" id="username" placeholder="At least 3 characters">
  <p class="error" id="usernameError">Username must be at least 3 characters</p>
  <label for="email">Email</label>
  <input type="text" id="email" placeholder="Enter your email">
  <p class="error" id="emailError">Please enter a valid email address</p>
  <button id="submitBtn">Submit</button>
  <p class="success" id="successMsg">Validation passed — submitted successfully!</p>
  <script>
    document.getElementById("submitBtn").onclick = function() {
      var username = document.getElementById("username").value;
      var email = document.getElementById("email").value;
      var valid = true;
      if (username.length < 3) {
        document.getElementById("usernameError").style.display = "block";
        valid = false;
      } else {
        document.getElementById("usernameError").style.display = "none";
      }
      if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
        document.getElementById("emailError").style.display = "block";
        valid = false;
      } else {
        document.getElementById("emailError").style.display = "none";
      }
      if (valid) {
        document.getElementById("successMsg").style.display = "block";
      } else {
        document.getElementById("successMsg").style.display = "none";
      }
    };
  </script>
</body>
</html>

52 logic lines (exceeds 40-line limit, display only)

❓ FAQ

Q Are JavaScript and Java the same language?

A Not at all. They share a name but are completely different — Java is a compiled language used for backends and Android development, while JavaScript is an interpreted scripting language mainly used for web pages. The naming is just a marketing coincidence.

Q Do I need to master HTML and CSS before learning JS?

A You don't need to master them, but you should understand the basics. JS mainly works by manipulating HTML elements and CSS styles, so if you can't read tags and selectors, learning JS will be an uphill battle.

Q Can JS only be used in the browser?

A No. Node.js lets JS run on servers, Electron lets it build desktop apps, and React Native lets it build mobile apps. But the browser remains JS's primary舞台.

📖 Summary

JavaScript is the browser's scripting language — it interprets and executes code line by line with no compilation step
Core JS capabilities: change content, respond to events, validate forms, manipulate styles, communicate with servers
HTML/CSS/JS each have a clear role — structure, presentation, and behavior
JS was created by Brendan Eich in 1995 in 10 days and later standardized by ECMA as ECMAScript
Browsers execute code through built-in JS engines like V8

📝 Exercises

Beginner: Create an HTML page with a button and a paragraph. When the button is clicked, change the paragraph text to "I learned JavaScript!" and turn the text color blue.
Intermediate: Create a page with two buttons — "Zoom In" and "Zoom Out" — that increase or decrease a text's font size by 2px on each click.
Challenge: Create a simple password validation page. The password must be at least 6 characters long and contain at least one digit. Show a red error message below the input field when the conditions aren't met.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

JavaScript: Introduction to JavaScript

1. What You'll Learn

2. Prerequisites

3. What Is JavaScript

4. What Can JavaScript Do

5. JavaScript and HTML/CSS — The Relationship

6. A Brief History of JavaScript

7. How Browsers Execute JavaScript

▶ Example: Changing Page Text with JavaScript

▶ Example: JavaScript Responding to User Events

▶ Example: JavaScript Form Validation

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好