Scribd
Upload
22 views5 pages

Jaba Part 2

part 2

Uploaded by

jetawam887
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views5 pages

Jaba Part 2

part 2

Uploaded by

jetawam887
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

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!

You might also like