Function in Javascript | How to create a Function in Javascript

 JavaScript Functions

What is an JavaScript Function ?

Function is a block of code or we can set that set of instructions that can be pre-defined or User-Defined.

A Function is an callable object. Once it created, then we can easily able to access or call it in program.

It means when the user are created an function in program, they can be easily able to call them and use it in program every where.

By creating a function we can easily able to solve the problem of rewiting the code blocks.

Types of Functions

Pre-defined Functions :

JavaScript has very few no.of predifined Functions.

That are,

1) eval

2) String

3) isNan

4) Number

5) unescape

6) parseInt

7) parseFloat

8) escape

9) taint

10) untaint.

Interinsic Function

1) readOnly

2) disabled

User-defined Functions :

JavaScript also supports user difined Functions.

That are,

1) Function with Aruments or Parameters

2) Function without Arguments or Parameters

1) eval( )

eval( ) Function of JavaScript can Evaluate or Executes the arguments.

Syntax : 

  eval(String)

 var x = 10;
 var y = 20;
 var z = "x + y";
 var result = eval(z);
 document.write("Multiplication of X and Y is : "+result);
 
 // Output : Multiplication of X and Y is : 200

This function can executes the String parameters only.

We cannot able to pass other parameters in eval( ) function, it supports only String Parameters.

2) String

A javascript String can stores a series of characters.

It contains alphanumric series of characters. Like single Character, Words, Sentences, etc.

Syntax : 

 var a = "[Value]";

Example :

 var a = "Hello World !";
 document.write("This Program Says : "+a);

3) isNan

Nan is stands for Not-a-Number

It will shows the given input or value is a Number or Not a Number.

This function will returns true or false when pass a input as String or Integer.

When we creates a variable and passes the value to variable as String, and then uses this function, then it will shows The Passed value to the variable is not a Number.

Example : 

 <script>
  var a = "Hello";
  document.write(isNaN(a));
 </script>

 // It will show the out as true
 // Because Word 'Hello' is Not a Number

When we pass a Integer value in a variable and the passes the variavle in isNaN function then is will shows output as False.

Becasuse we have passed a Number in it, so 'A number is not a Number' is not Possible.

Example : 

 <script>
  var a = 10;
  document.write(isNaN(a));
 </script>

 // It will show the out as true
 // Because we have stored a Number in Variable a

So, this function is basically helps us to know that, the given input value is a Number or Not.

4) Number

This function will converts a value to a Number.

If the value is not be convertable or not be converted, then it will returns NaN

Example :

 <script>
    var a = true;
    var b = false;
    var str = "Ten";

    var A = Number(a);
    var B = Number(b);
    var Str = Number(str)

    document.write("<b>Original values of Variable,<br>A is: "+a+"<br>B is : "+b+"<br>str is : "+str);

    document.write("<br><br>After using the Number() function The Value of Variables Becomes : </b><br>");

    document.write("A : "+A+"<br>B : "+B+"<br>Str : "+Str);
  </script>

 <!-- 

 Output
 Original values of Variable,
 A is: true
 B is : false
 str is : Ten

 After using the Number() function The Value of Variables Becomes :
 A : 1
 B : 0
 Str : NaN

 -->

So, Basically Number( ) function is used to convert any given input values to Numbers if it is covertable.

When it's convertable then it will converts it into Numbers, but when it's not be convertable, then it will returns output as NaN ( Not a Number ).

5) unescape

The unescape() function replaces any escape sequence with the character that it represents.

But currently the unescape() function is deprecated from javascript.

So instead of the unescape( ) function, we can uses decodeURI( ) or encodeURI( ) 

decodeURI( ) function will decodes the URI.

URI : Uniform Resource Identifier, it is a string that refers to a resource.

Example :

 <script>
        let uri = "my test.asp?name=ståle&car=saab";
        let encode = encodeURI(uri)
        let decode = decodeURI(encode);

        document.write("<h3>URI is : </h3>");
        document.write(uri+"<br>");
        document.write("<h3>Output of Encode URI : </h3>");
        document.write(encode+"<br>");
        document.write("<h3>Output of Decode URI : </h3>");
        document.write(decode);
    </script>

    <!-- 
     
    OUTPUT :

    URI is :
    my test.asp?name=stÃĨle&car=saab
    Output of Encode URI :
    my%20test.asp?name=st%C3%83%C4%A8le&car=saab
    Output of Decode URI :
    my test.asp?name=stÃĨle&car=saab 
    
    -->

6) parseInt

The parseInt method parses a value as a string and returns the first integer.

It means it converts any Data Type value to Integer Value or simply Number.

When the character or value is not convertable, then it will returns NaN ( Not a Number )

Example :

    <script>
        var a = "10";
        var b = 10.5;
        var c = "Ten";

        let Number = parseInt(a);
        let Float = parseInt(b);
        let String = parseInt(c);

        document.write("<h3>Actual Values of Variables is ,</h3>");
        document.write("A is : "+a+"<br>");
        document.write("B is : "+b+"<br>");
        document.write("C is : "+c+"<br>");

        document.write("<h3>After Type Casting Values of Variables Becomes ,</h3>");
        document.write("A is : "+Number+"<br>");
        document.write("B is : "+Float+"<br>");
        document.write("C is : "+String+"<br>");
    </script>

    <!-- 
        
    OUTPUT :

    Actual Values of Variables is ,
    A is : 10
    B is : 10.5
    C is : Ten
    After Type Casting Values of Variables Becomes ,
    A is : 10
    B is : 10
    C is : NaN

    -->

7) parseFloat

As similar as parseInt( ) function, parseFloat( ) function will parses a value as a string and returns the first number.

It means it converts any Data Type value to IFloat Value or simply Floating Point Number.

When the character or value is not convertable, then it will returns NaN ( Not a Number )

syntax :

 variableName = parseFloat(object or variable);

Example :

    <script>
        var a = "10";
        var b = 10.5;
        var c = "Ten";

        let Number = parseFloat(a);
        let Float = parseFloat(b);
        let String = parseFloat(c);

        document.write("<h3>Actual Values of Variables is ,</h3>");
        document.write("A is : "+a+"<br>");
        document.write("B is : "+b+"<br>");
        document.write("C is : "+c+"<br>");

        document.write("<h3>After Type Casting Values of Variables Becomes ,</h3>");
        document.write("A is : "+Number+"<br>");
        document.write("B is : "+Float+"<br>");
        document.write("C is : "+String+"<br>");
    </script>

    <!-- 
        
    OUTPUT :
    
    Actual Values of Variables is ,
    A is : 10
    B is : 10.5
    C is : Ten
    After Type Casting Values of Variables Becomes ,
    A is : 10
    B is : 10.5
    C is : NaN 

    -->

8) escape

The escape() function replaces all characters with escape sequences, with the exception of ASCII word characters (A–Z, a–z, 0–9, _) and @*_+-./

But currently the escape() function is deprecated from javascript.

So instead of the escape( ) function, we can uses encodeURIComponent( ) 

encodeURIComponent( ) can encodes the URI Componets.

The encodeURIComponent( ) method encodes special characters including: , / ? : @ & = + $ #

Example : 

    <script>
        let uri = "https://www.computertipstricks.tech/p/parsefloat-function-in-javascript.html"
        let encoded = encodeURIComponent(uri);

        document.write("<h3>Current URI is : </h3>");
        document.write("<b>URI : </b>"+uri);

        document.write("<h3>After Encoding URI it Becomes : </h3>");
        document.write("<b>Encoded URI : </b>"+encoded);
    </script>

    <!-- 
        
    OUTPUT :
        
    Current URI is :
    URI : https://www.computertipstricks.tech/p/parsefloat-function-in-javascript.html
    After Encoding URI it Becomes :
    Encoded URI : https%3A%2F%2Fwww.computertipstricks.tech%2Fp%2Fparsefloat-function-in-javascript.html 

    -->

---

Intrinsic Function

In JavaScript, There are some Special Functions are also present, Which is known an intrinsic Functions.

This type of functions are mostly used in special type of webpages, which can gives read only access to the end users.

It means the data present on those webpage are not be sharable or not be editable.

An end user can only ables to see the contents of thus type of webpage, they cannot able to copy or edit the contents of those webpage.

1) Read only

2) Disabled

1) Read Only

When we declare any text field as read only and execute the program, then we cannot able to interact with thus text field on webpage.

Example : 

    <form name="Example">
        Name : <input type="text" name="uname">
        <br><br>
        <input type="button" value="Make it Read Only" onclick="ReadOnly()">
    </form>
    <script>
        function ReadOnly()
        {
            Example.uname.readOnly = true;
        }
    </script>

2) Disabled

When we declare any field as disabled and execute the Program, then we cannot able to interact with thus fields on webpage.

The fields on webpage becomes faint after desabling it.

A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

Example : 

    <form name="Example">
        Name : <input type="text" name="uname">
        <br><br>
        <input type="button" name="b1" value="Make it Read Only" onclick="ReadOnly()"><br>
        <h4>Click on Following Button to Disable<br>
            Text Field and 'Make it Read Only Button'
        </h4>
        <input type="button" value="Disable" onclick="DisableButton()">
    </form>
    <script>
        function ReadOnly()
        {
            Example.uname.readOnly = true;
        }

        function DisableButton()
        {
            Example.uname.disabled = true;
            Example.b1.disabled = true;
        }
    </script>

So we have seened Pre-defined function of JavaScript, Now we are going to see User Defined Function of JavaScript.

What is a User Defined Functions ?

It is a Function, which is created by user to do some specific task and to use it multiple times in program.

It will executes a block of program or instructions and returns a result.

There are 2 Types of User Defined Function,

1) Function with Arguments / Parameters

2) Function without Arguments / Parameters

1) Function with Arguments / Parameters

It is a type of User defined callable functions, which can requiers some arguments or parameters to perform tasks.

It take arguments or parameters from user and do some spesific task on it.

When we can call them, returns a result.

Syntax : 

 function functionName(arguments)
 {
     // Body of the Function
     return result;
 }

Example :

    Name : <input type="text" name="fname" onchange="ShowResult(this.value)">
    <script>
        function ShowResult(name)
        {
            alert("Your Name is : "+name);
        }
    </script>

Here we have created a function ShowResult(name) , which can takes a argument or parameter called name from user and shows the alert box with content ' Your Name is : +name '

It can be called in a input text field by using onchange( ) method.

It means this function will shows the Name of the User in a alert Box.

2) Function without Arguments / Parameters

It is also a tupe of User Defined Function, which can not requiers any argument or parameters to do the task.

When we can creates and calls this type of function, it will returns a result.

Synstax : 

 function functionName()
 {
     // Body of Function
     return result;
 }

Example :

<body>
    Name : <input type="text" name="uname" id="uname">
    <br><br>
    <h3>Click on following Butoon to show the result of Function :</h3>
    <input type="button" value="Show Result" onclick="showResult()">

    <script>
        function showResult()
        {
            var Name = document.getElementById("uname").value;
            alert("Your Name is : "+Name)
        }
    </script>
</body>

Here we have created a text field, which takes name from the User.

After that we have created a button that will calls the function showResult( ) .

The function showResult( ) will returns a result as a alert box which shows the Name of the User which is Entered in Text Field.

So this are the function present in JavaScript.

Hope it will help you to learn the Javascript in easy way.

---

Also Visit

---