Author: Saim Khalid

  • Linked List

    Linked List is an ordered collection of data elements. In linked list the data will be represented in Nodes. Node has two parts, the first part will be holding the data of the element and second part of the node (pointer) will store the address of the very next node. In linked list elements are stored in a sequential manner.

    Node: This represents each element in the linked list. It consists of 2 parts, data and next.

    Head: The reference to the first element is called a head.

    Next: This is the pointer that points to the next node in the linked list.

    Linked List

    Types of Linked List

    There are three types of linked list:

    • Singly Linked List: In this type of linked list, each node in the list is connected only to the next node in the list.
    • Doubly Linked List: In this type of linked list, each node in the list is connected to the next and the previous node.
    • Circular Linked List: In this type of linked list, the last node is connected to the first node.

    Implementations of Linked List

    Defining node class and liked list class, this is basically the prerequisite in order to implement a linked list in JavaScript. In this step, 2 classes namely one for the nodes and the other for the linked list need to be created.

    The Node class represents a single node in the linked list. It has two properties which are data and next. The data property is used to store the actual data of the node, whereas the next property is a reference to the next node in the list. The Node class consists of a constructor that initializes the data and next property when creating a new Node.

    classNode{constructor(data){this.data = data;this.next =null;}}

    The LinkedList class is a representation of the linked list itself. It has a head property that refers to the first node in the list. The LinkedList class also has a constructor that initializes the head property when creating a new LinkedList.

    classLinkedList{constructor(){this.head =null;this.tail =null;this.length =0;}}

    The LinkedList class also consists of a method that allows you to insert, delete, and search for nodes in the list while simultaneously allowing other operations like printing the list, counting the elements, reversing the list and so on.

    Inserting a Node

    To insert a node in the linked list, we need to create a new node first and need to assign the data to it. Then we need to check if the head is null, if it is null then we need to assign the new node to the head. If the head is not null, then we need to traverse the list till the last node and assign the new node to the next of the last node.

    insert(data){let node =newNode(data);if(!this.head){this.head = node;this.tail =this.head;}else{this.tail.next = node;this.tail = node;}this.length++;returnthis;}

    Searching a Node

    If there is a need to search a element in the linked list we can simply traverse the linked list and check if current node data is equal to the data we are searching for. If we find the data we are searching for, we can return the node.

    search(data){let current =this.head;while(current){if(current.data === data){return current;}
    
      current = current.next;}returnnull;}</pre>

    Deleting a Node

    If we want to delete a node from the linked list, let's say you have node prev and node current and you want to delete the node current . You can simply assign the next of the prev to the next of the current and the node current will be deleted.

    delete(data){if(!this.head)returnnull;if(this.head.data === data){this.head =this.head.next;this.length--;returnthis;}let current =this.head;let prev =null;while(current){if(current.data === data){
    
         prev.next = current.next;this.length--;returnthis;}
      prev = current;
      current = current.next;}returnnull;}</pre>

    Printing the Linked List

    You can print the elements of a linked list by traversing through the list and printing the data of each node.

    print(){let current =this.head;while(current){
    
      console.log(current.data);
      current = current.next;}}</pre>

    Code Example

    Following is an example of a linked list implementation in JavaScript.

    <!DOCTYPE html><head><title>Linked List</title></head><body><p id ="demo"></p><script>classNode{constructor(data){this.data = data;this.next =null;}}classLinkedList{constructor(){this.head =null;this.tail =null;this.length =0;}insert(data){let node =newNode(data);if(!this.head){this.head = node;this.tail =this.head;}else{this.tail.next = node;this.tail = node;}this.length++;returnthis;}search(data){let current =this.head;while(current){if(current.data === data){return current;}
    
         current = current.next;}returnnull;}delete(data){if(!this.head)returnnull;if(this.head.data === data){this.head =this.head.next;this.length--;returnthis;}let current =this.head;let previous =null;while(current){if(current.data === data){
            previous.next = current.next;this.length--;returnthis;}
         previous = current;
         current = current.next;}returnnull;}print(){let current =this.head;let output ="";while(current){
          output += current.data +" ";
          current = current.next;}
      document.getElementById("demo").innerHTML = output;}}let list =newLinkedList();
    list.insert(1); list.insert(2); list.insert(3); list.insert(4); list.insert(5); list.print();</script></body></html>

    Output

    Following is the output of the above code.

    1 2 3 4 5
    

    In the above example, we have created a linked list with elements 1, 2, 3, 4, and 5. We have inserted these elements into the linked list and printed the list.

  • Lazy Loading

    In JavaScript, there is way to make website faster. Means, we can only load what we need first like images, videos,etc. The file or data which is not needed at the moment that can be loaded later when it needed this is called lazy loading.

    For example, When you open the Instagram app, It only loads the images and videos you are able to see on current screen frame. But when you scroll down, you will see more images and videos are loading. Instagram uses lazy loading for making better user experience and faster loading of the app.

    Why do we need Lazy Loading

    Following are the uses of lazy loading:

    • Lazy loading is useful when you have a lot of images and files on your website.
    • Lazy loading is also useful for improving the performance of the website.
    • Lazy loading is also used for improving the user experience.
    • Lazy loading is also used for reducing the loading time of the website.

    Example of Lazy Loading

    Following is the code snippet for lazy loading in JavaScript:

    const images = document.querySelectorAll("[data-src]");functionpreloadImage(img){const src = img.getAttribute("data-src");if(!src){return;}
       img.src = src;
       img.removeAttribute("data-src");}const imgOptions ={
       threshold:0,
       rootMargin:"0px 0px 300px 0px"};const imgObserver =newIntersectionObserver((entries, imgObserver)=>{
       entries.forEach(entry=>{if(!entry.isIntersecting){return;}else{preloadImage(entry.target);
    
         imgObserver.unobserve(entry.target);}});}, imgOptions);
    images.forEach(image=>{
    imgObserver.observe(image);});</pre>

    This code snippet is all about making images load when they are in the viewport. It finds images with the attribute data-src (it is like a placeholder) and it sets up a "watcher" for each image.

    The watcher(IntersectionObserver) will check if the image is in the viewport and if it found that it is, it will load the actual image and remove the data-src attribute. Then it will stop watching that image so it doesn't laod again. This way page dosen't load everything at once.

  • Insertion Sort Algorithm

    The Insertion Sort is a sorting algorithm that works very similar to the way we sort the playing cards when we play. The arrangement of elements in a sorted manner is done through insertion sort.

    In this algorithm, the array will be divided virtually into two parts which are sorted and unsorted parts. The values present in unsorted part will be picked and placed at the correct position where it satisfies the sorting order.

    The Insertion sort is simple algorithm having simple implementation. Generally, this algorithm is efficient for smart data values. This is suitable for data sets which are already partly sorted.

    How Insertion Sort Works?

    Consider an array having some elements in it in a random order which are not sorted. Here we can sort the elements by performing insertion sort. So, Lets check the scenario below.

    Input: [24, 22, 26, 10, 12]; 
    Output: [10, 12, 22, 24, 26];
    

    To know how the insertion sort is working, lets assume an array arr=[24, 22, 26, 10, 12].

    Insertion Sort Algorithm

    First Pass

    • At first in insertion sort, the initial two elements in the array are compared first.
    • 22 is less than 24 here, thus they are not in ascending order and 24 is not in a correct position. So swap 22 and 24. And for now 24 is stored in a sub array.
    Insertion Sort Algorithm

    Second Pass

    • Now, compare the next two elements in the array.
    Insertion Sort Algorithm
    • Here, both the elements 24 and 26 are in ascending order as 26 is greater than 24. Thus no swapping will be occurred.
    • 24 is also stored in the sub array along with 22.

    Third Pass

    • Present there are two elements 22 and 24 are in sub-array.
    • Now compare the next two elements 10 and 26.
    Insertion Sort Algorithm
    • As 10 is smaller than 26, Swap both the values.
    Insertion Sort Algorithm
    • Even after swapping 10 and 24 are sorted, thus swap again.
    Insertion Sort Algorithm
    • Again 10 and 22 are not sorted, so swap again.
    Insertion Sort Algorithm
    • Now, 10 is at correct position.

    Fourth Pass

    • Currently, the elements in the sorted sub array are 10, 22 and 24.
    • Comparing the next two elements 26 and 12.
    Insertion Sort Algorithm
    • As they are not sorted, swap both the values.
    Insertion Sort Algorithm
    • Now, 12 is smaller than 24. Thus swap them.
    Insertion Sort Algorithm
    • Here 12 is smaller than 22 and they are not sorted, so swap them.
    Insertion Sort Algorithm
    • Now, 12 is at correct position and the array is perfectly sorted.

    Alogrithm

    To sort an array sized n in ascending order using insertion sort algorithm.

    • If it is the first element, it is already sorted. return 1;
    • Pick next element
    • Compare with all elements in the sorted sub-list
    • Shift all the elements in the sorted sub-list that is greater than the value to be sorted
    • Insert the value
    • Repeat until list is sorted

    Insertion Sort Implementation

    Following is an example of insertion sort

    <!DOCTYPE html><html><head><title>Insertion Sort Algorithm</title></head><body><p id ="demo"></p><script>functioninsertionSort(arr){let n = arr.length;for(let i =1; i < n; i++){let current = arr[i];let j = i-1;while((j >-1)&&(current < arr[j])){
    
                  arr[j+1]= arr[j];
                  j--;}
               arr[j+1]= current;}return arr;}let arr =[24,22,26,10,12];
         document.getElementById("demo").innerHTML =insertionSort(arr);&lt;/script&gt;&lt;/body&gt;</pre>

    Output

    Lets see the output of the above code snippet.

    [10, 12, 22, 24, 26]
  • HTTP Requests

    Http is a protocol, stands for hypertext transfer protocol. The http requests are used to communicate with web servers. It allow us to send requests to a server and get responses. These can be used to fetch data, submit forms, upload file and more.

    HTTP Methods

    These are the most commonly used HTTP methods:

    • GET:This method is used to get information from a server that we need. We can think of it like asking for a piece of information without sending anything extra to server.
    • POST:This method is used to send data to a server which stores that data. Usually when submitting a form, we store information onto the server.
    • PUT: This is method is used for updating the data which is already available onto the server. For example, in the code Snippet, you filled the form with incorrect information and have to make it correct.
    • DELETE: This method is used to delete something that you don’t need anymore, you can delete that from server.
    • PATCH: This method helps while updating partial information. In the code snippet, if you made typos in forms, you can update them with PATCH.

    Ways to Make HTTP Requests in JavaScript

    There are ways to make http requests in javascript those are below:

    • Using XMLHttpRequest (XHR)
    • Using Fetch API

    Using XMLHttpRequest (XHR)

    XMLHttpRequest is an old built-in browser object that help us to make http requests in javascript. It is used to get data from the server and send data to the server.

    Code Snippet

    Below code snippet shows you how we can make request using XMLHttpRequest

    // Create a new XMLHttpRequest objectvar xhr =newXMLHttpRequest();// Configure it: GET-request for the URL /article/.../load
    xhr.open('GET','/article/.../load',true);// Send the request over the network
    xhr.send();

    This is how we can make a very simple GET request using XMLHttpRequest. We can also make POST, PUT, DELETE requests using the same XMLHttpRequest.

    Using Fetch API

    The Fetch API is a new modern way to make a http requests in JavaScript. It helps us to grab data from the server, and send data to the server. It is built-in the browsers, which means that you would not need any extra libraries to use it.

    Code Snippet

    Below code snippet shows you how we can make request using Fetch API

    // Make a requestfetch('/article/.../load').then(response=> response.json()).then(data=>alert(data.title)).catch(error=>alert(error));

    This is how we can make a simple and easy GET request using Fetch API. We can also make POST, PUT, DELETE requests using Fetch API as well.

    Conclusion

    HTTP requests are mostly used to communicate with web servers. We do have several methods to make request. We can use these requests to fetch data, submit forms, upload files and many more. There are two ways to make http requests in javascript, those are using XMLHttpRequest and Fetch API.

  • Generate Colors

    Generating colors are quite handy while working on web development projects. For beautiful UI, we need to use different colors. In this chapter, we will learn how to generate colors in JavaScript.

    Generating Random Hex Color

    The Hex (Hexadecimal) code is a six-digit code and a three-byte hexadecimal number that is used to represent the colors.

    These three bytes represent RGB which means the amount of red, green, and blue in a particular shade of a color. Each byte will represent a number in the range 00 to FF (Hexadecimal notation) or 0 to 255 in decimal notation. This indicates the intensity of each of the color components from 0 to 255.

    The following are the functions to be used for generating random hex codes

    Math.random()

    This function is used to get the number randomly in the range 0 to less than 1 including the decimal.

    functionrandom_num(maximum){return Math.floor(Math.random()* maximum);}
    document.write(random_num(5));// output: 0, 1 or 2

    In the above snippet, we gave input as 5 as maximum value. Whenever we try to execute the program, it will print the output in between 0 to 4.

    document.write(random_num());// output: 0 to 1

    In this case, as we didnt have any input value as the maximum value, it prints a random number between 0 to 1 whenever we run the program. So, this is how the Math.random() function works.

    Math.floor()

    This is a function that will round off the number downwards to the nearest integer.

    document.write(Math.floor(1.95));// output: 1

    Here, we can see the output is printed as 5. So, the value is rounded downwards to the nearest integer.

    document.write(Math.floor(1));// output: 1

    If the value passed is a perfect integer without any floating (decimal) points, it will be rounded off.

    Now, lets combine these functions to generate the random hex numbers.

    We use math.random() to generate a random number and multiply it with 16777215 as this number is the decimal representation of fffff (Highest in the hex code).

    Math.random()*16777215
    

    This will return a random number like 12421420.464841081 with decimals, Now we use math.floor() to remove the decimals and return a whole number.

    Math.floor(Math.random()*16777215)
    

    Now, we include toString() method to convert the number into a string. We have passed 16 as a parameter because Base 16 is hexadecimal. The value of 16 will return hex-code (with numbers and letters).

    Math.floor(Math.random()*16777215).toString(16);
    

    Example

    Now, its time to generate the random hex color code. We will use the above code snippet to generate the random hex color code.

    <!DOCTYPE html><html><title>Generating random hex color</title><head><h3><div id="demo">Mouse-over on this box to getnewrandom color</div><p id="color"></p></h3><style>
    
      body {
         height:100vh;
         padding:1rem;
         display: grid;
         place-items: center;
         font-family: verdana;}
      h3 {
         background: white;
         padding:1rem 1rem;
         text-align: center;
         border-radius:5px 20px 5px;}
      p {
         display: block;
         padding:1px;
         font-size:20px;
         font-weight: lighter;
         font-family: verdana;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;functionhex(){const RanHexColor ='#'+ Math.floor(Math.random()*16777215).toString(16);
         document.body.style.backgroundColor = RanHexColor;
         color.innerHTML = RanHexColor;}
      demo.addEventListener("mouseover", hex);hex();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    In the output, whenever you mouse over the box which is in middle it will generate the random hex colors on the background.

    Generating random RGB color

    For generating random RGB color in JavaScript, we use same trick as we used for hex color. We will generate random numbers for red, green, and blue and then combine them to get the RGB color.

    Example

    Below is the code snippet for generating random RGB color:

    <!DOCTYPE html><html><title>Generating random RGB color</title><head><h3><div id="demo">Mouse-over on this box to getnewrandom color</div><p id="color"></p></h3><style>
    
      body {
         height:100vh;
         padding:1rem;
         display: grid;
         place-items: center;
         font-family: verdana;}
      h3 {
         background: white;
         padding:1rem 1rem;
         text-align: center;
         border-radius:5px 20px 5px;}
      p {
         display: block;
         padding:1px;
         font-size:20px;
         font-weight: lighter;
         font-family: verdana;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;functionrgb(){const RanRGBColor ='rgb('+ Math.floor(Math.random()*256)+','+ Math.floor(Math.random()*256)+','+ Math.floor(Math.random()*256)+')';
         document.body.style.backgroundColor = RanRGBColor;
         color.innerHTML = RanRGBColor;}
      demo.addEventListener("mouseover", rgb);rgb();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Output

    In the output, whenever you mouse over the box which is in middle it will generate the random RGB colors on the background.

  • Filter Method

    JavaScript – Filter Method

    In JavaScript, the filter() method is used to create a new array with elements that pass a certain condition. It takes a callback function as its argument which is executed for each and every element in the array. If the callback function returns true, the element is added to the new array or else it is filtered out.

    This method does not change or modify the original array. Also, it does not execute the callback function for empty elements.

    Syntax

    Following is the syntax of JavaScript Array.filter() method −

    array.filter(callback(element, index, array), thisArg)

    Parameters

    This method accepts two parameters. The same is described below −

    • thisArg (optional) It specifies a value passed to the function to be used as its this value.
    • callback This is a callback function that will be called once for each element in the array. It further takes three arguments:
    • element:The current element being processed in the array.
    • index: The index of the current element being processed.
    • array: The array of the current element.

    Return Value

    This method returns a new array containing the elements for which the callback function returned true.

    Example

    In the following example, the provided callback function checks each element in the numbers array and returns a new array, “result”, containing all the elements that are greater than 30.

    <html><body><script>const numbers =[10,20,30,40,50];const result = numbers.filter(function(number){return number >30;});
    
         document.write(result);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Output

    Following is the output of the above program.

    40,50
    

    Filter method on Typed Arrays

    Typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data.We can use filter() method on typed arrays as well.

    Example

    If all elements in the typed array pass the callbackFn test, a new typed array is returned that contains only those elements that pass the test.

    In the following example, we use the JavaScript TypedArray filter() method to filter out all the odd elements from the given typed array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]. We create a function named isOdd() that checks for odd values, and passes it as an argument to the filter() method.

    <html><head><title>JavaScript TypedArray filter() Method</title></head><body><script>functionisOdd(element, index, array){return element %2!=0;}const T_array =newInt8Array([1,2,3,4,5,6,7,8,9,10]);
    
      document.write("The typedArray elements are: ", T_array);//create new empty typed arraylet odd_t_array =([]);//using filer() method
      odd_t_array = T_array.filter(isOdd);
      document.write("&lt;br&gt;New typed array(containing only odd elements): ", odd_t_array);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Output

    Following is the output of the above program.

    The typedArray elements are: 1,2,3,4,5,6,7,8,9,10
    New typed array(containing only odd elements): 1,3,5,7,9
    

    Filter method on Map

    We can use filter() method on Map as well. Everything is similar to normal array, means we can filter out elements in same way as we do with arrays.

    Example

    If all elements in the map pass the callbackFn test, a new map is returned that contains only those elements that pass the test.

    In the following example, we use the JavaScript Map filter() method to filter out all the elements from the given map that are greater than 30. We create a function named isGreater() that checks for values greater than 30, and passes it as an argument to the filter() method.

    <html><head><title>JavaScript Map filter() Method</title></head><body><script>functionisGreater(value, key, map){return value >30;}const map =newMap([[1,10],[2,20],[3,30],[4,40],[5,50]]);
       document.write("The map elements are: ");for(let[key, value]of map){
    
      document.write(key +" =&gt; "+ value +",");}//create new empty maplet new_map =newMap();//using filer() method
    new_map =newMap([...map].filter(([key, value])=>isGreater(value, key, map))); document.write("<br>New map(containing only elements greater than 30): ");for(let[key, value]of new_map){
      document.write(key +" =&gt; "+ value +",");}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    Output

    Following is the output of the above program.

    The map elements are: 1 => 10,2 => 20,3 => 30,4 => 40,5 => 50
    New map(containing only elements greater than 30): 4 => 40,5 => 50
  • Date Validation

    In JavaScript, we can validate the date. A date should be in a particular format or it should be in a particular range and should be valid.

    Why we validate a date ?

    Lets understand why we need to validate the date in JavaScript by example. Suppose, you have developed an application that takes some information in the submission form from the user. Users can make a mistake. What if they enter the wrong date in the input box? In such a case, developers need to validate the date.

    Here, we have three different ways to validate the date in JavaScript.

    • Using getTime() method
    • Using the isFinite() Method
    • Using Moment.js isValid() method
    • Check the Date Format using Regular Expression

    Using getTime() method

    In JavaScript, we can create the new date by creating the object of the Date() class. We can apply different methods of Date class to the date object. We will use the getTime() method of date class in this approach to validate the date.

    We will check for the type of the variable. If the variables are of Date object type, we will check whether the getTime() method for the date variable returns a number or not. The getTime() method returns the total number of milliseconds since 1, Jan 1970. If it doesnt return the number, it means the date is not valid.

    Syntax

    Users can follow the below syntax to validate the date using the getTime() method.

    if(Object.prototype.toString.call(date)==="[object Date]"){if(!isNaN(date.getTime())){// date is valid}else{//Date is not valid}}else{// date is not valid}

    Parameters

    Users can follow the below parameters to validate the date using the getTime() method.

    • date:It is a date variable and always required.

    Example

    In the below example, we have created one valid and another invalid date. We have created the isValid() function to validate the date. In the function, we are checking whether the object type is a Date or not. Also, we are checking whether the getTime() method returns a number or not using the isNaN() method.

    <html><head></head><body><h2> check whether a JavaScript date is valid.</h2><h4> Validate the date object using <i>getTime()</i> method.</h4><p id ="validate"></p><script>let validate = document.getElementById("validate");functionisValid(date){if(Object.prototype.toString.call(date)==="[object Date]"){if(!isNaN(date.getTime())){
    
         validate.innerHTML += date +" is valid. &lt;br/&gt; ";}else{
         validate.innerHTML += date +" is not valid. &lt;br/&gt; ";}}else{
      validate.innerHTML += date +" is not valid. &lt;br/&gt; ";}}let date =newDate("No date");isValid(date);
    date =newDate();isValid(date);</script></body></html>

    Using the isFinite() Method

    In JavaScript, the instanceof operator allows us to check whether the variable is an instance of the Date() class or not. We will check for that first, and if it is, we will check if the getTime() method returns the finite number of milliseconds.

    If the date variable is not the Date object type or the getTime() method returns a different value rather than a number, it returns false.

    Syntax

    Users can follow the below syntax to validate date using the isFinite() method

    if( date instanceofDate&&isFinite(date)){// date is valid}else{// date is not valid}

    Example

    In the following example, we have used the instanceof operator to check weather the type of variable is date or not in the if-else condition. Also, we have used the isFinite() method to check the number of milliseconds is finite. We have tested for various dates, and users can see the result in the output of the below example.

    <html><head></head><body><h2> check whether a JavaScript date is valid.</h2><h4> Validate the date object using <i>isFinite()</i> method.</h4><p id ="validate"></p><script>let validate = document.getElementById("validate");functionisValid(date){if( date instanceofDate&&isFinite(date)){
    
      validate.innerHTML += date +" is valid. &lt;br/&gt; ";}else{
      validate.innerHTML += date +" is not valid. &lt;br/&gt; ";}}let date =newDate("No date");isValid(date);
    date =newDate();isValid(date);</script></body></html>

    Check the Date Format using Regular Expression

    In JavaScript, we can validate the date format using the regular expression. We can check whether the date is in the format of YYYY-MM-DD or not. We can use the test() method of the regular expression to check the date format.

    Syntax

    Users can use the below syntax to validate the date format using the regular expression.

    let date ="2022-07-32";let reg =/^\d{4}-\d{2}-\d{2}$/;let valid = reg.test(date);

    Example

    In the following example, we have created the regular expression to check the date format. We have created the two dates, one is in the correct format, and another is in the wrong format. We are using the test() method of the regular expression to validate the date format.

    <html><head></head><body><h2> check whether a JavaScript date is valid.</h2><h4> Validate the date object using <i>Regular Expression </i> method.</h4><p id ="validate"></p><script>let validate = document.getElementById("validate");let date ="2022-07-32";let reg =/^\d{4}-\d{2}-\d{2}$/;let valid = reg.test(date);if(valid){
       validate.innerHTML += date +" is valid. <br/> ";}else{
       validate.innerHTML += date +" is not valid. <br/> ";}
    date ="2022-07-31";
    valid = reg.test(date);if(valid){
       validate.innerHTML += date +" is valid. <br/> ";}else{
       validate.innerHTML += date +" is not valid. <br/> ";}</script></body></html>

    Conclusion

    In this tutorial, we have learned how to validate the date in JavaScript. We have used different methods to validate the date. We have used the getTime() method, isFinite() method, Moment Js isValid() method, and regular expression to validate the date. We have also seen the example of each method to validate the date.

  • Current Date/Time

    Date and time are the most common things we often need to use in applications. In javascript, we can use Date object to get the current date and time.

    To solve all the problems, we will just create an object of date class and will use its various methods to get the current date and time.

    • Date object
    • toLocaleString() method

    Current Date and Time using Date Object

    The Date class contains several methods in which we can fetch the current date, day, and time by. Also, it includes hundreds of different methods that programmers can use according to their requirements.

    Syntax

    Below is the syntax given to get the current date and time using the Date object.

    var date =newDate();

    Using the below syntax users can get the year, month and date.

    var date =newDate();var year = date.getFullYear();var month = date.getMonth();var day = date.getDate();

    Using the below syntax users can get hours, minutes, and second.

    var date =newDate();var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds();

    Example

    Following example explains how to use the above methods to get the date and time from the Date object. Also, we have added +1 to the returned value from the month as it returns values between 0 and 11.

    <html><body>< p id ="demo"></p><script>var date =newDate();var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds();
    document.getElementById('demo').innerHTML ='Current Date and Time: '+ day +'-'+ month +'-'+ year +' '+ hours +':'+ minutes +':'+ seconds;</script></body></html>

    Output

    Following is the output of the above program.

    Current Date and Time: 15-12-2024 12:30:45
    

    In the above output, users can see that we are getting the current date and time according to the local time zone.

    Using toLocaleString() method

    Here, we will use the Date object the same way as the above approach, But now we will use the toLocalString() method. It takes two parameters, one is locale, and another is options.

    Locale means the local zone or region for which you want to take data and options is the object which contains many properties.

    Syntax

    Below is the syntax given to get the current date and time using the toLocaleString() method.

    var date =newDate();var current_date_and_time = date.toLocaleString();var current_time = date.toLocaleTimeString();var current_date = date.toLocaleDateString();

    Users can follow the below syntax, if they want to get date and time for any local region.

    var date =newDate();var current_date_and_time = date.toLocaleString('en-US',{ timeZone:'America/New_York'});var current_time = date.toLocaleTimeString('en-US',{ timeZone:'America/New_York'});var current_date = date.toLocaleDateString('en-US',{ timeZone:'America/New_York'});

    Parameters

    • locale : The local parameter represents the Unicode for the local region. If you want to get the current date and time of India, you should pass en-IN, for the US users can pass the en-US.
    • options : The options parameters includes a lots of properties to format the date and time. For example, in above syntax we have written that return the year and day in the numeric format and return the weekday and month in the long format.

    Example

    The below example demonstrate to use the toLocaleString() method to get the get and time for any specific region.

    <html><body><script>var date =newDate();var current_date_and_time = date.toLocaleString();var current_time = date.toLocaleTimeString();var current_date = date.toLocaleDateString();
    document.write('Current Date and Time: '+ current_date_and_time +'<br>');
    document.write('Current Time: '+ current_time +'<br>');
    document.write('Current Date: '+ current_date +'<br>');</script></body></html>

    Output

    Following is the output of the above program.

    Current Date and Time: 12/15/2024, 12:30:45 PM
    Current Time: 12:30:45 PM
    Current Date: 12/15/2024
    

    In the above output, users can see that we are getting the current date and time according to the local time zone.

    The Date class contains many advanced methods to get the date and time. However, users can get the whole date and time string using the built-in methods.

    Users can get date and time information according to their requirements using various methods of date class. Also, toLocaleString() methods allow you to get regional dates and times. Furthermore, it will enable you to format the date and time according to your need by passing the options object as a parameter.

  • Callback Function

    In JavaScript, functions are considered as objects, which means they can be used just like any other value we pass to the function. So, we can pass them as parameters to other functions just like we do with variables or objects. When you pass a function as a parameter, it will be called or even executed within the other function.

    This makes it really flexible because you can decide later what function should be run. When a function is passed like this and then it gets called inside the other function, its known as a callback function. Its basically a way to control when and how a certain piece of code should run.

    Why do we need Callback Functions?

    • Callback functions are really useful when we have to run certain piece of code after some other function execution or middle of any other function’s working. You can simply run after specific task is done as per your need.
    • They come in handy for handling things that dont happen right away, which takes time like loading data from a server or waiting for user input. In JavaScript, these are called asynchronous operations, and callback functions are often used to manage these asynchronous function.
    • Callback function are also used to handle events. For example, you have a function that should run when a user clicks a button or when a page is loaded. You can pass that function as a callback to the event listener, and it will be executed when the event occurs.
    • Callback allow you to use the same function in different situations. which makes easy to handle various tasks without repeating the same code again and again.

    Example of Callback Function

    Following is an example of callback function in JavaScript. In this example, we are passing a function as a parameter to another function and then calling it after 5 seconds.

    <html><head><script>varcallback=function(myCallback){setTimeout(function(){myCallback();},5000);};
    
         
         document.write("First is displayed");
         document.write("&lt;br&gt;Second is displayed");callback(function(){
            document.write("This is Callback function");});
         document.write("&lt;br&gt;Last is displayed");&lt;/script&gt;&lt;/head&gt;&lt;/html&gt;</pre>

    Output:

    First is displayed
    Second is displayed
    Last is displayed
    

    After 5 seconds, the callback function will be executed and the output will be:

    First is displayed
    Second is displayed
    This is Callback function
    Last is displayed
    

    Callback Function with Parameters

    Following is an example of callback function with parameters in JavaScript. In this example, we are passing a message to the callback function and then displaying it.

    <html><head><script>varcallback=function(myCallback){setTimeout(function(){myCallback("Hello, World!");},5000);};
    
         
         document.write("First is displayed");
         document.write("&lt;br&gt;Second is displayed");callback(function(message){
            document.write("&lt;br&gt;"+ message);});
         document.write("&lt;br&gt;Last is displayed");&lt;/script&gt;&lt;/head&gt;</pre>

    Output

    Following is the output of the above code:

    First is displayed
    Second is displayed
    Last is displayed
    

    After 5 seconds, the callback function will be executed and the output will be:

    First is displayed
    Second is displayed
    Hello, World!
    Last is displayed
    

    What is Callback Hell?

    When you nest too many function inside other functions, The code becomes messy and hard to read and maintain. It happens when you have multiple level of nested callbacks to handle a task one after another this is called as Callback Hell.

    Example of Callback Hell

    Following is an example of callback hell in JavaScript:

    functionstep1(callback){setTimeout(function(){
    
      console.log("Step 1");callback();},1000);}functionstep2(callback){setTimeout(function(){
      console.log("Step 2");callback();},1000);}functionstep3(callback){setTimeout(function(){
      console.log("Step 3");callback();},1000);}step1(function(){step2(function(){step3(function(){
         console.log("Done!");});});});</pre>

    Output

    Following is the output of the above code:

    Step 1
    Step 2
    Step 3
    Done!
  • Base64 Encoding

    Encoding is the process of converting text from one data format to another. In computer science terms,encoding is the process of converting a text into a cipher text. Encoding is different from the Encryption process.

    Base64 encoding is generally used for encoding binary data, such as images, audio, video, etc. It is a group for binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.

    Base64 encoding is used in many applications, such as email via MIME, and storing complex data in XML or JSON.

    String to Base64 Encoding using btoa()

    A string in base-64 is encoded into Base64-encoded ASCII string using the btoa() function. The syntax for btoa() method is

    btoa(string)
    

    Where, the parameter string is the string to be encoded. The return value is an encoded string.

    Example

    This is an example program to encode a string using btoa() method.

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Encoding a string in JavaScript.</title></head><body><p id="encode"></p><script>var str ="Tutorials point";
    document.getElementById('encode').innerHTML ='The encoded string for "Tutorials point" is '+window.btoa(str);</script></body></html>

    Output

    Following is the output of the above program.

    The encoded string for "Tutorials point" is VHJ1c3Rpb25zIHBvaW50
    

    You may get different output as the encoded string is different for different strings.

    Base64 Decoding using atob()

    Decoding is the way which can be used to convert the encoded string back to the original string. atob() is an easy method to decode the Base64 encoded string. The syntax for atob() method is

    atob(encodedString)
    

    Where, the parameter encodedString is to be decoded. The return value is the original string.

    Example

    This is an example program to decode a string using atob() method.

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Decoding a string in JavaScript.</title></head><body><p id="decode"></p><script>var str ="VHV0b3JpYWxzIHBvaW50";
    document.getElementById('decode').innerHTML ='The decoded string for "VHV0b3JpYWxzIHBvaW50" is '+window.atob(str);</script></body></html>

    Output

    Following is the output of the above program.

    The decoded string for "VHV0b3JpYWxzIHBvaW50" is Tutorials point
    

    You may get different output as the decoded string is different for different strings.