JavaScript Basics for Beginners: Learn Web Programming

Why Learn JavaScript?

JavaScript is the only programming language that runs natively in web browsers, making it essential for web development. It is consistently the most popular programming language in the world and has expanded beyond browsers to servers (Node.js), mobile apps (React Native), and desktop applications (Electron).

Your First JavaScript Program

// This is a comment
console.log("Hello, World!");

// Variables
let name = "Rahul";
const age = 25;
var city = "Mumbai"; // older style

// Template literals
console.log(`My name is ${name} and I am ${age} years old`);

Data Types

• String: "Hello", 'World'
• Number: 42, 3.14
• Boolean: true, false
• Array: [1, 2, 3, "four"]
• Object: {name: "Priya", age: 22}
• Undefined and null

Functions

// Traditional function
function calculateEMI(principal, rate, months) {
  let monthlyRate = rate / 100 / 12;
  let emi = (principal * monthlyRate * Math.pow(1 + monthlyRate, months)) /
            (Math.pow(1 + monthlyRate, months) - 1);
  return Math.round(emi);
}

// Arrow function (modern)
const greet = (name) => `Hello, ${name}!`;

console.log(calculateEMI(500000, 8.5, 60));
console.log(greet("Arjun"));

DOM Manipulation

// Select elements
let heading = document.getElementById("title");
let buttons = document.querySelectorAll(".btn");

// Change content
heading.textContent = "Updated Title";
heading.style.color = "blue";

// Event listener
document.getElementById("calcBtn").addEventListener("click", function() {
  let input = document.getElementById("amount").value;
  let result = parseFloat(input) * 1.18; // Add 18% GST
  document.getElementById("result").textContent = "GST Amount: ₹" + result.toFixed(2);
});

Where to Learn More

Practice on: freeCodeCamp, MDN Web Docs, JavaScript.info, and Codecademy. Build small projects like a calculator, quiz app, or to-do list to solidify learning.