online courses : June 2025

Friday, June 20, 2025

Javascript Module 13

Javascript Module 13

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 13

Module 13 : JSON and Working with Data

📘 Section 1: What is JSON?

➤ JSON (JavaScript Object Notation)

Definition: JSON is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate.

Format: Key-value pairs enclosed in curly braces {}.

📌 JSON Example

json

code

{ "name": "John Doe", "age": 30, "isStudent": false, "courses": ["JavaScript", "Python"], "address": { "city": "New York", "zip": "10001" } }

🔑 Key Features:

Language-independent (used by JavaScript, Python, Java, etc.)

Text-based format

Replaces XML in many modern applications

🧠 Insight:

According to a study by Statista (2024), over 94% of web APIs use JSON as the primary data format due to its simplicity and cross-platform compatibility. JSON has become the de facto standard for transmitting structured data over a network.

📦 Section 2: JSON in JavaScript

➤ Parsing JSON

Converting a JSON string into a JavaScript object.

javascript

code

const jsonData = '{"name": "Alice", "age": 25}'; const obj = JSON.parse(jsonData); console.log(obj.name); // Output: Alice

➤ Stringifying JavaScript Object

Converting a JavaScript object into a JSON string.

javascript

code

const person = { name: "Bob", age: 28 }; const jsonString = JSON.stringify(person); console.log(jsonString); // Output: '{"name":"Bob","age":28}'

🔁 Section 3: Working with JSON Data

💡 Use Case: Fetching Data from a REST API

javascript

code

fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(data => { console.log(data); // array of user objects data.forEach(user => console.log(user.name)); }) .catch(error => console.error('Error:', error));

🧰 Application:

Loading product listings on an e-commerce site

Rendering user profiles in a social media app

Populating dynamic charts using external data sources

🧪 Display Data in a Table

🔬 Objective:

Fetch user data from an API and display it in an HTML table.

💻 HTML:

html

code

<table id="userTable" border="1"> <tr> <th>Name</th> <th>Email</th> <th>City</th> </tr> </table>

📜 JavaScript:

javascript

code

fetch('https://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then(users => { const table = document.getElementById("userTable"); users.forEach(user => { const row = table.insertRow(); row.innerHTML = `<td>${user.name}</td><td>${user.email}</td><td>${user.address.city}</td>`; }); });

🔍 Explanation:

We fetch user data using fetch().

Parse the JSON response.

Iterate through the data and create rows in a table.

🧠 Advanced Tip: Nested JSON Handling

Example:

json

code

{ "user": { "id": 1, "profile": { "username": "john_doe", "details": { "email": "john@example.com", "location": "USA" } } } }

JavaScript Access:

javascript

code

const data = /* JSON object from API */; const email = data.user.profile.details.email;

🧪 Exercises

📝 Exercise 1:

Convert the following object into a JSON string:

javascript

code

const product = { id: 101, name: "Keyboard", price: 499, available: true };

📝 Exercise 2:

Parse the following JSON string into an object and print the name:

json

code

'{"id": 1, "name": "Gaming Mouse"}'

📝 Exercise 3:

Fetch post data from https://jsonplaceholder.typicode.com/posts and display the first 5 titles on a webpage.

🔍 Common JSON Issues

Issue

Description

Solution

Circular references

JSON.stringify fails on circular objects

Use a library like flatted

Inconsistent data format

API returns inconsistent structures

Validate and normalize the data

Deep nesting

Makes data access complex

Use optional chaining (?.) in modern JS

Big data

JSON can become large and slow to parse/render

Use pagination, lazy loading, or server-side filtering

🛠️ Extension: Filter and Search Data

Objective:

Add a search input to filter user data from an API by name.

HTML:

html

code

<input type="text" id="search" placeholder="Search by name" /> <table id="userTable" border="1"> <tr><th>Name</th><th>Email</th></tr> </table>

JavaScript:

javascript code

📘 Summary

Topic

Covered

JSON basics

✅

Parsing/Stringifying

✅

Fetching JSON from APIs

✅

Rendering data dynamically

✅

Exercises

✅

Advanced tips and pitfalls

✅

Practice

✅

📚 Further Read

MDN Web Docs - JSON

JSONPlaceholder - Free API for testing

"Learning JavaScript Data Structures and Algorithms" by Loiane Groner

Thursday, June 19, 2025

Javascript Module 12

Javascript Module 12

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 12

Module 12 : Objects and Object Manipulation.

📚 1. Introduction to JavaScript Objects

✅ What is an Object?

An object is a non-primitive data type that allows you to store multiple collections of data using key-value pairs.

javascript

code

const person = { name: "John", age: 30, job: "Developer" };

name, age, job → keys (or properties)

"John", 30, "Developer" → values

✅ Why Use Objects?

To group related data together

To represent entities (like a user, product, or car)

Foundation for object-oriented programming (OOP)

🔨 2. Creating Objects

✅ Object Literals

javascript

code

let car = { brand: "Toyota", model: "Camry", year: 2020 };

✅ Using new Object()

javascript

code

let car = new Object(); car.brand = "Toyota"; car.model = "Camry"; car.year = 2020;

✅ Using Constructor Functions

javascript

code

function Person(name, age) { this.name = name; this.age = age; } let p1 = new Person("Alice", 25);

✅ Using ES6 Classes

javascript

code

class Animal { constructor(type, name) { this.type = type; this.name = name; } } let dog = new Animal("Dog", "Max");

🛠️ 3. Accessing and Manipulating Properties

✅ Accessing Properties

javascript

code

console.log(person.name); // Dot notation console.log(person["age"]); // Bracket notation

Use bracket notation when property names are dynamic or not valid identifiers (like first-name).

✅ Adding/Modifying Properties

javascript

code

person.city = "New York"; // Adding person.age = 31; // Modifying

✅ Deleting Properties

javascript

code

delete person.job;

🔁 4. Looping Through Objects

✅ Using for...in

javascript

code

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

✅ Using Object.keys(), Object.values(), Object.entries()

javascript

code

Object.keys(person); // ["name", "age", "city"] Object.values(person); // ["John", 31, "New York"] Object.entries(person); // [["name", "John"], ["age", 31], ["city", "New York"]]

🧩 5. Nested Objects and Access

javascript

code

const user = { id: 101, name: "Emma", address: { city: "Paris", postal: 75001 } }; console.log(user.address.city); // Paris

📦 6. Object Methods (Functions inside Objects)

javascript code

const student = { name: "Liam", greet: function () { console.log(`Hello, my name is ${this.name}`); } }; student.greet(); // Hello, my name is Liam

this refers to the object that calls the method.

📌 7. Object

javascript

code

const product = { name: "Laptop", price: 1200, brand: "Dell" }; const { name, price } = product; console.log(name); // Laptop

🔍 8. Advanced Object Manipulation

✅ Spread Operator (...)

javascript

code

const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 }

✅ Object.freeze() and Object.seal()

javascript

code

const frozen = Object.freeze({ x: 1 }); // frozen.x = 2; // Not allowed const sealed = Object.seal({ y: 2 }); sealed.y = 3; // Allowed delete sealed.y; // Not allowed

🧠 9. Exercises with Explanations

🔸 Exercise 1: Create a student object with name, age, and a method to return a greeting

javascript

code

const student = { name: "Sara", age: 22, greet: function() { return `Hi, I’m ${this.name} and I’m ${this.age} years old.`; } }; console.log(student.greet());

✅ Explanation: Demonstrates object creation, property access, and method definition.

🔸 Exercise 2: Write a function that receives an object and prints its keys and values.

javascript

code

function printObjectDetails(obj) { for (let key in obj) { console.log(`${key}: ${obj[key]}`); } } printObjectDetails({ a: 10, b: 20 });

🔸 Exercise 3: Merge two objects using spread operator

javascript

code

let a = { x: 1 }; let b = { y: 2 }; let merged = { ...a, ...b }; console.log(merged); // { x: 1, y: 2 }

🔬 10. Insights

Why use objects in real apps?

Backend APIs return JSON objects

Objects represent complex entities (user, transaction, etc.)

Used in state management (e.g., React useState)

Performance:

Accessing object properties is fast (O(1))

Deep cloning large nested objects is expensive — avoid unnecessary deep copies

Modern Patterns:

Use object destructuring to reduce code repetition

Use Object.fromEntries() and Object.entries() to convert between arrays and objects

🧑‍🏫 Tips

Start with analogies: E.g., a person object with name, age, etc.

Use diagrams: Draw how keys and values connect

Code live: through modifying objects in the console

Prompt questions:

What happens when you access a non-existing property?

How can you dynamically create property names?

🔧 Create an object book with title, author, and year. Add a method summary() that returns a string like:

"Title" by Author (Year)

Then:

Update the year

Add a new property publisher

Print all keys and values

✅ Summary

Concept

Method / Syntax

Create Object

{} or new Object()

Access Property

obj.key / obj["key"]

Modify Property

obj.key = value

Delete Property

delete obj.key

Loop Through Object

for...in, Object.keys()

Clone/Merge Object

...spread, Object.assign()

Protect Object

Object.freeze(), Object.seal()

📘 Further Reading

MDN Web Docs - Working with Objects

"You Don’t Know JS" Book Series – Kyle Simpson

Wednesday, June 18, 2025

Javascript Module 11

Javascript Module 11

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 11

Module 11 : Arrays and Array Methods

1. Introduction to Arrays in JavaScript

Definition:

An Array is a special variable that can hold more than one value at a time. It is one of the most essential data structures in JavaScript and is used to store a list of elements (numbers, strings, objects, etc.).

Syntax:

javascript

code

let fruits = ["Apple", "Banana", "Cherry"];

Key Characteristics:

Arrays are zero-indexed (the first element is at index 0).

Arrays can store multiple types of data.

Arrays are mutable, meaning you can change their contents.

2. Creating Arrays

Using Array Literals:

javascript

code

let colors = ["Red", "Green", "Blue"];

Using the Array Constructor:

javascript

code

let scores = new Array(100, 90, 80);

Note: Prefer using array literals for readability and simplicity.

3. Accessing and Modifying Elements

Accessing:

javascript

code

let fruits = ["Apple", "Banana", "Cherry"]; console.log(fruits[0]); // Apple

Modifying:

javascript

code

fruits[1] = "Mango"; console.log(fruits); // ["Apple", "Mango", "Cherry"]

4. Common Array Properties

Property

Description

Example

length

Returns the number of items

fruits.length → 3

5. Essential Array Methods with Examples

1. push()

Adds elements to the end of an array.

javascript

code

let nums = [1, 2]; nums.push(3); // [1, 2, 3]

2. pop()

Removes the last element.

javascript

code

nums.pop(); // [1, 2]

3. unshift()

Adds elements to the beginning.

javascript

code

nums.unshift(0); // [0, 1, 2]

4. shift()

Removes the first element.

javascript

code

nums.shift(); // [1, 2]

5. indexOf()

Returns the first index of a specified value.

javascript

code

nums.indexOf(2); // 1

6. includes()

Checks if an element exists.

javascript

code

nums.includes(2); // true

7. slice()

Extracts a section of an array.

javascript

code

let colors = ["red", "green", "blue", "yellow"]; let part = colors.slice(1, 3); // ["green", "blue"]

8. splice()

Adds/removes elements at a specific index.

javascript

code

colors.splice(2, 1, "purple"); // Removes 1 at index 2, adds "purple"

9. forEach()

Executes a function for each item.

javascript

code

colors.forEach(color => console.log(color));

10. map()

Creates a new array by applying a function to each item.

javascript

code

let numbers = [1, 2, 3]; let squared = numbers.map(n => n * n); // [1, 4, 9]

11. filter()

Creates a new array with elements that pass a condition.

javascript

code

let even = numbers.filter(n => n % 2 === 0); // [2]

12. reduce()

Reduces the array to a single value.

javascript

code

let total = numbers.reduce((sum, n) => sum + n, 0); // 6

6. Advanced Usage & Examples

Example 1: Removing Duplicates

javascript

code

let items = [1, 2, 2, 3, 4, 4]; let uniqueItems = [...new Set(items)]; console.log(uniqueItems); // [1, 2, 3, 4]

Example 2: Capitalizing Array of Strings

javascript

code

let names = ["alice", "bob"]; let capNames = names.map(name => name.charAt(0).toUpperCase() + name.slice(1));

7. Movie Rating Manager

Objective:

To use various array methods to manage a movie rating system.

Instructions:

Create an array movies with objects containing title, genre, and rating.

Filter out movies with rating < 8.

Create a new array of movie titles only.

Add a new movie.

Remove a movie by title.

Display all movies in formatted strings.

Code Implementation:

javascript

code

Expected Output:

yaml

code

Inception (Sci-Fi) - Rating: 9

Joker (Drama) - Rating: 8.5

Tenet (Action) - Rating: 8

8. Exercises

Exercise 1:

Write a function that returns the sum of all even numbers in an array.

Hint: Use filter() and reduce().

Exercise 2:

Create a function that accepts an array of strings and returns a new array with strings reversed.

Hint: Use map() and split().reverse().join().

Exercise 3:

Sort an array of numbers in descending order.

9. The Performance of Array Methods

Brief:

When dealing with large data sets, array methods like map, filter, and reduce may introduce performance overhead compared to traditional for loops.

Activity:

Measure the execution time of filtering an array of 1 million elements using filter() vs. for loop.

Analyze and compare performance.

javascript

code

let largeArray = Array.from({ length: 1000000 }, (_, i) => i); console.time("filter"); let evens = largeArray.filter(n => n % 2 === 0); console.timeEnd("filter"); console.time("for loop"); let evens2 = []; for (let i = 0; i < largeArray.length; i++) { if (largeArray[i] % 2 === 0) evens2.push(largeArray[i]); } console.timeEnd("for loop");

Expected Result: The for loop is usually faster, especially for large arrays.

10. Summary

Arrays are fundamental to organizing and manipulating collections of data in JavaScript.

Understanding both basic and advanced array methods is crucial.

Each method has a specific use case and improves code readability and efficiency.

Hands-on practice and performance profiling are essential to master their usage.