DEV Community: sagar

querySelector vs querySelectorAll in javascript

sagar — Wed, 16 Oct 2024 18:17:31 +0000

querySelector vs querySelectorAll both are used select and manupulate DOM elements but they have some different behavior

1.querySelector
Returns the first matching element in the DOM that satisfies the CSS selector. If no match is found, it returns null.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelector("a")
console.log(link); // <a href="/html/">HTML</a>

</script>

</body>
</html>

in the above code example we can see inside script tag i have selected a tag and we are getting only first one matching element not all.

2.querySelectorAll
Returns all matching elements as a NodeList, which is a collection of elements. If no match is found, it returns an empty NodeList.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelectorAll("a")
console.log(link); // // [object NodeList] (4) [<a/>,<a/>,<a/>,<a/>]

</script>

</body>
</html>

in the above code example we can see inside script tag i have selected a tag and we are getting all matching elements as a NodeList.

Best Way to add Javascript file in HTML

sagar — Wed, 09 Oct 2024 10:49:51 +0000

In HTML, there are several ways to include a JavaScript file. I'll explain four different methods, their drawbacks, and finally, highlight the best approach.

1.<script src="custom.js"></script> in <head>

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js"></script>
</head>
<body>

</body>
</html>

In this approach while parsing code, javascript file loaded first before html inside body and If the JavaScript tries to manipulate elements in the body that haven’t been parsed yet, it can lead to errors, as the HTML content hasn’t fully loaded.

This blocking behavior delays the parsing and rendering of the rest of the page, affecting performance and user experience.

2.<script src="custom.js"></script> in <body> (at the end)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <script src="custom.js"></script>
</body>
</html>

In this approach, the HTML is fully parsed before the JavaScript is loaded and executed, preventing errors related to missing DOM elements. This approach is all good but since HTML parsing and JavaScript loading happen sequentially, it can take longer duration overall, as the two processes occur at different times

3.<script src="custom.js" async></script> in <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" async></script>
</head>
<body>
</body>
</html>

In this approach, we make the JavaScript asynchronous, so it doesn’t block the HTML from loading. Both HTML parsing and JavaScript loading happen in parallel. However, if the JavaScript executes before the HTML is fully parsed and js tries to manipulate html elements that haven’t loaded yet, it can cause errors.
Note: — this approach can save the time but by loading html ,js simultaneously but more vulnerable to error

4.<script src="custom.js" defer></script> in <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" defer></script>
</head>
<body>

</body>
</html>

This approach is similar to the third one, where both HTML parsing and JavaScript loading happen in parallel. However, even if the JavaScript loads first, the browser waits until the HTML is fully parsed before executing the script

Summary: Best Approach

The best way is usually to use:

<script src="custom.js" defer></script>
Why:

It doesn’t block the HTML parsing (non-blocking download).
It ensures the script runs after the DOM is fully parsed, making it safer for manipulating DOM elements.
It preserves script execution order if you have multiple deferred scripts.

In cases where the script is independent of DOM content (like tracking scripts or ads), you can use async for better performance.

let, const , var difference in Javascript?

sagar — Tue, 13 Aug 2024 09:13:14 +0000

In JavaScript, let, const, and var are used to declare variables, but they are different in three ways:

1. Scope
2. Reassignment
3. Hoisting

1.Scope:

var is a functional scope means we access var variable anywhere within the function if we try access it outside function it will show error undefined
Example:-


function demo(){
  if(true){
    var n = 3;
  }
  console.log(n)
}
console.log(n) //ReferenceError: n is not defined
demo();

let & const are block means we can access them within the scope only otherwise it will show undefined error
Example:-

function demo(){
  if(true){
    let n = 3;
    const m = 5;
     console.log(n) // 3
     console.log(m) // 5
  }
  console.log(n) //ReferenceError: n is not defined
  console.log(m) //ReferenceError: n is not defined
}
console.log(n) //ReferenceError: n is not defined
console.log(m) //ReferenceError: n is not defined
demo();

2.Reassignment

var: Can be reassigned and redeclared within its scope.
let: Can be reassigned but not redeclared within its scope.
const: Cannot be reassigned or redeclared. The variable itself is immutable, though objects and arrays assigned to const can still be modified .

3.Hoisting

var is hoisted, meaning it's accessible before its declaration, but its value will be undefined until the code reaches the line where the variable is initialized.
let is also hoisted, but unlike var, it cannot be accessed before its declaration due to the "temporal dead zone."
Variables declared with const are also hoisted but must be initialized at the time of declaration and cannot be reassigned. However, if the variable is an object or array, its contents can be modified (e.g., adding or removing items from an array).

// var example
console.log(a); // undefined (due to hoisting)
var a = 10;
console.log(a); // 10

// let example
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

// const example
const c = 30;
c = 40; // TypeError: Assignment to constant variable

forEach vs map method javascript

sagar — Mon, 12 Aug 2024 08:55:58 +0000

forEach and map method both use to iterate over arrays , but they serve different purposes and have distinct behaviors.

1.forEach method

The forEach method is used for iterating through each element of an array. It doesn’t create a new array; instead, it directly modifies the elements of the existing array.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

forEach used when your purpose is to iterate over each element of array without needing to create new array.

2. map method

map method on other hand also used for iterating through each element of an array but it can return new modified array without changing the original array

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

map method used when your purpose is to return new modified array

In summary:

Use forEach when you want to iterate through an array and perform side effects or actions on each element without creating a new array.
Use map when you want to iterate through an array, transform its elements using a function, and create a new array with the transformed values.

Note:- Remember that both methods iterate over each element in the array, so the provided function will be executed for each element. The main difference lies in the purpose and outcome of using each method.

What are AEM Components?

sagar — Mon, 12 Aug 2024 06:26:04 +0000

AEM components are the modular units which realize specific functionality to present your content on your website.

Think of AEM components like building blocks for a website. Each component is a little piece of the website that does something specific, like showing text, an image, a button, or even more complex things like a slideshow or a contact form.

Components are the Basic building blocks of the AEM website. They can be easily dragged and dropped to the pages
Components are the reusable modules that implements specific application logic to render the content of our website
Collection of scripts
Modular and Re-usable unit

Web content management(WCM) have two components:

Core Components
Foundation Components

Core Components: Modern, flexible, and customizable components provided by Adobe for creating rich web content in AEM. Recommended for new projects.
Foundation Components: Older, less flexible components that are still available for legacy support. Less recommended for new projects but useful for maintaining older sites.

4 ways to iterate over “objects” in javascript

sagar — Sun, 14 Jul 2024 07:35:16 +0000

In javascript object contain the key value pair properties and iterating over object is different from arrays . Objects can be iterated using for...in loops and Object.keys(), Object.values(), and Object.entries(). Let’s see how you can use each method:

1. using for...in method

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
 for(let key in persons){
     console.log(`${person[key]} : ${key}`)
}
   //output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'

2.Using Object.keys(): method

object.keys() is a javascript method which take object as argument and return array of keys

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);
console.log(Object_keys)// [ 'name', 'age', 'occupation']```

we can use object.keys() to iterate over object



const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);

//here first i have used Object_keys array which i got from Object.keys(person);
for(let i = 0 ; i<Object_keys.length;i++){
  console.log(`${Object_keys[i]} : ${person[Object_keys[i]]}`);
}

//here i have used Object_keys array which i got from Object.keys(person);
for(let keys of Object_keys){
  console.log(`${keys} : ${person[keys]}`);
}

// here i have just directly use object.key() method
for(let keys of Object.keys(person)){
  console.log(`${keys}: ${person[keys]}`);
}

// all three ways will give same output
name : John
age : 30
occupation : Engineer

3.Using Object.entries():

Object.entries() is a javascript method which take object as argument and return 2d array of key value pair



const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

const Object_keyValue = Object.entries(person);

//output
// [ [ 'name', 'John' ], [ 'age', 30 ], [ 'occupation', 'Engineer' ] ]

we can use Object.entries() to iterate over object



const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

for (const [key, value] of Object.entries(person)) {
  console.log(`${key} : ${value}`);
}

//output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'

4. Using Object.values():

Object.values() returns an array of an object's own enumerable property values. This can be useful if you're only interested in the values and not the keys.



const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

const values = Object.values(myObject);

for (const value of values) {
  console.log(value);
}

Hoisting in javascript ?

sagar — Sat, 13 Jul 2024 06:45:46 +0000

“Hoisting is behavior in javascript where all the variable and function declaration moved to the top of the containing scope during compilation phase before code execution”

You may came across this definition everywhere but “it is a myth that all the variable and function declaration physically top of the code ” This is not true!

But instead , In hoisting all the variable and function declaration already get assigned memory before code execution in the compilation and stay exactly where we typed them.

So exactly how var/let/const and functions are hoisted.

Here are some examples:

console.log(a) // undefined
console.log(b) // ReferenceError
console.log(c) // ReferenceError

var a = 10;
let b = 20;
const c = 30;

Variable declared with var will be hoisted and during compilation time var variable assigned in memory with value undefined that why when we console var before declaration we get undefined

Variable declared with const/let will also hoisted but not initialized with undefined . we can not access them before declaration , otherwise we receive a ReferenceError. This is because of Temporal Dead Zone, a time where variable exist but not initialized .

But what about function

Well it depends how we declare our functions. See below.

greet1();
greet2();
greet3();
greet4();

//function declaration is full hoisted
function greet1(){
    console.log("greet1");
}

// TypeError: greet2 is not a function
var greet2 = function(){
    console.log("greet2");
}

 // ReferenceError: Cannot access 'greet3' before initialization
let greet3 = function(){
    console.log("greet2");
}

// ReferenceError: Cannot access 'greet4' before initialization
const greet4 = function(){
    console.log("greet2");
}

Traditional function declaration is fully hoisted means we can call it throughout the code.

but with function expression , we are unable to it before it has been declared . This is why three function declared with variables gives us an error. So we have two option either we change the function expression to function declaration or call the function after declarations.

“==” and “===” difference in javascript

sagar — Sun, 30 Jun 2024 16:38:52 +0000

In javascript both “==” and “===” used for comparison but they have purposes and behaviors

== (Double equal)

:
The == operator is used for loose equality comparison . When we compare with == it will only compare values not the data type means if we compare string of “5” and integer 5 the result will be true

console.log(5=="5") //  true
console.log(5==5) //  true

2. === (triple equal):

The === operator is used for strict equality comparison. As we studied == only compare values not data type but === compare both values and datatype means if we compare string of “5” and integer 5 the result will be false both values and data type must same

console.log(5=="5") //  false
console.log(5==5) //  true

Common JavaScript "event Handler" Mistake

sagar — Tue, 25 Jun 2024 14:32:34 +0000

When i was dealing javacript click event i was doing this mistake see the blow javascript & jquery code snippet

javascript code example

let name = 'herry';

document.getElementbByClassName('demo').addEventListener('click',function(){
  name = "joy";
})

console.log(name) // herry

jquery code example

let name = 'herry';

$('.demo').on('click',function(){
  name = "joy";
})

console.log(name) // herry

Both javascript & jquery code are same

Mistake i was doing

I was trying to update and access it ‘name’ variable after click event triggered as you can see in the above code
when console.log(name) outside the click variable name printed as herry but it was supposed to be as joy

Why name Doesn't Update Immediately

The behavior of the click event is asynchronous due to this behavior the code lines executed as

let name = ‘herry’;
console.log(name);
$(‘.demo’).on(‘click’,function(){ name = “joy”; })

Order of Execution: JavaScript executes the code sequentially from top to bottom. When console.log(a); is executed, the click event hasn't happened yet, so name is still 'herry'.
Asynchronous Event Handling: The click event handler is an asynchronous operation. It only runs when the user clicks on the element with class .demo. Until the click event happens, the code inside the event handler does not run.

If you want to see the updated value of a after the click event, you should log a inside the click handler:

let name = 'herry';

$('.demo').on('click',function(){
  name = "joy";
 console.log(name) // joy
})

another way

let name = 'herry';

$('.demo').on('click',function(){
  name = "joy";
  UpdateValue(name);
})
function UpdateValue(name){
  console.log(name) // joy
}

What is Adobe Experience Manager(AEM) & it's Features

sagar — Fri, 21 Jun 2024 17:24:56 +0000

Adobe experience manager(AEM) is a content management systems(CMS)
for building website , mobile aaps , forms . It enables organizations to create, manage, and deliver digital experiences across various channels, ensuring consistency and relevance.

Key features

*Content Management *: AEM Provides powerful tools for creating , editing and managing web content. It allows content authors to build and update websites with a WYSIWYG editor, without needing extensive technical knowledge.

Digital Asset Management(DAM): AEM include DAM system for managing rich media like images , videos , documents.

Multi-site Management: AEM support managing multiple websites from a single platform. It allows for content reuse, localization, and regionalization, making it easier to maintain consistency across global sites.

Responsive Design: AEM provides tools for creating responsive and adaptive designs, ensuring that websites look and function well on various devices and screen sizes.

Forms and Documents: AEM Forms enables the creation and management of forms and documents, supporting use cases like applications, surveys, and customer correspondence.

Commerce Integration: AEM integrates with e-commerce platforms to deliver personalized and consistent shopping experiences across all digital touchpoints.

Extensibility: AEM is highly extensible, allowing developers to create custom components, templates, and services. It supports integration with third-party systems through APIs and connectors.

Use Cases for AEM

Corporate Websites: AEM is used to build and manage large corporate websites that require frequent updates, localization, and integration with marketing tools.

E-commerce: Online retailers use AEM to deliver personalized shopping experiences, integrate with back-end systems, and manage digital assets.

Government Portals: Government agencies use AEM for managing large volumes of content, ensuring accessibility, and delivering services to citizens.

Media and Entertainment: Media companies use AEM to manage digital assets, streamline content workflows, and deliver engaging multimedia experiences.

Financial Services: Banks and financial institutions use AEM to create secure, compliant, and personalized digital experiences for customers.

What is CMS (Content Management System)?

sagar — Fri, 21 Jun 2024 08:07:19 +0000

A content management system (CMS) is a software application used to create , manage and publish digital content . It is typically used for websites and can be used to manage a wide variety of content, including text, images, videos, and audio.

CMS's come in many different forms, from open-source platforms like WordPress, Drupal, and Joomla, to proprietary systems like Adobe Experience Manager and Sitecore. Some CMSs are geared towards specific industries or use cases, such as e-commerce, while others are more general-purpose.

The Importance of CMS

A Content Management System (CMS) significantly streamlines and accelerates the process of website creation. Without a CMS, developers must manually write and manage extensive HTML, CSS, and JavaScript code. In contrast, a CMS provides built-in components such as responsive headers, text sections, images, and footers, which can be easily added through a simple drag-and-drop interface. This not only eliminates the need for extensive coding but also empowers individuals with minimal or no technical expertise to create, edit, and publish websites efficiently.

One of the main advantages of using a CMS is that it allows non-technical users to create and manage content without needing to know how to code. This means that content can be updated quickly and easily, without the need for a developer to make changes. Additionally, CMSs often include built-in SEO features to help content rank better in search engine results.

CMSs also provide various ways to customize the design and functionality of the website, by using template, theme, plugin, and customizing the code, it also allows for easy integration with other tools like analytics, CRM, and marketing automation platforms.

> In summary, A CMS is a powerful tool for creating and managing digital content, and it can be used to improve the efficiency and effectiveness of website content creation and publishing.

Clousers in Javascript?

sagar — Fri, 21 Jun 2024 06:49:15 +0000

What is a closure?

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables

“A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function.”
_

function outer() {
  var count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

var counter = outer();

counter(); // 1
counter(); // 2
counter(); // 3

In the above code

The inner function will have access to the variables in the outer function scope, even after the outer function has returned.

even after outer function done executing the inner function can have access to outer function variable means when we return inner function the inner function return with its surrounding variable and this is called closures.