JavaScript Introduction

Beginner
⏱️ 15 min read
📚 Updated: Aug 2026
🎯 5 Examples
🚀 5 Try-it labs
browser · Node.js · DOM
JavaScript introduction tutorial for beginners on CodeToFun
Overview

What You’ll Learn

This page is a self-contained introduction to JavaScript (JS)—the language that powers interactive websites. You will understand what JavaScript is, how engines run your code, and write your first programs for the browser and console.

What it is

Programming language

Interactive web pages, Node.js servers, and more.

Hello World

console.log

Run your first line in Node.js or the browser console.

How it works

Engine & DOM

V8 parses and runs JS; the event loop handles async work.

Where it runs

Browser & Node

Script tags, DevTools Console, or node file.js.

Examples

5 labs

Hello World, variables, functions, if-else, and DOM updates.

Next steps

JS track

Continue to file handling, DOM, async, and frameworks.

Introduction

JavaScript (often shortened to JS) is a popular programming language used for creating interactive and dynamic web content. It is primarily used for front-end web development, allowing developers to add dynamic effects, animations, and functionality to web pages.

JavaScript can also power back-end development through Node.js, build mobile apps with React Native, create games, and even control robots and IoT devices. It is one of the most widely used languages in the world.

Together with HTML (structure) and CSS (style), JavaScript completes the trio of core web technologies. HTML builds the page skeleton; CSS makes it look good; JavaScript makes it do something when users click, scroll, or submit forms.

Why it matters?

Learn basic HTML and CSS first, then add JavaScript to change text, respond to clicks, and fetch data. You will see results immediately in the browser.

Key Highlights

Runs everywhere

Browsers, Node.js, mobile apps, and tooling share one language.

DOM & events

Update HTML in real time when users click, type, or scroll.

Event loop

Async timers, fetch, and callbacks without blocking the UI.

ECMAScript

Open standard (TC39); engines like V8 are open source.

In short: JavaScript is the programming language of the web—not the same as Java—and it makes pages interactive.

Background

👤 Who Created JavaScript?

Brendan Eich is known as the creator of JavaScript. He built the first version in just 10 days in May 1995 while working at Netscape Communications Corporation.

The language was originally called Mocha, then renamed LiveScript, before finally becoming JavaScript. Eich continued to shape the language and later co-founded the Mozilla project. Today JavaScript is standardized as ECMAScript by TC39.

Version / EventYearHighlight
JavaScript created1995Brendan Eich, Netscape (10 days)
ECMAScript 11997First official standard
AJAX era~2005Dynamic pages without full reloads
ES52009Strict mode, JSON support
Node.js released2009JavaScript on the server
ES6 / ES20152015let, const, classes, modules, arrow functions
Annual releases2016+ES2016, ES2017, async/await, etc.
ES20242024Array grouping, improved RegExp

How Does JavaScript Work?

When JavaScript runs, the browser or Node.js loads your code into a JavaScript engine (such as V8 in Chrome and Node, or SpiderMonkey in Firefox). The engine parses source code, compiles it to optimized machine code (often via JIT compilation), and executes it.

During execution, the engine manages memory and handles asynchronous work through an event loop—timers, network responses, and user events are queued and processed without blocking the main thread.

In the browser, JavaScript can interact with the Document Object Model (DOM)—a tree representation of HTML—to read and update page content, styles, and event listeners in real time.

💡
Beginner tip

Start with variables, strings, numbers, and if/for loops. Use browser DevTools (F12 → Console) to experiment instantly.

Foundation

✍ Hello World in JavaScript

Here is a simple JavaScript program that prints Hello, World! to the console:

script.js
console.log("Hello, World!");
Try It Yourself

Run it with node demo.js in a terminal, or paste the line into your browser’s DevTools Console.

Basic syntax rules

  • Statements often end with ; (optional in many cases, but good habit)
  • Strings use single ' or double " quotes (or backticks for templates)
  • Comments — // line or /* block */
  • Case-sensitive — myVar and myvar are different
  • Functions — function name() { } or arrow () => { }
Setup

✍ How to Run JavaScript

You can run JavaScript in three common ways while learning:

terminal
node demo.js
Try It Yourself
index.html
<script>
  console.log("Hello from the browser!");
</script>
Try It Yourself
  • Browser Console — press F12, open Console, paste code, press Enter
  • HTML script tag — embed JS in a page or link an external .js file
  • Node.js — run server-side scripts and tools from the terminal

Is JavaScript Open Source?

Yes. JavaScript is standardized as ECMAScript, an open specification maintained by TC39. Implementations—V8, SpiderMonkey, JavaScriptCore—are open-source projects you can read, use, and contribute to.

You do not need a license to write JavaScript. Frameworks and tools built on top (React, Vue, Node.js, Express) are also overwhelmingly open source.

Concepts

🧰 Core Building Blocks

ConceptWhat it does
Variableslet, const store data
Data typesString, number, boolean, object, array, null, undefined
OperatorsArithmetic, comparison, logical
Control flowif, else, switch, loops
FunctionsReusable blocks of code
Objects & arraysGroup related data and methods
DOM APIRead and update HTML from JS
AsyncPromises, async/await, fetch
Cheat Sheet

⚡ Quick Reference

TaskExample
Printconsole.log("Hi");
Variableconst age = 20;
Conditionif (x > 0) { ... }
Loopfor (let i = 0; i < n; i++) { ... }
Functionfunction add(a, b) { return a + b; }
Select DOMdocument.getElementById("msg")
Compare

📋 Where to Run JavaScript

Same language—three everyday runtimes while you learn.

Browser Console
F12 → Console

Paste a line and press Enter for instant feedback

<script> in HTML
console.log(...)

Embed JS in a page or link an external .js file

Node.js
node demo.js

Run scripts and tools from the terminal

Context

When to Use JavaScript

Reach for JS when the page needs behavior—not just structure or style.

  1. User interaction

    Clicks, forms, menus, and live validation in the browser.

  2. Fetch & update data

    Load JSON and update the page without a full reload.

  3. Full-stack apps

    Same language for front-end frameworks and Node.js APIs.

  4. HTML/CSS alone first

    Static content and layout do not need JavaScript until you add behavior.

Key benefit: one language covers interactive websites and server-side Node.js—a strong full-stack path.

Hands-On

Examples Gallery

Five starter programs. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.

Example 1 — Hello, World!

Print a string to the console—the classic first program.

script.js
console.log("Hello, World!");
Try It Yourself

How It Works

console.log writes to the terminal (Node) or the browser DevTools Console. It is the fastest way to inspect values while learning.

Example 2 — Variables and types

Store strings, numbers, and booleans with const and let.

script.js
const name = "Alex";
let age = 20;
const isStudent = true;

console.log(`Name: ${name}`);
console.log("Age:", age);
console.log("Student:", isStudent);
Try It Yourself

How It Works

Use const for values that won’t be reassigned; use let when the value changes. Template literals with backticks interpolate ${name}.

Example 3 — A simple function

Group reusable logic that takes inputs and returns a result.

script.js
function add(a, b) {
    return a + b;
}

console.log("Sum =", add(3, 5));
Try It Yourself

How It Works

add(3, 5) calls the function with arguments a and b. return sends the sum back to the caller.

Example 4 — Even or odd with if-else

Branch with conditions using the remainder operator.

script.js
const n = 7;

if (n % 2 === 0) {
    console.log(n, "is even");
} else {
    console.log(n, "is odd");
}
Try It Yourself

How It Works

n % 2 is the remainder after dividing by 2. Prefer === for strict equality checks.

Example 5 — Update the page (DOM)

Listen for a click and change text on the page.

index.html
<p id="greeting">Loading...</p>
<button id="btn">Say Hello</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    document.getElementById("greeting").textContent = "Hello, JavaScript!";
  });
</script>
Try It Yourself

How It Works

getElementById finds nodes in the DOM. addEventListener runs your function on click and updates textContent—classic front-end interactivity.

Use Cases

Where JavaScript shows up across the modern stack.

1. Interactive websites

Menus, forms, animations, and live content updates in the browser.

Example: toggle a mobile nav on click.

2. Single-page apps

React, Vue, and similar frameworks are built on JavaScript.

Example: a dashboard that updates without reloads.

3. Node.js APIs

Build servers, CLIs, and tooling with the same language.

Example: Express REST API.

4. Mobile with React Native

Reuse JS skills for iOS and Android apps.

Example: cross-platform product app.

5. Fetch & APIs

Call backends and update the UI when JSON arrives.

Example: weather widget with fetch.

6. Scripts & automation

npm scripts, build tools, and small Node utilities.

Example: rename files or generate reports.

Advantages

Why teams and beginners choose JavaScript.

  1. 1. Everywhere on the web

    Runs in all major browsers without plugins.

  2. 2. Full-stack path

    Same language for front-end frameworks and Node.js backends.

  3. 3. Instant feedback

    See results in the console or browser immediately.

  4. 4. Huge ecosystem

    npm packages, frameworks, and jobs across the industry.

Usage Tips

Habits that keep early JavaScript practice productive.

  1. 1. Prefer const and let

    Skip var in new code. Default to const; use let when reassignment is needed.

  2. 2. Use DevTools Console

    Press F12, paste snippets, and read errors from top to bottom.

  3. 3. Prefer ===

    Strict equality avoids surprises like 0 == false.

Common Pitfalls

Mistakes that commonly trip up new JavaScript learners.

  1. 1. Confusing JavaScript with Java

    Similar names; unrelated languages and runtimes.

    → Treat JS as its own language from day one.

  2. 2. Using == by habit

    Loose equality coerces types in surprising ways.

    → Prefer === and !== in almost all comparisons.

  3. 3. Skipping async basics

    Calling APIs without understanding promises leads to race bugs.

    → Learn async/await before production fetch code.

  4. 4. Secrets in front-end code

    Anything shipped to the browser is visible to users.

    → Keep API keys and private logic on the server.

🧠 How JavaScript Runs in the Browser

1

Load HTML & scripts

The browser downloads your page and JavaScript files (inline or external).

Parse
2

Engine compiles JS

V8 or similar parses code, optimizes hot paths, and executes bytecode.

Execute
3

DOM & events

Scripts query the DOM, attach listeners, and respond to clicks and input.

Interact
=

Live, dynamic page

Content updates, animations run, and fetch loads data without full reloads.

Important

Notes

  • Not Java. JavaScript and Java share a marketing name, not a design or runtime.
  • Created in 10 days. Brendan Eich built the first version at Netscape in May 1995.
  • ECMAScript standard. TC39 evolves the language; engines like V8 implement it.
  • HTML + CSS first. Structure and style make DOM practice much easier.

Quick Takeaway: Start with console.log, variables, and functions; then wire clicks to the DOM and grow into async and frameworks.

Compatibility

Browser &amp; Runtime Support

JavaScript runs in every major browser and on the server via Node.js. Logos use the shared browser-image-sprite.png sprite from this project.

✓ ECMAScript · Evergreen

JavaScript runs everywhere

Load a script tag or run node file.js. Engines like V8 and SpiderMonkey execute modern ECMAScript in browsers and Node.

100% With a JS engine
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Bun Supported · JavaScript runtime
Supported
Deno Supported · JavaScript runtime
Supported
Node.js Supported · Server runtime
Supported
Android WebView Supported · Modern WebView
Full support
JavaScript Universal

Bottom line: Safe for learning demos in any modern browser. Prefer evergreen browsers and current Node LTS for production.

Wrap Up

🎉 Conclusion

JavaScript is the core scripting language of the web. Engines compile and run your code; the event loop handles async work; the DOM connects scripts to HTML so pages respond to users.

Practice variables, functions, and DOM updates next. Continue to the JavaScript track for file handling, then explore async patterns and frameworks when you are ready.

Type the examples yourself—reading alone is not enough to learn JavaScript.

Open Try It Lab Next: File Handling
Pro Tips

💡 Best Practices

✅ Do

  • Use const by default; let when reassignment is needed
  • Prefer === over == for comparisons
  • Use meaningful names (userCount, not x)
  • Open DevTools and read console errors from top to bottom
  • Type examples yourself instead of only reading them
  • Validate user input before using it in the DOM

❌ Don’t

  • Use var in new code (prefer let/const)
  • Assume JavaScript and Java are the same language
  • Put sensitive logic or secrets in front-end JavaScript
  • Skip learning async before calling APIs in production apps
  • Copy stack-overflow snippets without understanding them
  • Ignore strict equality and wonder why 0 == false is true
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about JavaScript

Your gateway to the DOM, Node.js, and modern web frameworks.

5
Core concepts
JS 01

Web language

Interactive pages & Node.js

Basics
V8 02

Engines

Parse, JIT, event loop

Runtime
DOM 03

DOM API

Update HTML from JS

Browser
ES 04

ECMAScript

Open standard by TC39

Spec
log 05

Start simple

console.log first

Practice
🎯 You’re ready to explore the JavaScript tutorial track
Review Examples Gallery →

❓ Frequently Asked Questions

JavaScript (often abbreviated JS) is a versatile programming language used to create interactive web pages, server APIs with Node.js, mobile apps, games, and more. It runs in every major browser and is one of the core technologies of the web alongside HTML and CSS.
No. Despite similar names, they are unrelated languages. JavaScript was created for browsers; Java targets enterprise and Android. Syntax has some superficial similarities, but they differ in design, typing, and runtime.
Yes for basics. You can write hello world and simple interactivity quickly. Advanced topics—closures, async/await, prototypes, and frameworks—take more practice. Prior programming experience helps, but many beginners start with JavaScript.
Save code as demo.js and run node demo.js if you have Node.js installed. Or open browser DevTools (F12), paste code in the Console, or embed it in an HTML script tag and open the page in Chrome, Firefox, or Edge.
The ECMAScript language specification is an open standard. Major engines—V8 (Chrome/Node), SpiderMonkey (Firefox), JavaScriptCore (Safari)—are open source. You use JavaScript freely without licensing fees.
Practice variables, functions, arrays, and DOM manipulation. Then learn async JavaScript, fetch API, modules, and a framework like React or Vue if you build SPAs. For backends, explore Node.js and Express.

Did you Know? 🔊

Run JavaScript in the browser with a <script> tag or in Node.js with node file.js. Use console.log() to print output. The language is standardized as ECMAScript; engines like V8 and SpiderMonkey are open source. JavaScript was created by Brendan Eich in just 10 days in May 1995—marketing chose the name to ride Java’s popularity, even though the languages are unrelated.

Try Hello, World!

Run your first console.log in the live editor, then explore variables and the DOM.

Open Try It Lab →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

CSS Introduction JavaScript File Handling