JavaScript Basics Part- 3

12 minute read

1 HOW JAVASCRIPT WORKS & DOM

1.1 CREATE SCRIPT TAG AND CONNECT EXTERNAL SCRIPT FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <h1>Hello Javascript</h1>
    <h1>Hello Javascript</h1>
    <h1>Hello Javascript</h1>
    <h1>Hello Javascript</h1>
    <h1>Hello Javascript</h1>

    <!-- Internal JS -->
    <script>
      console.log(45);
      // alert("Hello JavaScript");
    </script>

    <!-- External JS -->
    <script src="scripts/second.js"></script>
    <script src="scripts/first.js"></script>
  </body>
</html>

1.2 HOW JAVASCRIPT RUN AND WHY SCRIPT ORDER IS IMPORTANT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learning Javascript</title>
    <style>
      body {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <h1>Hello Javascript: 1</h1>
    <script src="scripts/first.js"></script>
    <h1>Hello Javascript: 2</h1>
    <script src="scripts/second.js"></script>
    <h1>Hello Javascript: 3</h1>
    <h1>Hello Javascript: 4</h1>

    <!-- Internal JS -->
    <script>
      console.log(45);
      debugger;
      console.log(145);
    </script>
    <h1>Hello Javascript: 5</h1>

    <!-- Output will be based on place of JS orders -->

    <!-- HOW JAVASCRIPT RUN AND WHY SCRIPT ORDER IS IMPORTANT -->
    <!-- JS is High level interpreted language, single threaded, non-blocking -->
  </body>
</html>
// first.js
console.log(81);
debugger;

// second.js
console.log(120);
debugger;

Additional Resources

1.3 WHAT IS DOM (DOCUMENT OBJECT MODEL)

<body>
  <main>
    <section>
      <h3>Exploring DOM</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni voluptate
        vitae animi corrupti ipsa dolorem eum deserunt, in voluptates explicabo
        quaerat amet, tenetur unde. Beatae deleniti eveniet rerum eligendi
        laboriosam?
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, fuga?
      </p>
    </section>
    <!-- Chrome browser ->Console -> type document -->
  </main>

  <script>
    var user = {
      name: 'Jalali Set',
      song: 'Kakatua',
      members: 6,
    };
    // DOM = Document Object Model;
    // console.log(document);
    console.log(document.body);
  </script>
</body>

Additional Resources- 1
Additional Resources- 2 {:target=”_blank”}

1.4 CAPTURE ELEMENTS FROM HTML FILE USING GETELEMENTBYID

<body>
  <main>
    <section>
      <h3>Exploring DOM</h3>
      <p id="first">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni voluptate
        vitae animi corrupti ipsa dolorem eum deserunt, in voluptates explicabo
        quaerat amet, tenetur unde. Beatae deleniti eveniet rerum eligendi
        laboriosam?
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, fuga?
      </p>
    </section>
    <!-- Chrome browser ->Console -> type document -->
  </main>

  <script>
    // document.getElementsByTagName;
    // document.getElementById("first");
    var first = document.getElementById('first');
    first.style.color = 'darkblue';
    first.style.fontSize = '30px';
    first.style.backgroundColor = 'grey';
  </script>
</body>

1.5 HOW TO USE GETELEMENTSBYCLASSNAME AND CHANGE INNERHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore DOM</title>
    <style>
        article {
            border: 2px solid tomato;
            border-radius: 20px;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
  <main>
        <section>
            <h3>Exploring DOM</h3>
            <!-- article*3>h3{article-$}+p.author{author-$}+p.description>lorem30 -->
            <article>
                <h3>article-1</h3>
                <p class="author">author-1</p>
                <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fuga suscipit
                    nulla. Dicta delectus aut minus. Veritatis cumque consectetur perferendis voluptatum ratione dicta
                    nam, perspiciatis distinctio nisi nobis esse doloremque.</p>
            </article>
            <article>
                <h3>article-2</h3>
                <p class="author">author-2</p>
                <p class="description">Architecto illum earum, reprehenderit assumenda minima aliquid dolores, delectus
                    quidem corporis reiciendis quas incidunt nihil possimus unde voluptates laborum tempora. Autem
                    tempora error laborum consequatur atque similique sapiente excepturi voluptates!</p>
            </article>
            <article>
                <h3>article-3</h3>
                <p class="author">author-3</p>
                <p class="description">Quos dolorum, laborum voluptate culpa, natus sequi nesciunt officiis vero tempore
                    magni, exercitationem voluptates consectetur quibusdam doloremque. Laudantium odit at magni vel. Ut
                    nulla reiciendis officia, placeat delectus aut corrupti?</p>
            </article>

    </main>

   <script>
        // document.getElementsByClassName('author');
        var authors = document.getElementsByClassName('author');
        for(var i=0; i<authors.length; i++){
            var element = authors[i];
            // console.log(element);
            console.log(element.innerHTML);
            // element.innerHTML ="Lekhok- " + i;
            element.innerHTML ="Lekhok- " + (i+1);
            element.style.backgroundColor = 'lightblue';
            element.style.margin ='10px';
        }
    </script>
</body>
</html>

1.6 HOW TO USE QUERYSELECTOR AND QUERYSELECTORALL & NODE, NODE TYPE, NODELIST, HTMLCOLLECTION, SETATTRIBUTE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore DOM</title>
    <style>
        article {
            border: 2px solid tomato;
            border-radius: 20px;
            margin: 5px;
            padding: 5px;
        }
        .special h3 {}
    </style>
</head>

<body>
  <main>
        <section>
            <h3>Exploring DOM</h3>
            <!-- article*3>h3{article-$}+p.author{author-$}+p.description>lorem30 -->
            <article>
                <h3>article-1</h3>
                <p title="best seller author" id="best-seller" class="author">author-1</p>
                <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fuga suscipit
                    nulla. Dicta delectus aut minus. Veritatis cumque consectetur perferendis voluptatum ratione dicta
                    nam, perspiciatis distinctio nisi nobis esse doloremque.</p>
            </article>
            <article class="special">
                <h3>article-2</h3>
                <p class="author">author-2</p>
                <p class="description">Architecto illum earum, reprehenderit assumenda minima aliquid dolores, delectus
                    quidem corporis reiciendis quas incidunt nihil possimus unde voluptates laborum tempora. Autem
                    tempora error laborum consequatur atque similique sapiente excepturi voluptates!</p>
            </article>
            <article class="special">
                <h3>article-3</h3>
                <p class="author">author-3</p>
                <p class="description">Quos dolorum, laborum voluptate culpa, natus sequi nesciunt officiis vero tempore
                    magni, exercitationem voluptates consectetur quibusdam doloremque. Laudantium odit at magni vel. Ut
                    nulla reiciendis officia, placeat delectus aut corrupti?</p>
            </article>

    </main>

    <script>
        // HOW TO USE QUERYSELECTOR AND QUERYSELECTORALL
        // document.querySelector('.special h3'); will give only the first matching
        // document.querySelectorAll('.special h3'); will give all matching

        document.body.style.backgroundColor = 'tomato';
        var authors = document.querySelectorAll('.special h3');

        for (var i = 0; i < authors.length; i++) {
            var element = authors[i];
            // console.log(element);
            // console.log(element.innerHTML);
            // element.innerHTML ="Lekhok- " + i;
            element.innerHTML = "Lekhok- " + (i + 1);
            element.style.backgroundColor = 'lightblue';
            element.style.margin = '10px';
            element.setAttribute('title', 'all author are same');
        }

        // document.querySelector('.special h3').style.backgroundColor = 'Tomato';

        // NODE, NODE TYPE, NODELIST, HTMLCOLLECTION, SETATTRIBUTE
        // Node
        // Node List

        document.querySelector('h3').setAttribute('title', "You are the title");
        document.getElementById('best-seller').setAttribute('title', "give me your autograph");
    </script>
</body>
</html>

Additional Resources- 1

1.7 HOW TO ADD ELEMENTS TO HTML USING JAVASCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore DOM</title>
    <style>
        article {
            border: 2px solid tomato;
            border-radius: 20px;
            margin: 5px;
            padding: 5px;
        }
        .special h3 {}
    </style>
</head>
<body>
  <main>
        <section>
            <h3>Exploring DOM</h3>
            <!-- article*3>h3{article-$}+p.author{author-$}+p.description>lorem30 -->
            <article id="first-article">
                <h3>article-1</h3>
                <p title="best seller author" id="best-seller" class="author">author-1</p>
                <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fuga suscipit
                    nulla. Dicta delectus aut minus. Veritatis cumque consectetur perferendis voluptatum ratione dicta
                    nam, perspiciatis distinctio nisi nobis esse doloremque.</p>
            </article>
            <article class="special">
                <h3>article-2</h3>
                <p class="author">author-2</p>
                <p class="description">Architecto illum earum, reprehenderit assumenda minima aliquid dolores, delectus
                    quidem corporis reiciendis quas incidunt nihil possimus unde voluptates laborum tempora. Autem
                    tempora error laborum consequatur atque similique sapiente excepturi voluptates!</p>
            </article>
            <article class="special">
                <h3>article-3</h3>
                <p class="author">author-3</p>
                <p class="description">Quos dolorum, laborum voluptate culpa, natus sequi nesciunt officiis vero tempore
                    magni, exercitationem voluptates consectetur quibusdam doloremque. Laudantium odit at magni vel. Ut
                    nulla reiciendis officia, placeat delectus aut corrupti?</p>
            </article>

            <article>
                <h3>Grocery List</h3>
                <ul id="gift-list">
                    <li>gift item- 1</li>
                    <li>gift item- 2</li>
                    <li>gift item- 3</li>
                    <li>gift item- 4</li>
                    <li>gift item- 5</li>
                </ul>
            </article>

    </main>

    <script>
        const article = document.getElementById('first-article');
        const newParagraph = document.createElement('p');
        newParagraph.innerHTML = 'This is added by JavaScript';
        article.appendChild(newParagraph);

        // add one more gift

        const ul = document.getElementById('gift-list');
        const li = document.createElement('li');
        li.innerHTML = "Brand New Gift";
        ul.appendChild(li);

        // document.getElementById('gift-list').childNodes
        // document.getElementById('gift-list').parentNode
        // document.getElementById('first-article').childNodes
    </script>
</body>
</html>

2 FUNCTION, ADD EVENT LISTENER, EVENT BUBBLE

2.1 WHEN TO USE A FUNCTION, FUNCTION INSIDE AN ARRAY

let nums = [5, 12, 89, 45, 18, 8];

for (let i = 0; i < nums.length; i++) {
  const num = nums[i];
  // console.log(num * 2);
  // odd and even
  if (num % 2 == 0) {
    console.log(num, ': is even number');
  } else {
    // console.log(num, ':is odd number');
    console.log(num * 2, ':is odd number');
  }
}

// New array
let frndAge = [13, 17, 19, 20, 18];

for (let i = 0; i < frndAge.length; i++) {
  const age = frndAge[i];
  // console.log(age);
  if (age % 2 == 0) {
    console.log(age, ': is even number');
  } else {
    console.log(age * 2, ':is odd number');
  }
}

// repeated or duplicated same thing in both calculation

// create function to avoid duplicate code, call function inside
function evenify(num) {
  if (num % 2 == 0) {
    console.log(num, ': is even number');
  } else {
    console.log(num, ':is odd number');
  }
}

// call function inside another function
function evenifyAll(nums) {
  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    evenify(num);
  }
}

// without writing multiple functions
function evenifyAll(nums) {
  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    if (num % 2 == 0) {
      console.log(num, ': is even number');
    } else {
      console.log(num, ':is odd number');
    }
  }
}

// call function inside loop

let nums = [7, 13, 89, 45, 18, 8];

for (let i = 0; i < nums.length; i++) {
  const num = nums[i];
  evenify(num);
}

// call function inside loop
let frndAge = [13, 17, 19, 20, 18];
for (let i = 0; i < frndAge.length; i++) {
  const age = frndAge[i];
  // console.log(age);
  evenify(age);
}

// call the function which created with loop
evenifyAll(frndAge);

2.2 WHEN TO RETURN FROM A FUNCTION AND FROM WHERE

// return in all statement
function evenify(num) {
  if (num % 2 == 0) {
    // console.log(num, ':is even number');
    return num;
  } else {
    // console.log(num, ':is odd number');
    return num * 2;
  }
}

let result = evenify(13);
console.log('result', result);

// return after all statement
function evenify(num) {
  let result;
  if (num % 2 == 0) {
    result = num;
  } else {
    result = num * 2;
  }
  return result;
}

let result2 = evenify(15);
console.log('result', result2);

let square = result2 * result2;
console.log('squre', square);

// array with even number
function evenifyAll(nums) {
  let evenArray = [];
  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];

    let result = evenify(num);
    evenArray.push(result);
  }
  return evenArray;
}

let nums = [3, 6, 18, 19, 20, 21];
let numsEven = evenifyAll(nums);
console.log(numsEven);

2.3 CALLBACK FUNCTION AND PASS DIFFERENT FUNCTION

function explnCallback(name, age, task) {
  console.log('Hello', name);
  console.log('Your age', age);
  // washHand();
  // takeShower();
  // console.log(task);
  task();
}

function washHand() {
  console.log('Wash hand with soap');
}

function takeShower() {
  console.log('Take Shower');
}

function scrollFB() {
  console.log('Scrolling FB');
}
// explnCallback('Robert', 17);
// explnCallback('smith', 13);

explnCallback('Robert', 17, washHand);
/* Hello Robert
  Your age 17
  Wash hand with soap */
explnCallback('smith', 13, takeShower);
/* Hello smith
  Your age 13
  Take Shower */
explnCallback('Jane', 21, scrollFB);
/* Hello Jane
  Your age 21
  Scrolling FB */

2.4 ARGUMENTS AND DEAL WITH UNKNOWN NUMBER OF ARGUMENTS

function addNumber(num1, num2) {
  return num1 + num2;
}

let result = addNumber(3, 5);
console.log(result); // 8

// add more parameter value than specified in function
let result2 = addNumber(3, 5, 7, 15);
console.log(result2); // 8

// read parameter value using arguments, arguments work inside function
function addNumber2(num1, num2) {
  // console.log(arguments);
  console.log(arguments[3]); // 15
  return num1 + num2;
}
let result2 = addNumber2(3, 5, 7, 15);
console.log(result2); // 8

// arguments
function addNumber3(num1, num2) {
  // console.log(arguments[3]);
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    const num = arguments[i];
    console.log(num);
    sum = sum + num;
  }
  // return num1 + num2;
  return sum;
}

let result3 = addNumber3(3, 5, 8, 15, 29);
console.log(result3); // 60

2.5 HOW TO ORGANIZE CODE INSIDE A FUNCTION

function addNumber4(num1, num2) {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    const num = arguments[i];
    console.log(num);
    sum = sum + num;
  }
  logInfo('Good Morning'); /* readability issue */

  // declare function before calling
  function logInfo(msg) {
    console.log(msg);
  }

  // logInfo("Good Morning");

  let double = sum * 2; /* assign variable before using */
  /* if variable use in multiple places declare on top */
  return sum;
}

let result4 = addNumber4(3, 5, 8, 15, 29);
console.log(result4);

2.6 WHAT IS EVENT, DIFFERENT TYPES OF EVENT IN WEB

Resources- 1
Resources- 2
Resources- 3

2.7 ADD EVENT HANDLER DIRECTLY ON AN ELEMENT

<body>
  <h1 onclick="console.log('Hello')">Exploring Event</h1>
  <!-- <button onclick="alert(47)">Click Me</button> -->
  <button onclick="handleClick()">Button-1</button>
  <button onmousemove="mouseMove()">Button-2</button>
  <button onmouseout="mouseOut()">Button-3</button>

  <script src="script.js"></script>
</body>
//script.js
function handleClick() {
  console.log('someone clicked me');
}

function mouseMove() {
  console.log('someone moved over me');
}

function mouseOut() {
  console.log('someone moved out');
}

2.8 ADD EVENT LISTENER USING JAVASCRIPT

<body>
  <button id="primary-btn">Primary Button</button>
  <button id="secondary-btn">Secondary Button</button>
  <button id="third-btn">Third Button</button>
  <button id="fourth-btn">Fourth Button</button>
  <script src="script.js"></script>
</body>
// script.js
// applied function method-1, direct function
let secondaryBtn = document.getElementById('secondary-btn');
secondaryBtn.onclick = function () {
  console.log('You just clicked me');
};

// applied function method-2, create function first
function handleClick2() {
  document.body.style.backgroundColor = 'cyan';
}

let primaryBtn = document.getElementById('primary-btn');
primaryBtn.onclick = handleClick2;

// applied function method-3, event listener
function handleClick3() {
  document.body.style.backgroundColor = 'tomato';
}

let thirdBtn = document.getElementById('third-btn');

thirdBtn.addEventListener('click', handleClick3);

// applied function method-4, event listener
function handleClick4() {
  document.body.style.backgroundColor = 'orange';
}
// const fourthBtn = document.getElementById('fourth-btn').addEventListener('click', handleClick4);
const fourthBtn = document
  .getElementById('fourth-btn')
  .addEventListener('click', function () {
    document.body.style.color = 'tomato';
  });

// function() is called anonymous function

2.9 EVENT BUBBLE WITH EXAMPLE AND STOP PROPAGATING EVENT BUBBLE

<body>
  <!-- EVENT BUBBLE WITH EXAMPLE -->
  <!-- div#container>ul#myList>li.item*5>lorem3 -->
  <div id="container">
    <h1>My List</h1>
    <ul id="myList">
      <li id="first" class="item">Lorem, ipsum dolor.</li>
      <li class="item">Obcaecati, minima mollitia.</li>
      <li class="item">Distinctio, quasi autem?</li>
      <li class="item">Sint, placeat labore.</li>
      <li class="item">Quibusdam, ipsam deserunt!</li>
    </ul>
  </div>
  <script src="script.js"></script>
</body>
// script.js
document.getElementById('first').addEventListener('click', function (event) {
  console.log('First Item Clicked');
  // STOP PROPAGATING EVENT BUBBLE
  // event.stopPropagation();
});
document.getElementById('myList').addEventListener('click', function (event) {
  console.log('ul Clicked');
  event.stopPropagation();
});

document
  .getElementById('container')
  .addEventListener('click', function (event) {
    console.log('Container Clicked');
  });

// stopPropagation
// stopImmediatePropagation

Additional Resources

2.10 EVENT DELEGATE AND PURPOSE OF EVENT BUBBLE

<body>
  <div id="container">
    <h1>My List</h1>
    <ul id="myList">
      <li id="first" class="item">Lorem, ipsum dolor.</li>
      <li class="item">Obcaecati, minima mollitia.</li>
      <li class="item">Distinctio, quasi autem?</li>
      <li class="item">Sint, placeat labore.</li>
      <li class="item">Quibusdam, ipsam deserunt!</li>
    </ul>

    <button id="addNew">Add New</button>
  </div>
  <script src="script.js"></script>
</body>
// script.js
// EVENT DELEGATE AND PURPOSE OF EVENT BUBBLE
// in chrome:
// document.getElementsByClassName('item');

/*
        let items = document.getElementsByClassName('item');
        for (let i = 0; i < items.length; i++) {
            let item = items[i];
            // console.log("item");

            item.addEventListener('click', function (event) {
                // console.log(this);
                // console.log(this, event.target); 
                //access event.target- target the event where clicked
        // console.log(event.target.innerText);
        // console.log(event.target.parentNode); 
        //will give parent 
        event.target.parentNode.removeChild(event.target);
        })
        }
        */

document.getElementById('addNew').addEventListener('click', function (event) {
  let itemsParent = document.getElementById('myList');
  let newItem = document.createElement('li');
  newItem.innerText = 'Brand New Item';
  itemsParent.appendChild(newItem);
});

document.getElementById('myList').addEventListener('click', function (event) {
  // console.log(this, event.target);

  event.target.parentNode.removeChild(event.target);
});

INTEGRATE JAVASCRIPT BONUS CONTENT

3.1 GLOBAL VS LOCAL VARIABLE IIFE FUNCTION EXPRESSION VS DECLARATION

function addToDo() {
  // Local variable, inside function
  const newTaskElement = document.createElement('li');
}

// Global Variable
var name = 'Rashed';

function addUser() {
  var localUser = 'Andy';
  //localUser = "Andy"; global leaking, wrong
  console.log(name);
}

addUser();

console.log(localUser); // will give an error: localUser is not defined

//  IIFE (Immediately Invoked Function Expression)
(function () {
  var localUser = 'Andy';
  console.log(localUser);
})();

// Function Declaration vs Statement
// Example: Function Expression
alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function () {
  return 5;
};

// Example: Function Declaration
alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() {
  return 5;
}

Additional Resources - 1
Additional Resources - 2

3.2 FOUR SITUATION WHEN YOU SHOULD CREATE A FUNCTION

  1. Handle Specific task or situation
  2. Reduce Code Repetition (DRY- Do Not Repeat Yourself)
  3. Specific unit or atomic task
  4. Organize larger code

3.3 WHEN AND HOW TO USE ARGUMENTS IN A FUNCTION

//argument is array like object
function getFullName(firstName, lastName) {
  // console.log(arguments);
  // let fullName = firstName + ' ' + lastName;
  let fullName = '';
  for (let i = 0; i < arguments.length; i++) {
    const namePart = arguments[i];
    fullName = fullName + ' ' + namePart;
  }
  return fullName;
}

let name = getFullName('Hanif', 'Songkhet', 'Poribohon', 'Hasib');
console.log(name);

// convert arguments to a real Array:

let args = Array.from(arguments);
// or
let args = [...arguments];

Additional Resources

3.4 WHEN AND HOW TO USE JAVASCRIPT CALLBACK FUNCTION

function welcomeGuest(name, greetHandler) {
  // console.log(name);
  greetHandler(name);
}

function greetUserMorning(name) {
  console.log('Good Morning', name);
}

function greetUserEvening(name) {
  console.log('Good Evening', name);
}

function greetUserAfternoon(name) {
  console.log('Good Afternoon', name);
}

const actorName = 'Tom Hanks';
welcomeGuest(actorName, greetUserMorning);
welcomeGuest(actorName, greetUserEvening);
welcomeGuest(actorName, greetUserAfternoon);

welcomeGuest('Kate Winslet', greetUserMorning);

welcomeGuest('Shaib Khan', function (name) {
  console.log('Special Welcome to', name);
});

function handleClick() {
  console.log('Someone Clicked Me');
}
document.getElementById('demo').addEventListener('click', handleClick);

Leave a Comment