UNIT -V
Client Side
Scripting
TOPICS
Introduction to JavaScript
Declaring variables
Scope of variables
Functions
Event handlers (onclick, onsubmit etc)
Document Object Model
Form validation
Simple AJAX application.
Hibernate framework.
What is JavaScript ?
JavaScript originates from a language called
LiveScript.
ECMA Script is an International Standard based
around version 1.1 of JavaScript.
Later ratified by ISO.
Complementary to and integrated with Java &
HTML
JavaScript:
The script should be included in or referenced by an HTML
document for the code to be interpreted by the browser.
A web page need no longer be static HTML, but can include
programs that interact with the user, control the browser,
and dynamically create HTML content.
Advantages of JavaScript:
Widely supported in web browsers.
Gives easy access to the document object and can
manipulate.
Gives interesting animations.
Increased interactivity
Secure
Richer interfaces
Limitations with JavaScript:
If your script doest work then your page is
useless.
Scripts can run slowly.
Complex scripts can take long time to startup.
JAVASCRIPT- BASICS
In many respects JavaScript code resembles C.
The semantics of the two languages are different.
Syntax of the two languages are quite close.
JavaScript can be run on some file and web servers.
Many use it for developing front end web pages.
JavaScript Syntax
A JavaScript consists of JavaScript statements that are
placed within the <script>... </script> HTML tags in a web
page.
The <script> tag alert the browser program to begin
interpreting all the text between these tags as a script.
<script>
JavaScript code
</script>
The script tag takes two important attributes:
• language: This attribute specifies what scripting language
you are using. Typically, its value will be javascript.
• type: This attribute is what is indicate the scripting language
in use and its value should be set to "text/javascript".
• <script language="javascript" type="text/javascript">
JavaScript code
</script>
Your First JavaScript:
<html>
<body>
<script language="javascript“ type="text/javascript">
<!–
document.write("Hello World!")
//-->
</script>
</body>
</html>
Output: Hello World!
Whitespace and Line Breaks
Semicolons are Optional
Case Sensitivity:
JavaScript is a case-sensitive language.
Comments in JavaScript:
Any text between the characters /* and */ is treated as a
comment. This may span multiple lines.
In single line comments, use the //.
JavaScript Placement in HTML File
There is a flexibility given to include JavaScript code
anywhere in an HTML document.
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in and external file and then include in
<head>...</head> section.
JavaScript in <head>...</head> section:
If you want to have a script run on some event, such as
when a user clicks somewhere, then you will place that
script in the head
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body> <input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript in <body>...</body> section:
If you need a script to run as the page loads so that the script generates
content in the page, the script goes in the <body> portion of the
document.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>
JavaScript in <body> and <head> sections:
<html>
<head>
<script type="text/javascript">
function sayHello() { alert("Hello World") }
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script> <input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScript in External File :
<html>
<head>
<script type="text/javascript" src="filename.js" >
</script>
</head>
<body> ....... </body>
</html>
function sayHello()
{
alert("Hello World")
}
JavaScript Reserved Words
The following are reserved words in JavaScript.
abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super
JavaScript DataTypes:
JavaScript allows you to work with three primitive
data types:
Numbers eg. 123, 120.50 etc.
Strings of text e.g. "This text string" etc.
Boolean e.g. true or false.
JavaScript also defines two trivial data types,
null and undefined, each of which defines only a
single value.
JavaScript supports a composite data type known as
object.
JavaScript Variables:
JavaScript has variables. Variables can be thought of as
named containers.
Variables are declared with the var keyword as follows
<script type="text/javascript">
<!-- var money;
var name; //-->
</script>
Storing a value in a variable is called variable
initialization.
<script type="text/javascript">
<!-- var name = "Ali";
var money;
money = 2000.50; //-->
</script>
The general rules for variables
Names can contain letters, digits, underscores, and
dollar signs.
Names must begin with a letter
Names can also begin with $ and _ (but we will not
use it in this tutorial)
Names are case sensitive (y and Y are different
variables)
Reserved words (like JavaScript keywords) cannot be
used as names
JavaScript Variable Scope:
JavaScript variable will have only two scopes.
Global Variables: A global variable has global scope
which means it is defined everywhere in your
JavaScript code.
Local Variables: A local variable will be visible only
within a function where it is defined. Function
parameters are always local to that function.
Example
<html>
<body>
<script>
var value=50;//global variable
function a()
{
Var x=10;// local variable
alert(value);
}
function b(){
alert(value);
}
a();
</script>
</body>
</html>
JavaScript Operators
JavaScript language supports following type of
operators.
Arithmetic Operators
Comparision Operators
Logical (or Relational) Operators
Assignment Operators
Conditional (or ternary) Operators
The Arithematic Operators:
Operat Description Example
or
+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denumerator B / A will give 2
% Modulus Operator and remainder of after B % A will give 0
an integer division
++ Increment operator, increases integer A++ will give 11
value by one
-- Decrement operator, decreases integer A-- will give 9
value by one
The Comparison Operators:
Operator Description Example
== Checks if the value of two operands are equal or not, if yes then (A == B) is not true.
condition becomes true.
!= Checks if the value of two operands are equal or not, if values are not (A != B) is true.
equal then condition becomes true.
> Checks if the value of left operand is greater than the value of right (A > B) is not true.
operand, if yes then condition becomes true.
< Checks if the value of left operand is less than the value of right (A < B) is true.
operand, if yes then condition becomes true.
>= Checks if the value of left operand is greater than or equal to the value (A >= B) is not true.
of right operand, if yes then condition becomes true.
<= Checks if the value of left operand is less than or equal to the value of (A <= B) is true.
right operand, if yes then condition becomes true.
The Logical Operators:
Opera Description Example
tor
&& Called Logical AND operator. If both (A && B) is true.
the operands are non zero then then
condition becomes true.
|| Called Logical OR Operator. If any of (A || B) is true.
the two operands are non zero then
then condition becomes true.
! Called Logical NOT Operator. Use to !(A && B) is false.
reverses the logical state of its
operand. If a condition is true then
Logical NOT operator will make false.
The Bitwise Operators:
& Called Bitwise AND operator. It performs a (A & B) is 2 .
Boolean AND operation on each bit of its
integer arguments.
| Called Bitwise OR Operator. It performs a (A | B) is 3.
Boolean OR operation on each bit of its integer
arguments.
^ Called Bitwise XOR Operator. It performs a (A ^ B) is 1.
Boolean exclusive OR operation on each bit of
its integer arguments. Exclusive OR means
that either operand one is true or operand two
is true, but not both.
~ Called Bitwise NOT Operator. It is a is a unary (~B) is -4 .
operator and operates by reversing all bits in
the operand.
The Assignment Operators:
Operator Description Example
= Simple assignment operator, Assigns values from right side operands to left side C = A + B will assigne value of A + B into C
operand
+= Add AND assignment operator, It adds right operand to the left operand and C += A is equivalent to C = C + A
assign the result to left operand
-= Subtract AND assignment operator, It subtracts right operand from the left C -= A is equivalent to C = C - A
operand and assign the result to left operand
*= Multiply AND assignment operator, It multiplies right operand with the left C *= A is equivalent to C = C * A
operand and assign the result to left operand
/= Divide AND assignment operator, It divides left operand with the right operand C /= A is equivalent to C = C / A
and assign the result to left operand
%= Modulus AND assignment operator, It takes modulus using two operands and C %= A is equivalent to C = C % A
assign the result to left operand
The Conditional Operator (? :)
Op Description Example
era
tor
? : Conditional If Condition is true
Expression ? Then value X :
Otherwise value Y
JavaScript if...else Statements
JavaScript supports following forms
of if..else statement:
if statement
if...else statement
if...else if... statement.
if statement
The if statement is the fundamental control
statement that allows JavaScript to make decisions
and execute statements conditionally.
<script type="text/javascript">
var age = 20; if( age > 18 )
{
document.write("<b>Qualifies for driving</b>");
}
</script>
if...else statement
The if...else statement is the next form of control statement
that allows JavaScript to execute statements in more
controlled way.
<script type="text/javascript">
var age = 15;
if( age > 18 )
{
document.write("<b>Qualifies for driving</b>"); }
Else
{
document.write("<b>Does not qualify for driving</b>");
}
</script>
JavaScript Switch Case
<script type="text/javascript">
var grade='A'; document.write("Entering switch block");
switch (grade)
{
case 'A': document.write("Good job<br />"); break;
case 'B': document.write("Pretty good<br />"); break;
case 'C': document.write("Passed<br />"); break;
case 'D': document.write("Not so good<br />"); break;
case 'F': document.write("Failed<br />"); break;
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block"); </script>
JavaScript while Loops
While writing a program, there may be a situation when
you need to perform some action over and over again.
The while Loop:
<script type="text/javascript">
var count = 0;
document.write("Starting Loop" + "<br />");
while (count < 10)
{
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
</script>
The do...while Loop:
<script type="text/javascript">
var count = 0;
document.write("Starting Loop" + "<br />");
do{ document.write("Current Count : " + count + "<br
/>");
count++;
}while (count < 0);
document.write("Loop stopped!");
</script>
JavaScript for Loops
<script type="text/javascript">
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++)
{
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
</script>
JavaScript Loop Control
JavaScript provides you full control to handle your
loops and switch statement.
There may be a situation when you need to come out
of a loop without reaching at its bottom.
To handle all such situations, JavaScript
provides break and continue statements.
The break Statement:
<script type="text/javascript">
var x = 1; document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5)
{ break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
The continue Statement:
<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{ x = x + 1;
if (x == 5)
{ continue; // skill rest of the loop body }
document.write( x + "<br />"); }
document.write("Exiting the loop!<br /> ");
</script>
JavaScript Functions
A function is a group of reusable code which can be
called anywhere in your program.
JavaScript allows us to write our own functions as
well.
Function Definition:
<script type="text/javascript">
function functionname(parameter-list)
{ statements }
</script>
Example
<script type="text/javascript">
function sayHello() //function definition
{
alert("Hello there");
}
</script>
<script type="text/javascript">
sayHello(); //calling function
</script>
Function Parameters:
A function can take multiple parameters separated by
comma.
<script type="text/javascript">
function sayHello(name, age)
{
alert( name + " is " + age + " years old.");
}
</script>
<script type="text/javascript">
sayHello(‘Mili', 1 );
</script>
The return Statement
<html>
<head>
<script type = "text/javascript">
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate(‘Mili', ‘Kiran');
document.write (result );
}
</script>
</head>
<body>
<form> <input type = "button" onclick =
"secondFunction()" value = "Call Function">
</form>
</body>
</html>
Event Handlers
JavaScript's interaction with HTML is handled through
events that occur when the user or the browser
manipulates a page.
When the page loads, it is called an event.
When the user clicks a button, that click too is an event.
Other examples include events like pressing any key,
closing a window, resizing a window, etc.
Ex: Onclick(),
Onsubmit()
Onmouseover()
Onmouseoue()
onclick Event Type
<html>
<head>
<script type = "text/javascript">
<!--function sayHello()
{
alert("Hello World")
} //-->
</script>
</head>
<body>
<form> <input type = "button" onclick = "sayHello()" value =
"Say Hello" />
</form>
</body>
</html>
onsubmit Event Type
<html>
<head>
<script type = "text/javascript">
<!-- function validation()
{
all validation goes here ......... return either true or false
} //-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return
validate()">
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
Document Object Model
With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
HTML DOM methods are actions you can perform (on HTML
Elements).
HTML DOM properties are values (of HTML Elements) that you
can set or change.
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and
with other programming languages).
In the DOM, all HTML elements are defined
as objects.
The programming interface is the properties and
methods of each object.
A property is a value that you can get or set (like
changing the content of an HTML element).
A method is an action you can do (like add or deleting
an HTML element).
Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "H
ello World!";
</script>
</body>
</html>
In the example above, getElementById is a method,
while innerHTML is a property.
The getElementById Method
1. The most common way to access an HTML element is to
use the id of the element.
2. In the example above the getElementById method
used id="demo" to find the element.
The innerHTML Property
1. The easiest way to get the content of an element is by
using the innerHTML property.
2. The innerHTML property is useful for getting or
replacing the content of HTML elements.
Finding HTML Elements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName Find elements by tag name
(name)
document.getElementsByClassNam Find elements by class name
e(name)
Changing HTML Elements
Property Description
element.innerHTML = new html Change the inner HTML of an element
content
element.attribute = new value Change the attribute value of an
HTML element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, Change the attribute value of an
value) HTML element
Adding and Deleting Elements
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream
Adding Events Handlers
Method Description
document.getElementById(id).oncli Adding event handler code to an
ck = function(){code} onclick event
Form Validation
JavaScript provides a way to validate form's data on
the client's computer before sending it to the web
server. Form validation generally performs two
functions.
Basic Validation − First of all, the form must be
checked to make sure all the mandatory fields are
filled in. It would require just a loop through each
field in the form and check for data.
Data Format Validation − Secondly, the data that is
entered must be checked for correct form and value.
Your code must include appropriate logic to test
correctness of data.
Example
<script type = "text/javascript">
<!-- function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
} //-->
</script>
Simple AJAX application
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to
request data from a web server)
JavaScript and HTML DOM (to display or use the
data)
AJAX allows web pages to be updated
asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to
update parts of a web page, without reloading the
whole page.
How AJAX Works
1. An event occurs in a web page (the page is loaded, a
button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web
server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by
JavaScript
Example
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change
Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Hibernate framework
Hibernate is a Java framework that simplifies the
development of Java application to interact with the
database. It is an open source, lightweight, ORM
(Object Relational Mapping) tool.
Hibernate implements the specifications of JPA (Java
Persistence API) for data persistence.
ORM Tool
The ORM tool internally uses the JDBC API to interact with the
database.
Advantages of Hibernate Framework
1) Open Source and Lightweight
2) Fast Performance
3) Database Independent Query
4) Automatic Table Creation
5) Simplifies Complex Join
6) Provides Query Statistics and Database Status
