Encryption and Decryption Example with Underscorejs _.map() Function

pckurdu(64)

Published in

#utopian-io

Words

825

Reading

4 min

Listen

Play

underscore.fw.png

Repository

What Will I Learn?

You will learn what is the _.map() function and how to use it in underscoreJs.
You will learn how to use the each() function in underscoreJs.
You will learn how to convert a character to ascii codes with javascript.
You will learn what is the charAt() function and how to use it.
You will learn what are the functions charCodeAt() and fromCharCode() do.
You will learn about the empty() and append() functions in jQuery.

Requirements

Atom Editor

Difficulty

Intermediate

Tutorial Contents

We will examine the map() function in the underscorejs library in this tutorial.

First I will explain what map() function does, and then I will make it better understood by making an application that I use map() function.

The map() function is used to convert an array to another array. We rotate through all the elements in an array and we can make changes in each element. An array as well as the Map function can be used within objects.

The common use of the map function is as follows.
_.map(list, iteratee)

Instead of the list parameter, We will use an array. we will use a function to do the operations instead of the iteratee parameter.

Let's take an example like.

We simply multiply all the elements of an array by 1.8. We can use _.map() function to make our operations easier and faster than returning individual elements in an array.

The map function for this example is as follows.

_.map([7,15,89], function(n){
    return n * 1.8; 
    });

new array elements >> [12.6,27,160.2]

When we give an array as return value, we create a new array.

We can now switch to our encryption example.

For this example, I will split the screen in half. I will encrypt the value entered in the input in half, and in the other half I will solve the encrypted value.

For ease of operation I will use the bootstrap and jQuery and I have to put it in the underscorejs library on the html page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

I will design our page.

  <div class="container">
            <div class="jumbotron">
                <p id="result" class="alert alert-info"></p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" id="txtCryptic" class="form-control"/>
                    </div>
                    <input type="submit" id="btnCryptic" class="btn btn-success" value="Hide"/>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" id="txtDecrypted" class="form-control"/>
                    </div>
                    <input type="submit" id="btnDecrypted" class="btn btn-danger"value="Show"/>
                   
                </div>
            </div>
        </div>

When btnCryptic button is clicked, I will encrypt the value in txtCryptic and write it in result.

I will perform the decryption operations as opposed to this process. result I will copy the encrypted value and paste it into txtDecrypted. When btn is clicked on the btnDecrypted, I will write the first value as result code is decrypted.

The image of the display is as follows.

First, let's define the function that is required for UnderscoreJs code to work.

(function(){
// our codes will come here
}());

Now we can encrypt our value by clicking on the green button.

$('#btnCryptic').click(function(){
                    var txtCryptic=$('#txtCryptic').val();
                    var arrayCryptic=new Array();

                    for(i=0;i<txtCryptic.length;i++){
                        arrayCryptic.push(txtCryptic.charAt(i));
                     }

                    var m= _.map(arrayCryptic,function(num){
                        var k=num.charCodeAt(0);
                        var num = String.fromCharCode(k+2);
                        return num;
                        })
                        
                    _.each(m,function(i){
                        $("#result").append(i);
                    })
                    
                })

I will take the value of txtCryptic and transfer each character in it to an array. The charAt() function returns the value of the specified index in a string expression.

I will transfer each character of the value in the input to another array with charAt () function and a loop. I'll put into this array map function that I created.

In the map function I will access the ascii codes of each character. charCodeAt() function, returns the Unicode value of the character at the specified location.

If I get the character of the new value by adding 2 to this ascii code, I get another character. The fromCharCode() method converts Unicode values into characters.

As a result I has changed each character of the value entered in input. Let's print the result to result using append () function and underscore each (). The append function is used to add text to the end of an object.

The process of encrypting pckurdu text according to this algorithm is described below:

Let's write pckurdu and click on the Hide button.

The encrypted code was displayed on the display.

In order to solve a value coded according to this algorithm, subtraction of 2 from the ascii codes is performed. We have to throw away a value in the same way and access the ascii codes of each value.

We get original values by subtracting 2 from the codes.

$('#btnDecrypted').click(function(){
                    var txtDecrypted=$('#txtDecrypted').val();
                    console.log(txtDecrypted)
                    var arrayDecrypted=new Array();

                    for(i=0;i<txtDecrypted.length;i++){
                        arrayDecrypted.push(txtDecrypted.charAt(i));
                     }

                    var n= _.map(arrayDecrypted,function(num){
                        var s=num.charCodeAt(0);
                        var num = String.fromCharCode(s-2);
                        return num;
                        })
                        
                    _.each(n,function(i){
                        $("#result").append(i);
                    })
                    
                })

Let's write the encrypted state of the text pkurdu to input and click on the red button.

So that the value becomes the original.

As a result of this process, we can encrypt and decrypt our texts but since we are using the append() function, the time that we clicked on the button for the second time will be written next to the result text.

If you click on the Show button after the Hide button, the result tag is like the result shown above.

We use jQuery empty () function immediately after clicking on the button to solve this problem. For both buttons.

$('#result').empty();

The empty() method removes all child nodes and content from the selected elements.

Conslusion

With this tutorial you learned how to encrypt and decrypt using underscorejs _.map().
You have seen how _.each() is used as well as the map () function.
You also learned how to perform JavaScript ascii-code translations.
You see how the jQuery append() and empty() functions are used.

Thank you for your interest.