Basics of JavaScript: Part 1

This is Part 1 of the basics of JavaScript series. This article explains some of the basic concepts of JavaScript.

The following are the topics that we will discuss today.

• Introduction.
• Use of JavaScript.
• Need of both client-side and server-side validation.
• Advantages of JavaScript.

The following are the two types of web pages:

• Static Web Pages.
• Dynamic Web Pages.

HTML is used for creating static web pages. These pages are delivered to the users exactly as they are stored and do not respond to user inputs.

On the other hand, there are two types of scripting languages that can be used to create dynamic web pages.

Client-side: JavaScript and Visual Basic Script.

Server-side: PHP, Perl.

Both of these scripting languages can be used to create dynamic web pages. The client-side scripts are executed by the web browser, in other words at the client-side whereas the server-side scripts are executed by the web server.

Use of JavaScript

In SQL Server, I have a table with the following columns.

Query used

CREATE DATABASE db_BasicsOfJs
USE db_BasicsOfJs

CREATE TABLE tblRecords
(
Id INT IDENTITY PRIMARY KEY,
Name NVARCHAR(30),
Email NVARCHAR(100)
);

SELECT * FROM tblRecords

Open Visual Studio and create an empty MVC web application.



Click OK.

Add ADO.NET Entity Model





Click OK.



Click Next.

Add new connection



Click OK.

Click Next.



Select the table and click Finish.



Add a controller



Click Add.



Click Add.

Now in the Models folder, add a class file in which we will customize the auto-generated properties.



Add adding the class file, mark the class as partial and change the class name to tblRecord.

using System;

namespace BasicsOfJavaScriptPart1.Models
{
    public partial class tblRecord
    {

    }
}
Write the following in the tblRecords class.
using System;
using System.ComponentModel.DataAnnotations;

namespace BasicsOfJavaScriptPart1.Models
{
    //use MetadataType attribute to pass the Metadata in tblRecord class
    [MetadataType(typeof(RecordsMetaData))]
    public partial class tblRecord
    {

    }

    //create a MetaData class which will be used to customize the auto-generated properties of tblRecord class
    class RecordsMetaData
    {
        //mark both the properties as required
        [Required]
        public string Name
        {
            get;
            set;
        }
        [Required]
        public string Email
        {
            get;
            set;
        }
    }
}

Build the project and run

Now the requirement of this application is to capture the data and store it in the database table.



Click on the Create New link.



Click the Create button.



Look at the preceding error message we got. We marked both of these fields as required so we are getting a validation message.

On the other hand, if we pass valid data then the records will be stored in the database table.



But at the moment we don't have JavaScript anywhere in our web application.



Here we are validating our form on the server-side. So every time we click the create button, the request is sent to the server over the network, the server processes it and notices that the form fields are blank then it sends the response message back to the client.

Now let's say for some reason, the web server is busy and the user must wait a few seconds to get the response message from the server.

Let's include some latency in our application by making the HttpPost create action method sleep for 5 seconds.

public ActionResult Create([Bind(Include = "Id,Name,Email")] tblRecord tblRecord)
{
System.Threading.Thread.Sleep(5000);
}

Run the application and navigate to the create view.



Click the create button.

Now when the user clicks the create button, he/she must wait for at least 5 seconds before the server sends back the response.

Validation check using JavaScript

We can do the validation check without posting the request to the server. Don't you think it would be much better and the application would be much more responsive?

Let's see how to validate the user input using JavaScript.

From the introduction we know that JavaScript is executed by the client browser. So, whenever we click the create button, the browser will execute the referred JavaScript function.

In the Create.cshtml write the following JavaScript function:

< script type = "text/javascript" > function myfunction()
{
    var Name = document.getElementById("Name").value;
    var Email = document.getElementById("Email").value;
    var isTrue = true;

    if (Name == "")
    {
        document.getElementById("nameError").innerHTML = "Name field is required";
        isTrue = false;
    } else {
        document.getElementById("nameError").innerHTML = "";
    }

    if (Email == "")
    {
        document.getElementById("emailError").innerHTML = "Email field is required";
        isTrue = false;
    } else {
        document.getElementById("emailError").innerHTML = "";
    }
    return isTrue;
} < /script>

Pass the function name to the submit button as in the following:

<input type="submit" value="Create" class="btn btn-default" onclick="return myfunction()" />

So, now the form validation is happening on the client-side.

The following  describes why we need both Client-side and Server-side validation :

• Client-side validation can be easily bypassed by disabling JavaScript on a client browser and if JavaScript is disabled and we don't have server-side validation, there could be a chance of storing invalid data or there could be even security vulnerabilities.
  
• Client-side validation provides a better user experience since it reduces the unnecessary round trips between the client and the server.
  
• To prevent the form from becoming vulnerable to the tools like Fiddler we still want to validate the form on the server-side before saving it. So, server-side validation should always be there even if we have client-side validation or not.

The following are the advantages of using JavaScript:

• JavaScript can be used to validate form fields, such as checking for blank fields before submitting the form to the server.
• With JavaScript, partial page updates are possible; that is commonly known as AJAX.
• JavaScript can be used to handle events.
• It can be used to gather browser information such as name and version.

Summary

In in this article, we learned about some of the basic functionality of JavaScript.

I hope you like it.

Thank you.