Review

1
Review

• HTML (markup), document structure
• World Wide Consortium - W3C (standards
  guidelines)
• HTML standards and DTDs-DOCTYPES HTML Validation
  checks for syntax
• CSS adds style to html documents , grouping

2
Evolution of DHTML

• Netscape introduced a very modest vision of
  DHTML, debuted in Navigator 4.0. By and large,
  Netscape's DHTML was limited to the concept of
  "layers," also known as Cascading Style Sheet
  Positioning, a crucial concept which we will look
  at more closely in a short while. Microsoft, on
  the other hand, chose to shoot for the moon,
  providing developers with surprisingly complex
  DHTML support in Internet Explorer 4.0, wherein
  many objects on the page were manipulable,
  including support for CSS Positioning.

3
Why the Document Object Model?

• "Dynamic HTML" is a term used by some vendors to
  describe the combination of HTML, style sheets
  and scripts that allows documents to be
  animated.The W3C has received several
  submissions from members companies on the way in
  which the object model of HTML documents should
  be exposed to scripts. These submissions do not
  propose any new HTML tags or style sheet
  technology. The W3C DOM Activity is working hard
  to make sure interoperable and scripting-language
  neutral solutions are agreed upon.

4

• The basic notion behind Dynamic HTML is quite
  simple allow any element of a page to be
  changeable at any time.
• This required a server to perform the changes
  to the page and re-serve the entire page,
  modifications and all, back to the client.

5
What is the Document Object Model(DOM)?

• The Document Object Model is a platform- and
  language-neutral interface that will allow
  programs and scripts to dynamically access and
  update the content, structure and style of
  documents. The document can be further processed
  and the results of that processing can be
  incorporated back into the presented page.

http//www.w3.org/TR/REC-DOM-Level-1/level-one-htm
l.html
6
What can you do with a DOM?

• one of the hardest things to grasp about DOM is
  what its use is. If you view it as merely a
  broker between scripts and a document, it's easy
  to assume the DOM is simply a common syntax. But
  it's so much more than that.
• If style sheets allow you to perform layout
  independent of content and structure, then the
  DOM allows you to make interaction independent of
  content and structure. (one of CODE instead of
  Design)

7
DOM parts and levels

• The W3C DOM provides a standard set of objects
  for representing HTML and XML documents, and a
  standard interface for accessing and manipulating
  them.
• The DOM is separated into different parts (Core,
  XML, and HTML) and different levels (DOM Level
  1/2/3)
• Core DOM - defines a standard set of objects for
  any structured document
• XML DOM - defines a standard set of objects for
  XML documents
• HTML DOM - defines a standard set of objects for
  HTML documents http//www.w3.org/TR/REC-DOM-Lev
  el-1/level-one-html.html
• It expresses the structure of an HTML document in
  a universal, content-neutral way.
• W3C DOM specifications / levels in W3C tutorial.

8
Why are the DOM APIs "interfaces" rather than
"classes"?

• Interfaces are widely used in many
  object-oriented languages, for example Java, and
  have several advantages when designing an API.
  They are similar to abstract classes, but all the
  methods are abstract. Variables in an interface
  must be constants. The key point with
  interfaces is that they do not constrain
  implementations. The methods defined in an
  interface must give the correct results, but the
  implementation is free to do anything it needs
  to. Thus, for example, even if one interface
  inherits from another, this does not mean that
  the implementation must share any code.
• Interfaces are implemented by classes. Any given
  class is free to implement more than one
  interface (e.g., an interface specified by the
  DOM and some extensions). When a class implements
  more than one interface, it must provide an
  implementation for all the abstract methods in
  each interface, but again, need not share code or
  any other implementation details.

http//www.w3.org/DOM/faq.htmlinterfaces
9
What is the HTML DOM?

• The HTML DOM is the Document Object Model for
  HTML
• The HTML DOM is platform and language independent
  
• The HTML DOM defines a standard set of objects
  for HTML, and a standard way to access and
  manipulate HTML documents
• The HTML DOM is a W3C standard
• The HTML DOM views HTML documents as a tree
  structure of elements embedded within other
  elements. All elements, their containing text and
  their attributes, can be accessed through the DOM
  tree. Their contents can be modified or deleted,
  and new elements can be created by the DOM. The
  elements, their text, and their attributes are
  all known as nodes.

10
Example table
ltTABLEgt ltTBODYgt ltTRgt
ltTDgtShady Grovelt/TDgt ltTDgtAeolianlt/TDgt
lt/TRgt ltTRgt ltTDgtOver the River,
Charlielt/TDgt ltTDgtDorianlt/TDgt
lt/TRgt lt/TBODYgt lt/TABLEgt
A graphical representation of the DOM of the
example table is
EXAMPLE
11
HTML DOM Javascript

• The HTML DOM is platform and language
  independent. It can be used by any programming
  language like Java, JavaScript, and VBScript (IE
  only).

12
An Example using DOM level 1 methods from
JavaScript to create an HTML table dynamically
HTML markup generated by the JavaScript code
... ltTABLE border5gt lttrgtlttdgtcell is row 0 column
0lt/tdgtlttdgtcell is row 0 column 1lt/tdgtlt/trgt lttrgtlttd
gtcell is row 1 column 0lt/tdgtlttdgtcell is row 1
column 1lt/tdgtlt/trgt lt/TABLEgt ...
DOM object tree generated by the code for the
TABLE element and its child elements
13

• First the TABLE element was created.
• Then the TBODY element, which is a child of the
  TABLE element.
• Next, we used a loop to create the TR elements,
  which are children of the TBODY element.
• For each TR element, we used a loop to create the
  TD elements, which are children of TR elements.
• For each TD element, we then created the text
  node with the table cell's text.

First, you create elements from the top down
then you attach the children to the parents from
the bottom up.
14
An HTML DOM Example using Javascript

• This coding example shows how the background
  color of an HTML document can be changed to
  yellow when a user clicks on it

15
An HTML DOM Example using Javascript

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function ChangeColor() //create a function
• document.body.bgColor"yellow"
• lt/scriptgt
• lt/headgt
• ltbody onclick"ChangeColor()"gt
• Click on this document!
• lt/bodygt
• lt/htmlgt

16
Document Objects

• The HTML DOM defines HTML documents as a
  collection of objects. Objects have properties
  and methods. Objects can respond to events.
• The document object is the parent of all the
  other objects in an HTML document.
• The document.body object represents the ltbodygt
  element of the HTML document.
• The document object is the parent of the body
  object, and the body object is a child of the
  document object.

17

• Object Events
• HTML document objects can respond to events.
• The onclick"ChangeColor()" attribute of the
  ltbodygt element in the example above, defines an
  action to take place when the user clicks on the
  document.
• Functions
• The ChangeColor() function in the example above,
  is a JavaScript function.
• The function will be triggered (started) when a
  user clicks on the HTML document.

18
What is JavaScript?

• JavaScript was designed to add interactivity to
  HTML pages
• JavaScript is a scripting language (a scripting
  language is a lightweight programming language)
• A JavaScript consists of lines of executable
  computer code
• A JavaScript is usually embedded directly into
  HTML pages
• JavaScript is an interpreted language (means that
  scripts execute without preliminary compilation)
• We can use JavaScript without purchasing a
  license

19
What can a JavaScript Do?

• HTML designers a programming tool - HTML authors
  are normally not programmers, but JavaScript is a
  scripting language with a very simple syntax!
  Almost anyone can put small "snippets" of code
  into their HTML pages
• can put dynamic text into an HTML page - A
  JavaScript statement like this
  document.write("lth1gt" name "lt/h1gt") can write
  a variable text into an HTML page
• can react to events - A JavaScript can be set to
  execute when something happens, like when a page
  has finished loading or when a user clicks on an
  HTML element

20
What can a JavaScript Do?

• can read and write HTML elements - A JavaScript
  can read and change the content of an HTML
  element
• can be used to validate data - A JavaScript can
  be used to validate form data before it is
  submitted to a server, this will save the server
  from extra processing
• can be used to detect the visitor's browser - A
  JavaScript can be used to detect the visitor's
  browser, and - depending on the browser - load
  another page specifically designed for that
  browser
• can be used to create cookies - A JavaScript can
  be used to store and retrieve information on the
  visitor's computer

21

• Scripts in the head section Script is loaded
  before anyone uses it. 

lthtmlgt ltheadgt ltscript type"text/javascript"gt ....
lt/scriptgt lt/headgt
22
Scripts in the body section Scripts to be
executed when the page loads go in the body
section. When you place a script in the body
section it generates the content of the page.
lthtmlgt ltheadgt lt/headgt ltbodygt ltscript
type"text/javascript"gt .... lt/scriptgt lt/bodygt
23
Scripts in both the body and the head section
You can place an unlimited number of scripts in
your document, so you can have scripts in both
the body and the head section.
lthtmlgt ltheadgt ltscript type"text/javascript"gt ....
lt/scriptgt lt/headgt ltbodygt ltscript
type"text/javascript"gt .... lt/scriptgt lt/bodygt
24
Using an External JavaScriptSometimes you might
want to run the same JavaScript on several pages,
without having to write the same script on every
page.To simplify this, you can write a
JavaScript in an external file. Save the external
JavaScript file with a .js file extension.
lthtmlgt ltheadgt ltscript src"xxx.js"gtlt/scriptgt lt/hea
dgt ltbodygt lt/bodygt lt/htmlgt
25
Where to Put the JavaScript

• JavaScripts in a page will be executed
  immediately while the page loads into the
  browser. However this is not always what we
  want. Sometimes we want to execute a script when
  a page loads, other times when a user triggers an
  event.

26
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.

27
References

• http//www.w3.org/TR/DOM-Level-2-Core/introduction
  .html (DOM)
• http//www.w3.org/DOM/what
• W3C Dom Activity Statement)
• http//www.w3.org/TR/REC-html40/struct/global.html
  The global structure of an HTML
  documenthttp//www.mozilla.org/docs/dom/technote
  /tn-dom-table/getting
• create, access and control, and remove HTML
  elements dynamically.
• http//www.w3schools.com/js/tryit.asp?filenametry
  js_text(Dynamically Edit Content)
• http//www.w3.org/DOM/faq.html(FAQ)
• http//www.w3schools.com/htmldom/dom_examples.asp
• DOM Examples
• http//www.w3schools.com/js/
• JS Examples
• http//wdvl.com/Authoring/DHTML/Intro/ (DHTML)
• http//www.webreference.com/programming/javascript
  /diaries/