JavaScript Fundamentals

Welcome to this introductory tutorial on JavaScript fundamentals. This guide will cover the core concepts you need to start building dynamic and interactive web experiences.

What is JavaScript?

JavaScript is a versatile, high-level programming language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else on the web. It's one of the three core technologies of the World Wide Web, alongside HTML and CSS. HTML defines the structure and content of a webpage, CSS defines its style and layout, and JavaScript brings it to life with interactivity.

Core Concepts

Variables and Data Types

Variables are used to store data. In JavaScript, you can declare variables using var, let, or const. let and const are modern, block-scoped declarations.

• Strings: Textual data (e.g., "Hello, World!").
• Numbers: Numerical data (e.g., 42, 3.14).
• Booleans: Logical values, either true or false.
• Arrays: Ordered lists of values (e.g., [1, 2, 3]).
• Objects: Collections of key-value pairs (e.g., { name: "Alice", age: 30 }).
• Null: Represents the intentional absence of any object value.
• Undefined: Represents a variable that has not been assigned a value.

let message = "Learning JavaScript!";
const year = 2023;
let isComplete = false;
let numbers = [10, 20, 30];
let person = { firstName: "Jane", lastName: "Doe" };

console.log(message); // Output: Learning JavaScript!
console.log(year);    // Output: 2023
console.log(isComplete); // Output: false
console.log(numbers[0]); // Output: 10
console.log(person.firstName); // Output: Jane

Operators

Operators are symbols that perform operations on values (operands).

• Arithmetic Operators: +, -, *, /, % (modulo).
• Assignment Operators: =, +=, -=, etc.
• Comparison Operators: ==, === (strict equality), !=, !==, >, <, >=, <=.
• Logical Operators: && (AND), || (OR), ! (NOT).

let a = 10;
let b = 5;

let sum = a + b; // 15
let isGreater = a > b; // true
let isEqual = (a === 10) && (b === 5); // true

console.log("Sum:", sum);
console.log("Is Greater:", isGreater);
console.log("Is Equal:", isEqual);

Control Flow

Control flow statements determine the order in which code is executed.

• Conditional Statements: if, else if, else, switch.
• Loops: for, while, do...while, for...in, for...of.

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else {
    console.log("Grade: C or lower");
}

console.log("Counting to 3:");
for (let i = 1; i <= 3; i++) {
    console.log(i);
}

Functions

Functions are reusable blocks of code that perform a specific task. They help organize your code and avoid repetition.

function greet(name) {
    return "Hello, " + name + "!";
}

let greetingMessage = greet("Alice");
console.log(greetingMessage); // Output: Hello, Alice!

// Arrow function (modern syntax)
const add = (x, y) => x + y;
console.log("2 + 3 =", add(2, 3)); // Output: 2 + 3 = 5

DOM Manipulation

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

• Selecting elements (e.g., document.getElementById(), document.querySelector()).
• Changing content (e.g., element.innerHTML, element.textContent).
• Modifying attributes and styles.
• Handling events (e.g., clicks, mouseovers).

// Assume you have an HTML element: 
Initial text

let paragraph = document.getElementById("myParagraph");
paragraph.textContent = "Text updated by JavaScript!";
paragraph.style.color = "blue";

// Add an event listener to a button
// Assume you have a button: Click Me
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

Next Steps

This is just the beginning of your JavaScript journey. Continue exploring concepts like scope, closures, asynchronous programming (Promises, async/await), arrays methods, and object-oriented programming in JavaScript.

For further learning, explore official documentation and resources.