Professional Documents
Culture Documents
Javascript
Javascript
Scripting Basics
Web Page
• web page is a document available on world wide web. Web Pages are
stored on web server and can be viewed using a web browser.
• A web page can cotain huge information including text, graphics,
audio, video and hyper links. These hyper links are the link to other
web pages.
03/21/22 satheesh.research18@gmail.com 1
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 2
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 3
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 4
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 5
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 6
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 7
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 8
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 9
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 10
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 11
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 12
IT8501 - Web Technology - Java Script
Scripting Basics
03/21/22 satheesh.research18@gmail.com 13
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 14
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 15
IT8501 - Web Technology - Java Script
Server-Side scripting languages
ASP
• Active Server Pages (ASP)is server-side script engine to create dynamic web pages. It
supports Component Object Model (COM) which enables ASP web sites to access
functionality of libraries such as DLL.
ActiveVFP
• It is similar to PHP and also used for creating dynamic web pages. It uses native Visual
Foxpro language and database.
ASP.net
• It is used to develop dynamic websites, web applications, and web services.
Java
• Java Server Pages(JSP) are used for creating dynamic web applications. The Java code is
compiled into byte code and run by Java Virtual Machine (JVM).
Python
• It supports multiple programming paradigms such as object-oriented, and functional
programming. It can also be used as non-scripting language using third party tools such
as Py2exe or Pyinstaller.
WebDNA
• It is also a server-side scripting language with an embedded database system.
03/21/22 satheesh.research18@gmail.com 16
IT8501 - Web Technology - Java Script
Java Script
Java Script:
• Object, names, literals,
• Operators and expressions
• Statements and features
• Events – windows
• Documents
• Frames
• Data types
• Built-in functions
• Browser object model
• Verifying forms.
03/21/22 satheesh.research18@gmail.com 17
IT8501 - Web Technology - Java Script
Java Script
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'.
03/21/22 satheesh.research18@gmail.com 18
IT8501 - Web Technology - Java Script
Java Script
Features of JavaScript
– JavaScript is an open source scripting language.
– It is lightweight.
– It creates network-centric applications.
– It is platform independent.
– It validates form data.
– It reduces server load.
03/21/22 satheesh.research18@gmail.com 19
IT8501 - Web Technology - Java Script
Java Script
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.
03/21/22 satheesh.research18@gmail.com 20
IT8501 - Web Technology - Java Script
Java Script
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.
03/21/22 satheesh.research18@gmail.com 21
IT8501 - Web Technology - Java Script
Java Script - Variables
JavaScript Variables
• JavaScript uses variables which can be thought of as Named
Containers.
• Variables are declared with the 'var' keyword.
Example:
var a;
var b;
• Variable names are case sensitive.
• You can declare multiple variables with the
same 'var' keyword.
03/21/22 satheesh.research18@gmail.com 22
IT8501 - Web Technology - Java Script
Java Script - Variables
JavaScript Variables Scope:
1. Global Variable
• Declaring a variable outside the function makes it a Global Variable.
• Variable is accessed everywhere in the document.
2. Local Variable
• A variable declared within a function is called as Local Variable.
• It can be accessed only within the function.
03/21/22 satheesh.research18@gmail.com 23
IT8501 - Web Technology - Java Script
Java Script – Variables
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 Output:
{
count+=5; // Local variable
a+=4;
Outside function Global Count: 5
document.write("<b>Inside function Global Count: </b>"+count+"<br>"); Outside function Global A: 4
document.write("<b>Inside function Global A: </b>"+a+"<br>"); Inside function Global Count: 10
}
</script>
Inside function Global a: 8
</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>
03/21/22 satheesh.research18@gmail.com
IT8501 - Web Technology - Java Script
Java Script - Variables
Example : Simple Program on Local Variable
<html>
<head>
<script type="text/javascript">
function funccount(a) // Function with Argument
Output:
{
var count=5; // Local variable
count+=2; Inside Count: 7
document.write("<b>Inside Count: </b>"+count+"<br>"); Inside A: 6
a+=3;
document.write("<b>Inside A: </b>"+a+"<br>"); Outside Count: 0
} Outside A: 3
</script>
</head>
<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>
03/21/22 satheesh.research18@gmail.com 25
IT8501 - Web Technology - Java Script
Java Script
There are three ways of executing JavaScript on a web browser.
1.Inside <HEAD> tag
2.Within <BODY> tag
3.In an External File
03/21/22 satheesh.research18@gmail.com 26
IT8501 - Web Technology - Java Script
Java Script
Simple JavaScript Program using <HEAD> tag
<html>
<head>
<script type = "text/javascript">
function abc()
{
document.write("CareerRide Info");
}
</script>
</head> CareerRide Info
<body>
Click the button
<input type=button onclick="abc()" value="Click">
</body>
</html>
03/21/22 satheesh.research18@gmail.com 27
IT8501 - Web Technology - Java Script
Java Script
Simple JavaScript Program using <BODY> tag
<html>
<body>
<script type="text/javascript">
document.write("CareerRide Info");
</script>
</body> Output:
</html> CareerRide Info
03/21/22 satheesh.research18@gmail.com 28
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 30
IT8501 - Web Technology - Java Script
JavaScript Objects
• JavaScript is an Object Oriented Programming (OOP) language. A
programming language can be called object-oriented if it provides four basic
capabilities to developers −
• Encapsulation − the capability to store related information, whether data or
methods, together in an object.
• Aggregation − the capability to store one object inside another object.
• Inheritance − the capability of a class to rely upon another class (or number
of classes) for some of its properties and methods.
• Polymorphism − the capability to write one function or method that works in
a variety of different ways.
• Objects are composed of attributes. If an attribute contains a function, it is
considered to be a method of the object, otherwise the attribute is considered a
property.
03/21/22 satheesh.research18@gmail.com 31
IT8501 - Web Technology - Java Script
Java Script - Object
Object Properties
• Object properties can be any of the three primitive data types,
or any of the abstract data types, such as another object.
• Object properties are usually variables that are used internally
in the object's methods, but can also be globally visible
variables that are used throughout the page.
syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
03/21/22 satheesh.research18@gmail.com 32
IT8501 - Web Technology - Java Script
Java Script - Object
Object Methods
• Methods are the functions that let the object do something or let something
be done to it. There is a small difference between a function and a method –
at a function is a standalone unit of statements and a method is attached to
an object and can be referenced by the thiskeyword.
• Methods are useful for everything from displaying the contents of the object
to the screen to performing complex mathematical operations on a group of
local properties and parameters.
• For example − Following is a simple example to show how to use
the write() method of document object to write any content on the
document.
document.write("This is test");
03/21/22 satheesh.research18@gmail.com 33
IT8501 - Web Technology - Java Script
Java Script - Object
User-Defined Objects:
• All user-defined objects and built-in objects are descendants of an object
called Object.
The new Operator:
• The new operator is used to create an instance of an object. To create an object,
the newoperator is followed by the constructor method.
• In the following example, the constructor methods are Object(), Array(), and Date().
These constructors are built-in JavaScript functions.
03/21/22 satheesh.research18@gmail.com 34
IT8501 - Web Technology - Java Script
Java Script - Object
The Object() Constructor:
• A constructor is a function that creates and initializes an object.
JavaScript provides a special constructor function
called Object() to build the object. The return value of
the Object() constructor is assigned to a variable.
• The variable contains a reference to the new object. The
properties assigned to the object are not variables and are not
defined with the var keyword.
03/21/22 satheesh.research18@gmail.com 35
IT8501 - Web Technology - Java Script
Java Script - Object
Example : how to create an Object –Java Script:
<html>
<head>
<title>User-defined objects</title>
</head>
<body>
<script type="text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>
03/21/22 satheesh.research18@gmail.com 36
IT8501 - Web Technology - Java Script
Java Script - Object
create an object with a User-Defined Function. Here thiskeyword is used to refer
to the object that has been passed to a function.
<html>
<head>
<title>User-defined objects</title>
Output:
<script type="text/javascript"> Book name is : Perl
function book(title, author){
this.title = title; Book author is : Mohtashim
this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>
03/21/22 satheesh.research18@gmail.com 37
IT8501 - Web Technology - Java Script
Java Script - Object
Defining Methods for an Object
• The previous examples demonstrate how the constructor creates the object and assigns
properties. But we need to complete the definition of an object by assigning methods to it.
• Example - Try the following example; it shows how to add a function along with an
object.
<html>
<head>
<title>User-defined objects</title>
03/21/22 satheesh.research18@gmail.com 39
IT8501 - Web Technology - Java Script
Java Script – Number Object
• The Number object represents numerical date, either integers
or floating-point numbers. In general, you do not need to worry
about Number objects because the browser automatically
converts number literals to instances of the number class.
var val = new Number(number);
• In the place of number, if you provide any non-number
argument, then the argument cannot be converted into a
number, it returns NaN (Not-a-Number).
03/21/22 satheesh.research18@gmail.com 40
IT8501 - Web Technology - Java Script
Java Script – Number Object
Number Properties
• MAX_VALUE : The largest possible value a number in JavaScript can have
1.7976931348623157E+308
• MIN_VALUE : The smallest possible value a number in JavaScript can have 5E-324
• NaN : Equal to a value that is not a number.
• NEGATIVE_INFINITYA : value that is less than MIN_VALUE.
• POSITIVE_INFINITYA : value that is greater than MAX_VALUE
• prototypeA : static property of the Number object. Use the prototype property to
assign new properties and methods to the Number object in the current document
• Constructor : Returns the function that created this object's instance. By default this is
the Number object.
03/21/22 satheesh.research18@gmail.com 41
IT8501 - Web Technology - Java Script
Java Script – Number Object
Number Methods
• toExponential() : Forces a number to display in exponential notation, even if the
number is in the range in which JavaScript normally uses standard notation.
• toFixed() : Formats a number with a specific number of digits to the right of the
decimal.
• toLocaleString() : Returns a string value version of the current number in a format that
may vary according to a browser's local settings.
• toPrecision() : Defines how many total digits (including digits to the left and right of
the decimal) to display of a number.
• toString() : Returns the string representation of the number's value.
• valueOf() : Returns the number's value.
03/21/22 satheesh.research18@gmail.com 42
IT8501 - Web Technology - Java Script
Java Script – Boolean Object
• The Boolean object represents two values, either "true" or "false". If value parameter is
omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an
initial value of false.
Syntax ; var val = new Boolean(value);
Boolean Properties
• Constructor : Returns a reference to the Boolean function that created the object.
• prototype : The prototype property allows you to add properties and methods to an object.
Boolean Methods
• toSource() : Returns a string containing the source of the Boolean object; you can use this
string to create an equivalent object.
• toString() : Returns a string of either "true" or "false" depending upon the value of the
object.
• valueOf() : Returns the primitive value of the Boolean object.
03/21/22 satheesh.research18@gmail.com 43
IT8501 - Web Technology - Java Script
Java Script - String Object
03/21/22 satheesh.research18@gmail.com 44
IT8501 - Web Technology - Java Script
Java Script – String Object
String Properties
• Constructor : Returns a reference to the String function that created the object.
• Length : Returns the length of the string.
• Prototype : The prototype property allows you to add properties and methods
to an object.
String Methods
• charAt() : Returns the character at the specified index.
• charCodeAt() : Returns a number indicating the Unicode value of the character at the
given index.
• concat() : Combines the text of two strings and returns a new string.
• indexOf() : Returns the index within the calling String object of the first occurrence of
the specified value, or -1 if not found.
• lastIndexOf() : Returns the index within the calling String object of the last occurrence
of the specified value, or -1 if not found.
03/21/22 satheesh.research18@gmail.com 45
IT8501 - Web Technology - Java Script
Java Script – String Object
String Methods
• localeCompare() : Returns a number indicating whether a reference string comes before or after or is the same
as the given string in sort order.
• match() : Used to match a regular expression against a string.
• replace() : Used to find a match between a regular expression and a string, and to replace the matched
substring with a new substring.
• search() : Executes the search for a match between a regular expression and a specified string.
• slice() : Extracts a section of a string and returns a new string.
• split() : Splits a String object into an array of strings by separating the string into substrings.
• substr() : Returns the characters in a string beginning at the specified location through the specified number of
characters.
• substring() : Returns the characters in a string between two indexes into the string.
• toLocaleLowerCase() : The characters within a string are converted to lower case while respecting the current
locale.
• toLocaleUpperCase() : The characters within a string are converted to upper case while respecting the current
locale.
• toLowerCase() : Returns the calling string value converted to lower case.
• toString() : Returns a string representing the specified object.
• toUpperCase() : Returns the calling string value converted to uppercase.
• valueOf() : Returns the primitive value of the specified object.
03/21/22 satheesh.research18@gmail.com 46
IT8501 - Web Technology - Java Script
Java Script – Array Object
• The Array object lets you store multiple values in a single variable. It stores
a fixed-size sequential collection of elements of the same type. An array is
used to store a collection of data, but it is often more useful to think of an
array as a collection of variables of the same type.
Syntax :
var fruits = new Array( "apple", "orange", "mango" );
OR
var fruits = [ "apple", "orange", "mango" ];
OR
fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element
03/21/22 satheesh.research18@gmail.com 47
IT8501 - Web Technology - Java Script
Java Script – Array Object
Array Properties
• Constructor : Returns a reference to the array function that created the object.
• index : The property represents the zero-based index of the match in the string
• Input : This property is only present in arrays created by regular expression matches.
• length : Reflects the number of elements in an array.
• Prototype : The prototype property allows you to add properties and methods to an object.
Array Methods
• concat() : Returns a new array comprised of this array joined with other array(s) and/or value(s).
• every() : Returns true if every element in this array satisfies the provided testing function.
• filter() : Creates a new array with all of the elements of this array for which the provided
filtering function returns true.
• forEach() : Calls a function for each element in the array.
• indexOf() : Returns the first (least) index of an element within the array equal to the specified
value, or -1 if none is found.
• join() : Joins all elements of an array into a string.
03/21/22 satheesh.research18@gmail.com 48
IT8501 - Web Technology - Java Script
Java Script – Array Object
Array Methods
• lastIndexOf() : Returns the last (greatest) index of an element within the array equal to the specified value, or
-1 if none is found.
• map() : Creates a new array with the results of calling a provided function on every element in this array.
• pop() : Removes the last element from an array and returns that element.
• push() : Adds one or more elements to the end of an array and returns the new length of the array.
• reduce() : Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it
to a single value.
• reduceRight() : Apply a function simultaneously against two values of the array (from right-to-left) as to
reduce it to a single value.
• reverse() : Reverses the order of the elements of an array -- the first becomes the last, and the last becomes
the first.
• shift() : Removes the first element from an array and returns that element.
• slice() : Extracts a section of an array and returns a new array.
• some() : Returns true if at least one element in this array satisfies the provided testing function.
• toSource() : Represents the source code of an object
• sort() : Sorts the elements of an array
• splice() : Adds and/or removes elements from an array.
• toString() : Returns a string representing the array and its elements.
• unshift() : Adds one or more elements to the front of an array and returns the new length of the array.
03/21/22 satheesh.research18@gmail.com 49
IT8501 - Web Technology - Java Script
Java Script – Date Object
• The Date object is a datatype built into the JavaScript language. Date objects are created with the new
Date( ) as shown below.
• Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow
you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using
either local time or UTC (universal, or GMT) time.
• The ECMAScript standard requires the Date object to be able to represent any date and time, to millisecond
precision, within 100 million days before or after 1/1/1970. This is a range of plus or minus 273,785 years, so
JavaScript can represent date and time till the year 275755.
Syntax
new Date( )
Note − Parameters in the brackets are always optional.
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
03/21/22 satheesh.research18@gmail.com 50
IT8501 - Web Technology - Java Script
Java Script – Date Object
Description of the parameters
• No Argument − With no arguments, the Date() constructor creates a Date object set to the current date and
time.
• milliseconds − When one numeric argument is passed, it is taken as the internal numeric representation of
the date in milliseconds, as returned by the getTime() method. For example, passing the argument 5000
creates a date that represents five seconds past midnight on 1/1/70.
• datestring − When one string argument is passed, it is a string representation of a date, in the format
accepted by the Date.parse() method.
• 7 agruments − To use the last form of the constructor shown above. Here is a description of each argument −
– year − Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you
should always specify the year in full; use 1998, rather than 98.
– month − Integer value representing the month, beginning with 0 for January to 11 for December.
– date − Integer value representing the day of the month.
– hour − Integer value representing the hour of the day (24-hour scale).
– minute − Integer value representing the minute segment of a time reading.
– second − Integer value representing the second segment of a time reading.
– millisecond − Integer value representing the millisecond segment of a time reading.
03/21/22 satheesh.research18@gmail.com 51
IT8501 - Web Technology - Java Script
Java Script – Date Object
Date Properties
• Constructor : Specifies the function that creates an object's prototype.
• prototype : The prototype property allows you to add properties and methods to an object
Date Methods
• Date() : Returns today's date and time
• getDate() : Returns the day of the month for the specified date according to local time.
• getDay() : Returns the day of the week for the specified date according to local time.
• getFullYear() : Returns the year of the specified date according to local time.
• getHours() : Returns the hour in the specified date according to local time.
• getMilliseconds() : Returns the milliseconds in the specified date according to local time.
• getMinutes() : Returns the minutes in the specified date according to local time.
• getMonth() : Returns the month in the specified date according to local time.
• getSeconds() : Returns the seconds in the specified date according to local time.
• getTime() : Returns the numeric value of the specified date as the number of milliseconds
since January 1, 1970, 00:00:00 UTC.
• getTimezoneOffset() : Returns the time-zone offset in minutes for the current locale.
• getUTCDate() : Returns the day (date) of the month in the specified date according to universal time
03/21/22 satheesh.research18@gmail.com 52
IT8501 - Web Technology - Java Script
Java Script – Math Object
03/21/22 satheesh.research18@gmail.com 53
IT8501 - Web Technology - Java Script
Java Script – Math Object
Math Properties
• E \ : Euler's constant and the base of natural logarithms,
approximately 2.718.
• LN2 : Natural logarithm of 2, approximately 0.693.
• LN10 : Natural logarithm of 10, approximately 2.302.
• LOG2E : Base 2 logarithm of E, approximately 1.442.
• LOG10E : Base 10 logarithm of E, approximately 0.434.
• PI : Ratio of the circumference of a circle to its diameter,
approximately 3.14159.
• SQRT1_2 : Square root of 1/2; equivalently, 1 over the square
root of 2, approximately 0.707.
• SQRT2 : Square root of 2, approximately 1.414.
03/21/22 satheesh.research18@gmail.com 54
IT8501 - Web Technology - Java Script
Java Script – Math Object
Math Methods
• abs() : Returns the absolute value of a number.
• acos() : Returns the arccosine (in radians) of a number.
• asin() : Returns the arcsine (in radians) of a number.
• atan() : Returns the arctangent (in radians) of a number.
• atan2() : Returns the arctangent of the quotient of its arguments.
• ceil() : Returns the smallest integer greater than or equal to a number.
• cos() : Returns the cosine of a number.
• exp() : Returns EN, where N is the argument, and E is Euler's constant, the base of the natural logarithm.
• floor() : Returns the largest integer less than or equal to a number.
• log() : Returns the natural logarithm (base E) of a number.
• max() : Returns the largest of zero or more numbers.
• min() : Returns the smallest of zero or more numbers.
• pow() : Returns base to the exponent power, that is, base exponent.
• random() : Returns a pseudo-random number between 0 and 1.
• round() : Returns the value of a number rounded to the nearest integer.
• sin() : Returns the sine of a number.
• sqrt() : Returns the square root of a number.
• tan() : Returns the tangent of a number.
• toSource() : Returns the string "Math".
03/21/22 satheesh.research18@gmail.com 55
IT8501 - Web Technology - Java Script
Java Script – Regular Expressions and RegExp Object
03/21/22 satheesh.research18@gmail.com 56
IT8501 - Web Technology - Java Script
Java Script – Statement
03/21/22 satheesh.research18@gmail.com 57
IT8501 - Web Technology - Java Script
Java Script – Statement
03/21/22 satheesh.research18@gmail.com 58
IT8501 - Web Technology - Java Script
Java Script – Statement
03/21/22 satheesh.research18@gmail.com 59
IT8501 - Web Technology - Java Script
Java Script – Statement
03/21/22 satheesh.research18@gmail.com 60
IT8501 - Web Technology - Java Script
Java Script – Statement
03/21/22 satheesh.research18@gmail.com 61
IT8501 - Web Technology - Java Script
Java Script – EVENTS
What is an Event ?
• 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.
• Developers can use these events to execute JavaScript coded responses,
which cause buttons to close windows, messages to be displayed to users,
data to be validated, and virtually any other type of response imaginable.
• Events are a part of the Document Object Model (DOM) Level 3 and every
HTML element contains a set of events which can trigger JavaScript Code.
03/21/22 satheesh.research18@gmail.com 62
IT8501 - Web Technology - Java Script
03/21/22 satheesh.research18@gmail.com 63
IT8501 - Web Technology - Java Script
Java Script – EVENTS
onclick Event Type
<html>
<head>
<script type="text/javascript"> This is the most frequently used event type
<!--
function sayHello() { which occurs when a user clicks the left
alert("Hello World") button of his mouse. You can put your
}
//-->
validation, warning etc., against this event
</script> type.
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
03/21/22 satheesh.research18@gmail.com 64
IT8501 - Web Technology - Java Script
Java Script – EVENTS
onsubmit Event type
• onsubmit is an event that occurs when you try to submit a form. You can put your
form validation against this event type.
<html>
<head>
<script type="text/javascript">
<!-- Here we are calling a validate()function
function validation() {
all validation goes here before submitting a form data to the
.........
return either true or false webserver. If validate() function returns
}
//-->
true, the form will be submitted,
</script> otherwise it will not submit the data.
</head>
<body>
</body>
</html>
03/21/22 satheesh.research18@gmail.com 65
IT8501 - Web Technology - Java Script
Java Script – EVENTS
onmouseover and onmouseout
<html>
<head>
<script type="text/javascript">
<!--
function over() { • These two event types will help you create nice
document.write ("Mouse Over");
} effects with images or even with text as well.
function out() { • The onmouseover event triggers when you bring
}
document.write ("Mouse Out");
your mouse over any element and
the onmouseout triggers when you move your
//-->
</script> mouse out from that element.
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
</body>
</html>
03/21/22 satheesh.research18@gmail.com 66
IT8501 - Web Technology - Java Script
Java Script – Windows
• The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
The Browser Object Model (BOM)
• There are no official standards for the Browser Object Model (BOM).
• Since modern browsers have implemented (almost) the same methods and
properties for JavaScript interactivity, it is often referred to, as methods and
properties of the BOM.
The Window Object
• The window object is supported by all browsers. It represents the browser's window.
• All global JavaScript objects, functions, and variables automatically become members of the window object.
• Global variables are properties of the window object.
• Global functions are methods of the window object.
• Even the document object (of the HTML DOM) is a property of the window object:
window.document.getElementById("header");
is the same as:
document.getElementById("header");
03/21/22 satheesh.research18@gmail.com 67
IT8501 - Web Technology - Java Script
Java Script – Windows
Window Size
• Two properties can be used to determine the size of the browser window.
• Both properties return the sizes in pixels:
• window.innerHeight - the inner height of the browser window (in pixels)
• window.innerWidth - the inner width of the browser window (in pixels)
Example
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
03/21/22 satheesh.research18@gmail.com 68
IT8501 - Web Technology - Java Script
Java Script – Windows
Other Window Methods
• window.open() - open a new window
• window.close() - close the current window
• window.moveTo() -move the current window
• window.resizeTo() -resize the current window
03/21/22 satheesh.research18@gmail.com 69
IT8501 - Web Technology - Java Script
Java Script – Data Type
03/21/22 satheesh.research18@gmail.com 70
IT8501 - Web Technology - Java Script
Java Script – Data Type
• JavaScript is a dynamic or loosely-typed language because a
variable can hold value of any data type at any point of time.
• Example: Loosely-typed JavaScript
var myVar = 100;
myVar = true;
myVar will hold last assigned
myVar = null; value to it that is string "Steve".
myVar = undefined;
JavaScript is a dynamic type language, means
myVar = "Steve";
you don't need to specify type of the variable
because it is dynamically used by JavaScript
alert(myVar); // Steve engine. You need to use var here to specify the
data type. It can hold any type of values such as
numbers, strings etc
03/21/22 satheesh.research18@gmail.com 71
IT8501 - Web Technology - Java Script
Java Script – built-in functions
03/21/22 satheesh.research18@gmail.com 72
IT8501 - Web Technology - Java Script
Java Script – Function
Function Parameters
• A function can have one or more parameters, which will be supplied by the calling
code and can be used inside a function. JavaScript is a dynamic type scripting
language, so a function parameter can have value of any data type.
Example:
function ShowMessage(firstName, lastName) {
alert("Hello " + firstName + " " + lastName);
}
ShowMessage("Steve", "Jobs");
ShowMessage("Bill", "Gates");
ShowMessage(100, 200);
03/21/22 satheesh.research18@gmail.com 73
IT8501 - Web Technology - Java Script
Java Script – Function
The Arguments Object
• All the functions in JavaScript can use arguments object by default. An arguments
object includes value of each parameter.
• The arguments object is an array like object. You can access its values using index
similar to array. However, it does not support array methods.
Example:
function ShowMessage(firstName, lastName) {
alert("Hello " + arguments[0] + " " + arguments[1]);
}
ShowMessage("Steve", "Jobs");
ShowMessage("Bill", "Gates");
ShowMessage(100, 200);
03/21/22 satheesh.research18@gmail.com 74
IT8501 - Web Technology - Java Script
Java Script – Function
Function Expression
• JavaScript allows us to assign a function to a variable and then
use that variable as a function. It is called function expression.
Example
var add = function sum(val1, val2) {
return val1 + val2;
};
03/21/22 satheesh.research18@gmail.com 75
IT8501 - Web Technology - Java Script
Java Script – Function
Anonymous Function
• JavaScript allows us to define a function without any name. This unnamed function
is called anonymous function. Anonymous function must be assigned to a variable.
• Anonymous function is useful in passing callback function, creating closure or
Immediately invoked function expression.
Example:
var showMessage = function (){
alert("Hello World!");
};
showMessage();
var sayHello = function (firstName) {
alert("Hello " + firstName);
};
showMessage();
sayHello("Bill");
03/21/22 satheesh.research18@gmail.com 76
IT8501 - Web Technology - Java Script
Java Script – Function
Nested Functions
• In JavaScript, a function can have one or more inner functions. These nested
functions are in the scope of outer function. Inner function can access
variables and parameters of outer function. However, outer function cannot
access variables defined inside inner functions.
Example:
function ShowMessage(firstName)
{
function SayHello() {
alert("Hello " + firstName);
}
return SayHello();
}
ShowMessage("Steve");
03/21/22 satheesh.research18@gmail.com 77
IT8501 - Web Technology - Java Script
Java Script – Function
Points to Remember
• JavaScript a function allows you to define a block of code, give it a name and then
execute it as many times as you want.
• A function can be defined using function keyword and can be executed using ()
operator.
• A function can include one or more parameters. It is optional to specify function
parameter values while executing it.
• JavaScript is a loosely-typed language. A function parameter can hold value of any
data type.
• You can specify less or more arguments while calling function.
• All the functions can access arguments object by default instead of parameter names.
• A function can return a literal value or another function.
• A function can be assigned to a variable with different name.
• JavaScript allows you to create anonymous functions that must be assigned to a
variable.
03/21/22 satheesh.research18@gmail.com 78
IT8501 - Web Technology - Java Script
JavaScript Operators
• Arithmetic Operators
• Relational Operators
• Assignment Operators
• Logical Operators
• Bitwise Operators
• Special Operators
03/21/22 satheesh.research18@gmail.com 79
IT8501 - Web Technology - Java Script
Java Script
.
03/21/22 satheesh.research18@gmail.com 80
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 81
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 82
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 83
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 84
IT8501 - Web Technology - Java Script
Java Script
03/21/22 satheesh.research18@gmail.com 85
IT8501 - Web Technology - Java Script
Arithmetic operators in JavaScript.
03/21/22 satheesh.research18@gmail.com 86
IT8501 - Web Technology - Java Script
Comparison operators in JavaScript.
<html>
<body> document.write("(a != b) => ");
result = (a != b);
document.write(result);
<script type="text/javascript"> document.write(linebreak);
<!--
var a = 10; document.write("(a >= b) => ");
var b = 20; result = (a >= b);
document.write(result);
var linebreak = "<br />"; document.write(linebreak);
03/21/22 satheesh.research18@gmail.com 89
IT8501 - Web Technology - Java Script
Java Script-Verifying Forms
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
} }
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
03/21/22 satheesh.research18@gmail.com 90
IT8501 - Web Technology - Java Script
Java Script – Validation Forms
JavaScript Retype Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
03/21/22 satheesh.research18@gmail.com 91
IT8501 - Web Technology - Java Script
Java Script – Form Validation
JavaScript Number Validation
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
03/21/22 satheesh.research18@gmail.com 92
IT8501 - Web Technology - Java Script
Java Script - Validation
JavaScript validation with image
<script>
function validate(){ <form name="f1" action="#" onsubmit="return vali
var name=document.f1.name.value;
var password=document.f1.password.value;
date()">
var status=false; <table>
<tr><td>Enter Name:</
if(name.length<1){
document.getElementById("nameloc").innerHTML= td><td><input type="text" name="name"/>
" <img src='unchecked.gif'/> Please enter your name"; <span id="nameloc"></span></td></tr>
status=false;
}else{
<tr><td>Enter Password:</
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>"; td><td><input type="password" name="password"
status=true; />
}
if(password.length<6){ <span id="passwordloc"></span></td></tr>
document.getElementById("passwordloc").innerHTML= <tr><td colspan="2"><input type="submit" value=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
"register"/></td></tr>
}else{ </table>
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>"; </form>
}
return status;
}
</script>
03/21/22 satheesh.research18@gmail.com 93
IT8501 - Web Technology - Java Script
Java Script:Form
Validation
JavaScript email validation
• There are many criteria that need to be follow to validate the
email id such as:
• email id must contain the @ and . character
• There must be at least one character before and after the @.
• There must be at least two characters after . (dot).
• Let's see the simple example to validate the email field.
03/21/22 satheesh.research18@gmail.com 94
IT8501 - Web Technology - Java Script
Java Script – Form Validation
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
03/21/22 satheesh.research18@gmail.com 95
Java Servlet
• CGI technology enables the web server to call an external program and pass
HTTP request information to the external program to process the request.
For each request, it starts a new process.
CGI Vs Servlet
Advantages of Servlet
There are many advantages of Servlet over CGI.
Disadvantages of CGI
The web container creates threads for handling the
• If the number of clients multiple requests to the Servlet. Threads have
increases, it takes more time for many benefits over the Processes such as they
sending the response. share a common memory area, lightweight,
• For each request, it starts a cost of communication between the threads are
low.
process, and the web server is
• Better performance: because it
limited to start processes. creates a thread for each request, not
• It uses platform dependent process.
language e.g. C, C++, perl. • Portability: because it uses Java
language.
• Robust: JVM manages Servlets, so we
don't need to worry about the memory
leak, garbage collection, etc.
• Secure: because it uses java language.
CGI Vs Servlet
CGI
Servlet
Servlet Terminology
There are three fundamental features that make the HTTP a simple and
powerful protocol used for communication:
• HTTP is media independent: It specifies that any type of media
content can be sent by HTTP as long as both the server and the client
can handle the data content.
• HTTP is connectionless: It is a connectionless approach in which
HTTP client i.e., a browser initiates the HTTP request and after the
request is sent the client disconnects from server and waits for the
response.
• HTTP is stateless: The client and server are aware of each other
during a current request only. Afterwards, both of them forget each
other. Due to the stateless nature of protocol, neither the client nor
the server can retain the information about different request across
the web pages.
The Basic Architecture of HTTP
The request sent by the computer to a web server, contains all sorts of potentially
interesting information; it is known as HTTP requests.
The HTTP client sends the request to the server in the form of request message which
includes following information:
• The Request-line
• The analysis of source IP address, proxy and port
• The analysis of destination IP address, protocol, port and host
• The Requested URI (Uniform Resource Identifier)
• The Request method and Content
• The User-Agent header
• The Connection control header
• The Cache control header
The HTTP request method indicates the method to be performed on the resource identified
by theRequested URI (Uniform Resource Identifier). This method is case-sensitive and
should be used in uppercase.
HTTP request methods are
Get vs. Post
Servlet Container
The servlet container is the part of web server which can be run in a separate process. We
can classify the servlet container states in three types:
The web container calls the init method only once after
creating the servlet instance. The init method is used to
initialize the servlet. It is the life cycle method of the
javax.servlet.Servlet interface. Syntax of the init
method is given below:
public void init(ServletConfig config) throws ServletExc
eption
4) service method is invoked
The web container calls the service method each time when
request for the servlet is received. If servlet is not initialized, it
follows the first three steps as described above then calls the
service method. If servlet is initialized, it calls the service
method. Notice that servlet is initialized only once. The syntax
of the service method of the Servlet interface is given below:
public void service(ServletRequest request, ServletResponse res
ponse) throws ServletException, IOException
5) destroy method is invoked
The web container calls the destroy method before removing the
servlet instance from the service. It gives the servlet an
opportunity to clean up any resource for example memory,
thread etc. The syntax of the destroy method of the Servlet
interface is given below:
public void destroy()
Steps to create a servlet example
• XML
– XSL
– XSLT
• Web Services
– WSDL
– UDDI
– Java Web Services
Unit 1 Unit 3
1. JS Objects with example 1.JDBC with example program
2.RMI Architecture with example program
2. JS form Validation with example
3.Implement Java Beans with example program
3. CSS & its Types with example 4.TCP vs UDP with example program
4. Client & Server Side Scripting with example
5. JS Program – Ref : Lab Record
6. Web Page Creation – online Library, Online Purchase / supermarket
Unit 2 Unit 4
1. Inheritance Types with example program 1.Applet Life cycle and Applet programs Ref : Lab Record
(Calculator, Images, sound, parameter passing, JDBC)
2. Exception Handling with example program
2.Servlet Life cycle, & Http Request, Http Response
3. Package with example program 3.Servlet Session Tracking and Cookies example program
4. Array with example program 4.Java Layouts and its types with suitable program
5. Mutithread with example program 5.JSP Vs Servlet
Unit 5
1.XML Document Development – Ex Cricket Player details, CD catalog
2.Explain UDDI, WSDL & SOAP (Case study – Railway Reservation, Calculator, discovery
and analysis webservices current trents
3.XSL, XSLT and XML Name Space with example
4.Creation Java Webservices