Here’s a comprehensive "Part 2" guide for JavaScript, covering intermediate and
advanced concepts.
---
JavaScript Guide for Beginners - Part 2: Intermediate to Advanced Concepts
---
Table of Contents
1. Functions and Scope
2. Arrays and Looping
3. DOM Manipulation Basics
4. Events and Event Listeners
5. Working with JSON
6. Error Handling
7. Promises and Async/Await
8. ES6+ Features Overview
9. Fetch API
---
1. Functions and Scope
Functions
A function is a block of reusable code.
// Function Declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Function Call
console.log(greet("Alice")); // Output: Hello, Alice!
Scope
Scope determines where variables are accessible.
Global Scope: Available everywhere.
Local Scope: Available inside a function/block.
let globalVar = "I am global";
function example() {
let localVar = "I am local";
console.log(globalVar); // Accessible
console.log(localVar); // Accessible
}
example();
console.log(localVar); // Error: localVar is not defined
---
2. Arrays and Looping
Arrays
Arrays store multiple values in a single variable.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
Looping through Arrays
let numbers = [1, 2, 3, 4, 5];
// For loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// ForEach method
numbers.forEach(num => console.log(num));
---
3. DOM Manipulation Basics
The Document Object Model (DOM) allows JavaScript to interact with the HTML
structure.
Selecting Elements
let element = document.getElementById("myElement");
let buttons = document.querySelectorAll(".btn");
Changing Content
element.textContent = "New Text!";
element.style.color = "blue";
Adding Elements
let newDiv = document.createElement("div");
newDiv.textContent = "I am new!";
document.body.appendChild(newDiv);
---
4. Events and Event Listeners
Events are actions users perform (e.g., clicks).
let button = document.querySelector("#myButton");
button.addEventListener("click", () => {
alert("Button clicked!");
});
---
5. Working with JSON
JSON (JavaScript Object Notation) is a format for exchanging data.
Parsing JSON
let jsonString = '{"name": "John", "age": 30}';
let user = JSON.parse(jsonString);
console.log(user.name); // Output: John
Stringifying JSON
let user = { name: "Alice", age: 25 };
let jsonString = JSON.stringify(user);
console.log(jsonString); // Output: {"name":"Alice","age":25}
---
6. Error Handling
Handle errors using try-catch.
try {
let result = riskyFunction();
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
}
---
7. Promises and Async/Await
Promises
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation successful");
} else {
reject("Operation failed");
}
});
promise
.then(response => console.log(response))
.catch(error => console.error(error));
Async/Await
async function fetchData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
---
8. ES6+ Features Overview
Arrow Functions
let greet = name => `Hello, ${name}!`;
Template Literals
let message = `Hello, ${name}!`;
Destructuring
let [first, second] = [1, 2];
console.log(first); // Output: 1
---
9. Fetch API
Fetch is used to make HTTP requests.
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));
---
Would you like this content saved as a PDF? Let me know, and I’ll generate it for
you!
