Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 Introduction to Web Application Implement JavaScript in HTML.

Similar presentations

Presentation on theme: "1 Introduction to Web Application Implement JavaScript in HTML."— Presentation transcript:

1 1 Introduction to Web Application Implement JavaScript in HTML

2 2 References aScriptBibleGoldEn.pdf Web Development/HTML and Dynamic HTML/DHTML Reference

3 3 Introduction Dynamic HTML Object Model –Allows Web authors to control the presentation of their pages –Gives them access to all the elements on their pages Web page –Elements, forms, frames, tables –Represented in an object hierarchy Scripting –Retrieve and modify properties and attributes

4 4 Object Referencing The simplest way to reference an element is by using the elements id attribute. The element is represented as an object –HTML attributes become properties that can be manipulated by scripting

5 5 Example of all Object Model Welcome to our Web page!

6 6

7 7 Collections all and children Collections –Arrays of related objects on a page –all all the HTML elements in a document –children Specific element contains that elements child elements

8 8 Object Model Elements on this Web page:

9 9

10 10 Object Model

11 11 Welcome to our Web page! Elements on this Web page:

12 12 The Document Object Model The DOM is an abstract model that defines the interface between HTML documents and application programs Documents in DOM have a tree-like structure

13 13 The Document Object Model

14 14 The Document Object Model Under development by w3c since the mid- 90s DOM is a successor to DHTML DOM now has 4 levels DOM0 is designed to deal with just HTML documents DOM1 is focused on the HTML and XML document model, all modern browser has supported DOM1 –Appendix

15 15 The Document Object Model DOM 2 is the latest approved standard, which specifies a CSS object model and include document traversals and an event model, but none modern browser can fully support DOM2 DOM3 is under development

16 16 The Document Object Model It is an OO model - document elements are objects A language that supports the DOM must have a binding to the DOM constructs In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties –e.g., would be represented as an object with two properties, type and name, with the values "text" and "address"

17 17 The Document Object Model The property names in JavaScript are usually just lowercase versions of the corresponding HTML attribute names

18 18 Dynamic Styles Elements style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

19 19 Object Model Welcome to our Web site!

20 20

21 21 Object Model.bigText { font-size: 3em; font-weight: bold }.smallText { font-size:.75em } Welcome to our Web site!

22 22

23 23 Dynamic Positioning HTML elements can be positioned with scripting –Declare an elements CSS position property to be either absolute or relative –Move the element by manipulating any of the top, left, right or bottom CSS properties

24 24 Dynamic Positioning


Welcome!"> 24 Dynamic Positioning <!-- var speed = 5; var count = 10; var direction = 1; var firstLine =

25 25 function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing"; = fontStyle[ ++fontStylecount % 3 ]; } = count / 3; = count; pText.innerHTML = firstLine + " Font size: " + count + "px"; }

26 26

27 27 Using the frames Collection Referencing elements and objects in different frames by using the frames collection

28 28 Index.html Frames collection

29 29 top.html The frames collection Cross-frame scripting!

30 30

31 31 navigator Object Netscape, Mozilla, Microsofts Internet Explorer –Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using

32 32 The navigator Object Redirecting your browser to the appropriate page, please wait...

33 33 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig DHTML Object Model.

34 34 Summary of the DHTML Object Model

35 35 Summary of the DHTML Object Model

36 36 Summary of the DHTML Object Model

37 37 Event Model

38 38 Introduction Event model –Scripts can respond to user –Content becomes more dynamic –Interfaces become more intuitive

39 39 Event onclick onClick –Invoked when user clicks the mouse on a specific item

40 40 DHTML Event Model - onclick

Ads by Google