Web technology with Server side and client side programming
Web technology is the tools and techniques which enables two or more computing devices to communicate over a network i.e. Internet. Web Technology consist of two words, the web refers to the World Wide Web generally known as World Wide Web. WWW is the cyber space containing webpages, documents, and any other resources which are identified and located with the help of their URLs. Technology refers to the tools and techniques that makes these resources available on the Web such as, web browsers to view content of web, Programming languages and frameworks for the development of websites, Database to store data at back end, protocols for communicating on the web, multimedia elements etc.
Web development is the process of designing and developing website which are hosted through internet or intranet. The process of developing web can range from developing static page to a complex such as web based application social media sites, E-commerce. Web development includes web design, web content development, client side scripting, server side scripting, web engineering etc. Since, web development consists of several inter-related task which can be accomplish by different types of developer who focuses on different aspect of web creation.

Server side and client side programming
Client-Side Scripting programming
Client-side scripting is performed to generate a code that can run on the client side i.e (front end) browser without needing the server-side (back end) processing. Basically, client-side scripts are placed inside an HTML document. The client-side scripting can be used to layout the content of the web. For example, when a user makes a request through web browser for a webpage to the server, it just sent the HTML and CSS as plain text, and the browser interprets and renders the content of web in the client end (user). Client-side scripting is designed to run as a scripting language which can be executed by web browser. Front end developer is someone who design and develop client side of a website. Generally. he or she works in user interface (UI) of a website. Front end developer must be at least fluent in three different languages i.e. HTML, CSS, JavaScript whereas, there are several other libraries which can be used for front end development.
Server-Side Scripting programming
Server-side scripting also known as back-end runs on the server where the application is hosted. Server-side is used to serve content depending upon the user request. Back end helps to create dynamic web based application that allows user to interact and communicate with the application. Back end language also helps to connect front end with data base. So that, User can store and retrieve data as per the requirement. Back-end developer is responsible for server-side programming. Some of the popular server-side (back-end) scripting language are ASP, JavaScript (using SSJS (Server-side JavaScript e.g. node.js), Perl, PHP, Ruby, Python etc.
Client-side scripting and server-side scripting both works along side. The client-side scripting emphasizes making the interface of the web application or website (UI) more appealing and functional. Whereas, server-side scripting emphasizes on data accessing methods, error handling and fast processing etc.
Note: Full-stack developer understand both Front end and back end development process. They can accomplish entire project. Full stack developer must have expertise in client site and server site Scripting language. Moreover, he/she has a great knowledge of integrating database with the application.
How to add JavaScript in web pages?
JavaScript is a client-side scripting language used for web development along with other front-end development tool such as HTML and CSS. JavaScript helps to give dynamic behavior to our web pages such as adding animation, drop down menus, client-side validation etc. More over JS can be used for mobile apps development and game development. JavaScript is known as scripting language because it does not need to be compiled before execution, it executes in run-time environment through web browser. Several libraries of JavaScript such as React JS, Vue JS, Angular JS etc can be found and used to make more interactive, intuitive and advance web pages. JS is not only used for front-end rather it can be used in server side also. Node JS is an example of server-side JavaScript generally known as SSJS.

Feature of JavaScript
- It is light weighted and interpreted language which execute in run-time environment directly through web browser.
- It is supported by all the web browser since 97% of all web sites use JS.
- It is also a structural programming language since it support control structure such as branching and looping.
- It is prototype based programming language which means we can create object without creating classes, so it is also a Object Oriented programming
- JavaScript is a case-sensitive language, small and upper case differs.
- Every operating system such as Windows, MacOS supports JS.
Uses of JavaScript
- JS is used for client-side validation.
- JS can be used to make dynamic drop-down menus.
- JS can be used to display date, time and even clock.
- JS can be used to generate pop-up windows, alert message, dialog box etc
- JS can also be used for Server application.
- JS can be used for cross platform mobile apps development.
- JS can be used for game development.
Adding JavaScript to HTML document
As we know, JS is often used as client-side scripting language along with HTML and CSS. Like we add CSS to our HTML document, similarly we can add our JavaScript code to HTML document in three several ways. The several ways of adding JavaScript to HTML document are:
- Inline JavaScript code
This is the method of adding JS code directly inside the HTML tag. We don’t have to create separate JS file or even we don’t have to place JS code with in script tag. Simple events like onclick, mouseover, keypress can easily be added through this method. But, its very much inconvenient to add large JS code inline. JavaScript code can be added in HTML document inline as follows:
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “alert(‘Your message’)”>Click me</BUTTON>
</BODY>
</HTML>
Here, we have added alert message through onclick event. When user press the Click me button then alert message will be shown in the web browser.
2. Internal (Embedding) JavaScript code
This is the method of adding JS code within the HTML document. JS code is added internally with in the script tag inside body of the HTML document. JavaScript code can be embedded within HTML document as follows:
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>
<SCRIPT>
function disp( )
{
alert(“Your message”);
}
</SCRIPT>
</BODY>
</HTML>
Here, we have created a JS function named disp( ), this function is called when user press the Click me button. Once button is pressed alert message is displayed which is defined inside function within Script tag.
3. External JavaScript file
This is the most popular methods of adding JS in our web pages. To add external JavaScript we have to create separate JS file which is linked with our HTML document as:
<SCRIPT src = “name.js”></Script>
Where, name.js is the JavaScript file that we create to write all our JS code. It should be in same location with our HTML document. It is most convenient way of adding JS in our web page as JS code don’t get messed with other HTML and CSS code. JavaScript code can be externally added with HTML document as follows:
Create a HTML document with any name
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<SCRIPT src = “name.js”></Script>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>
</BODY>
</HTML>
Also create a JS file with .js extension and add following code
function disp( )
{
alert(“Your message”);
}
Here, we have created separate HTML and JS file in same location. Since, we have linked our JS file with our HTML document, every code which is written in JS file will be implemented on HTML document.
Local and global variable in JavaScript
Variables are the identifiers which holds value during our program execution. These values may change throughout the program. Depending upon the nature of data variable can hold several type of value. The type of value stored in the variable are denoted by datatype. There are two types of datatypes used in JS.
Data types used in JavaScript
a) Primitive data type: They are inbuilt datatype used in JS
Data Types | Function |
Number | It represent numeric value i.e. integer and floating number. We can use BigInt to represent number with large value. |
String | It represent alphanumeric values i.e. text |
Boolean | It represent either true or false value. |
Null | It represent empty or unknown value. |
Undefined | If variable is declared but the value is not assigned then the variable is of undefined type. |
b) Non-Primitive datatype: They are the derived datatypes from primitive datatype.
Data Types | Function |
Array | It store multiple values of same type under a same name. |
Object | It has methods and properties. |
Variables in JavaScript
Variables in JavaScript are declared by using keyword ‘var’. for eg,
var a=3,b=4;
var fruit = “apple”;
Types of variable in JavaScript
a) Local variable
Those variable which are declared inside the block or function is called local variable. Local variable can only be accessed and used within the block or function.
<HTML>
<HEAD><TITLE>sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = "disp()">Click me</BUTTON>
<SCRIPT>
function disp()
{
var a=5;
document.write(a);
}
</SCRIPT>
</BODY>
</HTML>
In above example, the variable ‘a’ is declared inside the function disp(). So, it can be used only within the function block. Other function or block cannot use the value of ‘a’. Hence, to overcome this limitation we have global variable.
b) Global variable
Those variable which are declared outside the block or function is called global variable. Global variable can be accessed and used within any other function or the block.
<HTML>
<HEAD><TITLE>sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = "disp()">Click me</BUTTON>
<BUTTON onclick = "cisp()">Push me</BUTTON>
<SCRIPT>
var a=5;
function disp()
{
document.write(a);
}
function cisp()
{
document.write(a);
}
</SCRIPT>
</BODY>
</HTML>
In above example, the variable ‘a’ is declared outside the two function disp() and cisp(). So, it can be used by both function block. When user press Click me then, disp() function is called, this function will display the value of ‘a’ i.e. 5 which is declared outside of the function. Similarly, when user press Push me then, cisp() function is called, this function will also display the value of ‘a’ i.e. 5. This is because variable ‘a’ is declared outside of function or block which can be used by any number of function or block.
Note: Block represent the statement written inside curly bracket { }
Operators in JavaScript
Operators are the symbols or sign used to perform some specific operation. Let us consider a simple expression c=a+b where, a, b and c are the operands. + = are the operators and addition is the operation.
Types of Operators in JS
1) Arithmetic Operator:
Arithmetic operator are symbol used for basic mathematical calculation such as addition, multiplication, division, subtraction, remainder etc.Operators are:
+ | Addition |
– | Subtraction |
* | Multiplication |
/ | Division |
% | Remainder |
++ | Increment |
– – | Decrement |
Program example
<script>
var a=2,b=3,c=a+b;
document.write(c);
</script>
2. Comparison Operator:
Comparison operator are the symbol used to compare the values of two operands. Operators are:
== | Equals |
!= | Not equal to |
< | Less than |
> | Greater than |
>= | Greater than equal |
<= | Less than equal |
Program example
<script>
var a=2,b=3,c=a+b;
if(a>b)
{
document.write(a);
}
else
{
document.write(b);
}
</script>
3. Logical operator:
Logical operator are used to make logical comparison i.e that logically connect two or more expression. Operator are:
&& | Logical AND |
|| | Logical OR |
! | Logical NOT |
Program example
<script>
var a=2,b=9,c=7;
if(a>b && a>c)
{
document.write(a);
}
else if (b>a && b>c)
{
document.write(b);
}
else
{
document.write(c);
}
</script>
4: Assignment Operator:
This operator is used to assign value to a identifier(variable). Operator are:
= | Simple equal to |
+= | Add and assign |
-= | Subtract and assign |
*= | Multiply and assign |
/= | Divide and assign |
% | Take remainder and assign |
Program example
<script>
var a=2,b=3,c=a*b;
document.write(c);
</script>
5: String Operator
This operator helps to add several strings. The process of adding string is called string concatenation.
+ is the string operator used to add string.
Program example
<script>
var a=2,b=3,c=a+b;
document.write(“Sum is” + c);
</script>
Adding two number in JavaScript
Adding two number in JavaScript is fairly easy. We have to use arithmetic operator to perform mathematical addition. Addition can be performed directly by assigning value to a variable but this method will not allow user to enter any number they want. So, we can use HTML text box and button to call a JavaScript function. Inside JS function we will retrieve values entered inside text box.
Adding two number directly
<HTML>
<HEAD><TITLE>Addition</TITLE></HEAD>
<BODY>
<SCRIPT>
var a=3, b=2, c=a+b;
document.write(c);
</SCRIPT>
</BODY>
</HEAD>
The above program will display 5 in the browser. The output is always fixed since, it does not allow user to enter number in the browser. So, following method is recommended to make interactive program.
Form validation in javascript
Once the client or user entered all the necessary data and press the submit button then all the data entered by the client must be correct and valid. Thus, form validation is the mechanism which allows client to enter only the correct information which can be send to the server. JavaScript provides easy method for form validation at client side. Forma validation can be done in two ways: Basic validation which checks whether all the required fields are filled properly or not kept empty whereas, Data Format validation check whether the data entered into the form field are logically correct.
Basic form validation in JavaScript
<HTML>
<HEAD><TITLE>Form Validation</TITLE></HEAD>
<BODY>
<FORM>
<INPUT type = "text" id = "user">
<INPUT type = "password" id = "pass">
<INPUT type = "submit" onclick = "valid( )">
</FORM>
<SCRIPT>
function valid()
{
var user = document.getElementById("user").value;
var pass = document.getElementById("pass").value;
if(user == "" || pass == "")
{
alert("Please!! Fill up the form");
}
}
</SCRIPT>
</BODY>
</HTML>
Adding two number in JavaScript
Adding two number in JavaScript is fairly easy. We have to use arithmetic operator to perform mathematical addition. Addition can be performed directly by assigning value to a variable but this method will not allow user to enter any number they want. So, we can use HTML text box and button to call a JavaScript function. Inside JS function we will retrieve values entered inside text box.
Adding two number directly
<HTML>
<HEAD><TITLE>Addition</TITLE></HEAD>
<BODY>
<SCRIPT>
var a=3, b=2, c=a+b;
document.write(c);
</SCRIPT>
</BODY>
</HEAD>
The above program will display 5 in the browser. The output is always fixed since, it does not allow user to enter number in the browser. So, following method is recommended to make interactive program.
Adding two number in JavaScript
<HTML>
<HEAD><TITLE>Addition</TITLE></HEAD>
<BODY>
<INPUT type=“text” id=“first”>
<INPUT type=“text” id=“second”>
<INPUT type=“button” value = “press” onclick = “sum( )”>
<SCRIPT>
function sum( )
{
var a = document.getElementById(“first”).value;
var b = document.getElementById(“second”).value;
var c = parseInt(a) + parseInt(b);
document.write(c);
}
</SCRIPT>
</BODY>
</HEAD>
The above program will allow user to enter two number in the two text box. Once the user click the button the value entered inside box are passed to JS function through onclick event which calls the sum( ) function. Inside sum( ) function values are assigned to variable ‘a’ and ‘b’. The sum is calculated and assigned to variable ‘c’. parseInt is used to make value entered inside text box to Integer.
DDL DML and DCL with example
SQL stands for Structured Query Language. It is an international standard database query language introduced and developed by IBM in early 1970s. It was able to control relational database. SQL is not a complete programming language rather only used for communicating with database. SQL has several statement for data definition, data manipulation and data control generally known as DDL, DML and DCL respectively. A query is a request to a DBMS for the retrieval, modification, insertion and deletion of the data from database.

DDL DML and DCL statements
1) Data Definition Language (DDL)
DDL is used by database designer and programmer to specify the content and the structure of table. DDL is used to define the physical characteristics of records in a database table. It includes command than manipulate the structure of object such as table. Some DDL statements are: CREATE, DROP, ALTER
1.1 CREATE statement
In order to create a database we can use CREATE statement as follows:
CREATE DATABASE database_name;
Eg,
CREATE DATABASE student;
The above statement will create a database with the name student.
In order to create a database table we can use CREATE statement as follows:
CREATE TABLE table_name(col1 datatype, col2 datatype);
Eg,
CREATE TABLE student(SN Number, Fname Text);
The above statement will create a database table named student with two column SN and Fname. The number of column can be increased accordingly.
1.2 DROP statement
It is used to delete database or table from the SQL server.
DROP DATABASE database_name;
Eg,
DROP DATABASE student;
This statement will delete database named student from the SQL server.
DROP TABLE table_name;
Eg,
DROP TABLE student;
This statement will delete database table named student from the SQL server.
2) Data Manipulation Language (DML)
DML is related with manipulation of records such as retrieval, sorting, displaying and deleting records or data. It helps user to submit query and display report of the table. It provide technique for processing the database. It includes commands like SELECT, INSERT, DELETE and UPDATE to manipulate the information stored in the database.
2.1) SELECT statement
SELECT * FROM table_name;
Eg:
SELECT * FROM student;
This statement will select all the columns from the database table named student.
2.2) INSERT statement
INSERT INTO table_name(col1, col2...) VALUES (Value1, Value2...);
Eg,
INSERT INTO student(SN,Fname) VALUES (3,"Ram");
The above statement will insert 3 and Ram into the database table named student.
2.3) DELETE statement
DELETE FROM table_name WHERE condition;
Eg,
DELETE FROM student WHERE Fname = "Ram";
This statement will delete all the records from the student table where the Fname value is ‘Ram’.
2.4) UPDATE statement
UPDATE table_name SET col1=value1, col2=value2, WHERE condition;
Eg,
UPDATE student SET SN=3, Fname = "Hari", WHERE Fname = "Ram";
This stament will update the update the table record whose fname is “Ram”.
3) Data Control Language (DCL)
DCL provides additional feature for security of table and database. It includes commands for controlling data and access to the database. Some of the example of this command are GRANT, COMMIT etc.
SOME IMPORTANT QUESTIONS
Types of CSS
CSS stands for Cascading Style Sheets which consists of various styles that defines how to display HTML elements. It is used to make the design of the Website dynamic and attractive. Styles are normally stored in Style Sheets. Since, every tags cannot design the Web site in very fascinating way we use CSS to solve that problem.
Advantages of using CSS
- Web pages will load faster.
- It helps to maintain design consistency across all the pages of the Web site.
- CSS allows for customizing elements such as font, font size, font color and many other
- CSS can help to make Web pages available for different media (desktop PC, mobile phones). i.e. device responsive
- It makes web page compatible with almost all the browsers.

CSS styles can be in various forms which are illustrated below with an example.
Without using CSS
<HTML>
<HEAD><TITLE>inline CSS</TITLE></HEAD>
<BODY bgcolor = “red”>
</BODY>
</HTML>
Above HTML file will generate empty webpage with just red color background. Same thing can be done by using several types of CSS i.e inline, internal and external CSS.
Inline CSS
This types of CSS are written inside the HTML tag.
<HTML>
<HEAD><TITLE>Inline CSS</TITLE></HEAD>
<BODY style = “background-color: red;”>
</BODY>
</HTML>
In above HTML file we have added style inside BODY tag. Similarly, we can add any number of CSS inside HTML tag.
Internal CSS
This types of CSS are written inside <STYLE> tag, which is placed in -between HEAD tag of an HTML document.
<HTML>
<HEAD><TITLE>Internal CSS</TITLE>
<STYLE>
body{
background-color: red;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
In above HTML file we have added STYLE tag inside HEAD. CSS is written directly selecting body tag.
Note: We can select id as well as class of any HTML tag. # is used to access id of the tag whereas, . is used to access class of the tag.
External CSS
In this type we have to prepare HTML file and CSS file separately. These two file are linked by following statement.
<link rel=“stylesheet” href=“name.css”>
Consider the following HTML document.
<HTML>
<HEAD><TITLE>External CSS</TITLE>
<link rel=“stylesheet” href=“mero.css”>
</HEAD>
<BODY>
</BODY>
</HTML>
Since we have linked “mero.css” in HTML file we have to create a separate CSS file named “mero.css”. We can directly right CSS without STYLE tag in CSS document.
body{
background-color: red;
}
In above HTML file we have a created separate HTML and CSS file which are linked together.