What is Client Side Scripting | Advantage, Example

Client side scripting is a process in which the code along with HTML web page is sent to the client by the server. Here, the code refers to the script.

In other simple words, client side scripting is a process in which scripts are executed by browsers without connecting the server.

The code executes on the browser of client’s computer either during the loading of web page or after the web page has been loaded.

Client side scripting is mainly used for dynamic user interface elements, such as pull-down menus, navigation tools, animation buttons, data validation purpose, etc.

Today, it is rapidly growing and evolving day by day. As a result, writing client side web programming is now easier and faster, thereby, reducing load on the server.

JavaScript and jQuery are by far the most important client-side scripting languages or web scripting languages and widely used to create a dynamic and responsive webpage and websites.

The browser (temporarily) downloads the code in the local computer and starts processing it without the server. Therefore, the client side scripting is browser dependent.

What is Client side Script?

A client-side script is a small program (or set of instructions) that is embedded (or inserted) into a web page. It is processed within the client browser instead of the web server.

The client side script downloads at the client end from the server along with the HTML web page it is embedded in. The web browser interprets and executes the code and then displays the results on the monitor.

The script that executes on the user’s computer system is called client. It is embedded (or inserted) within the HTML document or can be stored in an external separate file (known as external script).

The script files are sent to the client machine from the web server (or severs) when they are requested. The client’s web browser executes the script, then displays the web page, including any visible output from the script.

Look at the below figure to understand better.

What is Client side scripting

Client side scripts may also have some instructions for the web browser to follow in response to certain user actions, such as pressing a page button. They can often be looked if client want to view the source code of web page.

Popular Client side Scripting Language

A language in which a client side script or program is written using syntax is called client side scripting language or client side programming.

The most popular client side scripting languages is as follows:

1. JavaScript: It is the most widely client side scripting or programming language. It is based on ECMAScript standard language.

JavaScript is an object based oriented, dynamically typed (or also called weakly typed) scripting language. It runs directly on the browser with the help of an inbuilt interpreter.

Here, weakly typed means the variables are easily converted implicitly from one data type to another.

2. VBScript: This scripting language is developed by Microsoft, based on the Visual Basic. It is basically used to enhance the features of web pages in Internet Explorer. VBScript is interpreted by Internet Explorer web browser.

3. jQuery: jQuery is a fast, small, lightweight JavaScript library. It is used to facilitate a lot of JavaScript code into simple-to-use-functionality.

Most of the biggest companies such as Google, Microsoft, IBM, Netflix, etc. on the Web are using jQuery language.

Client side Scripting Language Example

Let’s take a very simple example of JavaScript client side script. In this example, a simple JavaScript client side script will run in the browser to display the name of cities.

The HTML file located on the server will be the same one sent to the browser, but JavaScript changes the HTML web page that is loaded in the browser.

Program code:

<DOCTYPE html>
<title>List of cities</title>
  function displayCities()
     var cities = ["New York", "Dhanbad", "Paris", "London", "Mumbai"];
     var ulElement = document.getElementById("cityList");
     for(var city in cities)
        var listItem = ulElement.appendChild(document.createElement("li"));
<body onload = "displayCities()">
         <ul id = "cityList"></ul>

Look at the below diagram that shows the flow of data between server and browser.

Flow diagram of client side scripting language

Application of Client side Scripting

Client side scripting is used to make web pages or website more interactive. It is primarily used at the frontend, where the user can see using the browser. Some important applications of client side scripting are listed, as below:

  • To retrieve data from web browser or user’s screen.
  • Used in the field of online games.
  • To customize the web page without reloading the page.
  • Client side scripting is used for validation purpose. If the user enters incorrect credentials on the login page, the web page displays an error message on the client machine without submitting it to the web server.
  • To create ad banners that interact with the user, rather than simply displaying graphics.
  • To create animated images that change when we move the mouse over them.
  • Client side script can be used to detect installed plug-ins and notify the user if a plugin is required.

Advantage of Client side Scripting

There are several great advantages of client side scripting that are as follows:

1. The client side scripting language is quite easy to learn and use. It requires minimum programming knowledge or experienced required.

2. The main advantage of client side scripting is that it is lightweight and relatively easy to implement (syntax not too complex). The editing and executing the code is fast.

3. Data processing is done on the client side from the server, which makes it easier to scale applications with large numbers of users. Thereby, load on the server reduces.

4. The client side data validation can be possible using the client side scripting language like JavaScript.

5. The execution of client side script is more quickly because once the script is downloaded from the server, it is executed by the browser directly on the user’s computer.

6. Mathematical assessment is also possible using client side scripting.

7. The client side programming helps to perform the complex tasks in relatively few steps.

8. Script code only executed by the browser without connecting the server.

9. It takes too less time to execute script code.

10. Browser respond immediately when user presses any key, mouse movement, clicks, etc.

Disadvantage of Client side Scripting

There are certain disadvantages of client side scripting that are as follows:

1. The main disadvantage of client side scripting is that it is unsecure because the code is sent as is to the client and, therefore, visible to it if the client looks at the sources of his web page. In short, code is usually visible.

2. Client side programming cannot be used if we need to access databases or needs to transmit sensitive data over the internet.

3. There is no guarantee that user has enabled JavaScript on his computer’s browser. Therefore, any required functionality must be loaded on the server despite the possibility that it could be offloaded.

4. The smooth running of the script (or program) depends entirely on the client’s browser, its configuration, and security level.

5. The web application based on the heavy JavaScript can be complicated to debug and maintain.

6. Client side scripting languages are usually more limited in functionality than server side scripting languages.

Client side Web Attacks

In this section, we will understand web attacks on the client side. They are as follows:

1. Malicious HTML tags embedded in web request can cause the server to generate malformed pages. It can be dangerous if run on the server side. Malformed pages sent back to the client may produce the further problems if executes on the client side.

2. Malicious code can be sent to the server from the attackers in a discussion group website. An example of malicious code can be like this:

Hello Group — Here is my message!
<script>Malicious code</script>

If JavaScript is enabled on the victim client’s browser, the browser will run this code unexpectedly.

3. An attacker can send a file to a client and encourage him to post it to the server. The file may contain malicious code that can hack the website.

4. When a client visits a website, a small text file called a cookie is often placed in the client’s computer. At the next visiting, the web server scans that cookie. If it found on the computer, the attacker can use the cookie data to trigger the download of malicious code.

5. Tags like <FORM> can trouble if they are inserted at the wrong place. These HTML tags can change the appearance of the web page.

6. Browsers interpret the information according to the character set chosen by the client. If the client does not specify the character set, the web browser uses the default setting, that can display the garbled appearing or unintended meanings.

General Client side Attack Prevention

There are the following general measures to prevent client side attacks. They are as follows:

1. Client can use client side scripting to clean up form data before it is transmitted.

2. Users can turn off JavaScript functions in the browser. It may disable some web functionality.

3. They should set the security level high in the browser and lower it only for those users you are sure will not violate that trust.

4. Scan all the files including cookie for viruses to prevent the injection of malicious code.

5. Client should declare their character set when configuring browsers.

Hope that this tutorial has covered almost all the key points concerning with what is client side scripting language and its application, advantages, and disadvantages. I hope that you will have understood the basic concepts of client side programming.
Thanks for reading!!!
Next ⇒ What is Server side Scripting⇐ Prev Next ⇒

Please share your love