JavaScript Fundamentals Tutorial

Getting Started with JavaScript

JavaScript is a versatile programming language that powers modern web applications. This tutorial will guide you through the fundamentals with interactive examples and hands-on coding exercises.

What You'll Learn

✓ Variable declarations and data types
✓ Function creation and invocation
✓ Working with objects and arrays
✓ DOM manipulation and event handling

Variables & Data Types

Variables are containers for storing data values. JavaScript has several data types including strings, numbers, booleans, and objects.

Variable Declaration

// Different ways to declare variables
let name = "John Doe";          // String
const age = 25;                 // Number
let isActive = true;            // Boolean
let hobbies = ["reading", "coding"]; // Array
let user = {                    // Object
    name: "Jane",
    email: "jane@example.com"
};

Best Practices

• Use const for values that won't change
• Use let for variables that may change
• Avoid var in modern JavaScript

Functions

Functions are reusable blocks of code that perform specific tasks. They help organize your code and make it more maintainable.

Function Examples

// Function declaration
function greetUser(name) {
    return `Hello, ${name}!`;
}

// Arrow function
const calculateArea = (width, height) => {
    return width * height;
};

// Function with default parameters
function createUser(name, role = "user") {
    return {
        name: name,
        role: role,
        createdAt: new Date()
    };
}

// Usage examples
console.log(greetUser("Alice"));
console.log(calculateArea(10, 20));
console.log(createUser("Bob", "admin"));

Objects & Arrays

Objects and arrays are complex data types that allow you to store collections of data and more complex entities.

Working with Objects

// Object creation and manipulation
const student = {
    name: "Sarah Johnson",
    age: 22,
    courses: ["Math", "Physics", "Chemistry"],
    grades: {
        math: 95,
        physics: 87,
        chemistry: 92
    }
};

// Accessing properties
console.log(student.name);
console.log(student.grades.math);

// Adding new properties
student.email = "sarah@university.edu";
student.calculateGPA = function() {
    const grades = Object.values(this.grades);
    return grades.reduce((sum, grade) => sum + grade, 0) / grades.length;
};

// Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evenNumbers = numbers.filter(num => num % 2 === 0);

Interactive Code Editor

Try writing and running JavaScript code directly in your browser! Edit the code on the left and see the results on the right.

JS Playground: Variables & Functions

JavaScript Code:

// Try modifying this code!
let name = "Alice";
let age = 25;

function greet(person, years) {
    return `Hello ${person}! You are ${years} years old.`;
}

function calculateBirthYear(currentAge) {
    return new Date().getFullYear() - currentAge;
}

// Run some code
console.log(greet(name, age));
console.log(`Birth year: ${calculateBirthYear(age)}`);

// Try adding your own code below:
// let yourName = "Your Name";
// console.log(greet(yourName, 30));

Output:

Click 'RUN CODE' to see the results

JS Playground: Arrays & Objects

JavaScript Code:

// Working with arrays and objects
const students = [
    { name: "John", grade: 85, subject: "Math" },
    { name: "Sarah", grade: 92, subject: "Science" },
    { name: "Mike", grade: 78, subject: "English" }
];

// Function to calculate average grade
function calculateAverage(studentList) {
    const total = studentList.reduce((sum, student) => sum + student.grade, 0);
    return total / studentList.length;
}

// Function to find top student
function findTopStudent(studentList) {
    return studentList.reduce((top, current) => 
        current.grade > top.grade ? current : top
    );
}

// Display results
console.log("All students:", students);
console.log("Average grade:", calculateAverage(students));
console.log("Top student:", findTopStudent(students));

// Try adding more students or functions!

Output:

Click 'RUN CODE' to see the results

JS Playground: DOM Manipulation

JavaScript Code:

// DOM Manipulation Example
// Create and modify HTML elements

// Create a new element
const newDiv = document.createElement('div');
newDiv.innerHTML = '<h3>🎉 Created with JavaScript!</h3>';
newDiv.style.background = '#e7f3ff';
newDiv.style.padding = '15px';
newDiv.style.borderRadius = '8px';
newDiv.style.margin = '10px 0';

// Add to demo area
const demoArea = document.getElementById('demo-area');
demoArea.appendChild(newDiv);

// Create a button
const btn = document.createElement('button');
btn.textContent = 'Click me!';
btn.className = 'bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600';
btn.onclick = () => {
    alert('Hello from JavaScript!');
};
demoArea.appendChild(btn);

console.log('DOM elements created successfully!');
console.log('Check the demo area below ↓');

Output:

Click 'RUN CODE' to see the results

Live Demo Area:

Run the code to see DOM manipulation in action!

Congratulations! 🎉

You've completed the JavaScript Fundamentals tutorial. You now have a solid foundation in variables, functions, objects, and arrays.

View Source Code