Setting Up Your Development Environment

Step 1: Install Node.js and npm

Step 2: Verify Installation

# Check Node.js installation
node -v 

# Check npm installation
npm -v

Step 3: Set Up Project Directory

# Create project directory
mkdir my_js_project
cd my_js_project

# Initialize a new Node.js project
npm init -y

Step 4: Install VS Code

Step 5: Open VS Code and Install Extensions

Step 6: Setting Up ESLint and Prettier

# Install ESLint and Prettier as dev dependencies
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

# Initialize ESLint configuration
npx eslint --init

Configuring ESLint and Prettier

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {}
}

2. Create a prettier.config.js file:

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
};

Step 7: Create Main JavaScript File

// index.js
console.log('Hello, JavaScript!');

3. Run the JavaScript file:

node index.js

Step 8: Commit Your Project to GitHub

# Initialize a new git repository
git init

# Add all files to the repository
git add .

# Commit the changes
git commit -m "Initial commit"

# Add a new GitHub remote
git remote add origin 

# Push changes to GitHub
git push -u origin master

This will set up your development environment for mastering JavaScript fundamentals using Node.js and VS Code.

JavaScript Syntax: Practical Implementation

// Variable declaration
let name = 'John'; // Using let for variables that may change
const age = 30; // Using const for variables that won't change

// Function declaration
function greet(person) {
  return `Hello, ${person}!`;
}

// Arrays
let fruits = ['apple', 'banana', 'cherry'];
fruits.push('date'); // Add an element at the end

// Objects
let person = {
  firstName: 'Jane',
  lastName: 'Doe',
  age: 25
};

// Looping through an array
for (let i = 0; i  21) {
  console.log('Adult');
} else {
  console.log('Not an adult');
}

// Arrow functions
const add = (a, b) => a + b;

console.log(add(5, 3)); // Outputs: 8

// Class declaration
class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
  
  displayInfo() {
    console.log(`${this.brand} ${this.model}`);
  }
}

let car1 = new Car('Toyota', 'Corolla');
car1.displayInfo(); // Outputs: Toyota Corolla

// Promises
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data)) // Outputs: Data fetched after 1 second
  .catch(error => console.error(error));

// Working with Variables and Data Types

// String variable
let greeting = "Hello, world!";
console.log(greeting); // Outputs: Hello, world!

// Number variable
let age = 30;
console.log(age); // Outputs: 30

// Boolean variable
let isLoggedIn = true;
console.log(isLoggedIn); // Outputs: true

// Array
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Outputs: Banana

// Object
let user = {
    name: "John Doe",
    age: 25,
    isMember: true
};
console.log(user.name); // Outputs: John Doe

// Undefined variable
let undefinedVar;
console.log(undefinedVar); // Outputs: undefined

// Null variable
let nullVar = null;
console.log(nullVar); // Outputs: null

// Demonstrating type conversion
let numString = "123";
let number = Number(numString);
console.log(typeof number); // Outputs: number

// Template literals
let message = `Hi ${user.name}, you are ${user.age} years old.`;
console.log(message); // Outputs: Hi John Doe, you are 25 years old.

// Constants
const PI = 3.14159;
console.log(PI); // Outputs: 3.14159

Control Flow: Conditionals and Loops in JavaScript

Conditionals

let age = 20;

// Simple if-else condition
if (age >= 18) {
    console.log("You are eligible to vote.");
} else {
    console.log("You are not eligible to vote.");
}

// if-else if-else ladder
let grade = 'B';

if (grade === 'A') {
    console.log("Excellent!");
} else if (grade === 'B') {
    console.log("Good work!");
} else if (grade === 'C') {
    console.log("You can do better.");
} else {
    console.log("Needs improvement.");
}

// Switch case
let fruit = 'apple';

switch (fruit) {
    case 'apple':
        console.log("Apples are red or green.");
        break;
    case 'banana':
        console.log("Bananas are yellow.");
        break;
    case 'orange':
        console.log("Oranges are orange.");
        break;
    default:
        console.log("Unknown fruit.");
        break;
}

Loops

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

// While loop
let count = 0;
while (count < 5) {
    console.log("Count is: " + count);
    count++;
}

// Do-while loop
let num = 0;
do {
    console.log("Number is: " + num);
    num++;
} while (num < 5);

// For-of loop (array)
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
    console.log("For-of number: " + num);
}

// For-in loop (object)
let person = {
    name: 'John',
    age: 25,
    city: 'New York'
};

for (let key in person) {
    console.log(key + ": " + person[key]);
}

Real-Life Application Example

let shoppingCart = [
    { item: 'Laptop', price: 1000, quantity: 2 },
    { item: 'Phone', price: 500, quantity: 1 },
    { item: 'Tablet', price: 300, quantity: 3 }
];

let totalCost = 0;

// Calculate total cost with various loops and conditionals
for (let i = 0; i  2) {
        let totalItemCost = item.price * item.quantity * 0.9;
        console.log("Applying discount for: " + item.item);
        totalCost += totalItemCost;
    } else {
        totalCost += item.price * item.quantity;
    }
}

console.log("Total Cost:

quot; + totalCost); 

This implementation uses various control flow statements to process and manipulate data efficiently, applying real-life scenarios where these techniques are commonly useful. Adjust the values and logics as per specific needs.

// #5 Part of the project: Functions and Scope

// Example of a simple function:
function greet(name) {
  return `Hello, ${name}!`;
}

// Global scope variable
let userName = 'Alice';

function displayGreeting() {
  // Local scope variable
  const greetingMessage = greet(userName);
  console.log(greetingMessage);
}

// Call the function
displayGreeting();

// Function with nested scope
function processOrder(orderNumber) {
  console.log(`Processing order #${orderNumber}`);

  function generateInvoice() {
    const invoiceNumber = `INV-${Math.floor(Math.random() * 1000)}`;
    console.log(`Generated invoice: ${invoiceNumber} for order #${orderNumber}`);
  }

  // Call the nested function
  generateInvoice();
}

// Call the function
processOrder(101);

// Example of variable shadowing
let item = 'Laptop';

function showItem() {
  let item = 'Phone';
  console.log(`Inner Item: ${item}`); // Inner scope variable
}

showItem();
console.log(`Outer Item: ${item}`); // Global scope variable

// Immediately Invoked Function Expression (IIFE)
(function selfExecutingFunction() {
  console.log('This function runs immediately!');
})();

The code provides a practical application of JavaScript functions and scope, including global and local scope, nested functions, variable shadowing, and an IIFE. Each function demonstrates different aspects of functions and scope in JavaScript, which can be applied directly in real-life JavaScript projects.

Practical Implementation: Arrays and Iterations in JavaScript

// Initializing an array
let numbers = [1, 2, 3, 4, 5];

// Iterating using a for loop
for (let i = 0; i  0;
});
console.log(allPositive); // Outputs: true

// Using some to check if there is any element greater than 3
let someGreaterThanThree = numbers.some(function(number) {
  return number > 3;
});
console.log(someGreaterThanThree); // Outputs: true

// Using find to get the first element greater than 3
let firstGreaterThanThree = numbers.find(function(number) {
  return number > 3;
});
console.log(firstGreaterThanThree); // Outputs: 4

// Using findIndex to get the index of the first element greater than 3
let indexFirstGreaterThanThree = numbers.findIndex(function(number) {
  return number > 3;
});
console.log(indexFirstGreaterThanThree); // Outputs: 3

By following the code snippets above, you can apply array and iteration methods practically in JavaScript projects to manipulate and analyze collections of data effectively.

Objects and Prototypes in JavaScript

Creating Objects

// Creating an object with properties
const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020,
  start: function() {
    console.log('Car started');
  }
};

// Accessing object properties
console.log(car.make); // Toyota
console.log(car['model']); // Camry

// Calling object method
car.start(); // Car started

Adding Properties and Methods

// Adding property
car.color = 'Red';
console.log(car.color); // Red

// Adding method
car.honk = function() {
  console.log('Honk! Honk!');
};

// Calling added method
car.honk(); // Honk! Honk!

Constructor Function

// Constructor function for creating objects
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Car.prototype.start = function() {
  console.log(`${this.make} ${this.model} started`);
};

// Creating instances using the constructor
const myCar = new Car('Honda', 'Civic', 2019);
const yourCar = new Car('Ford', 'Focus', 2018);

// Accessing properties
console.log(myCar.make); // Honda
console.log(yourCar.model); // Focus

// Calling prototype method
myCar.start(); // Honda Civic started
yourCar.start(); // Ford Focus started

Inheritance with Prototypes

// Parent constructor
function Vehicle(type) {
  this.type = type;
}

// Adding method to the Vehicle prototype
Vehicle.prototype.getType = function() {
  return this.type;
};

// Child constructor
function Bike(make, model) {
  Vehicle.call(this, 'Bike'); // Inherit properties
  this.make = make;
  this.model = model;
}

// Inherit methods
Bike.prototype = Object.create(Vehicle.prototype);
Bike.prototype.constructor = Bike;

// Adding new method
Bike.prototype.getDetails = function() {
  return `${this.make} ${this.model}, Type: ${this.getType()}`;
};

// Creating an instance of Bike
const myBike = new Bike('Yamaha', 'MT-07');
console.log(myBike.getDetails()); // Yamaha MT-07, Type: Bike

This example provides practical implementations of creating objects, adding properties and methods, using constructor functions, and implementing inheritance with prototypes in JavaScript.

DOM Manipulation Basics in JavaScript

Selecting Elements

// Select an element by ID
const header = document.getElementById('header');

// Select elements by class name
const items = document.getElementsByClassName('item');

// Select elements by tag name
const paragraphs = document.getElementsByTagName('p');

// Select elements using a CSS selector
const firstItem = document.querySelector('.item');

// Select all elements using a CSS selector
const allItems = document.querySelectorAll('.item');

Creating and Appending Elements

// Create a new element
const newDiv = document.createElement('div');

// Set attributes
newDiv.id = 'newDivId';
newDiv.className = 'new-div';

// Set inner content
newDiv.textContent = 'This is a new div';

// Append to a parent element
const container = document.querySelector('#container');
container.appendChild(newDiv);

Modifying Content and Attributes

// Modify text content of an element
const header = document.getElementById('header');
header.textContent = 'New Header Text';

// Modify HTML content of an element
const section = document.getElementById('content');
section.innerHTML = '

New paragraph

';

// Modify attributes of an element
const link = document.querySelector('a');
link.setAttribute('href', 'https://new-url.com');

Removing Elements

// Remove an element
const unwantedElement = document.getElementById('unwanted');
unwantedElement.parentNode.removeChild(unwantedElement);

Event Handling

// Add an event listener to an element
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

Changing Styles

// Directly modify CSS styles
const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '100px';
box.style.height = '100px';

// Add or remove CSS classes
box.classList.add('highlight');
box.classList.remove('highlight');

Example in Practice

Here’s a practical example that uses the above methods to manipulate the DOM:

    
    
    
        .highlight {
            border: 2px solid red;
        }

Original Header

    Click Me
    
    
        // Example Implementation
        document.getElementById('myButton').addEventListener('click', function() {
            // Change header text
            document.getElementById('header').textContent = 'Header Changed!';

            // Create a new div
            const newDiv = document.createElement('div');
            newDiv.textContent = 'This is a dynamically created div';
            document.getElementById('container').appendChild(newDiv);

            // Add highlight class to header
            document.getElementById('header').classList.add('highlight');
        });
    

This should cover the basics of DOM manipulation in JavaScript using practical examples that can be readily applied.

// Event Handling in JavaScript

// 1. Accessing HTML elements
const button = document.getElementById('myButton');
const inputField = document.getElementById('myInput');

// 2. Adding Event Listeners
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

inputField.addEventListener('input', function(event) {
    console.log('Current Input Value:', event.target.value);
});

// 3. Custom event handling
const customEvent = new Event('myCustomEvent');

document.addEventListener('myCustomEvent', function() {
    console.log('Custom event triggered!');
});

// 4. Triggering Custom Events
button.addEventListener('click', function() {
    document.dispatchEvent(customEvent);
});

Working with Forms in JavaScript

HTML Form Example

    
    
    


    
        Username:
        
        
        Email:
        
        
        Submit

JavaScript for Form Handling

document.addEventListener('DOMContentLoaded', (event) => {
    const form = document.getElementById('myForm');
    const formOutput = document.getElementById('formOutput');
    
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        const formData = new FormData(form); // Collect form data
        const data = {};
        
        formData.forEach((value, key) => {
            data[key] = value;
        });
        
        // Display form data
        formOutput.innerHTML = `

Form Data:

Username: ${data.username}

Email: ${data.email}

        `;
        
        // Clear form
        form.reset();
    });
});

Explanation:

// Example of fetching data using a callback function
function fetchData(callback) {
    setTimeout(() => {
        const data = 'Here is the data';
        callback(data);
    }, 1000);
}

function processData(data) {
    console.log(`Processing: ${data}`);
}

// Invoke
fetchData(processData);

// Example of fetching data using a Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Here is the data';
            resolve(data);
        }, 1000);
    });
}

function processData(data) {
    console.log(`Processing: ${data}`);
}

// Invoke
fetchData()
    .then(processData)
    .catch(error => console.error('Error: ', error));

// Example of fetching data using async/await
async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Here is the data';
            resolve(data);
        }, 1000);
    });
}

async function main() {
    try {
        const data = await fetchData();
        console.log(`Processing: ${data}`);
    } catch (error) {
        console.error('Error: ', error);
    }
}

// Invoke
main();

try {
  // Code that might throw an error
  let result = riskyFunction();
  console.log(result);
} catch (error) {
  // Handling the error
  console.error('Error occurred:', error.message);
} finally {
  // Code that will run regardless of whether an error occurred or not
  console.log('Execution completed.');
}

function validateNumber(num) {
  if (typeof num !== 'number') {
    throw new Error('Invalid input: expected a number.');
  }
  return true;
}

try {
  validateNumber('not a number');
} catch (error) {
  console.error('Validation failed:', error.message);
}

function reverseString(str) {
  debugger; // Pause execution to inspect variables
  let reversed = str.split('').reverse().join('');
  return reversed;
}

reverseString('hello');

function calculateSum(a, b) {
  console.log('Calculating sum of:', a, b);
  let sum = a + b;
  console.info('Result:', sum);
  console.warn('Ensure input values are correct');
  console.error('This is a sample error message');
  return sum;
}

calculateSum(3, 5);

function fetchData(url) {
  try {
    console.log('Fetching data from:', url);
    // Simulate an async operation
    let response = mockFetch(url); // Assume mockFetch is defined elsewhere
    debugger; // Step into mockFetch response handling
    return response.data;
  } catch (error) {
    console.error('Fetch failed:', error.message);
    // Handle specific error types
    if (error instanceof NetworkError) {
      console.warn('Check your network connection.');
    }
  } finally {
    console.log('End of fetchData execution.');
  }
}

fetchData('https://api.example.com/data');

npm install express body-parser cors

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(cors());

// Sample data
let items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
];

// GET all items
app.get('/api/items', (req, res) => {
    res.json(items);
});

// GET single item by ID
app.get('/api/items/:id', (req, res) => {
    const item = items.find(i => i.id === parseInt(req.params.id));
    if (!item) return res.status(404).send('Item not found');
    res.json(item);
});

// POST create new item
app.post('/api/items', (req, res) => {
    const item = {
        id: items.length + 1,
        name: req.body.name
    };
    items.push(item);
    res.status(201).json(item);
});

// PUT update item
app.put('/api/items/:id', (req, res) => {
    const item = items.find(i => i.id === parseInt(req.params.id));
    if (!item) return res.status(404).send('Item not found');

    item.name = req.body.name;
    res.json(item);
});

// DELETE an item
app.delete('/api/items/:id', (req, res) => {
    const itemIndex = items.findIndex(i => i.id === parseInt(req.params.id));
    if (itemIndex === -1) return res.status(404).send('Item not found');

    items.splice(itemIndex, 1);
    res.sendStatus(204);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

document.addEventListener('DOMContentLoaded', () => {
    // Fetch all items and display them
    fetch('http://localhost:3000/api/items')
        .then(response => response.json())
        .then(data => {
            const itemsContainer = document.getElementById('items');
            itemsContainer.innerHTML = data.map(item => `

`).join('');
        })
        .catch(err => console.error(err));
});

node server.js

// Exporting functions for math operations
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => b !== 0 ? a / b : 'Cannot divide by zero';

// Exporting functions for string operations
export const toUpperCase = str => str.toUpperCase();
export const toLowerCase = str => str.toLowerCase();
export const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

// Importing math operations
import { add, subtract, multiply, divide } from './mathOperations.js';
// Importing string operations
import { toUpperCase, toLowerCase, capitalize } from './stringOperations.js';

// Using math functions
const num1 = 10;
const num2 = 5;

console.log(`Add: ${add(num1, num2)}`); // 15
console.log(`Subtract: ${subtract(num1, num2)}`); // 5
console.log(`Multiply: ${multiply(num1, num2)}`); // 50
console.log(`Divide: ${divide(num1, num2)}`); // 2

// Using string functions
const str = "hello world";

console.log(`Uppercase: ${toUpperCase(str)}`); // HELLO WORLD
console.log(`Lowercase: ${toLowerCase(str)}`); // hello world
console.log(`Capitalize: ${capitalize(str)}`); // Hello world

project-template/
?
??? index.html
??? style.css
??? script.js
??? templates/
?   ??? project-template.html
?   ??? project-template.css
?   ??? project-template.js

    Build Project
    

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

document.getElementById('buildProject').addEventListener('click', buildProject);

function buildProject() {
    // Load template files (using Fetch API)
    fetch('templates/project-template.html')
        .then(response => response.text())
        .then(htmlContent => {
            // Save or use HTML content
            console.log('HTML Template:', htmlContent);
        });

    fetch('templates/project-template.css')
        .then(response => response.text())
        .then(cssContent => {
            // Save or use CSS content
            console.log('CSS Template:', cssContent);
        });

    fetch('templates/project-template.js')
        .then(response => response.text())
        .then(jsContent => {
            // Save or use JS content
            console.log('JS Template:', jsContent);
        });
}

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: #666;
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('[Project Name] JavaScript Loaded');
});