Start Your Journey With JavaScript Programming Beginner-Friendly Concepts, Code & Practice

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js.

Your first JavaScript statement prints a greeting to the developers' console:

console.log('Welcome to JavaScript!');

Welcome to JavaScript!

console.log("Hello, JavaScript Learner!");

To start coding in JavaScript, you don't need any complex installation. Every web browser has a built-in JavaScript engine and a developer tool console.

You can embed JavaScript directly inside an HTML file using the <script> tag:

<!-- Inside HTML body -->
<script>
  console.log('Script is running!');
</script>

console.log("Console is active!");

Variables are containers for storing data values. In modern JavaScript, we declare variables using three keywords: let, const, and var.

let score = 10;
score = 15; // Allowed

const pi = 3.14159;
// pi = 3.14; // Throws Error!

let userAge = 20;
const countryOfBirth = "India";

JavaScript is a dynamically typed language, meaning variables don't hold fixed types. Instead, types are associated with values.

console.log(typeof 'Hello'); // "string"
console.log(typeof 42);      // "number"
console.log(typeof true);    // "boolean"

console.log(typeof 99.9); // Outputs: "number"

Operators allow us to perform operations on variables and values. Essential operator types include arithmetic, assignment, comparison, and logical operators.

let sum = 10 + 5;
console.log(10 === '10'); // false
console.log(10 == '10');  // true

const width = 8;
const length = 12;
const area = width * length;
console.log(area); // 96

While console.log() is perfect for developers, browsers support other built-in dialog functions for interacting with standard users: alert() and prompt().

alert('Welcome to Algo Infinity!');

let userName = prompt('What is your name?');
if (userName) {
  console.log('Hello, ' + userName);
}

let favLang = prompt("What is your favorite language?");
if (favLang) {
  alert("You like " + favLang + "!");
}

Conditionals direct execution flow by testing logic states. JavaScript supports if, else if, else, and switch blocks.

let score = 85;
if (score >= 90) {
  console.log('Grade: A');
} else if (score >= 80) {
  console.log('Grade: B');
} else {
  console.log('Grade: F');
}

let num = 17;
if (num % 2 === 0) {
  console.log("Even");
} else {
  console.log("Odd");
}

Loops repeat execution. JavaScript features standard for index loops, conditional while loops, and collection-centric for...of loops.

// Classic loop
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for...of loop
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

Functions package modular blocks of code. JavaScript supports standard declarations as well as ES6 concise arrow functions (() => {}).

// Traditional function
function add(a, b) {
  return a + b;
}

// ES6 Arrow function
const multiply = (a, b) => a * b;

const square = (n) => n * n;
console.log(square(5)); // 25

Arrays represent ordered indexed lists, and Objects represent keyed collection dictionaries. They are the key structures for managing complex application data states.

// Array setup
const fruits = ['apple', 'banana'];
fruits.push('orange');

// Object setup
const user = {
  name: 'Alice',
  age: 25
};
console.log(user.name);

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2023
};
console.log(car.model);

The Document Object Model (DOM) is the programming interface for web documents. It represents the page structure so that programs can change document structure, style, and content.

// DOM Selection & Update
const title = document.getElementById('my-title');
title.textContent = 'Hello, Interactive DOM!';
title.style.color = '#7c3aed';

document.getElementById("main-heading").textContent = "Welcome to JavaScript!";

JavaScript reacts to user interactions via events. By registering event listeners using addEventListener(), elements trigger functions on click, input, submit, and more.

// Event registration
const btn = document.querySelector('#action-btn');
btn.addEventListener('click', (event) => {
  console.log('Button clicked!');
});

document.getElementById("submit-btn").addEventListener("click", () => {
  alert("Form Submitted!");
});