DEV Community: Nazmus Sakib

JavaScript HTML DOM

Nazmus Sakib — Mon, 17 May 2021 15:29:04 +0000

DOM Intro

Browser creates a Document Object Model when a web page be loaded. Using HTML DOM Javascript can access HTML elements.
HTML DOM Property is value of a HTML element & HTML DOM Method is addition or deletion of a HTML element.

Find HTML element using DOM

There are several ways to find a HTML element.
Find an element by element id - document.getElementById(id)
Find elements by tag name - document.getElementsByTagName(name)
Find elements by class name - document.getElementsByClassName(name)

HTML DOM Property

HTML DOM Property can be accessed like this.
Change the inner HTML of an element - element.innerHTML = 'new html content'
Change the attribute value of an HTML element - element.attribute = 'new value'
Change the style of an HTML element - element.style.property = 'new style'
Change the attribute value of an HTML element - element.setAttribute(attribute, value)

HTML DOM Method

There are several DOM Method, like-
Create an HTML element - document.createElement(element)
Remove an HTML element - document.removeChild(element)
Add an HTML element - document.appendChild(element)
Replace an HTML element - document.replaceChild(new, old)

HTML DOM Event

Event can be accessed both using & without using event listener.
Without using event listener - document.getElementById("myBtn").onclick = javascript;
Using event listener - document.getElementById("myBtn").addEventListener("click", javascript);

React.js in Depth

Nazmus Sakib — Mon, 17 May 2021 11:24:47 +0000

React Component

React is basically component based javascript library. Components are different independent and reusable part of UI. Components can be expressed in two way.

Function Component:
function Welcome() { return <h1>Hello, Reactjs</h1>; }

Class Component:
class Welcome extends React.Component { render() { return <h1>Hello, Reactjs</h1>; } }

React State

React components has a built-in state object. Property values of a component are stored in state object. When the state object changes, the component re-renders automatically.
class Car extends React.Component { constructor(props) { super(props); this.state = {brand: "Ford"}; } render() { return ( <div> <h1>My Car</h1> </div> ); } }

React props

In React, props are arguments that can be passed through component to component. So, any object of a component can be used in another.
class Car extends React.Component { render() { return <h2>I am a {this.props.brand.model}!</h2>; } } class Garage extends React.Component { render() { const carinfo = {name: "Ford", model: "Mustang"}; return ( <div> <h1>Who lives in my garage?</h1> <Car brand={carinfo} /> </div> ); } } ReactDOM.render(<Garage />, document.getElementById('root'));

React Hook

If anything might be changed dynamically, then hook is used. Hook connect the change factor with UI. When change factor be changed, it's impact on UI acts automatically.

useState Hook:
import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

useEffect Hook:
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title =You clicked ${count} times; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

React CSS

In React, css can be applied inline or also can be applied as an object.
class MyHeader extends React.Component { render() { const mystyle = { color: "white", backgroundColor: "DodgerBlue", padding: "10px", fontFamily: "Arial" }; return ( <div> <h1 style={mystyle}>Hello Style!</h1> <p>Add a little style!</p> </div> ); } }

JavaScript Advanced: Explained in a Nutshell

Nazmus Sakib — Mon, 17 May 2021 10:41:27 +0000

JS Error

catch block is used to be executed when there is an error inside try block.
const x = 7;

try {
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
console.log(err, 'x is ', x);
}

JS Arrow Function

In JS ES6 a function can be written in a shorter form.
const multiply = (x,y) => return x*y;

JS Classes

A JavaScript class is not an object, rather a template for JavaScript objects.
class Student { constructor(name, roll) { this.name = name; this.roll = roll; } }

JS Callback

Callback is a function which is passed as an argument to a function. And it can be called inside that function in which function it was passed.
`function showResult(value) {
console.log(value);
}

function Summation(num1, num2, callback) {
let sum = num1 + num2;
callback(sum);
}

Summation(5, 5, showResult);`

JS Async Await

async makes a function return a Promise & await makes a function wait for a Promise.
const x= 2; async const multiplication = () => { for(i=1, i<10000000, i++) { x = x*2; } multiplication().then(console.log(x));

JavaScript Fundamentals: Explained in a Nutshell

Nazmus Sakib — Mon, 17 May 2021 10:34:52 +0000

JS Variables

JS variables usually declared by var
var x = 5;
Using ES6 (JS version 2015) variables are declared by let or const
let x = 5; //Can be changed
const y = 10; //Can't be changed

JS Operator

+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement

JS Data Types

JS has basically 4 types of data and more...
var length = 16; // Number
var lastName = "Johnson"; // String
var x = {firstName:"John", lastName:"Doe"}; // Object
var cars = ["Saab", "Volvo", "BMW"]; // Array

JS Condition

To different action based on different condition we need to use conditional statements.
if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }

JS Loop

To execute same code again & again, loops are used.
for (i = 1; i < 6; i++) { console.log("Number: "+i); }