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


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. 13.10DHTML 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

41 41

42 42 Event onload onload event –Fires when an element finishes loading –Used in the body element –Initiates a script after the page loads into the client

43 43 DHTML Event Model - onload Seconds you have spent viewing this page so far: 0

44 44

45 45 Error Handling with onerror onerror event –Execute specialized error-handling code

46 46 DHTML Event Model - onerror

47 47

48 48 Tracking the Mouse with Event onmousemove onmousemove –Fires repeatedly when the user moves the mouse over the Web page –Gives position of the mouse

49 49 DHTML Event Model - onmousemove event (0, 0) Deitel

50 50

51 51 Rollovers with onmouseover and onmouseout Two more events fired by mouse movements –onmouseover Mouse cursor moves over element –Onmouseout Mouse cursor leaves element

52 52 DHTML Event Model - onmouseover and onmouseout " class="image_link uk-text-large uk-margin-small-left uk-margin-small-right"> 53 53 function mOut() { if ( == "tableCaption" ) { event.srcElement.src = captionImage1.src; return; } if ( ) event.srcElement.innerText =; } document.onmouseover = mOver; document.onmouseout = mOut; // -->

54 54 Guess the Hex Code's Actual Color Can you tell a color from its hexadecimal RGB code value? Look at the hex code, guess the color. To see what color it corresponds to, move the mouse over the hex code. Moving the mouse out will display the color name.

#000000 #0000FF #FF00FF #808080

55 55

56 56 Rollovers with onmouseover and onmouseout

57 57 Form Processing with onfocus and onblur onfocus event fires when element gains focus onblur event fires when element loses focus

58 58 DHTML Event Model - onfocus and onblur Name: ….

59 59

60 60 More Form Processing with onsubmit and onreset onsubmit and onreset are useful events for processing forms

61 61 DHTML Event Model - onsubmit and onreset events

62 62

63 63

64 64 Event Bubbling Crucial part of the event model Process whereby events fired in child elements bubble up to their parent elements

65 65 DHTML Event Model - Event Bubbling Click here! Click here, too!

66 66

67 67 More DHTML Events Remaining DHTML events and their descriptions

68 68 More DHTML Events

69 69 More DHTML Events

70 70 More DHTML Events

Download ppt "1 Introduction to Web Application Implement JavaScript in HTML."

Similar presentations

Ads by Google