Forem: Anjal Binayak Adhikari

Javascript 1o1 - Working with DOM - 2

Anjal Binayak Adhikari — Thu, 08 Oct 2020 13:27:06 +0000

This article was originally published on my Hashnode Blog

This article covers

setAttribute , getAttribute & removeAttribute
Changing Style of HTML Element
kebab case, pascal case & camel case
Specific way of adding, removing class to HTML Element

setAttribute

Yes, as the name suggests, this method is used to add attribute HTML element

<button  id='button'>Click </button>

<script>
let button = document.querySelector("#button");
button.setAttribute('title','Button');
</script>

Output:

getAttribute

<button  id='button' title='button'>Click </button>
<script>
let button = document.querySelector("#button");
console.log(button.getAttribute('title')); //prints text "button" in console
</script>

removeAttribute

<button  id='button' title='button'>Click </button>
<script>
let button = document.querySelector("#button");
button.removeAttribute('title');
</script>

Output:

Changing Style of HTML element

Every HTML DOM have a property called style which holds the style of HTML Element

You can change the color of an HTML element by

<div id='content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.style.color="red";
</script>

the style property of HTML is an object which holds all the style values of the element

For instance

<script>

content.style.color; //returns color
content.style.color = "blue"; //sets the color to blue

content.style.position; //returns the position of element
content.style.position = "absolute";// sets the position to absolute

</script>

the style is accessed in the same way we set style using CSS.
But there is a little twist with the style property having two words. for example background-color

For instance

<script>
content.style.background-color = "black"; //not valid

content.style.backgroundColor = "black"; //valid
</script>

Those property containing two words is used in kebab case in CSS but is accessed using camel case in JS.

Camel Case : nameOfPerson

the first letter capital of all words except the first word

Kebab Case : name-of-person

a hyphen - between words

Pascal Case: NameOfPerson

first letter capital of each word

Adding and removing class from HTML element

There is a property called classList in HTML element. which contains the list of class (as the name suggests)

Good thing is that property has two special methods

add

<div id='content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.classList.add("primary-content");
</script>

It adds the class primary-content to the element

remove

<div id='content' class='primary-content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.classList.remove("primary-content");
</script>

It removes the class primary-content from the element.

Note:
Using setAttribute to add class to HTML element is a bad practise.
because it removes all the previous class from the element
For instance

<div class='container' id='content'>This is a container</div>

<script>
let content = document.querySelector('content');
content.setAttribute('class','jumbotron');

now this div has only one class i.e, jumbotron.

Be a good boy and use classList.add to add class and classList.remove to remove the class to remove unnecessary headaches in the future 😂.

Javascript 1o1 - HTMLCollection vs NodeList

Anjal Binayak Adhikari — Sun, 04 Oct 2020 14:43:40 +0000

This article was originally posted on my Hashnode Blog

This article covers

Difference between HTMLCollection and NodeList
item & namedItem method of HTMLCollection
Iterating HTMLCollection.
item, values, keys, entries, forEach method of NodeList

HTMLCollection vs NodeList

HTMLCollection is a Dynamic List of Objects of elements whereas the NodeList is static.

For instance

<p> Hii </p>
<p> What's your name ? </p>
<script>
let dynamicCollection = document.getElementsByTagName('p'); 
//returns HTMLCollection
console.log(dynamicCollection);

let staticCollection = document.querySelectorAll('p');
//returns NodeList
console.log(staticCollection)
</script>

Output

Here Both have two <p> elements in the list.

Now let us create another <p> element with DOM.


let additionalP = document.createElement('p');
additionalP.innerHTML = "Where do you live? ";

document.body.appendChild(additionalP);

Now let us again console.log both variables holding the list of <p> elements.

console.log(dynamicCollection);
console.log(staticCollection)

Output:

Now see here, The HTMLCollection is updated automatically while NodeList stays the same. This is the key difference.

HTMLCollection methods

1. item

You can access the members of HTMLCollection i.e element's object, using the item method. It expects the index of the element as a parameter.

console.log(dynamicCollection.item(0));

output

2. namedItem

namedItem expects a parameter and returns the element having id or name given in the parameter.

For example

<p id='greeting'>Hii </p>
<p> How are you </p>

<script>
let elems = document.getElementsByTagName('p');
console.log(elems.namedItem('greeting'));
<script>

Output

HTMLCollection Iterations

You can iterate through each member of HTMLCollection using for loop.

let elements = document.getElementsByTagName('p');

for(let i = 0; i < elements.length; i++){
console.log(elements[i]);
}

NodeList Methods

1. Item

same as HTMLCollection.

let p = document.querySelectorAll('p');
p.item(0); //returns first member of list 

//alternative
p[0] //same as p.item(0)

2. entries

<p>Hii</p>
<p>What's your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let entry of p.entries()){
    console.log(entry);
}
</script>

Output

entry is an array with [index, element] as shown above

3. keys

<p>Hii</p>
<p>What is your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let key of p.keys()){
    console.log(key);
}
</script>

Output

Here key is just the key of a member of HTMLCollection.

4. values

<p>Hii</p>
<p>What is your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let value of p.values()){
    console.log(value);
}
</script>

Output

Here value is the member of HTMLCollection.

5. forEach

<p>Hii</p>
<script>
let p = document.querySelectorAll('p');

p.forEach(function(value,index,nodeList){
    console.log(value);
    console.log(index);
    console.log(nodeList);
    console.log(this);
},'anythingYouWantToReferAsThisInsideTheLoops');

</script>

Output:

The picture is really worth a thousand words, ain't it?

Hope you got a clear understanding of HTMLCollection and NodeList and their differences. If not, comment your query.

Javascript 1o1 - Working with DOM - 1

Anjal Binayak Adhikari — Sun, 04 Oct 2020 01:25:58 +0000

This article was originally posted in my Hashnode Blog

DOM stands for Document Object Model.
DOM is a standard for accessing documents.

It is a language-neutral platform that allows programs or scripts to change the contents, styles, and structure of documents dynamically.

In this article, we will learn
How we can access the model object of elements in a document.

Through Id

<p id="demo"></p>
<script>

let paragraph = document.getElementById("demo");  
//or
let paragraph = document.querySelector("#demo");


</script>

# is used before the id to denote we are selecting the elements having id while using querySelector

document.getElementById is only dedicated to getting elements having id but document.querySelector & document.querySelectorAll can be used to get elements with different attributes too.

Through Class

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

 let paragraphs = document.getElementsByClassName("para"); //returns HTMLCollection
//or
let paragraphs = document.querySelectorAll('.para'); //returns NodeList

</script>

. is used before the class to denote we are selecting the elements having class while using querySelector or querySelectorAll

Here, I used querySelectorAll instead of querySelector.

This is because querySelectorAll returns all the elements matching the selector specified in the argument. but querySelector returns the only first element in the document matching the selector.

For instance

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

let paragraph = document.querySelector('.para') 
// returns the paragraph with text "First Paragraph"

</script>

Therefore, Only when we are selecting with Id, we use querySelector. Otherwise, we use querySelectorAll.

There is more to it with selecting elements with class

For instance

<p class='block'> This is paragraph </p>
<p class='block'> This is paragraph 2 </p>
<h5 class='block'> This is heading </h5>

<script>
let elems = document.querySelectorAll('p.block');
//returns only paragraph with class 'block'
</script>

Through Tag Name

<p> Hi </p>
<p> How are you ? </p>

<script>
  let elems = document.getElementsByTagName("p"); // returns HTMLCollection 
  //or 
  let elems = document.querySelectorAll("p"); // returns Nodelist
</script>

Not using any notation before the argument denotes selecting elements with tag name in querySelector or querySelectorAll

Through Attribute values

<h1 title='heading'> Working with Dom </h1>

<p title='heading'> Attribute Selector </p>


<script>
  let elems = document.querySelectorAll("h1[title='heading']");
// returns NodeList of h1 elements with title 'heading'


  let elems = document.querySelectorAll("[title='heading']");
// returns NodeList of all elements with title 'headiing'
</script>

Conclusion

You can Select elements using id, classes, tag, or attributes.
. is for class. # is for id and [ attributeName = "value"] is for attributes. They are the selectors for selecting the elements.
querySelectorAll returns the NodeList of elements, getElementsByClassName , getElementsByTagName returns HTMLCollection and getElementById & querySelector returns the element itself.
We can even specify the type of element when using querySelector or querySelectorAll.

You may have noticed. I have mentioned a lot about NodeList and HTMLCollection above in the code. We will be learning about these strangers in the next article.

Javascript 1o1 - Arrow Functions

Anjal Binayak Adhikari — Sat, 03 Oct 2020 14:17:22 +0000

Arrow functions are a cleaner way of writing functions in Javascript.
There are some differences between normal javaScript functions and arrow functions.

this

this keyword in arrow functions refers to the scope where it is defined
For example:

const hello = () => console.log(this);
hello();

Output:

here this refers to the window object, as it is defined in the global scope.

Syntax

A typical arrow function syntax looks like this

identifier functionName = (param1, paramN) => { statements; }

A nice example would be

let hello = (name) => { console.log("Hello" + name ) }

Although it is the way to write an arrow function. It can be made cleaner and readable.

Here are some conditions where arrow functions can be made more beautiful.

Single line Arrow functions

1 . It does not require parenthesis {}

For example, you could write a single arrow function as

let hello = () =>  console.log("Hello" );

2 . It does not require the return keyword

For example

let sum = () => a+b;  //returns a+b

is equivalent to

let sum = () => {return a+b;} //returns a+b

If you use parenthesis in a single statement function then you should write the return keyword explicitly.

let sum = () => { a+b; }  //returns undefined

let sum = () =>  a+b;   //returns a + b

Parameters

1 . No parameters

It is mandatory to provide () even in case of no parameters
Example:

let hello= () => console.log("Hello");

2 . Single Parameters
You don't have to write () if there is only a single parameter.
For example

let hello = name => console.log("Hello " + name);

This single parameter and statement arrow function looks so beautiful 😍👌

3 . Multiple Parameters
You have to use () in case if you have more than 1 parameters
For Example

let hello = (name,caste) => console.log(`Hello ${name} ${caste}`);

Points to be Noted:

this inside arrow function refers to the scope where the function is defined
Arrow function does not require {} if only a single statement.
Single statement Arrow function returns its statement if { } is not used.
return keyword should be used explicitly for the single statement arrow function to return value if { } is used.
Arrow function doesn't require () if only a single parameter.
Stay updated with this series Javascript 1o1 .

Javascript 1o1 - The Script Tag

Anjal Binayak Adhikari — Sat, 03 Oct 2020 14:12:32 +0000

This article was originally posted on my hashnode blog

The <script> tag in the HTML page contains the executable script or the source to the executable script.

We will learn about three attributes in the <script> tag with their meaning and execution behavior.

src 😂
async
defer

Src

<script src="./script.js"></script>

The src attribute contains the link to the external javascript file. It may be your own written code or maybe any library you want to use.

Async

<script async src="./script.js"></script>

The presence of async attributes tells the browser to execute the code when the page is parsing.

For instance, check the example.

index.html

<html>
<head>
    <title>The Script Tag - Javascript 1o1</title>
</head>
<body>

</body>
<script async src="./script.js"></script>
<script>
    console.log("This will be executed first");
</script>
</html>

script.js

console.log("This will be executed second")

This page will create such output

Even though the script.js is fetched first, it will not start executing.
The script.js will start executing parallelly with the parsing of the fetched HTML.

Defer

The defer attribute shows similar behavior as the async attribute. But script tag with defer attribute starts executing the script after completion of parsing the page.

index.html

<html>
<head>
    <title>The Script Tag - Javascript 1o1</title>
</head>
<body>

</body>
<script defer src="./script.js"></script>
<script>
    console.log("This will be executed first");
</script>
</html>

script.js

console.log("This will be executed second")

This page will create such output

Although defer and async usage produced similar output. It may produce an error if not used according to its own requirements.

The external library should never be used with defer attributes as our script may use the API of the external library, it will throw ReferenceError

The defer attributes have no effect on inline scripts. and should only be used when the src attribute is present.

Defer	Async
executes scripts after completion of parsing page	executes scripts parallel with parsing page

If neither defer nor async attribute is present. The script will be fetched and executed immediately.

Dark Theme with One-line code

Anjal Binayak Adhikari — Fri, 07 Aug 2020 09:29:31 +0000

In the present context, Dark Theme is like a vital thing for any website. The first thing I search while visiting the website is the theme toggler. Seriously, it is very uneasy to see the light-themed website now, at least for me.

So recently I implemented Dark Theme in my portfolio site. The funny thing is I didn't have to write the whole another CSS file for a dark theme. So let us begin on how you can implement the dark theme on your website using one line of code.

At first, inside your head tag

insert the following script and link files.

<script src="https://binayak.codes/dark-theme-switcher/app.js"></script>
 <link rel="stylesheet" href="https://binayak.codes/dark-theme-switcher/styles/style.css">

Now place following code after closing the body tag

<script>
window.ThemeSwitcher().Init();
</script>

And that's it, After doing that you will see a moon icon floating in website

After Clicking in that glowy floating icon, your website theme is changed

The best part about this glowy icon is, visitors of your website can customize its location. Its draggable element. And it stores the current location where it is dragged and saves it.

You better use it yourself to see how it works
Demo Of Dark Theme

Github Repo here

Give your judgments!

How to implement backpropagation from scratch in python without any libraries?

Anjal Binayak Adhikari — Thu, 30 Apr 2020 04:29:37 +0000

I am a newbie at deep learning. I came so watching many tutorials, reading some articles on implementing neural networks with hidden layers. But all the tutorials seem to TensorFlow, Pytorch, or something else. I have a concept of SGD,MB SGD, chain rule, linear algebra. I know how to calculate the gradients for the hidden layer and how to update the weights. But I could not be able to implement it in my own code.