Sequence of events when you request a web page
World Wide Web works in a client-server architecture. The client-side has an application program called Web Browser which is used to send the request to the server for a particular web page. Google Chrome and Microsoft Internet Explorer are examples of Web Browser. The server side has an application program called a Web Server which is used to provide a response to the clients and send the requested web page. Apache server is an example of a Web Server.
Figure Source: https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Client-server-model.svg/1200px-Client-server-model.svg.png
When we develop a web application, we place it on a server from where it can be accessed by users all over the world. We can also use our local computer as a server. But we would require the system to run 24hours a day, 7 days a week, with no downtime and high speed.
What is a Script
A script is a set of instructions to be executed by a computer. It is a code written in a scripting language just like a program written in a programming language. The difference between a script and a program is that a script needs an interpreter instead of a compiler for execution. Therefore, a script is interpreted at run-time, unlike a program that is first compiled and then executed.
We know that a web page uses HyperText Markup Language, HTML, for its layout and structure, and CSS for its presentation. A script adds behaviour to this web page. For example, customised content based on user input, form validation, dynamic content, all is added to a web page using a script.
There are two types of scripts, i.e., client-side script and server-side script.
Client-side Script
As the name suggests, the client-side script is executed on the client’s side, also called the front-end. When a user requests an HTML web page, the server sends the requested page to be executed on the client’s web browser. The script is visible to the user and contained within the HTML web page in two ways. It is contained within <script> </script> tags within the source code of the web page. A script can also be found in an external file, in which case, the script tag contains the address of the script file.
Client-side script is used to make the web pages interactive. For example, adding animations on user input, making the web page customisable, checking user input for validation and much more.
Scripts can be executed as soon as the web page loads, or later when an action occurs for example a button is clicked, or a mouse hovers over a link. Scripts are also used to create cookies that are stored on the client’s computer.
One of the main advantages of the client-side script is form validation. When the user enters data into an HTML form and clicks the submit button, the client-script is executed to check the user input for errors and missing information, before sending the form data to the server. In this way, the server is saved from accepting a lot of unnecessary data and a load of cleaning.
A disadvantage of the client-side script is that it is unsafe. It can be used to hide malicious code behind some fake items added to the web page source code. When the item is clicked by the user it gets the malicious script running. This could be used to hack websites or clients’ private data like bank details.
Progressive Enhancement:
Some old web browsers do not support client-side scripting. Also, new web browsers have the option to disable this script. That is why a website should be developed in a manner that is still working fine for its users without a script. To achieve this goal, a website is first developed with HTML code only. Then it is enhanced with CSS. After CSS, it is enhanced by adding the client-side script. The practice of creating web pages in this way is called Progressive Enhancement. The script becomes a bonus for the users who have enabled it, whereas the users with the disabled script can access the main content of the website.
Client-side Scripting Languages
HTML, CSS, JavaScript and VBScript are the most common client-side scripting languages. These are discussed in detail below:
HTML
HTML is not a scripting language, but a markup language. Nonetheless, it is the most fundamental language for client-side web development commonly called front-end. The HTML is an abbreviation of HyperText Markup Language. HyperText means the page has links in it. Markup language tells the layout and structure using tags. It is a language used to design and develop the layout and structure of a web page.
HTML was first created in 1991. Since then, it has evolved continually and the latest version is HTML5.
HTML tags are the fundamental units for markup. The tags tell the browser how to display the text enclosed in them. There is a large number of HTML tags used to set the layout of the web pages. For example, HTML tags <p>…</p> define that this is a paragraph and the text enclosed in this tag should start slightly indented from a new line.
HTML tags can also be used with attributes to improve the appearance and extend the features of the tag.
HTML is an easy to learn, platform-independent language.
XHTML
XHTML stands for Extensible HTML. It is a strict version of HTML that defines rules and coding practices to write HTML code. The idea behind XHTML is that web developers around the world follow a standardised method and tags for web pages so that they are accessible on all web browsers on any kind of smart device.
CSS
CSS stands for Cascading Style Sheets. They allow the developer to add aesthetics to the web page. A style tag mentioned in a web page defines all the details about the presentation of the web page including its colour, format, border styles, image styles, fonts size, font styles, margins, padding, borders, and much more. CSS was first developed in 1996 by W3C. Since then it has evolved continually. These are called cascading style sheets because they have three levels of styling a document. Lower level style sheets can override the higher-level style sheets in the form of cascading. These three levels are discussed below:
- External Style Sheet: These are used when we want the whole website to follow the same style format. It saves the effort in styling all the web pages separately. We make a single CSS file and give its reference on all the pages. This style sheet aids in having consistency and theme in the entire site.
- Internal Style Sheet: These are used when we want a single web page to have some specific style. The CSS code is added in the style tag on the web page we want to add. This will override the external style sheet.
- Inline Style: This is used exclusively for a single HTML element in a web page. So, it is enclosed in a style attribute within that particular HTML tag. This will override the other two styles. This style reduces consistency. So, it is advised to use it sparingly.
JavaScript
JavaScript was developed by Netscape before 1995 under the name LiveScript. Later, it grew as a combined endeavour of Netscape and Sun under the name JavaScript. JavaScript is the most commonly used scripting language. According to research, about 97% of websites today are using JavaScript. It is compatible with all popular web browsers including Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Microsoft Edge, Opera, Safari etc.
JavaScript makes it easy to make the web page interactive by using form elements like buttons, menus, text boxes etc. It is convenient to write event handling in JavaScript where an event can be triggered by mouse movement or keystroke.
JavaScript is completely different from the Java programming language. JavaScript is not an object-oriented programming language, which means it does not have the concept of classes.
Currently, JavaScript has many popular frameworks and libraries. The most commonly used are jQuery, React, and Angular. React is created by Facebook, and Angular is created by Google.
VBScript
VBScript is based on Visual Basic, developed by Microsoft in 1996. It is a lightweight, fast and easy to learn scripting language. VBScript is not an object-oriented language. However, it is an object-based language, like JavaScript.
VBScript is used to develop powerful administrative applications and tools. VBScript is similar to JavaScript in terms of functionality. However, it is only used by Microsoft browsers. Other browsers do not come with built-in support for VBScript. Moreover, VBScript does not support event-driven computation and forms. So, the compatibility issues made it less popular for web development.
Server-side Script
As the name suggests, the server-side script is executed on the server-side, also called the back-end. When a server gets the request of an HTML web page, it might contain a script that requires to be executed on the server-side and its output is sent back to the client. The tasks like searching the database, dynamic changes in the website, transaction handling, session handling are performed using a server-side script.
The server-side script is not visible to the client because the browser shows only the output of the script sent by the server. This implies that the server-side script is more secure. Furthermore, a server-side script is accessible by all browsers because the output it sends is in simple HTML which is accessible by all the browsers.
The server-side script is used to make pages more dynamic. It is used to save user input into the database, validate the login and passwords, register new users, manipulate the database, download new plugins, create new files or edit old ones, provide a personalised experience to the client etc.
A website along with its database resides on the server-side. The database is manipulated using the server-side script and query language. For example, when we enter our login name and password in the Facebook login form, the webserver executes the script that validates the user input by comparing it with the corresponding user data in the database. If the result is correct, the server sends us our personalised Facebook timeline. Otherwise, the server sends us an error message.
Server-side scripts make website development easier and more reusable. It makes the website more interactive.
Read more about Server-Side Scripting
Server-side Scripting Languages
There are many server-side scripting languages. The most commonly used are discussed below:
PHP
PHP is an open-source server-side scripting language specifically designed for web applications. It is the most commonly used scripting language. It enables retrieval and manipulates of data from the database. It is used along with SQL to query the database. PHP is fast and easy to learn and code. Facebook, Wikipedia and WordPress are said to be using PHP.
Like JavaScript, the PHP source code is embedded in HTML documents. This code is executed on the server-side and its output is inserted into the HTML document being sent to the client-side and displayed in a web browser.
PHP was developed in 1994 for his personal use by Rasmus Lerdorf, a member of the Apache group. PHP was the abbreviation of Personal Home Page. In 1995 it was published publicly under the recursive name PHP: Hypertext Pre-processor. Since then, PHP has been the most widely used language for web development. PHP is now available on most web servers and is compatible with most databases.
Python
Python is a simple yet powerful open-source programming language. It is good for beginners because it is easy to learn and fast to read. Google and YouTube are said to be using Python. It is an object-oriented programming language with efficient data structures and dynamic data-typing. It has become one of the most popular languages for rapid application development as well as web development. Being an interpreted language, combined with object-oriented features has made it evolve into a perfect language for various development platforms.
ASP.net
.NET is a collection of programming technologies developed by Microsoft in early 2000. ASP.NET (Active Server Pages) is an extension of .NET with the server-side scripting language, tools and libraries that run on Microsoft servers only. It is a web development framework that comes with a built-in database, libraries, and templates. It provides authentication with Google and Twitter etc.
In ASP.NET the programming code is not interpreted. It is compiled before execution which makes it faster to load. It is an object-oriented language for the development of dynamic web pages.
Java
It is the most widely used language for web development because of its ability to “write once, run anywhere”. It is an object-oriented programming language that lets you create web applications quickly. Unlike their names, Java and JavaScript are different languages.
The web applications developed in Java run inside a web container on the server. The web container is an environment for the execution of Java applications on the server. Tomcat is an example of a typical web container.
Java is based on C++. It was developed by Sun Microsystems for programming household appliances initially. With the advent of web development, Java proved to be a powerful language for HTML documents.
For tasks that require computations on the server, Java has a special class called servlet. Java Server Pages are the Java scriptlets embedded in an HTML document.
Perl
Perl is the abbreviation of Practical Extraction and Report Language. It is an open-source server-side scripting language. It is a powerful and flexible programming language commonly used for Common Gateway Interface (CGI) programming. Beginning in the 1980s as a small-scale language, Perl evolved continually as a language to develop system administration tasks. It was popular because of its powerful and detailed pattern matching capabilities. These methods have been copied into many popular languages.
Perl uses the productivity of programming languages with the efficiency of interpreted languages. It is practical and easy to use general-purpose language with object-oriented as well as procedural methods.
Ruby
Ruby is an open-source programming language developed in the early ’90s. It is a dynamic language that is easy to read and write. It is an object-oriented language that is interpreted at the time of execution. Since its development, it has evolved continually. It has become one of the most common web development languages.
Related Technologies
- AJAX
- AJAX is the abbreviation of Asynchronous JavaScript and XML. It is a set of web development techniques to develop agile, interactive and user-friendly web application. It is used for both client-side and server-side scripting. AJAX uses XML, HTML and CSS for content and presentation. JavaScript is used to transfer data to and from the server-side script. AJAX transfers data to and from the server in an asynchronous manner. This is why the web page is updated without letting the user load it again. Also, parts of a web page can be updated without reloading the whole page.
- Content Management System
- Content Management Systems or CMS is an environment that is used to create and manage web applications without learning to code. The web application is created within minutes using templates already present in the CMS. There are thousands of templates to choose from according to the need of the business. The content is created and maintained by the owner. Rest is managed by the CMS itself. From providing hosting and database services to version control and workflow collaboration, everything is handled by the CMS. This type of system is easy to use by people who are not computer professionals and do not know web development languages. A CMS provides a secure platform for client-side and server-side web development. A CMS is used by developers who are not web programmers. So, the system must have a user-friendly interface. Some fundamental facilities that a CMS must provide are multiple language support, customisation, flexibility, scalability, testing, and analytics. WordPress and Wix are examples of CMS.
Comparison between Client-side and Server-side Scripting
This section elaborates the fundamental differences between client-side and server-side scripts:
- The client-side script is executed at the front-end in the client’s browser while the server-side script is executed at the back end with a web server.
- The client-side script is visible to the user of the web browser while the server-side script is hidden.
- The client-side script is not secure while the server-side script is secure.
- The client-side script does not need to interact with the server while the server-side script needs a web server to be processed.
- The client-side script is executed on a local computer while the server-side script is executed on a remote computer.
- The client-side script has a faster response time than the server-side script.
- Client-side script is executed after the browser receives the web pages sent by the server while the server-side script cannot execute the client-side script.
- The client-side script cannot connect with the database while the server-side script can connect with the database present on the server-side.
- The client-side script cannot access the files while the server-side script can access and manipulate the files present at the webserver.
- The client-side script helps create interactive web pages while the server-side script helps create web pages with dynamic data.
Conclusion
In this article, we learned about the difference between a client-side script and a server-side script. The client-side script makes the interface more interactive and useful for the user while the server-side script deals with core issues like database handling, file handling and error handling. However, both scripts work together to deliver the required output.
References
- https://www.washington.edu/accesscomputing/webd2/student/unit5/module1/beyondhtml.html
- https://www.geeksforgeeks.org/difference-between-server-side-scripting-and-client-side-scripting/
- http://codingatschool.weebly.com/client–and-server-side-scripting.html
- https://techdifferences.com
- https://www.ruby-lang.org/en/about/
- https://vivadifferences.com/difference-between-server-side-scripting-and-client-side-scripting/
- https://oseven.in/files/58ce5021925bd.pdf
- https://www.tutorialspoint.com/vbscript/vbscript_overview.htm
- https://docs.python.org/3/tutorial/index.html
- https://www.journaldev.com/1854/java-web-application-tutorial-for-beginners