Skip to content

Latest commit

 

History

History
313 lines (260 loc) · 7.66 KB

JavaScript.md

File metadata and controls

313 lines (260 loc) · 7.66 KB

Comprehensive JavaScript Guide

JavaScript (JS), a versatile programming language used primarily for adding interactivity to web pages.

JavaScript runs in browsers, servers (via Node.js), and other environments, making it essential for modern web development.

1. Introduction to JavaScript

What is JavaScript?

JavaScript is a high-level, interpreted programming language that enables dynamic and interactive web content.

It supports event-driven, functional, and object-oriented programming paradigms.

Why Use JavaScript?

  • Interactivity: Enhances web pages with dynamic behavior.
  • Versatility: Runs in browsers, servers, and even desktop apps.
  • Ecosystem: Rich ecosystem with frameworks like React, Vue, and Node.js.

Setting Up JavaScript

No installation is required for browser-based JavaScript. Write JS code:

  1. Inline: Within <script> tags in HTML. 
    <script>
    console.log("Hello, JavaScript!");
</script>
  2. External File: In a .js file, linked via <script>: 
    <script src="script.js"></script>
    // script.js
console.log("Hello, JavaScript!");
  3. Browser Console: Use browser developer tools (e.g., Chrome DevTools) to test code.

For server-side JS, install Node.js:

# Install Node.js (via package manager or https://nodejs.org)
node -v

2. JavaScript Basics

Variables and Data Types

Declare variables using let, const, or var:

let name = "Alice"; // String
const age = 25; // Number
var isStudent = true; // Boolean
let numbers = [1, 2, 3]; // Array
let person = { name: "Bob", age: 30 }; // Object
let nothing = null; // Null
let notDefined; // Undefined

Functions

Define functions for reusable code:

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

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

console.log(greet("Alice")); // Output: Hello, Alice!
console.log(add(2, 3)); // Output: 5

Control Flow

Use conditionals and loops:

// Conditionals
let score = 85;
if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

// Loops
for (let i = 0; i < 3; i++) {
    console.log(i); // Output: 0, 1, 2
}

let fruits = ["apple", "banana", "orange"];
fruits.forEach(fruit => console.log(fruit));

3. DOM Manipulation

JavaScript interacts with the Document Object Model (DOM) to manipulate web pages.

Selecting Elements

// Select by ID
const header = document.getElementById("header");

// Select by class
const items = document.querySelectorAll(".item");

// Select by tag
const paragraphs = document.getElementsByTagName("p");

Modifying Elements

// Change content
header.textContent = "New Heading";

// Add class
header.classList.add("highlight");

// Modify style
header.style.color = "blue";

Event Handling

Add interactivity with events:

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
    alert("Button clicked!");
});

Example HTML:

<button id="myButton">Click Me</button>

4. Advanced JavaScript Features

4.1. Asynchronous JavaScript

Handle asynchronous operations with callbacks, Promises, and async/await.

  • Promises:

    const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched!"), 1000);
    });
};
fetchData().then(data => console.log(data)); // Output: Data fetched!

  • Async/Await:

    async function getData() {
    const data = await fetchData();
    console.log(data); // Output: Data fetched!
}
getData();

  • Fetch API:

    async function fetchUsers() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const users = await response.json();
        console.log(users[0].name);
    } catch (error) {
        console.error("Error:", error);
    }
}
fetchUsers();

4.2. ES6+ Features

Modern JavaScript (ES6 and later) introduces powerful features:

  • Destructuring: 
    const { name, age } = person;
console.log(name, age); // Output: Bob 30
  • Spread Operator: 
    const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // Output: [1, 2, 3, 4]
  • Template Literals: 
    const greeting = `Hello, ${name}!`;

4.3. Modules

Organize code with ES6 modules:

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

HTML to use modules:

<script type="module" src="main.js"></script>

5. JavaScript with Flask (Optional)

Integrate JavaScript with Flask for dynamic web apps:

  1. Create a Flask app (app.py): 
    from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')
  2. Create a template (templates/index.html): 
    <!DOCTYPE html>
<html>
<head>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body>
    <h1 id="header">Hello</h1>
    <button onclick="changeText()">Change Text</button>
</body>
</html>
  3. Add JavaScript (static/script.js): 
    function changeText() {
    document.getElementById("header").textContent = "Updated!";
}

6. Best Practices

  • Use const and let: Avoid var for better scoping.
  • Handle Errors: Use try/catch for asynchronous code.
  • Modularize Code: Use ES6 modules or bundlers like Webpack.
  • Optimize Performance: Avoid excessive DOM manipulation: 
    // Bad
for (let i = 0; i < items.length; i++) {
    items[i].style.color = "blue";
}
// Better
document.querySelectorAll(".item").forEach(item => {
    item.style.color = "blue";
});
  • Ensure Accessibility: Add ARIA attributes and test with screen readers.
  • Use Modern Features: Leverage ES6+ for cleaner, more efficient code.

7. Troubleshooting & Tips

Common Issues

  • Undefined Errors: Ensure variables and functions are defined before use. 
    console.log(x); // Error: x is not defined
let x = 10;
  • Async Issues: Use await only inside async functions.
  • CORS Errors: Ensure APIs allow cross-origin requests or use a proxy in development.

Performance Tips

  • Debounce/Throttle Events: Limit frequent event triggers (e.g., scroll, resize): 
    function debounce(func, wait) {
    let timeout;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), wait);
    };
}
window.addEventListener("resize", debounce(() => console.log("Resized"), 200));
  • Use Event Delegation: Attach listeners to parent elements: 
    document.querySelector(".container").addEventListener("click", e => {
    if (e.target.classList.contains("item")) {
        console.log("Item clicked");
    }
});

8. Resources & Further Learning