Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
722 views

Unit - 5 - Client Side Scripting

The document discusses client-side scripting topics including an introduction to JavaScript, variables, functions, events, DOM, form validation, AJAX, and Hibernate. It provides details on JavaScript syntax, data types, operators, and variable scope. Key points covered include how to include JavaScript in HTML, the structure of JavaScript code, and basic JavaScript concepts like variables, functions, and operators.

Uploaded by

priyanka karanam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
722 views

Unit - 5 - Client Side Scripting

The document discusses client-side scripting topics including an introduction to JavaScript, variables, functions, events, DOM, form validation, AJAX, and Hibernate. It provides details on JavaScript syntax, data types, operators, and variable scope. Key points covered include how to include JavaScript in HTML, the structure of JavaScript code, and basic JavaScript concepts like variables, functions, and operators.

Uploaded by

priyanka karanam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 66

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

You might also like