Now you can provide your feedback to our articles!

How to use modules in Javascript

Last updated : Sep 12, 2021

How to use modules in Javascript



In this article you will get to know about the modules in Javascript

Javascript was programmed in 90s for providing basic dynamism to a wesbite for eg. wishing users in noon, evening or morning, form validation at client side and many other ways for making website interactive.

Javascript was just a normal scripting language which was used at a very minimal side. But with introduction of new standards by ECMA and Nodejs, Javascript has become the center point for the web development.

So now many large scale apps are also written in Javascript which needs repairs, maintainence and debugging time to time. For these tasks large scripts have to be separated in different files with code related to specific object or action. For eg. files we have in any framework are models, controllers, database, views etc.

In Javascript these separated files are called modules.

Enough of theory, it's time to implement these modules practically.

First of all let's see some ways in which modules can be scripted.

  • Expression style object.

    var Calculator = function(n1, n2){
        this.num1 = parseInt(n1);
        this.num2 = parseInt(n2);
    }
    
    Calculator.prototype.add = function(){
        return this.num1 + this.num2;
    }
    export default Calculator;
  • Function style object.

    function Calculator(n1,n2){
        this.num1 = parseInt(n1);
        this.num2 = parseInt(n2);
    }
    Calculator.add = function(){
        return this.num1 + this.num2;
    }
    export default Calculator;
  • Now very easy way for OOP programmer who have a habit of programming in C++ or Java.

    class Calculator {
        constructor(n1,n2){
            this.num1 = parseInt(n1);
            this.num2 = parseInt(n2);
        }
        
        add(){
            return this.num1 + this.num2;
        }
    }
    export default Calculator;

Let's create a basic calculator app through module in Javascript. While using a module in ES Javascript, always use it as a server most probably on a localhost. It will never run locally through a file in browser, it will always give a CORS error. Create a folder in server (if using XAMPP create your project directory in htdocs and in WAMP create your project drectory in www. Name it as app1.

  • Create a file named index.html for design and script it as follows:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Using module in JS</title>
        <style>
            input[type=text]{
                padding:5px;
                width:200px;
                font-size:20px;
            }
            .btn{
                width:100px;
                padding:10px;
                font-size:20px;
                font-weight: bold;
                background-color: orange;
                border:none;
            }
        </style>
    </head>
    <body>
        <div>
            <label>Enter num 1</label><br/>
            <input type="text" id="number_field_1" />
            
            <br/><br/>
    
            <label>Enter num 2</label><br/>
            <input type="text" id="number_field_2" />
            
            <br/><br/>
    
            <label>Answer</label><br/>
            <input type="text" readonly id="ans_field" />
            
            <br/><br/>
    
            <input type="submit" class="btn" value="+" id="add_btn" />
            <input type="submit" class="btn" value="-" id="sub_btn" />
            <input type="submit" class="btn" value="*" id="mul_btn" />
            <input type="submit" class="btn" value="/" id="div_btn" />
            <input type="submit" class="btn" value="Power" id="power_btn" />
        </div>
    
    
        <script type="module">
            import Calc from './modules/calc_module.js';
    
            var add_btn = document.getElementById('add_btn');
            add_btn.addEventListener('click',function(){
                var n1 = document.getElementById('number_field_1').value;
                var n2 = document.getElementById('number_field_2').value;
                var calc_tool = new Calc(n1,n2);
                document.getElementById('ans_field').value = calc_tool.add(); 
            });
    
            var div_btn = document.getElementById('div_btn');
            div_btn.addEventListener('click',function(){
                var n1 = document.getElementById('number_field_1').value;
                var n2 = document.getElementById('number_field_2').value;
                var calc_tool = new Calc(n1,n2);
                document.getElementById('ans_field').value = calc_tool.divide(); 
            });
    
            var sub_btn = document.getElementById('sub_btn');
            sub_btn.addEventListener('click',function(){
                var n1 = document.getElementById('number_field_1').value;
                var n2 = document.getElementById('number_field_2').value;
                var calc_tool = new Calc(n1,n2);
                document.getElementById('ans_field').value = calc_tool.subtract(); 
            });
    
            var mul_btn = document.getElementById('mul_btn');
            mul_btn.addEventListener('click',function(){
                var n1 = document.getElementById('number_field_1').value;
                var n2 = document.getElementById('number_field_2').value;
                var calc_tool = new Calc(n1,n2);
                document.getElementById('ans_field').value = calc_tool.multiply(); 
            });
            
            var power_btn = document.getElementById('power_btn');
            power_btn.addEventListener('click',function(){
                var n1 = document.getElementById('number_field_1').value;
                var n2 = document.getElementById('number_field_2').value;
                var calc_tool = new Calc(n1,n2);
                document.getElementById('ans_field').value = calc_tool.power(); 
            });
        </script>
    </body>
    </html>
  • Now create a directory named modules and on this directory create a file named calc_module.js and script it as follows:

    export default class Calc {
        constructor(n1,n2){
            this.num1 = parseInt(n1);
            this.num2 = parseInt(n2);
        }    
        add = function(){
            return this.num1 + this.num2;
        }
        subtract = function(){
            return this.num1 - this.num2;
        }
        multiply = function(){
            return this.num1 * this.num2;
        }
        divide = function(){
            if(this.num2 === 0){
                return "Cannot divide";
            }
            else{
                return this.num1 / this.num2;
            }
        }
        power = function(){
            var final_ans = 1;
            for(var i=1;i<=this.num2;i++){
                final_ans *= (this.num1);  
            }
            return final_ans;
        }
    }

Now you can test newly created app at http://localhost/app1 Done.



Setup react and express on sam...

Read more

How neurons in brain function

Read more

How to create custom router in...

Read more

Run C++ as CGI script in web b...

Read more

Real time chat application usi...

Read more

How to setup lemp stack in ubu...

Read more

How to secure phpmyadmin in Ub...

Read more

How to create real time notifi...

Read more

How to create simple api in no...

Read more

Task scheduling with cron job ...

Read more

Create a multi language(lingua...

Read more

Create food ordering app - Foo...

Read more

Linear Regression in machine l...

Read more

Create simple web application ...

Read more

Why algorithms can drive the i...

Read more

Why Javascript frameworks are ...

Read more

Create authenticated API in La...

Read more

Create simple and static websi...

Read more

Setup Pusher app

Read more

Laravel Installation and setti...

Read more

Realtime chat application in L...

Read more

Working of neurons (the easy w...

Read more

Progressive web app

Read more

Sign in for comment. Sign in