Unit2wt
Upcoming SlideShare
Loading in...5
×
 

Unit2wt

on

  • 265 views

wt 2nd unit ppt

wt 2nd unit ppt

Statistics

Views

Total Views
265
Views on SlideShare
211
Embed Views
54

Actions

Likes
0
Downloads
2
Comments
0

5 Embeds 54

http://vamsitricks.blogspot.in 39
http://vamsiwt.blogspot.in 9
http://vamsitricks.blogspot.com 3
http://vamsiwt.blogspot.com 2
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Unit2wt Unit2wt Presentation Transcript

    • Introduction to Java Scripts
    • 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 variables 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 ResultArithmetic 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 – 2Assignment 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 - 3Comparison 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 - 4Logical 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 - 2if (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=3if(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></htmlc=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>• <script language="javascript">• 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>• <script language="javascript">• 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: ObjectsOutline• 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 imagesKey links object plugins collection scripts styleSheets
    • 13.8 Summary of the DHTML Object ModelObject or collection DescriptionObjectswindow 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.
    • 13.8 Summary of the DHTML Object ModelObject or collection DescriptionCollectionsall 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 collection in the order they were defined in the XHTML document.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.Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
    • 13.8 Summary of the DHTML Object ModelObject or collection Descriptionplugins 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.Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
    • 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 DescriptioncharAt( 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
    • Methods of the String Objectslice( 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 of the String Object 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 ObjectMethod DescriptiongetDate() 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 ObjectMethod Desc rip tionsetFullYear( 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 optionalsetUTCFullYear( 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. IfsetUTCHours( 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 ansetUTCMinutes( 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, thesetUTCMonth( 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, thesetUTCSeconds( s, ms ) current millisecond value in the Date object is used.Fig. 12.8 Methods of the Date object. 49
    • 12.5 Date ObjectMethod Desc rip tionsetTime( 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 UTCtoString() 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.Fig. 12.8 Methods of the Date object. 50
    • Math Object• Allow the programmer to perform many common mathematical calculations 51
    • Method Math Object DescriptionExampleabs( x ) absolute value of x abs( 7.2 ) is 7.2 abs( 0.0 ) is 0.0 abs( -5.6 ) is 5.6ceil( x ) rounds x to the smallest ceil( 9.2 ) is 10.0 integer not less than x ceil( -9.8 ) is -9.0cos( 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.38906floor( x ) rounds x to the largest floor( 9.2 ) is 9.0 integer not greater than x floor( -9.8 ) is -10.0log( x ) natural logarithm of x log( 2.718282 ) is 1.0 (base e) log( 7.389056 ) is 2.0max( 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 Objectmin( x, y ) smaller value of x min( 2.3, 12.7 ) is 2.3 and y min( -2.3, -12.7 ) is -12.7pow( x, y ) x raised to power y pow( 2.0, 7.0 ) is 128.0 (xy) pow( 9.0, .5 ) is 3.0round( x ) rounds x to the round( 9.75 ) is 10 closest integer round( 9.25 ) is 9sin( 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.0tan( x ) trigonometric tangent tan( 0.0 ) is 0.0 of x (x in radians)Fig. 12.1 Math object methods. 53
    • Math ObjectConstant Description ValueMath.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
    • Boolean and Number ObjectsMethod DescriptiontoString() 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
    • Boolean and Number Objects 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 DescriptiontoString( 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+308Number.MIN_VALUE This property represents the smallest value that can be stored in a JavaScript program—approximately 2.22E–308Number.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 ObjectMethod or Property Descriptionwrite( 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 ObjectMethod or Property Descriptionopen( 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 ModelObject or collection DescriptionObjectswindow 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. 62
    • Summary of the DHTML Object ModelObject or collection DescriptionCollectionsall 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 collection in the order they were defined in the XHTML document.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.Fig. 13.11 Objects in the Internet Explorer 6 Object Model. 63
    • Summary of the DHTML Object ModelObject or collection Descriptionplugins 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.Fig. 13.11 Objects in the Internet Explorer 6 Object Model. 64
    • DHTML with Java Script1. Object Referencing2. Dynamic Styles3. Dynamic Positioning4. Using Frames Collection5. 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>
    • Dynamic styles
    • • <html>• <head>• <title>input color</title>• <script language="javascript">• 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>• <script language="javascript">• 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, well use JavaScript to reference a TDCs 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
    • Output• Bill Gates 18