Scripting with FrontPage 2000

1
Scripting with FrontPage 2000

• Module 5
• By Marnie Hutcheson

2
Elements and Objects

• Elements define the initial objects
• The BODY is the document
• The ID attribute
• Container elements
• Addressing Contained and Container Objects dom
• The Window object
• Top of the hierarchy
• Check out all the control you have using the Open
  method

3
Demo

• Instructor demonstration of the Event Tutor

4
Properties

• Variables inside a component
• Assign values at run-time
• Modify the behavior of the component at run- time
• Find out the state of the component at run- time
• Get and set properties
• Properties that refer to other objects

5
Methods

• Methods are
• Operations that a component can perform at
  run-time
• What the Object Knows How to Do
• Methods on all visible HTML elements
• Blur, Click, Contains, Focus, and ScrollIntoView
• GetAttribute, SetAttribute, RemoveAttribute
• InsertAdjacentText, InsertAdjacentHTML
• Custom methods

6
Events and Scripts

• Choosing a language
• Hooking up event handlers
• The event object
• Event bubbling
• Handling the default action
• Creating event handlers that handle multiple
  events

7
Object Model

• First there was the window, and in that window
  there may be a document, and in that document
  there may be styles, HTML, script, and ...
• The DOM is how we access and manipulate window
  objects and all the contained collections and
  objects therein
• Using script and the Browser Object Model, you
  can open windows, navigate, write stuff...

8
Object Model Windows

• Many ways to open a window...

Click here
This new child window opens
9
Object Model Windows
ltscript language"javascript"gt //Global
Variables var Seminole "http//www.seminolefeed.
com" var ahsr "pseudowebsites/ahsr_default.htm"
var ideva "http//www.ideva.com" var cosequin
"pseudowebsites/nutramax_veterinary_products_equ.h
tm" var GlenMiller "pseudowebsites/glen_miller_r
ealty_ocala.htm" var Spillers
"http//www.seminolefeed.com/seminole_spillers.htm
l" function launch_cosequin() cosequinwindow.op
en ("/pseudowebsites/nutramax_veterinary_products_
equ.htm","cosequin","statusyes,toolbarno,scrollb
arsyes,width640,height480") function
launch_adlink(linktodo) // Generic link function
that simply opens the ad's site in a small
window. //alert(linktodo) adlinkwindow.open(lin
ktodo,"adlink","statusyes,toolbarno,scrollbarsy
es,width640,height480")lt/scriptgt
10
Object Model Windows

• Status bar messages and tool tips

11
Object Model Windows

• The onMouseOver and onMouseOut events control the
  status message from inside the null lta HREFgt
  element
• The ltimggt element contains the tool tip in the
  alt attribute

12
Collections

• All of the elements of a particular type in the
  current context
• Some key collections
• The documents All collection
• The documents StyleSheets collection
• The tables Rows collection and the rows Cells
  collection

13
Collections

• Elements are exposed in source order (dynamically
  updated)
• Each element collection can
• Return its length (how many are there)var
  edocument.ltsomeCollectionNamegt.length
• Access individual elements by name, id, or
  ordinal position
• var document.ltsomeCollectionNamegt.item(element)
  
• var document.ltsomeCollectionNamegt.item(1)
• A whole bunch more

14
Collections Example

• Sample Code (foo1.htm)

lthtmlgt ltscriptgt function foo1(obj) alert(obj.leng
th) lt/scriptgt ltP idbargtThis is some new text.
(paragraph 1)lt/Pgt ltPgtSome more text (paragraph
2)lt/Pgt ltbrgt lthrgtltbrgt ltinput typebutton
value"Count the 'P' tags" onclick'foo1(document.
all.tags("P"))'gt lt/htmlgt
15
Collections Example

• What happens in the browser

16
Frames and Containment

• Framesets
• ltBODYgt element MUST NOT appear before (outside)
  a ltFRAMESETgt element
• ltNOFRAMESgt element MUST NOT appear before
  (outside) a ltFRAMESETgt element
• ltSCRIPTgt and ltOBJECTgt elements in a page with a
  ltFRAMESETgt element must appear in the ltHEADgt
  section of the page
• Pressing F5 will refresh a frameset

17
Dynamic Content

• Change the contents of an element
• InnerText
• InnerHTML
• Replace the element entirely
• OuterText
• OuterHTML
• Add stuff before or after the current element
• InsertAdjacentText
• InsertAdjacentHTML

18
Dynamic Content Example
lthtmlgtltHEADgtltTITLEgt(foo2.htm)lt/TITLEgtlt/HEADgtltBODYgt
ltscriptgt function foo1(obj) alert(obj.length)
function foo2(obj) alert(obj.innerText) obj.inn
erText document.all.txt1.value lt/scriptgt ltP
idbargtThis is some text. (paragraph
1)lt/Pgt ltPgtSome more text (paragraph
2)lt/Pgt ltbrgtlthrgtltbrgt ltinput typebutton
value"Count the 'P' tags" onclick'foo1(document
.all.tags("P"))'gt ltPgtType in some text here
ltinput typetext idtxt1 value""gtltbrgt ltinput
typebutton value"Change The Text"
onclick'foo2(document.all.bar)'gtlt/BODYgtlt/htmlgt
19
Dynamic Content Example

• What happens in the browser

After the click
20
Lab 1 Collections and Changing Content

• Using the Foo 1 and Foo 2 examples, add a simple
  form to one of your Web pages to allow the user
  to enter new text that will replace the existing
  text
• Notice what happens when the new text is much
  longer or shorter than the text it is replacing
• Is the actual HTML document changing?
• If you refresh the page, what will happen?

21
Review Questions
22
References - Object Model

• http//www.microsoft.com/msdn/sdk/inetsdk/help/def
  ault.htm
• http//www.w3.org/pub/WWW/MarkUp
• Cascading Style Sheets
• http//www.w3.org/pub/WWW/TR/REC-css1-961217.html
  
• For more information on HTML 4.0, visit the
  http//www.w3.org and the new HTML 4.0
  specification
• http//www.microsoft.com/standards/default.asp

23
References - Scripting

• JavaScript - The Definitive Guide at
  http//www.oreilly.com/catalog/jscript2/ under
  JavaScript 1.2 in Navigator 4.01/
• The Development Exchange at http//www.devx.com
• http//www.microsoft.com/workshop/languages/clinic
  /
• http//www.microsoft.com/gallery/samples/author/sc
  riptlets
• http//www.microsoft.com/workshop/author/htmlhelp/
  samplewebsite/how.htm
• http//www.dhtmlzone.com