SUBJECT CODE

TYPE THE SUBJECT NAME HERE

UNIT NO 2

Client Side Scripting

III V
20ITPC501
WEB
TECHNOLOGY
 20ITPC501
WEB TECHNOLOGY
CLIENT SIDE PROGRAMMING

Introduction
● JavaScript is an Object-oriented Computer Programming Language.
● It is an Interpreted programming or script language from Netscape.
● The scripting languages are easier and faster to code.
● Its first appearance was in Netscape 2.0 in 1995 with the name 'LiveScript'.

Features of JavaScript

● JavaScript is an open source scripting language.

● It is lightweight.
● It creates network-centric applications.
● It is platform independent.
 20ITPC501
WEB TECHNOLOGY

Advantages of JavaScript:

● JavaScript saves server traffic.

● It performs the operations very fast.
● It is simple to learn and implement.
● It is versatile.
● JavaScript pages are executed on the client side.
● JavaScript extends its functionality to the web pages.

Disadvantages of JavaScript

● JavaScript cannot be used for networking applications.

● It doesn't have any multithreading or multiprocessor capabilities.
● It has security issues being a client-side scripting language.
 20ITPC501
WEB TECHNOLOGY

What is a script?
● Script is a small, embedded program.
● The most popular scripting languages on the web are, JavaScript or VBScript.
● HTML does not have scripting capability, you need to use <script> tag.
● The <script> tag is used to generate a script.
● The </script> tag indicates the end of the script or program.
Example : Type attribute

<script type = “text/javascript”>

document.write(“TutorialRide”);
</script>
The 'type' attribute indicates which script language you are using with the type attribute.
 20ITPC501
WEB TECHNOLOGY

Types of Scripts
1. Client-Side Scripting- 1) Javascript 2) VBScript 3) HTML 4) CSS 5) AJAX
2. Server-Side Scripting-1) PHP 2) C++ 3) Java and JSP 4) Python 5) Ruby

1. Client-Side Scripting

● Client-Side Scripting is an important part of the Dynamic HTML (DHTML).

● JavaScript is the main client-side scripting language for the web.
● The scripts are interpreted by the browser.
● Client-Side scripting is used to make changes in the web page after they arrive at the browser.
● It is useful for making the pages a bit more interesting and user-friendly.
● t provides useful gadgets such as calculators, clocks etc.
 20ITPC501
WEB TECHNOLOGY

Operation of Client-Side Scripting

 20ITPC501
WEB TECHNOLOGY

In the above diagram,

● The user requests a web page from the server.

● The server finds the page and sends it to the user.
● The page is displayed on the browser with any scripts running during or after the display.
● Client-Side scripting is used to make web page changes after they arrive at the browser.
2. Server-Side Scripting

Server-Side Scripting is used in web development.

The server-side environment runs a scripting language which is called a web server.
Server-Side Scripting is used to provide interactive web sites.
It is different from Client-Side Scripting where the scripts are run by viewing the web browser, usually in
JavaScript.
It is used for allowing the users to have individual accounts and providing data from databases.
 20ITPC501
WEB TECHNOLOGY

● It allows a level of privacy, personalization and provision of information that is very useful.
● It includes ASP.NET and PHP.
● It does not rely on the user having specific browser or plug-in.
● It is affected by the processing speed of the host server.
 20ITPC501
WEB TECHNOLOGY

Operation of Server-Side Scripting

● The client requests a web page from the server.

● The script in the page is interpreted by the server, creating or changing the page content to suit
the user (client) and the passing data around.
● The page in its final form is sent to the user(client) and then cannot be changed using Server-
Side Scripting.
● Server-Side Scripting tends to be used for allowing the users to have individual accounts and
provides data from the databases.
● These scripts are never seen by the user.
● Server-Side script runs on the server and generate results which are sent to the user.
● Running all the scripts puts a lot of load onto a server but not on the user's system.
 20ITPC501
WEB TECHNOLOGY

Ways to execute JavaScript

There are three ways of executing JavaScript on a web browser.

1. Inside <HEAD> tag

2. Within <BODY> tag
3. In an External File

1. Inside <HEAD> tag

Example : Simple JavaScript Program using <HEAD> tag

head.html //File Name

<html>
<head>
<script type = "text/javascript">
 20ITPC501
WEB TECHNOLOGY

function abc()
{
document.write("CareerRide Info");
}
</script>
</head>
<body>
Click the button
<input type=button onclick="abc()" value="Click">
</body>
</html>

Output:
 20ITPC501
WEB TECHNOLOGY

2. Within <BODY> tag

Example : Simple JavaScript Program using <BODY> tag

body.html //File Name
<html>
<body>
<script type="text/javascript">
document.write("CareerRide Info");
</script>
</body>
</html>
Output:
CareerRide Info
 20ITPC501
WEB TECHNOLOGY

3. External File

Example : Simple JavaScript Program using External File

external.html //File Name

<html>
<body>
<script type="text/javascript" src="abc.js">
</script>
</body>
</html>
abc.js //External File Name
document.write("CareerRide Info");
Output:
CareerRide Info
 20ITPC501
WEB TECHNOLOGY
Rules for writing the JavaScript code

● Script should be placed inside the <script> tag.

● A semicolon at the end of each statement is optional.
● The single line comment is just two slashes (//) and multiple line comment starts with /* and ends
with */.
● Use 'document.write' for writing a string into HTML document.
● JavaScript is case sensitive.
● You can insert special characters with backslash (\& or \$).
● JavaScript variables and identifiers

JavaScript Variables JavaScript uses variables which can be thought of as Named Containers.
Variables are declared with the 'var' keyword.
 20ITPC501
Variable Scope WEB TECHNOLOGY

1. Global Variable
Declaring a variable outside the function makes it a Global Variable.
Variable is accessed everywhere in the document.
Example : Simple Program on Global Variable
<html> <head>
<script type = "text/javascript">
count = 5; //Global variable
var a = 4; //Global variable
function funccount() // Function Declaration
{
count+=5; // Local variable
a+=4;
document.write("<b>Inside function Global Count: </b>"+count+"<br>");
document.write("<b>Inside function Global A: </b>"+a+"<br>"); }
 20ITPC501
WEB TECHNOLOGY

</script>
</head>
<body>
<script type="text/javascript">
document.write("<b>Outside function Global Count: </b>"+count+"<br>");
document.write("<b>Outside function Global A: </b>"+a+"<br>");
funccount();
</script>
</body>
</html>.
Output:

Outside function Global Count: 5

Outside function Global A: 4
Inside function Global Count: 10
Inside function Global A: 8
 20ITPC501
WEB TECHNOLOGY

2. Local Variable

A variable declared within a function is called as Local Variable.

It can be accessed only within the function.
Example : Simple Program on Local Variable

<html> <head>
<script type="text/javascript">
function funccount(a) // Function with Argument
{
var count=5; // Local variable
count+=2;
document.write("<b>Inside Count: </b>"+count+"<br>");
a+=3;
document.write("<b>Inside A: </b>"+a+"<br>");
} </script> </head>
 20ITPC501
WEB TECHNOLOGY

<body>
<script type="text/javascript">
var a=3, count = 0;
funccount(a);
document.write("<b>Outside Count: </b>"+count+"<br>");
document.write("<b>Outside A: </b> "+a+"<br>");
</script>
</body>
</html>
Output:
Inside Count: 7
Inside A: 6
Outside Count: 0
Outside A: 3
 20ITPC501
WEB TECHNOLOGY