Chapter 2: Browser Technologies

1
Chapter 2 Browser Technologies

• HTML (Hypertext Markup Language)
• Dynamic HTML
• Structure of an HTML document
• Script Languages
• Cascade style sheet
• HTML object model
• HTML event
• HTML behavior
• Self-modifying HTML text
• Evolution of browsers

2
Why HTML?

• HTML is the assembly language in web programming.
• XML is NOT a replacement of HTML.
• Dynamic HTML is the main instrument for browser
  interactivity.
• Improvements are being made to strengthen the
  structure of the HTML.

3
History of HTML

• First version of HTML 1992
• HTML 2.0 specifications was released by IETF in
  November 1996, on the basis of current practices
  as of 1994.
• HTML 3.2 was released by W3C in January 1997, on
  the basis of current practices as of 1996.
• HTML 4.0 was released in December 1997, along
  with an object model.
• XHTML is a formal version of HTML (e.g. case
  sensitive, insistence of pairing of tags.)

4
HTML Basic

• HTML as a markup language.
• Tag-pairs as commands for text rendering.
• parameters for more detailed implementation
  details
• nested tag-pairs
• combined tag-pairs
• An HTML document has two parts Head and Body.
• A HTML document must not contain any overlapped
  tag-pairs which are not nested.

5
Dynamic HTML

• Script language to process events (e.g. mouse
  click).
• Relative/absolute position of portions of HTML.
• Self-modifying HTML text.

6
Towards Structured HTML

• A hierarchical structure for a HTML document.
• Cascading style sheet (CSS).
• Object model for greater programmability of a
  HTML document.

7
Block Containment

• Nested blocks ? Ancestor-descendant relationship
• ltDIVgt and ltSPANgt are introduced in HTML 4.0 as
  means to form a block of an arbitrary portion of
  a HTML document.

8
An HTML Document

• ltUL ID"oParent"gt
• ltLIgtNode 1
• ltLI ID"oNode"gtNode 2
• ltULgt
• ltLIgtChild 1
• ltLI ID"oChild2"gtChild 2
• ltLIgtChild 3
• lt/ULgt
• ltLIgtNode 3
• lt/ULgt

9
and Its Hierarchy
10
Manipulation of a Hierarchy

• Traverse the hierarchy
• firstChild, lastChild,
• nextSibling, previousSibling,
• parentNode,
• NodeName, NodeType, NodeValue,
• Operations
• appendChild, removeNode, swapNode,

11
Example Get Previous Sibling

• var oPrevious fnGetSibling()
• function fnGetSibling()
• var oParentoNode.parentElement
• var iLengthoParent.children.length for(var
  i0i lt iLengthi) if(oParent.childrenioN
  ode) return oParent.childreni-1
• break

12
Hierarchical Inheritance

• Properties (i.e. parameters) are inherited by
  elements in top-down fashion.
• Events are inherited by elements in bottom-up
  fashion.
• Inheritance may be overridden by the element
  specifying different property values.

13
Example

• ltUL style"font 18pt Arial color blue"gt
• ltLIgt A few small provinces
• ltULgt
• ltLIgt Prince Edward Island
• ltLIgt Newfoundland
• ltLIgt Nova Scotia
• lt/ULgt
• ltLI style"font 18pt times color green"gt
  Two large provinces
• ltULgt
• ltLIgt Ontario
• ltLIgt Quebec
• lt/ULgt
• lt/ULgt

14
Cascading Style Sheet

• Style Sheet a definition on how content should
  be rendered on each element, using Style (itself
  as an element).
• Cascading is about rules on how multiple style
  sheets may be applied to the same element in
  runtime.

15
Where to Apply Style Sheet

• Apply to just a single element
• ltB stylecolornavygt
• define an ID (.clsnavy colornavy) and apply
  the ID instead of the style property.
• define an CLASS name which works the same way as
  ID
• Use HTML behavior (discussion later)
• Apply to all occurrences in the document ltStylegt
  B colornavy lt/Stylegt
• Style sheet may be imported somewhere else.

16
Cascading and Inheritance

• When there is a multitude of style sheets on the
  same element, the order of preference is greatest
  to the least specificity.
• inline styles
• ID
• Class
• style sheet for the element

17
Scripting Language

• A script language is an interpreter language with
  limited capability, e.g. no I/O support.
• JavaScript is the default scripting language for
  most browsers, including IE (i.e Jscript)
• It is published as a standard (ECMAscript)
• Vbscript is subset of Visual Basic.
• Both script languages are so designed to support
  ActiveX controls.

18
HTML with Event, Script

• ltSCRIPT LANGUAGE"JScript"gt
• var normalColor
• function Hilite()
• normalColor window.event.srcElement.Style.
  color
• window.event.srcElement.Style.color
  "red"
• function Restore()
• window.event.srcElement.Style.color
  normalColor
• lt/SCRIPTgt
• ltULgt
• ltLI onmouseoverHilite() onmouseoutRestore
  gtHTML Authoringlt/LIgt
• ltULgt

19
HTML Object Model

• The key advantage of an object model is the
  ability to access and modify everything in the
  document in a consistent manner.
• Every HTML element is an object
• Every object may have
• properties
• attributes
• methods
• collections
• events
• behavior (under style sheet)

20
(No Transcript)
21
Re-rendering during Runtime

• Assume an element ltH1gt has an ID, say myH1
• An event activates a JavaScript function
  containing the following statementmyH1.style.fon
  tStylenormal
• The browser refreshes upon the change in a
  property of the model.

22
Event Modelling

• A list of events that are trappable by the
  browser.
• Event handlers that are written in a script
  language to process respective events.
• Event as object that provides more information
  about the event to the event handler.
• Upward inheritance (event bubbling) that may be
  subject to cancellation.

23
Trappable Events

• onclick
• ondblclick
• onkeydown,
• onkeypress,
• onkeyup,
• onload,
• onmousedown,
• onmousemove,
• onmouseout,
• onmouseover

• onmouseup
• onmousewheel
• onreadyStateChange
• resize
• onselectionchange
• onhelp
• onzoom
• onenter
• onexit,
• onbeforeupdate,
• onafterupdate

24
The Life Cycle of an Event

• The user action or condition associated with the
  event occurs
• The event object is updated to reflect the
  conditions of the event.
• The event fires the browser is notified of the
  occurrence of the event.
• The event handler associated with the source
  element is called to carry out the required
  processing.
• The event bubbles up to its parent, whose event
  handler is activated. This is repeated until the
  the top of the hierarchy is reached.

25
Cancellation of Event Bubbling

• ltHTMLgt
• ltBODY onclick"wasClicked()"gt
• ltH1gtWelcome!lt/H1gt
• ltP onclick"wasClicked()"gtThis is a very ltB
  onclick"wasAlsoClicked()"gtshortlt/Bgt
  document.lt/Pgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function wasClicked()
• alert("I was clicked " window.event.srcEleme
  nt.tagName)
• if (window.event.altKey)
• window.event.cancelBubble true
• alert("Bubbling stops now ")
• function wasAlsoClicked()
• alert("You clicked me " window.event.srcElem
  ent.tagName)
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

26
HTML Behavior

• It is a light-weight component that works as an
  attribute of ltStylegt element.
• Like a .dll, it exposes properties and methods
  written in a script language, or C.

27
Why HTML Behavior

• A mechanism for re-use of functions written in
  script.
• By encapsulating all functions into a
  light-weight component (.htc), these functions
  may be attached to any element in any HTML,
  statically, or during runtime.
• Default .htc are available in pre-defined
  abstract data types (audio, animation, and
  video).

28
HTML with Event, Script

• ltSCRIPT LANGUAGE"JScript"gt
• var normalColor
• function Hilite()
• normalColor window.event.srcElement.Style.
  color
• window.event.srcElement.Style.color
  "red"
• function Restore()
• window.event.srcElement.Style.color
  normalColor
• lt/SCRIPTgt
• ltULgt
• ltLI onmouseoverHilite() onmouseoutRestore
  gtHTML Authoringlt/LIgt
• ltULgt

29
hilite.htc - Source Code

• ltPUBLICCOMPONENTgt
• ltPUBLICPROPERTY NAME"hiliteColor" /gt
• ltPUBLICATTACH EVENT"onmouseover"
  ONEVENT"Hilite()" /gt
• ltPUBLICATTACH EVENT"onmouseout"
  ONEVENT"Restore()" /gt
• ltSCRIPT LANGUAGE"JScript"gt
• var normalColor
• function Hilite()
• normalColor element.runtimeStyle.color
• element.runtimeStyle.color hiliteColor
• function Restore()
• element.runtimeStyle.color normalColor
• lt/SCRIPTgt
• lt/PUBLICCOMPONENTgt

30
How to use HTML Behavior

• Static definition
• It is an attribute of Style element, e.g.
• In style sheet LI behaviorurl (hilite.htc)
• Dynamic definition use addBehavior and and
  removeBehavior

31
Static Definition

• ltHEADgt
• ltSTYLEgt
• LI behaviorurl(hilite.htc)
• lt/STYLEgt
• lt/HEADgt
• ltULgt
• ltLI hiliteColor"Green"gtHTML Authoringlt/LIgt
• ltLI hiliteColor"Red"gtDynamic HTMLlt/LIgt
• lt/ULgt

32
Add Behavior Dynamically

• var collBehaviorID new Array()
• var collLI new Array ()
• var countLI 0
• function attachBehavior()
• collLI document.all.tags ("LI")
• countLI collLI.length
• for (i0 i lt countLI i)
• var iID collLIi.addBehavior("hilite.
  htc")
• if (iID) collBehaviorIDi iID

33
Structure of HTML Text

• Inner component the text within a tag-pair
• Outer component Inner component tag-pair
• Text (in appearance) plain text (before HTML
  rending.
• HTML (in appearance) Text after HTML rendering.

34
Text-Related Properties of a HTML Element

• innerText
• innerHTML
• outerText
• outerHTML

35
An Example

• ltHTMLgt
• ltHEADgt
• ltSCRIPTgt
• function changeText()
• document.all.par1.innerText "How are
  ltBgtyoult/Bgt?"
• lt/SCRIPTgt
• lt/HEADgt
• ltDIV STYLE"font-styleitalic"gt
• ltP IDpar1 STYLE"font-stylenormal"gt
• A fairly short paragraph
• lt/Pgt
• lt/DIVgt
• ltBUTTON onclick"changeText()"gt
• click here to change text
• lt/BUTTONgt

36
Text-Related Methods of aHTML Element

• insertAdjacentHTML (where, text)
• insertAdjacentText (where, text)
• possible values of the where parameter
• BeforeBegin
• AfterBegin
• BeforeEnd
• AfterEnd

37
TextRange Object

• It is used to modify text in an element, to
  locate specific strings in the text, and to carry
  out commands that affect the appearance of the
  text.
• It must be created using a method attached to
  BODY, BUTTON, TEXTAREA and INPUT.
• Methods of TextRange may be used to position the
  (invisible) cursor for specific text
  manipulation.

38
Example of TextRange Object

• ltHTMLgt
• ltSCRIPT Language"Javascript"gt
• function newText(ScreenElement, NewCaption)
• var r ScreenElement.createTextRange()
• r.textNewCaption
• lt/SCRIPTgt
• ltTEXTAREA Rows5 onclick"newText(this, 'I Have
  Changed!')"gt
• For a dramatic demonstration, click this text
  area.
• lt/TEXTAREAgt
• lt/HTMLgt

39
Netscape

• 2.0
• released in late 1995
• runs java applets
• multimedia features Quicktime, animation,
  virtual reality, 3D graphics
• runs javascript
• introduced frame technology
• 3.0
• released in mid 1996
• runs a new version of HTML (3.2) with layering.
• 4.0
• released in mid 1997
• groupware features
• push technologies

40
Internet Explorer

• 1.0 released in August 1995
• 2.0 released in November 1995
• 3.0
• released in May 1996
• with similar features as NN 3.0, JavaScript
  somewhat buggy
• 4.0
• released in July, 1997
• a total re-write with strong object-oriented
  features.
• 5.0 released in July, 1999

41
(No Transcript)
42
Components of IE4.0

• Iexplorer an OLE control container
• Shdocvw.dll provides navigation, Favorites, and
  History functionality,
• Mshtml.dll renders HTML pages (including scripts
  and ActiveX controls inside).
• Urlmon.dll provides HTTP connectivity by
  processing URLs.
• Wininet.dll provides the Internet connection.
• Java Virtual Machine runs Java applets.