Web Technologies - Sreenivasa Institute Of Technology and ...

Web Technologies
1. Web Programming, Building Internet
Applications, Chris Bates 2 nd Edition, Wiley
Dreamtech Pub. (I,II,III)
2. Java Server Pages by Hans Bergsten, SPD
O’Really pub. (V,VI,VII,VIII)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

www
• The World Wide Web (Web) is a system of interlinked
hypertext documents accessed via the Internet.
• With a Web browser, a user views Web pages that may
contain text, images, videos, and other multimedia and
navigates between them using hyperlinks.
• The World Wide Web was created in 1989 by Tim Berners-
Lee, working at the European Organization for Nuclear
Research (CERN) in Geneva, Switzerland and released in 1992.
• Tim Berners Lee is the father of WWW
• Introduced first web browser (Netscape Navigator)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

WWW
• The World Wide Web Consortium (W3C)
develops interoperable technologies
(specifications, guidelines, software, and
tools) to lead the Web to its full potential.
• W3C is a forum for information, commerce,
communication, and collective understanding.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Introduction
• Script : is a program which runs directly without precompilation
Program:
Program compile Output
Script :
HTML Browser Output
• Browser: is a piece of software that enables you to
view pages on the internet.
Ex:- Netscape Navigator, Internet Explorer, Mozilla
Firefox, Konquoorer.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Protocol : HTTP, FTP
• HTTP: The Hypertext Transfer Protocol (HTTP) is a generic,
stateless, protocol. Is used for hypertext, name servers and
distributed object management systems.
• A feature of HTTP is the typing and negotiation of data
representation, allowing systems to be built independently of
the data being transferred.
• FTP : stands for file transfer protocol. Used for sending files
over the internet. Sending files to another location is called
uploading.
• URL: uniform resource locator is used to describe the address
of the file, the browser is displaying or loading.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

HTML
• Tim- Berners –Lee introduced HTML
• Hyper Text Mark up Language
• Markup:- Tags are used to mark the information
• Provides non-linear access to the information (direct Access)
• It is simple for developers and users
• File has .html extension
• HTML files are generally created in notepad and other text
editors.
• Tools generate .htm files
• Web browser display the information present in the html
document
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

HTML
• It is used to format text and information.
• The text is marked up with elements called as
tags. Ex:-
• Every html element begin with a start tag and
end with an end tag
Ex:- hello world
• Content of the web page: Title, body, image,
hyper links, audio, video, pointers
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Structure of the HTML document
Introduction to HTML
Body of the document
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

HTML Tag Types
• HTML tags may tell a WWW browser to:
– format the text (bold, italicize, etc.)
– have an in-line image
• make it into a header
• have it be a link to another document
• or any number of other things
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

How the Tags Work
• The first part of the tag turns the tag
on
• The ending part of the tag, , contains
the "/" slash character.
• This "/" slash tells a WWW browser to stop tagging
the text. Many HTML tags are paired this way.
Think of the tag as a container.
• If you forget the backslash, a WWW browser will
continue the tag for the rest of the text in your
document,producing undesirable results.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Steps to Creating a
HTML Document
• Open a text editor
• Create your HTML document
• Head - not displayed with body
• Body
• Save the HTML (extension of .htm or .html)
• Display your HTML document in WWW browser
window (Open File rather than Open Location)
• Check your work and modify as necessary
• Place it on the Web
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

HTML Examples
• The Title of the Page
• First level header
• All of your file goes here
• What you are not going to see on the page
• What you are going to see
• Unordered List
– first item
– second item
•
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Common Tags Used
• Opens and closes the
HTML document.
• This is the title of your page
and will appear at the top of your browser’s
window.
• to Header sizes
for titles and larger text formats. Or specify
font size:
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Common Tags Used
•
– Sources an image file and needs no closing tag.
• Place URL
– Links text or images to the designated file.
• text Bold text.
• text Italic text.
• text Underline text.
• (no closing) Line break.
• (no closing) Horizontal line.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

conclusion
•
•
•
•
• ---
•
•
•
•
•
• ,, , ,, ,
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• causes all the material between its
and tags to be centered
horizontally in the browser window.
• Closing tag : when contents are to be
presented closing tag is required. Otherwise
no closing tag.
Ex:- hello world
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Intoduction to HTML Tags
Header Tags
…..
Image tag :
Body background color:
Body background :
Srolling text
sitams college
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Nested list
•
CSE
ECE
I cse
II cse
iii cse
I ECE
II ECE
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

•
CSE
I cse
II cse
iii cse
ECE
I ECE
II ECE
Type attribute :- a, A, i, I.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

DEFINITION LIST
• A definition list is a list of terms and corresponding definitions.
• Definition lists are typically formatted with the term on the left with the
definition following on the right or on the next line.
• The definition text is typically indented with respect to the term.
• The opening list tag must be . It is followed by an optional list header
(caption) and then by term names () and definitions
().
EXAMPLE :-
List Header
Term 1This is the definition of the first term
Term 2This is the definition of the second term.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

which could be rendered as:
List Header
Term 1
This is the definition of the first term.
Term 2
This is the definition of the second term.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

table
//represents heading content
//represents row content
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Data in table is represented by using tag
Ex:- reg no
Attributes of
Colspan, Rowspan
Ex:- merge 2 cols and 3
rows for the data element
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Example program
reg no name
1
a
2
b
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

reg no name
1
a
2
b
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Some more attributes
specifies the format of the group of columns
Ex:-
//specified before the tag
The first specifies the alignment for the first column in the table
The second specifies the alignment for the span of 4 colums in the table
specifies the data alignment in the table
specifies the vertical alignment (top, bottom, middle) of the data. It
if effective when the rowspan of the col is more than 1.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

table example using colgroup
regnamebranch%credits
1acse8056
Example Program
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

FRAMES
• Frame allows the user to view multiple html
documents at a time.
Syntax:-
Note:- appear after the of the html
document
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Nested frame
The target attribute of tag specifies the name of the frame
where the contents is to displayed
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Meta tag
• It is a html element that interacts with the search engine
• Meta elements are not visible to the user of the site and
should be placed inside the header section of the html
document.
Syntax:-
•
-- Diplay the list of key aspects of the site. It gives precise
information about the site to the search engine.
•
-- The description is a 4 to 5 line of text and is used by the search
engine to catalog and display your site
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Html forms
• It collects information from the people viewing the site.
Ex:- username, password
Syntax or
Method indicates the way the web server organize and send you the output.
“Post” causes changes to server data, ex:- updating a database
“get” is used when the form does not cause any changes to the server database. Ex:- requesting
database
tag is used to create appropriate input elements on the form
Ex:- textbox, textarea, buttons etc..
• Syntax for
Name indicates the name of the form element.
Type indicates the type of the input element
Value indicate the value that the input button sends to the server upon submission.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Creating form elements
• Textbox
• Submit button
• Reset button
• Textarea
• Password element
• Hidden element
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Check box
Example:-
WT
SPM
MC
ACA
Name attribute categorise the checkboxes under the same group or different group.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Radio Button
Example:-
WT
SPM
MC
ACA
Name attribute categorise the checkboxes under the same group or different group.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

utton
1
2
3
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Cascading Style Sheets (CSS)
• Css allow you to specify the style of the page
elements separately from the structure of the
document
• The separation of structure from content
allows greater manageability and makes
changing the style of your document easier
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Creating styles
• Using Style attribute (Inline styles)
Ex:-
• Using style element
p { color:red; font-family: arial }
• Using external style sheets ( external style)
Ex:- Specifying style in .css file
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Inline style
sitams
sitams
college
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Using style element
P { font-size: 20pt; color: #0000ff }
H1{ font-family: arial, sans-serif;
font-size: 18pt;
text-decoration: underline
}
Note: style tag appear in the head part of the html
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Using external link files
• The syntax for including the external style sheet
A { text-decoration : overline; }
Li em { color : red;
font-weight : bold;
}
Ul { margin-left : 2em ; }
Note: The above specification is to be stored in a .css
file like example.css
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Linking the .css file in a html file
• the .css file is invoked in the html file by using
the tag
Synatx :
Note : the tag appear in the of
the html document
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

An example
sitams
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

more style attributes
p, h1 { color: yellow;
text-decoration: blink;
font-weight: 10pt;
font-size: 12px;
}
Here is the child element of .
So this style is applicable all children of
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Font-size
• Font-size is represented in two ways
1. Relative-length measurement
(vary based on the screen resolution)
ex:- px, em, ex, %
• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font
• px: pixels, relative to the viewing device
2. Absolute length measurement
(do not vary based on the system)
Ex:- in(inches), cm, mm, pt (1pt=1/72in),
Pc(picas 1pc=12pt)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Font-weight :
bold/normal/light/lighter/thick/thicker
• Font-style : none/italic/oblique(similar to
italic)
• color : red/green/yellow
• Font-family: arial, sans serif
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Body background
• Background-image : url
• Background-position : bottom
right/center/top left/…
• Background-repeat : no-repeat
• Background-attachment : fixed
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Text
• Text-indent : 1em
• Text-align : center/left/right/justify
Margin
• Width : 20%
• Height : 10%
• Overflow : scroll
• Margin-bottom/margin-left/margin-right/margin-top
ex:- margin-left: 0.3 em
• Padding (distance between the content inside an element and the edge of
the element.
Padding-top/padding-bottom/padding-left/padding-right
Ex:- padding-left:0.5em
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

example
Div
{ background-color : red;
margin-bottom : 0.5em
font-size: 1.5em
width : 50%
overflow: scroll;
padding-left : 0.5em
}
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• The tag defines a division or a section in
an HTML document.
• The tag is often used to group blockelements
to format them with style
This is a header
This is a paragraph.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• The tag provides no visual change by itself.
• The tag provides a way to add a hook to a
part of a text or a part of a document.
• When the text is hooked in a span element you can
add styles to the content, or manipulate the content
with for example JavaScript.
sky is light
blue in color.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• The tag defines preformatted text.
• Text in a pre element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces
and line breaks.
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

JavaScript
• Developed by netscape
• Is a client side scripting language
• No relation with java
• Other scripting languages : JavaScript, Jscript,
VBScript
• Jscript is a product of Microsoft
• Scripting languages are under ECMA
( European Computer Manufacturers Association) script
standard.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

JavaScript
JAVA
• Object-oriented lang.
• Support inheritance,
polymorphism
• Support different data-types
• Case-sensitive
• General purpose prog. Lang.
• Uses applets to interact with web
applications
• Product of sun-micro systems
• Java has both
Compiler/interpreter
JavaScript
• Object-based lang
• Does not support inheritance and
polymorphism
• Variables are treated as Strings
only
• Case-sensitive
• client-side scripting lang.
• Uses html to interact with web
applications
• Product of Netscape
• Javascript is a interpreter
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

JavaScript introduction
• The code is written in the tag of the
document.
• JavaScript treat the elements of the web-page as objects.
• Objects in javascript
document, window, string, math etc…
• The methods of the class are invoked by the Objects.
Ex:- document.writeln(“hello”);
• HTML tags can be used within the “ “ to invoke the
functionality of the tag
Ex:-
document.writeln(“hello”);
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• variables are declared by using “var”
Ex:- var x,y,z; (treated as string data types)
• User Input :- To take input from the user prompt() is
used
Synatx:- prompt(“Enter the value”,default value);
Usage: - window.prompt(“enter x”,0);
• User output :- To display output alert() is used
Syntax :- alert(“javascipt program);
Usage :- window.alert(“Hello”);
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Example program
(The sum of two numbers)
var a,b,c;
a=window.prompt("enter a",0);
b=window.prompt("enter b",0);
c=parseInt(a)+parseInt(b);
window.alert("The sum is: "+c);
document.writeln("The Sum is: "+c+"");
The sum of two numbers in javascript
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Control structures
• for (var i=0;i

Control structures
• if(condition)
statement;
• if(condition)
statement1;
else If(condition)
statement2;
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Example for average
var total,count,sum,avg,n;
count=1; total=0;
while(count

Switch-case
Switch(choice)
{
case option1 : statement1;
break;
case option2 : statement2;
break;
case option3 : statement3;
break;
default : statement 4;
break;
}
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Arithmetic operators
+,-,*,/,%,++,--
• Logical operators
&&, || , !
• Relational operators
=,==,!=
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Squares of the numbers
document.writeln("Square of numbers between 1 to 10");
for(var i=0;i

Functions()
Syantax:-
function function-name(parameters list)
{
declarations;
statement1;
statement2;
}
Ex:- function fun(x,y,z)
{ return x+y+z;
}
Note:- function either return value/ does not return value
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Square of a numbers
var a;
for(var i=1;i

Program for rolling dice using Random
number generation
• Math.random() generates number between 0 and up to 1 but not including 1.
Example:-
for(var i=0;i

ecursion
• Function which calls by itself either directly or indirectly.
• Program to generate the factorial of series of numbers
for(var i=0;i

Arrays
• An array is a group of memory locations that all have the same name and are of same type.
• Array commences from zero index.
• The length of the array is obtained using length method
Ex:- array_name.length
• Declaration of one dimensional array
var a=new Array(10); // 10 elements
• Initialization of arrays
var a=[10,20,30,40,50];
(or)
var a=new Array(10,20,30,40,50);
var a=new Array[5];
a=[10,20,30,40,50];
• Accessing the elements of the array
Using index from for-loop or for-in loop
Ex:-
for ( var i=0;i

Passing Arrays to Functions
• The array is passed to a function by its name without
brackets
ex:-
var a=new Array(10);
sort(a); //where sort is a user defined function
Exercise:-
• Program to sort numbers using function
• Program to search for an element in an array
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Multi-dimensional Arrays
• Declaration of a two-dimensional array
Ex:- var a;
a=new Array(2); //allocate 2 rows
a[0]=new Array(3); // 3 elements in 1st row
a[1]=new Array(4); // 4 elemets in 2nd row
• Initialization
var a=[ [1,2,3], // 1 st row elements
[4,5,6,7] ]; //2 nd row elements
• Accessing the elements of an array
for (var i in a)
for( var j in a[i] ) document.writeln( a[i][j] );
(or)
for( var i=0; i

JavaScript : Objects
Math Object
• Math.random() generates number between 0 and up to 1 but not including 1.
• Math.floor()
• Math.ceil()
• Math.square()
• Math.max(x,y)
• Math.min(x,y)
• Math.abs(x)
• Math.pow(x,y) // x y
• Math.round(x)
• Math.log(x);
• Math.sin(x), Math.cos(x), Math.tan(x)
• Math.sqrt(x)
• Math.exp(x) // e x
• Math.random()
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

String Object
• The String object encapsulates the attributes
and behavior of a string of characters.
• The string object provides many methods for
selecting characters from a string,
combination of strings, obtaining substring of
a string, searching for substring within a
string, tokenizing strings, conversion to
lowercase or uppercase etc…
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Methods
• Let String s=“I am a javascript learner”;
• charAt(index) – returns a string containing the character at the specified index. It
returns null if there is no character at the specified index.
• charCodeAt( index) – Returns Unicode value of the character at the specified
index. If there is no character at the index, charCodeAt returns NaN (Not a
Number).
• Concat(string) – Concatenates its argument to end of the string that invokes the
method.
• fromCharCode(value1,value2 …) – converts a list of Unicode values into a string
containing the corresponding characters.
• indexOf(substring) – method returns the position of the first occurrence of a
specified substring starting from the begining
• indexOf(substring,index) – method returns the position of the first occurrence of a
specified substring starting from position index towards the beginning
• lastIndexOf(substring) – searches for the last occurrence of substring The method
returns the starting index of substring in the source string or -1 if substring is not
found.
• lastIndexOf(substring, index) – searches for the last occurrence of substring
starting from position index and searching toward the beginning of the string that
invokes the method. The method returns the starting index of substring in the
source string or -1 if substring is not found.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Slice(start,end) – returns a string containing the portion of the string from
index start through index end. If end index is not specified, it go up to end
of the string.
• Split(string) – splits the source string into an array of strings (tokens)
where its string argument specifies the delimiter.
• Substr(start,length) – returns a string containing length characters starting
from index start in the source string. It goes up to the end, if the length is
not specified.
• toLowerCase() – returns a string in which all uppercase letters are
converted to lowercase letters.
• toUpperCase() – returns a string in which all lowercase letters are
converted to uppercase letters.
• toString() – returns same string as the source string.
• valueOf() – returns the same string as the source string.
• isNaN() – returns true if the value is not a number
Ex:- var s=f.t.innerText();
if( s.isNaN()) { document.writeln(“Not a number”); }
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Wrapping strings into html tags
• anchor( name) – wraps the source string into anchor element
with name as the anchor name
• blink() wraps the source string in a element.
• Link (url) wraps the source stirng in an anchor element with
url as the hyperlink location.
• strike() wraps the source string in a element.
• sub() wraps the source string in a element.
//substript
• sup() wraps the source string in a element.
//superstript
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Boolean Object
• Javascript provides wrappers for creating a boolean object.
• Boolean object stores true/false value
• To cerate a boolean number
syntax :- var b=new boolean(booleanvalue);
• booleanvalue specifies whether the value of the boolean
object is true or false.
• toString() – returns the string “true” if the value of the
boolean object is true, otherwise returns the string “false”.
• valueOf() – returns the value true if the boolean object is true;
otherwise returns false.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Number Object
• Javascript automatically creates number objects to store numeric values in a
javascript program.
• var n=new Number(numeric value);
• Methods :-
toString(radix) – returns the string representation of the number. The radix is optional
and represents the radix of the number. 2 represents binary, 8 represents octal and
10 represents decimal, 16 represents hexa
valueOf() – returns numeric value
Number.MAX_VALUE – property represents the maximum value that can be stored in
javascript.
Number.MIN_VALUE – property represents the maximum value that can be stored in
javascript.
Number.NaN – this property represents not a number. If the value returned from the
arithmetic does not result in a number.
Ex:- if(parseInt(s))==Number.NaN) return true; else return false;
(Or)
if(s.valueOf()==Number.NaN) return true; else return false;
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Example
var s1="SITAMS";
var s2="ColleGE";
document.writeln(" String s1: "+s1+" String s2: "+s2+"");
document.writeln("character at index 0 in "+s1+" is "+s1.charAt(0));
document.writeln("character Code at index 0 in "+s1+" is "+s1.charCodeAt(0));
document.writeln("Word from character code 65, 67,80, 56 is"+String.fromCharCode(65,67,80,56));
document.writeln("Lower Case of string "+s2+" is: "+s2.toLowerCase());
document.writeln("Upper Case of string "+s2+" is: "+s2.toUpperCase());
document.writeln("2-4 slice of string "+s1+" is: "+s1.slice(2,4)); //s1.substring(2,4);
document.writeln("Last index of S in"+s1+" is: "+s1.lastIndexOf("S",3)); // search from index 3 to the
begining of the string
document.writeln("2-4 substring of "+s1+" is: "+s1.substr(2,4)); // from index 2 displays 4 characters
Document.writeln("subscript of "+s1+" is: "+s1.sub());
document.writeln("superstript of "+s1+" is: "+s1.sup());
document.writeln("strike through of "+s1+" is: "+s1.strike());
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

function validate()
{
var un=login.ln.value;
var pwd=login.pwd.value;
var c=un.charAt(0);
if( un!=" " && pwd!=" ")
{
if( c >= 'a' && c='A' && c

if(pwd.length > 6)
{
//document.login.submit();
//alert("succ");
return true;
}
else
{
alert ("password must be atleast 6 chars");
return false;
}
}
else if (un!=" ")
{
alert (" username firt character must be a letter");
return false;
}
}
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

contd…
else
{
}
alert ("enter all the fields");
return false;
}

excercise
Registration form validation
• Validate phone number ( must be 10 digits)
• Validate email id
sitams@yahoo.com
Check for the position of @ ( it should be >0)
Check for the position of . (it should be > pos(@)+1)
The length of email_id > pos(.)
• Validate credit card number ( 16 digit number)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

User Profile validation
• Date of Birth
• Validate age (numeric between 1-100)
• Alternate email_id
Credit Card Validation
• Credit card Number validation
• Pin number/ Username
• Password
• Address ( door number, street, city, state)
• Amount ( some limit 10000-50000)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Date object
• Provides methods for date and time
manipulations.
• Date and time processing can be performed
based on the computer’s local time zone or
based on the worlds standard time called
Coordinated Universal Time (UTC) or Greenich
Mean Time (GMT).
• The methods are available in local time zone
version and in UTC version.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Methods in Date object
• getDate() / getUTCDate() //returns a number from 1 to 31 representing the day of
the month in local time or UTC
• getDay() / getUTCDay() //returns a number from 0(Sunday) to 6(Saturday)
representing day of the week in local time or UTC
• getFullYear() / getUTCFullYear() //returns a 4 digit number as year in local time or
UTC
• getHours() / getUTCHours() //returns a number between 0 to 23 representing
hours since since midnight in local time or UTC
• getMilliseconds() / getUTCMilliseconds() //returns a number from 0 to 999
representing number of millseconds in local time or UTC. The time is stored in
hours, minutes, seconds and milliseconds
• getSeconds() / getUTCSeconds() //returns a number from 0 to 59 representing
number of seconds in local time or UTC.
• getMinutes() / getUTCMinutes() //returns a number from 0 to 59 representing
number of minutes in local time or UTC.
• getMonth() / getUTCMonth() //returns a number from 0 to 11 representing
month in local time or UTC.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• getTime () //returns the number of milliseconds between january 1, 1970 and the
time in the Date object.
• getTimezoneOffset() //returns the difference in minutes between the current time
on the local computer and UTC.
• setDate(val) / set UTCDate(val) // sets the date of the month (1 to 31) in local Time
or UTC
• setMonth(m,d) / setUTCMonth(m,d)
• setFullYear(y,m,d) / setUTCFullYear(y,m,d)
• setHours(h,m,s,ms) /setUTCHours(h,m,s,ms)
• setMinutes(m,s,ms) /setUTCMinutes(m,s,ms)
• setSeconds(s,ms) /setUTCSeconds(s,ms)
• setMilliSeconds(ms) /setUTCMilliSeconds(ms)
• setTime(ms) // sets elapsed milliseconds since january 1, 1970
• toLocalString() // returns string equivalent of the the date and time specific to
local computer time setting
Ex:- 9/8/2009 15:30:35 for august 9, 2009 at 3:30:35 pm
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• toUTCString() // returns string equivalent of the date and time
Ex:- august 9, 2009 at 3:30:35 pm for
9/8/2009 15:30:35
• toString() // returns the string representation of the date and
time in a form specific to the local computer.
• valueOf() – the time in number of milliseconds since midnight,
january 1,1970.
Usage:-
var d=new Date();
d.getTime();
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

example
var current=new Date();
document.writeln("toString: "+current.toString()+"");
document.writeln("toLocalString: "+current.toLocalString()+"");
document.writeln("toUTCString: "+current.toUTCString()+"");
document.writeln("tovalueOf: "+current.valueOf()+"");
document.writeln("getDate: "+current.getDate()+"");
document.writeln("getMonth: "+current.getMonth()+"");
document.writeln("getFullYear: "+current.getFullYear()+"");
document.writeln("getHours: "+current.getHours()+"");
document.writeln("getMinutes: "+current.getMinutes()+"");
document.writeln("getSeconds: "+current.getSeconds()+"");
document.writeln("getMilliseconds: "+current.getMilliseconds()+"");
document.writeln("getTimezoneOffset: "+current.getTimezoneOffset()+"");
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Dynamic HTML
(DHTML)
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Event Model
• onload – uses this event to call javascript function when document loading completes.
Usage :-
• onclick – uses this event to call javascript function when the element in the document is
pressed.
Usage :-
• onmousemove – fires repeatedly whenever the user moves the mouse over the web page.
Usage :-
• onmouseover – occurs when the mouse cursor moves over an element
• onmouseout – occurs when the mouse cursor moves out from an element
• Onfocus – useful for form elements that allow user input. Onfocus fires when an element gains focus
• Onblur – fires when an element loses focus
Usage:-
• onsubmit – occurs when the user submits a form
• Onreset –occurs when the user resets a form
Usage :-
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

onload event
function load()
{
window.alert("the document is loaded");
}
the demo of onload event
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

function validate()
{
alert("validation successful");
}
function bye()
{
alert("the form is cleared");
}
username :
password :
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

function validate()
{
alert("validation successful");
}
username :
password :
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Mouse coordinates
• event.offsetX
• event.offsetY
• event.srcElement
• event.srcElement.tagName
• elementname.innerText
Ex:- span tag content
s.innerText=data;
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Mousemove event
•
•
•
• function mouse_move()
• {
• coordinates.innerText=event.srcElement.tagName+"("+event.offsetX+","+event.offsetY+")";
• }
•
•
•
• (0,0)
•
•
•
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

onmouseover & onmouseout
function change()
{
event.srcElement.style.color="RED";
}
function nochange()
{
event.srcElement.style.color="black";
}
(0,0)
SITAMS college
CSE
IT
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

DHTML: Filters & Transitions
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

Filters & Transitions
• Many visual effects are implemented directly in the client-side
browser
• Filters and transitions do not add content to the web page,
rather they present existing content in an engaging manner to
capture the user’s attention.
• Applying filters to text or an image causes changes that are
persistent (permanent)
• Transitions are temporary; applying a transition allows you to
transfer from one page to another page with a pleasant visual
effect ex:- random dissolve
• Filters and transitions are applied to the web page elements
using CSS filter property.
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

filters
• Flip : flip filters are applied to the text
• Types : flipv and fliph
• Fliph – flips the text horizontally
• Flipv – flips the text vertically
• Usage :-
SITAMS
SITAMS
SITAMS
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

example
s.filters(“revealTrans”).apply();
s.filters(“revealTrans”).transition=1;
s.filter.item(0). enabled=true;
s.filters(“blur”).strength=10;
sitams
sitams
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR

• Filter types
Mask filter
Glow filter
Blur filter
Wave filter
Invert filter
Gray filter
Xray filter
chroma filter
SREENIVASA INSTITUTE OF
TECHNOLOGY & MANAGEMENT
STUDIES, CHITTOOR