Dynamic HTML

1
Dynamic HTML

• Cascading Style Sheets and Javascript

2
DHTML

• Collection of technologies forming dynamic
  clients
• HTML
• DOM
• Scripting (JavaScript)
• Cascading Style Sheets

3
Cascading Style Sheets

• Method for specifying properties for HTML
  elements
• default and specific fonts, colours etc.
• Allows easy modification of page styles
• Style sheet can be modified rather than editing
  the html
• Style sheet can be embedded in HTML or linked via
  an external file

4
CSS Format

• Style Sheet formats
• ltstyle typetext/cssgt lt/stylegt
• embedded style sheet tag
• ltlink relstylesheet hreffilenamegt
• Linking external stylesheet
• Style sheet structure
• Selector Definition
• PropertyValue

5
CSS Examples

• body
• font-family Georgia, "Times New Roman", Times,
  serif
• color blue
• background-color FFFF00
• Similarly any property can be specified and
  modified
• You can define your own selectors
• .myStyle color blue
• Use with a classmyStyle attribute in the
  element you want to modify

6
JavaScript

• A client side scripting language
• Allows building dynamic user interfaces
• Dynamic menus
• Client side animation
• Modify client view based on user input
• Ability to check user input before forwarding to
  the server
• NOTE JavaScript and Java are different
• JavaScript is based on a standard ECMA scripting
  language, JavaScipt name adopted for marketing
  reasons (Java was starting to get hot at the time)

7
JavaScript Basic Concepts

• JavaScript is an interpreted language
• No need to compile the code
• The language is dynamically typed
• No need to declare the type of a variable
• The type of a variable can change over time
• Need to be careful that the type is not changed
  accidentally by a programming mistake
• Structured Programming constructs
• Similar to C
• Case sensitive like C

8
JavaScript HTML Tags

• ltscript typetext/javascript versionJavaScript
  1.2gt . lt/scriptgt
• Embedded javascript, can be in either the head or
  body.
• Multiple script tags are allowed
• ltscript srcfilename versionJavaScript1.2gtlt/s
  criptgt
• External JavaScript file
• lt!-- .. //--gt
• HTML comments so that browsers that do not
  support JavaScript do not display your code
• E.g.
• ltscript typetext/javascript versionJavaScript
  1.2gt
• lt!--
• document.write(hello)
• //--gt
• lt/scriptgt
• ltnoscriptgtlth2gtYour Browser doesnt support
  JavaScript !lt/h2gtlt/noscriptgt

9
JavaScript Programming Constructs

• All standard C operators can be used in
  JavaScript
• , -, , /, , -, , !, lt, gt, gt, lt, , ,
  , !
• Also can add strings (concatenate)
• Str3 Str1 Str2
• if, if else, switch case, for , while , do
  while
• Can all be used as in C

10
JavaScript Functions

• Functions declared as in C
• But no data types
• E.g. myfun() document.write(myfunction)
• Functions can take parameters
• E.g. myfun(X) document.write(ValueX)
• Functions can return values
• E.g. myfun(X,Y) return XY

11
JavaScript Arrays

• Zero indexed arrays
• myArray new Array(4)
• Create and array of 4 elements
• myArray new Array(one, two, three)
• first myArray0
• myArray.length
• Returns length of array (number of elements)
• pop() Removes last element of array
• push(item1, item2) Adds items to the end of
  the array
• shift() Removes an item from the front of the
  array
• unshift(item1) Adds items to the beginning of
  the array
• concat() Joins two or more arrays, returning a
  new array
• join(delimiter) Joins the elements of an array
  into a string using the delimiter

12
HTML Document Object Model

• The HTML document is available to your javaScript
  code as an object tree.
• The root of this tree is the document object.
• All the elements in the document are built under
  this tree
• Client side Information
• Window object Information about the windows this
  document is nested in.
• NOT W3C standard
• Screen object Information about the clients
  screem
• Navigator object Information about the clients
  browser
• Location object Information about the current
  URL
• You can refer to each element using its element
  ID or a Name
• specify a unique name or id for each element

13
HTML DOM Collections

• anchors
• Any anchors with a name or id
• applets
• embeds
• List of embedded objects, browser must have
  appropriate viewer
• forms
• images
• links
• Any anchors with an href

14
HTML DOM Properties

• body
• cookie
• domain
• Servers domain
• referrer
• URL of document that loaded current document
• title
• URL

15
HTML DOM Methods

• getElementById("id")
• Not W3C standard
• getElementsByName("name")
• open("mimetype",replace)
• write("str")
• writeln("str")
• close()

16
JavaScript Event Handling

• As the Page loads and the user interacts with the
  web page events are generated
• onload of document body
• onmouseover, onmouseout, onclick, ondblclick,
  onmousedown, onmouseup, onmousemove
• onfocus, onresize
• onkeydown, onkeypress, onkeyup
• onsubmit, onchange

17
Summary

• Main points to remember
• Cascading Style Sheets
• JavaScript
• Document Object Model