Client side scripting using Javascript

CLIENT SIDE SCRIPTING WITH
JAVASCRIPT
Prepared By:
Bansari Shah
EN. NO.:150410107098
TY CE-2(Batch – B)

“A script is a program that automates the execution of
tasks which could alternatively be executed one-by-one
by a human operator.”
What is a Script?

A scripting language is a programming language that
supports the writing of scripts.
Scripting Languages

 The server-side scripting comprises all the scripts that
are executed on the server.
 Adopted technologies: Perl, PHP, ColdFusion, XSTL,
etc.
 The code is not visible to the client.
Server-side Scripting

 The client-side scripting comprises all the scripts that
are executed on the browser.
 The scripting derives from the event-based
programming that is typical of user interfaces.
 Adopted technologies: JavaScript, VBScript.
Client-side Scripting

Client-side Scripting
ADVANTAGES
 The Web browser uses its own
resources, and eases the
burden on the servlet.
 It has fewer features than
server side scripting
DISADVANTAGES
 Code is usually visible.
 Code is probably modifiable.
 Local files and databases can’t
be accessed. (as they are
stored on the server)

 JavaScript is the language of the web browser.
 JavaScript was originally called Live Script, and was
developed by Netscape Communications.
JavaScript

 JavaScript is designed to add interactivity to HTML pages
 JavaScript :
 consists of lines of interpretable computer code
 gives HTML designers a programming tool
 is usually embedded directly into HTML pages.
 allows to put dynamic text into an HTML page
 Java and JavaScript are two completely different
languages in both concept and design
JavaScript

 JavaScript is used in millions of web pages
 to improve the design
 to validate forms
 to detect browsers
 to create cookies
 JavaScript can react to events and can be used to validate data
and to create cookies
 Is the most popular scripting language in all major browsers e.g.
 Internet Explorer
 Mozilla
 Firefox
 Netscape
 Opera
JavaScript

<html> Tells where the JavaScript starts
<body>
<script type=“text/javascript”>
document.write(“Hello World!”);
</script> Commands for writing output to a page
</body>
</html> Tells where the JavaScript ends
This code produce the output on an HTML page: Hello World!
JavaScript and HTML page

<html>
<head>
<script src="xyz.js">
</script>
</head>
<body>
</body>
</html> A separate file
JavaScript and HTML page

 JavaScript statements are
 codes to be executed by the browser
 tells the browser what to do
 commands to the browser
 add semicolons at the end
 can be grouped together into blocks using curly
brackets
 JavaScript comments make the code more readable
 Single line comments start with //
 Multi line comments start with /* and end with */
Statements and Comments

 JavaScript Variables are containers for storing
information e.g. x=15; length=60.10
 It hold values or expressions
 can hold a text value like in name=“multimedia”
 var statement can declare JavaScript variables: var x;
var name;
 Variable names are case sensitive i.e. “myVar” is not
the same as “myvar”
 must begin with a letter or the underscore character
JavaScript Variables

 JavaScript Functions
 Can be called with the function name
 Can also be executed by an event
 Can have parameters and return statement
* Events
 are actions that can be detected e.g. OnMouseOver,
onMouseOut etc.
 are normally associated with functions
 <input type="text" size="30" id="email"
onChange="checkEmail()">
JavaScript Functions and Events

* Javascript actions may be triggered from events, e.g. changes on
form fields or a submit button being clicked:
 onfocus = Form field gets focus (validation)
 onblur= Form field looses focus (validation)
 onchange= Content of a field changes (validation)
 onselect= Text is selected
 onmouseover= Mouse moves over a link (animated buttons)
 onmouseout= Mouse moves out of a link (animated …)
 onclick= Mouse clicks an object
 onload= Page is finished loading (initial actions, info,)
 onSubmit= Submit button is clicked (validation etc.)
JavaScript: Events

 The document object represents the whole html
document.
 When html document is loaded in the browser, it
becomes a document object. It is the root
element that represents the html document. It has
properties and methods. By the help of document
object, we can add dynamic content to our web page.
Document Object Model

 We can access and change the contents of document
by its methods.
 The important methods of document object are as
follows:
Methods of document object

Client side scripting using Javascript

In this document