Introduction to JavaScript

Introduction to JavaScript What is JavaScript and Why Does It Exist? JavaScript is a programming language created to add interactivity to static HTML pages. Before JavaScript, web pages were static documents that couldn't respond to user actions. Today, JavaScript has become the de facto language that powers interactive features across the web. JavaScript is unique because it runs in multiple environments: In web browsers — where it makes web pages interactive On servers and devices — via the Node JavaScript runtime, enabling full-stack development In various other applications — wherever a JavaScript runtime is available This versatility means JavaScript can power everything from simple click handlers to complex single-page applications and back-end web services. Basic Syntax and Variables JavaScript uses C-style syntax conventions. Statements end with semicolons, and code blocks are wrapped in curly braces {}. Variables are declared using three keywords: let — the preferred modern way to declare variables with block scope const — declares variables that cannot be reassigned (use this by default) var — the older way to declare variables (avoid in modern JavaScript) Here's a simple example: javascript const name = "Alice"; let count = 0; var oldStyle = "avoid this"; // old style Important: Dynamic Typing and Type Coercion JavaScript is dynamically typed, meaning you don't specify data types when creating variables—the language figures them out automatically. A variable can hold different types at different times: javascript let value = 42; // number value = "hello"; // now it's a string value = true; // now it's a boolean JavaScript also performs type coercion, automatically converting between types when necessary. This can be convenient but also tricky: javascript console.log("5" + 3); // "53" (concatenation, not addition) console.log("5" - 3); // 2 (coerced to numbers) console.log("5" == 5); // true (loose equality with coercion) console.log("5" === 5); // false (strict equality, no coercion) Important tip: Use === and !== for comparisons instead of == and != to avoid unexpected type coercion bugs. Data Types and Structures JavaScript provides several ways to organize data: Primitive Types The basic primitive types are: Numbers — 42, 3.14, and Infinity Strings — "hello", 'world', template Booleans — true and false Objects as Key-Value Maps Objects store collections of related data as key-value pairs. Think of them as labeled containers: javascript const person = { name: "Alice", age: 30, city: "Portland" }; console.log(person.name); // "Alice" console.log(person["age"]); // 30 Objects are versatile and used throughout JavaScript for organizing related data. Arrays as Ordered Collections Arrays hold ordered lists of values with numeric indexing (starting at 0): javascript const fruits = ["apple", "banana", "orange"]; console.log(fruits[0]); // "apple" console.log(fruits.length); // 3 Functions as First-Class Values In JavaScript, functions are first-class values—they can be assigned to variables, passed as arguments, and returned from other functions. This is a powerful feature: javascript const greet = function(name) { return "Hello, " + name; }; console.log(greet("Bob")); // "Hello, Bob" Interacting with Web Pages: The Document Object Model The Document Object Model (DOM) is a tree-like representation of an HTML page. JavaScript uses the DOM to read and modify page content. Selecting Elements JavaScript provides methods to select HTML elements: document.querySelector(selector) — selects the first element matching a CSS selector: javascript const header = document.querySelector("h1"); const button = document.querySelector("#submit-btn"); const items = document.querySelector(".list-item"); getElementById(id) — selects a single element by its unique id attribute (a slightly older but still useful method): javascript const input = document.getElementById("username"); Responding to User Interactions The addEventListener() method attaches a listener to an element so JavaScript can respond to user events like clicks, typing, or mouse movement: javascript const button = document.querySelector("button"); button.addEventListener("click", function() { console.log("Button was clicked!"); }); This code pattern is fundamental to interactive web development. The code shows real examples of selecting elements and manipulating the DOM. Event-Driven Programming Modern web interfaces are built on an event-driven model: the page responds to user actions by triggering event listeners that run JavaScript code. When you attach an event listener, your code can: Change page content — update text, add/remove elements Change styling — apply CSS classes or modify styles Change behavior — enable/disable features, navigate to new pages The key advantage is non-reloading interactivity. Without event-driven updates, every user action would require the entire page to reload. With events, you can update just what changed: javascript const submitButton = document.querySelector("button"); submitButton.addEventListener("click", function() { const input = document.querySelector("input"); const message = input.value; // Update the page without reloading const display = document.querySelector(".result"); display.textContent = "You said: " + message; display.style.color = "blue"; }); This is the foundation of responsive, fast-feeling web applications. Control Flow: Making Decisions and Repeating Code JavaScript provides standard ways to control program flow: If Statements for Conditional Execution The if statement runs a block of code only when a condition is true: javascript if (age >= 18) { console.log("You can vote"); } else { console.log("You're too young to vote"); } For Loops for Known Repetition The for loop repeats code a specific number of times: javascript for (let i = 0; i < 5; i++) { console.log("Count: " + i); } While Loops for Conditional Repetition The while loop repeats code while a condition is true: javascript let x = 0; while (x < 5) { console.log("x is " + x); x = x + 1; } Functions for Reusable Code Functions encapsulate reusable pieces of code. They take arguments (inputs) and can return a value (output): javascript function multiply(a, b) { return a b; } console.log(multiply(3, 4)); // 12 Functions let you write code once and use it many times, making your code cleaner and easier to maintain. Object Literals for Creating Simple Objects Object literals use curly braces to define objects with key-value pairs: javascript const book = { title: "Learning JavaScript", author: "Jane Smith", pages: 450 }; This is a convenient shorthand for creating objects with initial data. Asynchronous Programming: Doing Work Without Freezing the Page Some operations take time—loading data from the internet, reading files, or querying databases. If you run these operations normally, the entire page would freeze until they finish. JavaScript solves this with asynchronous programming. Callbacks: Functions That Run Later A callback is a function passed as an argument to be executed later when an asynchronous operation completes: javascript function loadUserData(userId, callback) { // Simulate loading from server setTimeout(function() { callback({ id: userId, name: "Alice" }); }, 1000); } loadUserData(1, function(user) { console.log("User loaded: " + user.name); }); Promises: A Cleaner Approach Promises provide a cleaner way to handle asynchronous operations. A promise represents a value that will be available in the future. You use .then() to specify what happens when the promise resolves: javascript loadUserDataPromise(1) .then(function(user) { console.log("User loaded: " + user.name); }); The Fetch Function The fetch function is a promise-based API that loads data from a server without blocking the user interface: javascript fetch("https://api.example.com/users/1") .then(response => response.json()) .then(user => { console.log("User: " + user.name); }); The key benefit is asynchronous operations prevent UI freezing. While waiting for the server to respond, the user can still click buttons, scroll, and interact with the page normally. Server-Side JavaScript with Node The Node JavaScript runtime extends JavaScript beyond the browser, enabling server-side development. Node gives JavaScript access to: The file system — read and write files on the server Databases — connect to and query databases Networking — make HTTP requests and build servers Because the same language works on both client and server, developers can share code and libraries between client and server. For example, validation logic written in JavaScript can run in the browser and on the server, reducing duplication and keeping both sides in sync. This makes JavaScript a full-stack language suitable for building complete web applications from front-end to back-end.