Unit2wt

JAVASCRIPT
• JavaScript is used in millions of Web pages to
improve the design, validate forms, detect
browsers, create cookies, and much more.
• JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Mozilla, Firefox, Netscape, Opera.

WHAT IS JAVASCRIPT?
• JavaScript is a scripting language (a scripting language is
a lightweight programming language)
• A JavaScript is usually embedded directly into HTML
pages
• JavaScript is an interpreted language

Are Java and JavaScript the Same?
• NO!
• Java and JavaScript are two completely
different languages in both concept and
design!
• Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same category
as C and C++.

How to Put a JavaScript Into an HTML
Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

Ending Statements With a Semicolon?
• With traditional programming languages, like
C++ and Java, each code statement has to end
with a semicolon (;).
• Many programmers continue this habit when
writing JavaScript, but in general, semicolons
are optional! However, semicolons are
required if you want to put more than one
statement on a single line.

JavaScript Variables
• Variables are used to store data.
• A variable is a "container" for information you want
to store. A variable's value can change during the
script. You can refer to a variable by name to see its
value or to change its value.
• Rules for variable names:
– Variable names are case sensitive
– They must begin with a letter or the underscore character
• strname – STRNAME (not same)

JavaScript Operators
Operator Description Example Result
Arithmetic Operators + Addition x=2 4
y=2
x+y
- Subtraction x=5 3
y=2
x-y
* Multiplication x=5 20
y=4
x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division 5%2 1
remainder)
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--

JavaScript Operators – 2
Assignment Operators Operator Example Is The Same As

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

JavaScript Operators - 3
Comparison Operators Operator Description Example

== is equal to 5==8 returns false

=== is equal to (checks for x=5
both value and
type) y="5"

x==y returns true

x===y returns
false

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal 5>=8 returns false
to

<= is less than or equal to 5<=8 returns true

JavaScript Operators - 4
Logical Operators Operator

&&
Description

and
Example

x=6

y=3

(x < 10 && y > 1)
returns true

|| or x=6

y=3

(x==5 || y==5)
returns false

! not x=6

y=3

!(x==y) returns
true

JavaScript Basic Examples
<script>
document.write("Hello World!")
</script>
<script>
alert("Hello World!")
</script>

Example
<script>
x=“Hello World!”
document.write(x)
</script>

<script>
x=“hai….”
document.write(“hello….” +x)
</script>

JavaScript Popup Boxes
• Alert Box
– An alert box is often used if you want to make
sure information comes through to the user.
– When an alert box pops up, the user will have to
click "OK" to proceed.
<script>
alert("Hello World!")
</script>

JavaScript Popup Boxes - 2
• Confirm Box
– A confirm box is often used if you want the user to
verify or accept something.
– When a confirm box pops up, the user will have to
click either "OK" or "Cancel" to proceed.
– If the user clicks "OK", the box returns true. If the
user clicks "Cancel", the box returns false.

JavaScript Popup Boxes - 3
• Prompt Box
– A prompt box is often used if you want the user to
input a value before entering a page.
– When a prompt box pops up, the user will have to
click either "OK" or "Cancel" to proceed after
entering an input value.
– If the user clicks "OK“, the box returns the input
value. If the user clicks "Cancel“, the box returns
null.

Prompt Box Example
<script>
x=prompt (“enter no”, “ ”)
document.write(“number<br>”,+x)
</script>

Conditional Statements
• Very often when you write code, you want to perform different actions for
different decisions. You can use conditional statements in your code to do
this.

In JavaScript we have the following conditional statements:
• if statement - use this statement if you want to execute some code only if
a specified condition is true
• if...else statement - use this statement if you want to execute some code if
the condition is true and another code if the condition is false
• if...else if....else statement - use this statement if you want to select one
of many blocks of code to be executed
• switch statement - use this statement if you want to select one of many
blocks of code to be executed

Conditional Statements - 2
if (condition)
{
code to be executed if condition is true
}

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Conditional Statements Examples
<script>
x=3
if(x<0)
{
alert (“-ve”)
}
else
{
alert (“+ve”)
}
</script>

Conditional Statements Examples - 2
<script>
c=confirm(“accept?”)
if(c)
{
alert (“accepted”)
}
else
{
alert (“rejected”)
}
</script>

Reading array elements
• <html>
• <head>
• <title>Arrays</title>
• <script language="javascript">
• var n1=new Array(5);
• for(var i=0;i<5;i++)
• {
• x=window.prompt("<br>enter x")
• n1[i]=x;

• document.writeln("<br>"+n1[i]);
• }
• </script></head><body><br>refresh</body></html>

Ex1:Passing arrays to function
<html>
<head><title>passing arrays to function</title> function add(x,y)
<script language="javascript"> {
var a=new Array(3); var d=new Array();
var b=new Array();
for(var i=0;i<x.length;i++)
var c=new Array();
for(var i=0;i<3;i++) {
{ d[i]=x[i];
var x=window.prompt("enter x"); }
a[i]=x; for(var j=0;j<y.length;j++)
document.writeln("<br>first array"+a[i]); {
} d[i++]=y[j];
for(i=0;i<4;i++) }
{
var y=window.prompt("enter y");
b[i]=y; return d;
document.writeln("<br>second array"+b[i]); }
} </script><body><br>refresh</body></html
c=add(a,b); >
document.writeln("<br>merged array");
for(i=0;i<c.length;i++)
{
document.writeln("<br>"+c[i]);
}

Adding two numbers
• <html>
• <head> • var c=add(a1,b1);
• <title>switch case</title> • document.writeln("<br> sum of two
numbers is"+c);
• <script language="javascript"> • break;
• var ch; • case "2":var c=sub(a1,b1);
• document.writeln("<br>1.add"); • document.writeln("<br> diff of two
• document.writeln("<br>2.sub<br>"); numbers is"+c);
• ch=window.prompt("enter your • break;
option"); • default:document.writeln("invalid");
• var a=window.prompt("enter firstno"); • break;
• var b=window.prompt("enter • }
secondno");
• var a1=parseInt(a); • function add(x,y)
• var b1=parseInt(b); • {
• document.writeln("<br> first no is"+a1); • return x+y;
• document.writeln("<br> second • }
number is"+b1); • function sub(x,y)
• switch(ch) • {
• { • return x-y;
• case "1": • }
• </script><body>refresh</body></html>

To find square of an array

• <html>
• <head>
• <title>hai</title>
• var x=4;
• for (var i=1;i<=4;i++)
• document.writeln(square(i));

• function square(c)
• {
• return c*c;
• }
• </script>
• </head><body></body></html>

Event handling

• <html>
• <head>
• <title>events</title>
• function fun1()
• {
• var i=parseInt(abc.txt1.value);
• document.writeln("hello"+i*i);
• }
• </script>
• </head>
• <body>
• <form name="abc">
• <input name="txt1" type="text" value="10">
• <input type="button" value="square"
onclick="fun1()">
• </form></body></html>

JavaScript:
Objects and Object Models

31

JavaScript: Objects
Outline
• Introduction
• Math Object
•String Object
•Fundamentals of Characters and Strings
•Methods of the String Object
•Character-Processing Methods
•Searching Methods
•Splitting Strings and Obtaining Substrings
•Date Object
•Boolean and Number Objects
•document Object
•window Object

32

Introduction
• Use JavaScript to manipulate every element of
XHTML document from a script

33

12.2 Thinking About Objects
• Objects
– Attributes
– Behaviors
– Encapsulate date and methods
– Property of information hiding
– Details hidden within the objects themselves

34

DHTML Object Model
window

document all

frames document anchors

history document applets

navigator body
plugins
location embeds

event filters

screen forms

images

Key links

object plugins

collection scripts

styleSheets

13.8 Summary of the DHTML Object
Model
Object or collection Description
Objects
window Represents the browser window and provides access to the document object contained
in the window. If the window contains frames a separate window object is created
automatically for each frame, to provide access to the document rendered in the frame.
Frames are considered to be subwindows in the browser.
document Represents the XHTML document rendered in a window. The document object
provides access to every element in the XHTML document and allows dynamic
modification of the XHTML document.
body Provides access to the body element of an XHTML document.
history Keeps track of the sites visited by the browser user. The object provides a script
programmer with the ability to move forward and backward through the visited sites, but
for security reasons does not allow the actual site URLs to be manipulated.
navigator Contains information about the Web browser, such as the name of the browser, the
version of the browser, the operating system on which the browser is running and other
information that can help a script writer customize the user’s browsing experience.
location Contains the URL of the rendered document. When this object is set to a new URL, the
browser immediately switches (navigates) to the new location.
event Can be used in an event handler to obtain information about the event that occurred (e.g.,
the mouse x-y coordinates during a mouse event).
screen Contains information about the computer screen for the computer on which the browser
is running. Information such as the width and height of the screen in pixels can be used to
determine the size at which elements should be rendered in a Web page.
Fig. 13.11 Objects in the Internet Explorer 6 Object Model.

Model
Collections
all Many objects have an all collection that provides access to every element contained in
the object. For example, the body object’s all collection provides access to every
element in the body element of an XHTML document.
anchors Collection contains all the anchor elements (a) that have a name or id attribute. The
elements appear in the collection in the order they were defined in the XHTML
document.
applets Contains all the applet elements in the XHTML document. Currently, the most
common applet elements are Java applets.
embeds Contains all the embed elements in the XHTML document.
forms Contains all the form elements in the XHTML document. The elements appear in the
collection in the order they were defined in the XHTML document.
frames Contains window objects that represent each frame in the browser window. Each frame
is treated as its own subwindow.
images Contains all the img elements in the XHTML document. The elements appear in the
links Contains all the anchor elements (a) with an href property. This collection also
contains all the area elements that represent links in an image map.

Model
plugins Like the embeds collection, this collection contains all the embed elements in the
XHTML document.
scripts Contains all the script elements in the XHTML document.

styleSheets Contains styleSheet objects that represent each style element in the XHTML
document and each style sheet included in the XHTML document via link.

String Object
• JavaScript’s string and character-processing
capabilities
• Appropriate for processing names, addresses,
credit card information, etc.
– Characters
• Fundamental building blocks of JavaScript programs
– String
• Series of characters treated as a single unit

39

Method
Methods of the String Object
Description
charAt( index ) Returns a string containing the character at the specified index. If there is no
character at the index, charAt returns an empty string. The first character is
located at index 0.
charCodeAt( index ) Returns the 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 the end of the string that invokes the method.
The string invoking this method is not modified; instead a new String is
returned. This method is the same as adding two strings with the string
concatenation operator + (e.g., s1.concat( s2 ) is the same as s1 +
s2).
fromCharCode( Converts a list of Unicode values into a string containing the corresponding
value1, value2, ) characters.
indexOf( Searches for the first occurrence of substring starting from position index in
substring, index ) 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. If the index
argument is not provided, the method begins searching from index 0 in the
source string.
lastIndexOf( Searches for the last occurrence of substring starting from position index and
substring, index ) 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. If the index argument is not provided, the method
begins searching from the end of the source string.
String object methods.

40

slice( start, end ) Returns a string containing the portion of the string from index start
through index end. If the end index is not specified, the method returns a
string from the start index to the end of the source string. A negative end
index specifies an offset from the end of the string starting from a
position one past the end of the last character (so –1 indicates the last
character position in the string).
split( string ) Splits the source string into an array of strings (tokens) where its string
argument specifies the delimiter (i.e., the characters that indicate the end
of each token in the source string).
substr( Returns a string containing length characters starting from index start in
start, length ) the source string. If length is not specified, a string containing characters
from start to the end of the source string is returned.
substring( Returns a string containing the characters from index start up to but not
start, end ) including index end in the source string.
toLowerCase() Returns a string in which all uppercase letters are converted to lowercase
letters. Non-letter characters are not changed.
toUpperCase() Returns a string in which all lowercase letters are converted to uppercase
letters. Non-letter characters are not changed.
toString() Returns the same string as the source string.
valueOf() Returns the same string as the source string.

String object methods.

41

Methods that generate
XHTML tags
anchor( name ) Wraps the source string in an anchor element
(<a></a>) with name as the anchor name.
blink() Wraps the source string in a <blink></blink>
element.
fixed() Wraps the source string in a <tt></tt>
element.
link( url ) Wraps the source string in an anchor element
(<a></a>) with url as the hyperlink location.
strike() Wraps the source string in a
<strike></strike> element.
sub() Wraps the source string in a <sub></sub>
element.
sup() Wraps the source string in a <sup></sup>
element.
Fig. 12.3 String object methods.

42

Character Processing Methods
• charAt
– Returns the character at specific position
• charCodeAt
– Returns Unicode value of the character at specific position
• fromCharCode
– Returns string created from series of Unicode values
• toLowerCase
– Returns lowercase version of string
• toUpperCase
– Returns uppercase version of string

43

Searching Methods
• indexOf and lastIndexOf
– Search for a specified substring in a string

44

Splitting Strings and Obtaining Substrings
• Tokenization
– The process of breaking a string into tokens
• Tokens
– Individual words
– Separated by delimiters
• String.split()
• String.substr(start[, length]) and
String.substring(indexA, indexB)
45

XHTML Markup Methods
• Anchor
– <a name = “top”> Anchor </a>
• Blink
– <blink> blinking text </blink>
• Fixed
– <tt> monospaced text </tt>
• Strike
– <strike> strike out text </strike>
• Subscript
– <sub> subscript </sub>
• Superscript
– <sup> superscript </sup>

46

Date Object
• Provides methods for date and time
manipulations

47

Date Object
Method Description
getDate() Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively.
getUTCDate()
getDay() Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC,
getUTCDay() respectively.

getFullYear() Returns the year as a four-digit number in local time or UTC, respectively.
getUTCFullYear()
getHours() Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively.
getUTCHours()
getMilliseconds() Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively.
getUTCMilliSeconds() The time is stored in hours, minutes, seconds and milliseconds.

getMinutes() Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively.
getUTCMinutes()
getMonth() Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC,
getUTCMonth() respectively.
getSeconds() Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively.
getUTCSeconds()
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—previously
known as Greenwich Mean Time (GMT).

setDate( val ) Sets the day of the month (1 to 31) in local time or UTC, respectively.
setUTCDate( val )
Fig. 12.8 Methods of the Date object.

48

12.5 Date Object
Method Desc rip tion
setFullYear( y, m, d ) Sets the year in local time or UTC, respectively. The second and third
arguments representing the month and the date are optional. If an optional
setUTCFullYear( y, m, d ) argument is not specified, the current value in the Date object is used.

setHours( h, m, s, ms ) Sets the hour in local time or UTC, respectively. The second, third and fourth
arguments representing the minutes, seconds and milliseconds are optional. If
setUTCHours( h, m, s, ms ) an optional argument is not specified, the current value in the Date object is
used.

setMilliSeconds( ms ) Sets the number of milliseconds in local time or UTC, respectively.
setUTCMilliseconds( ms )
setMinutes( m, s, ms ) Sets the minute in local time or UTC, respectively. The second and third
arguments representing the seconds and milliseconds are optional. If an
setUTCMinutes( m, s, ms ) optional argument is not specified, the current value in the Date object is
used.

setMonth( m, d ) Sets the month in local time or UTC, respectively. The second argument
representing the date is optional. If the optional argument is not specified, the
setUTCMonth( m, d ) current date value in the Date object is used.

setSeconds( s, ms ) Sets the second in local time or UTC, respectively. The second argument
representing the milliseconds is optional. If this argument is not specified, the
setUTCSeconds( s, ms ) current millisecond value in the Date object is used.

49

12.5 Date Object
Method Desc rip tion
setTime( ms ) Sets the time based on its argument—the number of elapsed milliseconds
since January 1, 1970.
toLocaleString() Returns a string representation of the date and time in a form specific to the
computer’s locale. For example, September 13, 2001 at 3:42:22 PM is
represented as 09/13/01 15:47:22 in the United States and 13/09/01
15:47:22 in Europe.
toUTCString() Returns a string representation of the date and time in the form: 19 Sep
2001 15:47:22 UTC
toString() Returns a string representation of the date and time in a form specific to the
locale of the computer (Mon Sep 19 15:47:22 EDT 2001 in the United
States).
valueOf() The time in number of milliseconds since midnight, January 1, 1970.


50

Math Object
• Allow the programmer to perform many
common mathematical calculations

51

Method
Math Object
DescriptionExample
abs( x ) absolute value of x abs( 7.2 ) is 7.2
abs( 0.0 ) is 0.0
abs( -5.6 ) is 5.6
ceil( x ) rounds x to the smallest ceil( 9.2 ) is 10.0
integer not less than x ceil( -9.8 ) is -9.0
cos( x ) trigonometric cosine of x cos( 0.0 ) is 1.0
(x in radians)
exp( x ) exponential method ex exp( 1.0 ) is 2.71828
exp( 2.0 ) is 7.38906
floor( x ) rounds x to the largest floor( 9.2 ) is 9.0
integer not greater than x floor( -9.8 ) is -10.0
log( x ) natural logarithm of x log( 2.718282 ) is 1.0
(base e) log( 7.389056 ) is 2.0
max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7
max( -2.3, -12.7 ) is -2.3
Math object methods.

52

Math Object
min( x, y ) smaller value of x min( 2.3, 12.7 ) is 2.3
and y min( -2.3, -12.7 ) is -12.7
pow( x, y ) x raised to power y pow( 2.0, 7.0 ) is 128.0
(xy) pow( 9.0, .5 ) is 3.0
round( x ) rounds x to the round( 9.75 ) is 10
closest integer round( 9.25 ) is 9
sin( x ) trigonometric sine of sin( 0.0 ) is 0.0
x (x in radians)
sqrt( x ) square root of x sqrt( 900.0 ) is 30.0
sqrt( 9.0 ) is 3.0
tan( x ) trigonometric tangent tan( 0.0 ) is 0.0
of x
(x in radians)
Fig. 12.1 Math object methods.

53

Math Object
Constant Description Value
Math.E Base of a natural Approximately 2.718.
logarithm (e).
Math.LN2 Natural logarithm of 2. Approximately 0.693.
Math.LN10 Natural logarithm of 10. Approximately 2.302.
Math.LOG2E Base 2 logarithm of e. Approximately 1.442.
Math.LOG10E Base 10 logarithm of e. Approximately 0.434.
Math.PI —the ratio of a circle’s Approximately
circumference to its 3.141592653589793.
diameter.
Math.SQRT1_2 Square root of 0.5. Approximately 0.707.
Math.SQRT2 Square root of 2.0. Approximately 1.414.
Fig. 12.2 Properties of the Math object.

54

Boolean and Number Objects
• Object wrappers for boolean true/false
values and numbers

55

Method Description
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.
Fig. 12.10 Boolean object methods.

56

Method Description
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.
Fig. 12.10 Boolean object methods.
Method or Property Description
toString( radix ) Returns the string representation of the number. The optional radix
argument (a number from 2 to 36) specifies the number’s base.
valueOf() Returns the numeric value.
Number.MAX_VALUE This property represents the largest value that can be stored in a
JavaScript program—approximately 1.79E+308
Number.MIN_VALUE This property represents the smallest value that can be stored in a
JavaScript program—approximately
2.22E–308
Number.NaN This property represents not a number—a value returned from an
arithmetic expression that does not result in a number (e.g., the
expression parseInt( "hello" ) cannot convert the string
"hello" into a number, so parseInt would return
Number.NaN. To determine whether a value is NaN, test the
result with function isNaN, which returns true if the value is
NaN; otherwise, it returns false.
Number.NEGATIVE_INFINITY This property represents a value less than
-Number.MAX_VALUE.
Number.POSITIVE_INFINITY This property represents a value greater than
Number.MAX_VALUE.
Fig. 12.11 Number object methods and properties. 57

document Object
• Manipulate document that is currently visible
in the browser window

58

document Object
write( string ) Writes the string to the XHTML document as
XHTML code.
writeln( string ) Writes the string to the XHTML document as
XHTML code and adds a newline character at
the end.
document.cookie This property is a string containing the values
of all the cookies stored on the user’s computer
for the current document. See Section 12.9,
Using Cookies.
document.lastModified This property is the date and time that this
document was last modified.
Fig. 12.12 Important document object methods and properties.

59

window Object
• Provides methods for manipulating browser
window

60

window Object
open( url, name, options ) Creates a new window with the URL of the window set to
url, the name set to name, and the visible features set by
the string passed in as option.
prompt( prompt, default ) Displays a dialog box asking the user for input. The text
of the dialog is prompt, and the default value is set to
default.
close() Closes the current window and deletes its object from
memory.
window.focus() This method gives focus to the window (i.e., puts the
window in the foreground, on top of any other open
browser windows).
window.document This property contains the document object representing
the document currently inside the window.
window.closed This property contains a boolean value that is set to true if
the window is closed, and false if it is not.
window.opener This property contains the window object of the window
that opened the current window, if such a window exists.
Fig. 12.14 Important window object methods and properties.

61

Summary of the DHTML Object
Model
Objects
window Represents the browser window and provides access to the document object contained
in the window. If the window contains frames a separate window object is created
automatically for each frame, to provide access to the document rendered in the frame.
Frames are considered to be subwindows in the browser.
document Represents the XHTML document rendered in a window. The document object
provides access to every element in the XHTML document and allows dynamic
modification of the XHTML document.
body Provides access to the body element of an XHTML document.
history Keeps track of the sites visited by the browser user. The object provides a script
programmer with the ability to move forward and backward through the visited sites, but
for security reasons does not allow the actual site URLs to be manipulated.
navigator Contains information about the Web browser, such as the name of the browser, the
version of the browser, the operating system on which the browser is running and other
information that can help a script writer customize the user’s browsing experience.
location Contains the URL of the rendered document. When this object is set to a new URL, the
browser immediately switches (navigates) to the new location.
event Can be used in an event handler to obtain information about the event that occurred (e.g.,
the mouse x-y coordinates during a mouse event).
screen Contains information about the computer screen for the computer on which the browser
is running. Information such as the width and height of the screen in pixels can be used to
determine the size at which elements should be rendered in a Web page.

62

Model
Collections
all Many objects have an all collection that provides access to every element contained in
the object. For example, the body object’s all collection provides access to every
element in the body element of an XHTML document.
anchors Collection contains all the anchor elements (a) that have a name or id attribute. The
elements appear in the collection in the order they were defined in the XHTML
document.
applets Contains all the applet elements in the XHTML document. Currently, the most
common applet elements are Java applets.
embeds Contains all the embed elements in the XHTML document.
forms Contains all the form elements in the XHTML document. The elements appear in the
frames Contains window objects that represent each frame in the browser window. Each frame
is treated as its own subwindow.
images Contains all the img elements in the XHTML document. The elements appear in the
links Contains all the anchor elements (a) with an href property. This collection also
contains all the area elements that represent links in an image map.

63

Model
plugins Like the embeds collection, this collection contains all the embed elements in the
XHTML document.
scripts Contains all the script elements in the XHTML document.

styleSheets Contains styleSheet objects that represent each style element in the XHTML
document and each style sheet included in the XHTML document via link.

64

DHTML with Java Script

1. Object Referencing
2. Dynamic Styles
3. Dynamic Positioning
4. Using Frames Collection
5. navigator object

Object Referencing
<html>
<head>
<title>inner text</title>
<script language="javascript">
function start()
{
alert(ptext.innerText);
ptext.innerText="Mtech";
}
</script>
</head>
<body onload="start()">
<p id="ptext">welcome</p>
</body>

</html>

• <html>
• <head>
• <title>input color</title>
• function start()
• {
• var col=prompt("enter color
name");
• document.body.style.backgroundC
olor=col;
• }
• </script>
• </head><body
onload="start()"></body></html>

Event Model

• <html>
• <head><title>event</title>
• <script language="javascript" for="para" event="onclick">
• alert("hai");
• </script>
• </head>
• <body>
• <p id="para">click on this text</p>
• <input type="button" value="press" onclick="alert('button clicked')">
• </body></html>

onmousemove
• <html>
• <head>

• function udt()
• {
• cor.innerText=event.srcElement.tagName+
• "("+event.offsetX+","+event.offsetY+")";
• }

• </script></head>
• <body onmousemove="udt()">
• <span id="cor">(0,0)</span><br>
• <img src="weka.gif">

• </body>
• </html>

• <html>
• <head>
• <script language="javascript“>onimg1=new Image();
•
•
•
img1.src="weka.gif";
img2=new Image();
img2.src="car05.jpg";
onmouseover event •
•
•
</script></head>
<body style="background-color:wheat">
Hex codes
• <table>
• <caption>
• function mover() • <img src="weka.gif" id="tc">
• { • </caption>
• <tr>
• if(event.srcElement.id=="tc")
• <td><a id="black">#000000</a>
• { • <td><a id="red">#ff0000</a>
• event.srcElement.src=img2.src; • <td><a id="green">#00ff00</a>
• return; • <td><a id="blue">#0000ff</a>

• } • </tr>
• if(event.srcElement.id) • <tr>
• { • <td><a id="olive">#808000</a>
• <td><a id="puple">#800080</a>
• event.srcElement.style.color=event.srcElement.id; • <td><a id="red">#ff0000</a>
• }} • <td><a id="silver">#c0c0c0</a>
• function mout()
• </tr>
• { • <tr>
• if(event.srcElement.id=="tc") • <td><a id="icyan">#000000</a>
• { • <td><a id="teal">#ff0000</a>
• <td><a id="yellow">#00ff00</a>
• event.srcElement.src=img1.src;
• <td><a id="white">#ffffff</a>
• return; }
• if(event.srcElement.id) • </tr>
• {
• event.srcElement.innerText=event.srcElement.id; • </table>
• }}
• document.onmouseover=mover; • </body>
• </html>
• document.onmouseout=mout;

Filters and Transitions

• Flip filters:flipv and fliph
• Tranparency with chroma
filter
• Image filters:gray,xray,invert
• Adding shadows to text
• Text glow
• Creating motion and blur
• Blend and reveal transitions

• <html>
• <head>
• <style type="text/css">
• </style>
• <body>
• <table>
• <tr>
• <td style="filter:flipv">Hello</td></tr></table></body>
• </head>
• </html>

DATA BINDING
• Introduction to Data Binding
Server-side data binding Disadvantages to server-side binding JavaScript client-side data binding DHTML client-
side data binding
DHTML Client-Side Data Binding
Using tabular data Data consumers and data sources Furniture table example Types of data consumers
Using Data Consumers
HTML data binding attributes Using single-value data consumers
Data Source Objects
Introduction to Data Source Objects What do Data Source Objects do? DSO cross-platform capabilities The Tabular
Data Control (TDC)
Using the TDC
Creating the element DataURL and UseHeader parameters Car Catalog using INPUT elements Navigating single-
value data Car Catalog with navigation buttons
Managing the TDC
TDC data file properties Sorting with the TDC Setting Sort in the OBJECT Setting SortColumn with a script
This course is distributed with:

Tabular Data Control Example
• Tabular Data Control and JavaScript
• The tabular data control exposes a few properties and methods for
any client-side language like JavaScript to manipulate. Some of the
important ones are:
• recordset : This property creates a reference point to the data file.
• EOF : This property is used to check if we have reached the end of
the file.
• moveFirst() : Point to the first data item (first row).
• moveNext() : Point to the next data item from previous position.
• moveLast() : Point to the last data item (last row).
• ondatasetcomplete : Event handler that fires when the control and
its data has loaded.
• In the below example, we'll use JavaScript to reference a TDC's data
file, and display its 2nd row:

• Data3.txt:
• name|age ~Premshree
Pillai~|~19~
• ~Bill Gates~|~18~

• Corresponding HTML page:
• <OBJECT ID="data3" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-
0080C7055A83">
• <PARAM NAME="DataURL" VALUE="data3.txt"> <PARAM
NAME="UseHeader" VALUE="TRUE">
• <PARAM NAME="TextQualifier" VALUE="~">
• <PARAM NAME="FieldDelim" VALUE="|">
• </OBJECT>
• <SCRIPT LANGUAGE="JavaScript">
• var dataSet=data3.recordset; //Get the complete data record set
dataSet.moveNext(); //Go to next data row
• </SCRIPT>
• <SPAN DATASRC="#data3" DATAFLD="name"></SPAN>
• <SPAN DATASRC="#data3" DATAFLD="age"></SPAN>

The output will be : Bill Gates 18

Unit2wt

More Related Content

What's hot

Viewers also liked

Similar to Unit2wt

More from vamsitricks

Unit2wt