Learn Javascript

This Repository is based on basic javascript concept and its implementation.

Author: Kalpa Behera

Date:03/01/2024

---

If you are feeling generous, buy me a coffee - www.buymeacoffee.com

                OR

[]

• Learn Basic Javascript
• Arithmetic Operation Javascript

---

Java script Roadmap

graph LR;
    A[Variables]
    B[Data Types]
    C[Operators]
    D[DOM]

    A --> B
    B --> C
    C --> D

Loading

---

Contents

1. Variables
2. Data Types
   1. Primitive Data Type
   2. Non Primitive Data Type
3. Operators
   1. Arithmetic Operator
      1. Addition
4. DOM(Document Object Model)
   1. Selecting Element using DOM
      1. getelementsbyid()
      2. getElementsByName

1. Find a bug?

---

Variables

flowchart TD;
    A(Variables)
    B(let)
    C(var)
    D(const)
    
    A --> B 
    A --> C 
    A --> D

Loading

let a = 67
console.log(a);

a = "Mahadev"
console.log(a);

const author = "Shiva"
console.log(author);

Outputs:

• 67
• Mahadev
• Shiva

---

Data types

graph LR;
    A(Data types)
    B(Primitive Data types)
    C(Non primitive Data types)
    D(null)
    E(Integer)
    F(Boolean)
    G(Big Integer)
    H(String)
    I(Symbol)
    J(undefined)
    K(Objects)

    A --> B
    A --> C

    B --> D
    B --> E
    B --> F
    B --> G
    B --> H
    B --> I
    B --> J
    C --> K

Loading

Primitive Data types

let a = null;
let b = 345;
let c = true;
let d = BigInt("345") + BigInt("7");
let e = "Sambhu";
let f = Symbol("Har Har Mahadev");
let g = undefined;

console.log(a, b, c, d, e, f);

console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
console.log(typeof(d));
console.log(typeof(e));
console.log(typeof(f));
console.log(typeof(g));

Output

• null 345 true 352n Sambhu Symbol(Har Har Mahadev)
• object
• number
• boolean
• bigint
• string
• symbol
• undefined

Non Primitive Data types

const item = {
    "Nataraj" : true,
    "Nilakantha" : false,
    "Adiyogi" : 67,
    "Bhairav" : undefined
}

console.log(item.Adiyogi, item.Bhairav, item.Nataraj);

Output

• 67
• undefined
• true

---

Operator

graph LR;
    AA[Arithmetic Operator]
    A[Addition]
    B[Subtraction]
    C[Multiplication]
    D[Division]
    E[Exponential]
    F[Modulo]
    G[Incremental]
    H[Decremental]
    II[Assignment Operator]
    I[Equal]
    J[Plus Equal]
    K[Minus Equal]
    L[Multiplication Equal to]
    M[Division Equal to]
    N[Modulo Equal]
    O[Exponential Equal]
    PP[Comparison Operator]
    P[Equal to]
    Q[Equal value and type]
    R[Not equal value or not equal type]
    S[Greater than]
    T[Less than]
    U[Greater than or equal to]
    V[Less than or equal to]
    W[Ternary Operator]
    XX[Logical Operator]
    X[Logical AND]
    Y[Logical OR]
    Z[Logical NOT]

    Operator[Operator]

    AA --> A
    AA --> B
    AA --> C
    AA --> D
    AA --> E
    AA --> F
    AA --> G
    AA --> H

    II --> I
    II --> J
    II --> K
    II --> L
    II --> M
    II --> N
    II --> O

    PP --> P
    PP --> Q
    PP --> R
    PP --> S
    PP --> T
    PP --> U
    PP --> V
    PP --> W

    XX --> X
    XX --> Y
    XX --> Z

    Operator --> AA
    Operator --> II
    Operator --> PP
    Operator --> XX
    

Loading

Arithmetic Operator

  let Op_a = 43;
  let Op_b = 3; 

Addition(+)

console.log("Addition of two numbers is : ",Op_a + Op_b); 

Output

• Addition of two numbers is : 46

Subtraction(-)

console.log("Subtraction of two numbers is : ",Op_a - Op_b);

Output

• Subtraction of two numbers is : 40

Multiplication(*)

console.log("Multiplication of two numbers is : ",Op_a * Op_b);

Output

• Multiplication of two numbers is : 129

Division(/)

console.log("Division of two numbers is : ",Op_a / Op_b);

Output

• Division of two numbers is : 14.333333333333334

Exponential(**)

console.log("Exponential of two numbers is : ",Op_a ** Op_b);

Output

• Exponential of two numbers is : 79507

Modulo(%)

console.log("Mudulo of two numbers is : ",Op_a % Op_b);

Output

• Mudulo of two numbers is : 1

Incremental(++)

Op_a++;
console.log("Incremental of Op_a ", Op_a);

Output

• Incremental of Op_a 44

Decremental(--)

Op_a--;
console.log("Decremental of Op_a ", Op_a);

Output

• Decremental of Op_a 43

Assignment Operator

Equal(=)

let AOa1 = 5;
console.log(AOa1);

Plus Equal to(+=)

AOa1 += 4;
console.log(AOa1);

Minus Equal to(-=)

AOa1 -= 1;
console.log(AOa1);

Multiplication Equal to(*=)

AOa1 *= 2;
console.log(AOa1);

Division Equal to(/=)

AOa1 /= 2;
console.log(AOa1);

Modulo Equal to(%=)

AOa1 %= 3;
console.log(AOa1);

Exponential Equal to(**=)

AOa1 **= 2;
console.log(AOa1);

Comparision Operator

let Comp1 = 30;
let Comp2 = 40;

Equal to(==)

console.log("Return the value of Comp1 == Comp2: ", Comp1 == Comp2);

Not Equal to(!=)

console.log("Return the value of Comp1 != Comp2: ", Comp1 != Comp2);

Equal value and type(===)

console.log("Return the value of Comp1 === Comp2: ", Comp1 === Comp2);

Not equal value or not equal type(!==)

console.log("Return the value of Comp1 !== Comp2: ", Comp1 !== Comp2);

Greater than(>)

console.log("Return the value of Comp1 > Comp2: ", Comp1 > Comp2);

Less than(<)

console.log("Return the value of Comp1 < Comp2: ", Comp1 < Comp2);

Greater than or equal to(>=)

console.log("Return the value of Comp1 >= Comp2: ", Comp1 >= Comp2);

Less than or equal to(<=)

console.log("Return the value of Comp1 <= Comp2: ", Comp1 <= Comp2);

Ternary Operator(?)

Logical Operator

let LOa1 = 100;
let LOa2 = 200;

Logical AND(&&)

console.log("LOa1 > 20 && LOa2 < 300 :", LOa1 > 20 && LOa2 < 300);

Logical OR(||)

console.log("LOa1 > 20 || LOa2 < 300 :", LOa1 > 20 || LOa2 < 300);

Logical NOT(!)

console.log(!false);
console.log(!true);

---

DOM(Document Object Model)

graph TD;
    A[DOM]
    B[1. Selection of an Element]
    C[2. Changing HTML]
    D[3. Changing CSS]
    E[4. Event Listener]

    A --> B
    A --> C
    A --> D
    A --> E

Loading

1. Selecting Element using DOM

i. getElementsById()

ii. getElementsByName()

iii. getElementsByTagName()

iv. getElementsByClassName()

v. querySelector and querySelectorAll()

2. Traversing Elements

Selecting Parent Element

Selecting child element

Selecting sibling element

3. Manupulating HTML elements

createElement()

appendChild()

textContent()

innerHTML()

after()

append()

prepend()

insertAdjacentHTML()

replaceChild()

cloneNode()

removeChild()

insertBefore()

4. Attribute methods

getAttribute()

setAttribute()

hasAttribute()

removeAttribute()

5. Manipulating Element's styles

style property

cssText

getComputedStyle()

className property

classList property

6. Events

Event Bubbling and & Event Capturing

Event Handler in HTMLAttributes

DOM Level 0 event handlers

addEventListener()

removeEventListener()

event Objects

Different types of Events

gantt 
    title DOM (Document Object Model)
    dateFormat X
    axisFormat %M
    section DOM(Document Object Model)
        Selection of an Element: 10, 15
        Changing HTML: 10, 20
        Changing CSS: 20, 10
        Event Listener: 30, 40

Loading

graph TD;
    A[Window]
    B[Document]
    C[HTML]
    D[Head]
    E[Body]
    F[Title]
    G[Meta]
    H[Text Node]
    I[Attribute]
    J[Div]
    
    L[Attribute]
    M[H1]
    N[p]
    O[Attribute]
    P[Text Node]
    Q[Text Node]


    A --> B
    B --> C
    C --> D
    C --> E
    D --> F
    D --> G
    F --> H
    G --> I
    E --> J
    J --> M
    J --> N
    J --> L
    M --> O
    M --> P
    N --> Q

Loading

Name	E-mail
Kalpa Behera	[email protected]

• Task 1

Details

Details can be seen here

Find a bug?

If you found a issue or would like to submit an improvement to this project, Please submit an issue using issue tab above.

Like this project?

If you are feeling generous, buy me a coffee - www.buymeacoffee.com

gantt
    title Learn Javascript
    dateFormat DD-MM-YYYY
    axisFormat %d
    section Variables
        const    :a1, 03-01-2024, 2d
        let      :a2, after a1, 2d
        var      : after a2, 2d

Loading