JavaScript Fundamentals

Welcome to the JavaScript Fundamentals tutorial. This guide will walk you through the core concepts of JavaScript, the ubiquitous programming language of the web. Whether you're a beginner or looking to solidify your understanding, this resource will provide a strong foundation.

What is JavaScript?

JavaScript (JS) is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. It enables interactive web pages and is an essential skill for front-end and back-end development.

Getting Started: Variables and Data Types

Every programming language relies on variables to store information. In JavaScript, we use keywords like var, let, and const to declare variables.

var: Declared variables are function-scoped or globally scoped.
let: Declared variables are block-scoped and can be reassigned.
const: Declared variables are block-scoped and cannot be reassigned.

JavaScript supports various data types:

String: Text, e.g., "Hello, World!"
Number: Integers and floating-point numbers, e.g., 42, 3.14
Boolean: true or false
Object: A collection of properties, e.g., { name: "Alice", age: 30 }
Array: An ordered list of values, e.g., [1, 2, 3, "apple"]
Null: Represents the intentional absence of any object value.
Undefined: Indicates that a variable has not been assigned a value.

Example: Declaring Variables


let message = "Welcome to JavaScript!";
const year = 2023;
var isLearning = true;

console.log(message);
console.log("Current year:", year);
console.log("Is the user learning?", isLearning);

Operators

Operators are special symbols that perform operations on values and variables.

Arithmetic Operators: +, -, *, /, %
Assignment Operators: =, +=, -=
Comparison Operators: ==, ===, !=, !==, >, <
Logical Operators: && (AND), || (OR), ! (NOT)

Example: Using Operators


let a = 10;
let b = 5;

let sum = a + b; // sum will be 15
let isEqual = (a === 10); // isEqual will be true

if (a > 5 && b < 10) {
    console.log("Both conditions are met.");
}

Control Flow: Conditional Statements

Control flow statements allow you to execute code based on certain conditions.

if...else: Executes a block of code if a condition is true, and another block if it's false.
switch: Selects one of many code blocks to be executed.

Example: if...else Statement


let score = 85;

if (score >= 90) {
    console.log("Excellent!");
} else if (score >= 70) {
    console.log("Good job!");
} else {
    console.log("Keep practicing.");
}

Control Flow: Loops

Loops are used to execute a block of code repeatedly.

for: Executes a block of code a specified number of times.
while: Executes a block of code as long as a specified condition is true.
do...while: Executes a block of code once, and then repeats the execute as long as a specified condition is true.
for...of: Iterates over iterable objects (like Arrays).
for...in: Iterates over the properties of an object.

Example: for Loop


for (let i = 0; i < 5; i++) {
    console.log("Iteration number: " + i);
}

Functions

Functions are blocks of reusable code designed to perform a particular task. They help in organizing code and avoiding repetition.

Example: Defining and Calling a Function


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

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

Objects and Arrays

JavaScript's objects and arrays are fundamental data structures.

Objects allow you to store data in key-value pairs.
Arrays provide an ordered collection of elements, accessible by index.

Example: Object and Array Manipulation


let person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 25,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Output: Jane Doe

let colors = ["red", "green", "blue"];
colors.push("yellow"); // Adds "yellow" to the end
console.log(colors[0]); // Output: red
console.log(colors); // Output: ["red", "green", "blue", "yellow"]

DOM Manipulation (Brief Introduction)

The Document Object Model (DOM) is an interface that allows JavaScript to interact with HTML and XML documents. It represents the page structure as a tree of objects.

With JavaScript, you can dynamically change the content, structure, and style of a web page.

Example: Changing Text Content

Initial content.


function changeText() {
    let element = document.getElementById("myElement");
    element.textContent = "Content has been updated!";
    element.style.backgroundColor = "var(--accent-color)";
    element.style.color = "white";
}

Next Steps

This tutorial covers the absolute basics. To continue your learning journey, explore topics such as:

Asynchronous JavaScriptHandling operations that don't block the main thread, like fetching data. (Promises, async/await)
Event Handling
Error Handling
ES6+ Features (arrow functions, classes, modules)
Frameworks and Libraries (React, Vue, Angular)

Keep coding, experimenting, and building!