1. Internet / Intranet CIS-536
Class 6

2. Class 6 Agenda
Log File Homework
DHTML
DOM
Forms

3. Log File Analysis Homework

4. JavaScript, DHTML and the DOM
HTML “Source” Can Be Changed Dynamically
Multiple Windows
Dynamic Positioning
Events Trigger Client-Script
Form Validation
JavaScript Pros and Cons
Robust Applications Can Be Written in JavaScript
Can Be Distributed as Web Page
No Installation, etc. Required
Browser Dependent
Source Code is in Plain View
Interpreted – Source Downloaded Each Time

5. Core Browser Objects Window Document Screen Event
An Instance of the Browser
Refer to Own Window as self, or window
Frames are Also Windows
Document
The HTML Document Being Displayed in The Window
Screen
The Video Display
All Windows Use the Same Screen
Event
Global Containing Info About the Current Event

6. Window Properties defaultstatus – Default Status Message
status – Status Message
location – URL For this Window
Set Location to New Value to Change Pages
Window.location.replace(“new URL”)
Replaces Current Document: Not Added to History
window.location.reload()
Reloads the Current Document
offscreenbuffering – Set to True to Cause Window to Buffer All Output Before Displaying Window
name – Name of the Window
Name Specified in window.open
opener – Window Object of Window That Opened This Window

7. Window Methods alert(message) – Create a Pop-Up Window
prompt (message,default string) – Asks the User for a Response
Returns string entered
null if user
confirm(“question”) – Asks a Yes/Question
Returns: true/false
open(url,name,features) – Open a New Window
Features Specifies Format of Browser
Can Disable Buttons, etc.
close() – Closes This Window

8. More Window Methods
moveBy(x,y) – Move the Browser Window x pixels right, y pixels down
moveTo(x,y) – Move to Absolute Position x,y
resizeBy(x,y) – Increase Window Size by x,y pixels
resizeTo(x,y) – Resize the Window to x,y pixels
scrollBy(x,y) – Scroll the Window by x,y pixels
intid = setInterval (functionname, interval in milliseconds, args)
Call the Function Every interval Milliseconds
clearInterval (intID) – Clear the Interval Identified by intID

9. Window Events And Objects
onblur
ondragdrop
onerror
onfocus
onload
onmove
onresize
Onunload
Objects
frames[] – Array of Frames Contained by the Window
history – History
navigator – Specific Browser Information
screen – Information About the Display
document – The HTML Text Displayed in the Window

10. Frames & History Frames History
Frames Inherit All Attributes of a Window Object
Useful Properties
name – As Specified in NAME attribute
parent – The Parent Object of a Frame
top – Window That Frame Belongs To
Status Messages are Only Displayed When Focus is In Frame
History
length – The Number of Items in History
back() – Go Back to a the nth Previously Visited URL
forward() – Go Forward to the nth Previously Visited URL
go (n) – Go Back/Forward n URL’s
Go(-2) is equivalent of back();back();

11. Navigator Also Accessed as clientinformation in Internet Explorer
appCodeName – Code Name of the Browser
appName – Browser Name
appVersion – Browser Version
mimetypes[] – Array of Mime Types Supported
Platform – Platform That Browser is Running On
userAgent – String Passed as user-agent in HTTP header
Other Browser Specific Methods

12. Screen Requires JavaScript 1.2 Height – Height of Display in Pixels
Width – Width of Display in Pixels
colorDepth – Depth of Browser’s Color Palette
PixelDepth – Number of Bits Per Pixel in the Display
availHeight – Available Height of Screen in Pixels
availWidth – The Available Width of the Screen in Pixels
availLeft – First Available Pixel on Left
availTop

13. Document Properties linkColor – Color of Links
vlinkcolor – Color of Visited Links
alinkColor – Color of Activated Links
bgColor – Background Color
fgColor – Foreground Color
location – The Actual URL of the Current Document
NOTE: Window.location is the Requested URL
May Be Different Due to Redirection
cookie – Cookies Associated With the Document
lastModified – Most Recent Date of Change (Read Only)
referrer – Referrer to the Document From HTTP Header (Read Only)
title – Document Title
URL – URL of the Document

14. Document Objects and Methods
anchors[] – Array of Anchor Objects
links[] – Array of Link Objects
forms[] – Array of Form Objects
images[] – Array of Images Used in the Document
Methods
open() – Opens a Stream to Which HTML Can Be Written
close() – Closes the Document Stream
write() – Writes HTML to the Document
writeln() – Same as write, but appends a Newline
Example

15. Forms Properties Methods Objects Events
action – The URL Where Form Will be Submitted
length – The Number of Elements in the Form
method – “Get” or “Post”
name – Name as Specified by Name Attribute
target – If in a Frame, the Target Frame Name
Methods
reset() – Reset the Form
submit() – Submit the Form
Objects
elements[] – Array of input elements in the form.
Events
onReset
onSubmit
Return false to Prevent Submission

16. Getting at HTML Elements
The Document Object Model
Allows Each Element to Be Identified
Method Varies in Netscape, IE
Netscape
classes – CSS Style Classes
ids – Individual Document Elements
ids.elementname – Refers to Element With That ID
layers[] – Array of Layer Objects
Tags[] – Defines CSS Styles for HTML Tags
Forms[] – Array of Forms
Can Address Elements Within a Form

17. Getting at HTML Elements (2)
Internet Explorer
all[] – An Array of All Elements Within the Document
all.item(itemname) – Returns the Element With name=itemname
All.tags(tagname)[] – Array of Elements of The Specified Type
activeElement – The Element With Current Focus
children[] – Array of All Elements That are Children of the Document
expando=false – Helps Debugging
Example

18. Browsers and the DOM Names and Ids All Tags Can Have a Name
Multiple Tags Often Have Same Name
E.g. Radio Buttons
All Tags Can Have an ID
Ids Should Be Unique
Uniquely Identify an HTML Element
Netscape Often Uses Name to Address an Element
Most HTML Attributes are Not Accessible
Only Form Elements Accessible
Uses Layer Model
Used Form Dynamic Positioning
IE Uses ID to Address an Element
Other Browsers Likely Support Neither
Writing Portable DHTML/JavaScript is Complex
Each Browser Has Own Syntax
More Than We Can Cover in Class: IE Specific From Here On

19. HTML Element Attributes
(IE Only)
Each Tag is an Element
Maximum Control Over Interactivity
Properties
className – The Value of the Class Attribute
Id – The Value of the ID Attribute
innerHTML –HTML Text Within the Element
innerText – Plain Text Within the Element
outerHTML – HTML Text Including Start/End Tags
outerText – Plain Text, Including Start/End Tags
sourceIndex – The Index of the Element in Document.all[]
tagName – Name of the HTML Tag That Created the Element
title – Value of the Title Attribute

20. HTML Element Methods Objects Methods style
parentElement – The Parent Element to This Element
document – The Document That This Element Belongs To
Methods
contains() – Determine Whether the Element Contains a Specified Element
insertAdjacentHTML(where,text) – Insert HTML Text Into the Document
BeforeBegin
AfterBegin
BeforeEnd
AfterEnd
insertAdjacentText() – Insert Plain Text Into the Document
removeAttrubute() – Delete an Attribute and its Value From the
Element
setAttribute – Set the Value of an Element Attribute

21. HTML Element Events Events Accessing an HTML Element
Event Handlers Can Be Set Within JavaScript
E.g. element.onKeyDown=“functionname”
Accessing an HTML Element
<h1 id=“firsthead” name=“head1”>ABC</h1>
document.all(“firsthead”).style.color = “blue” Or
document.all.firsthead.style.color = “blue”

22. Event Propagation Event is Passed Through Hierarchy of Event Handlers
Event Bubbling (Microsoft)
Event Bubbles From Source Element Up
E.g. Click on Text Field in Form Invokes:
1. Event Handler for Text Field
2. Event Handler for Form
3. Event Handler for Window
Events Always Bubble Unless event.cancelBubble=true
Event Capturing (Netscape)
Event Trickles From Top (Window) Down
Can Control How Events Trickle Through Calls

23. Rollovers
Change Graphics Based On Cursor Position
Example

24. HTML Forms A Method to Allow Users to Pass Information to a CGI Script
Forms Allow Information to Be Entered Via:
Text Fields
Selectable Lists
Checkboxes
Radio Buttons
Submit / Reset Buttons
Each Field Is Identified by a Name
Optional Default Value
E.g.
<INPUT TYPE=“Text” Name=“Field1” Value=“Default”>
<INPUT TYPE=“Submit” Value=“Click Here”>
Example

25. HTML Forms (2) Submit Button Sends Data to CGI Script
Name/Value Pairs Separated By &
METHOD = “GET”
Uses HTTP Get Method
Parameters are Sent in URL
“Command Line” Arguments
Data Follows “?”
Easily Visible to Users
Some Servers Truncate the URL
Passed to Perl as QUERY_STRING Environment Variable
METHOD = “POST”
Data is Sent in HTTP Message Body
Passed to Perl as stdin
ACTION=“URL”
Identifies the Target URL
ACTION =“mailto:xxx”
Data is Mailed to Target Address
Example

26. Forms – Text Fields Text Box: Type=Text Type=Password
<INPUT Type=“Text” Name=“Field1” Value=“Default” Size=“15” Maxlength=“20”>
Size – Size of Text Box in Characters
Maxlength – The Maximum Number of Characters Allowed
Type=Password
Same, Except User Input is Echoed as *’s
Note: Password is Still Sent to Server in Plain Text
Pwd Example
Example

27. Forms – Multiline Text Fields
<TEXTAREA Name=“Fname” Value=“Default” Rows=“5” Cols=“30” WRAP=“Virtual”>
Rows, Cols – The Size of the Field in Characters
Note: This Only Controls the Size of the Display Box.
Scroll Bars Allow More Data.
Wrap=Off
No Wrapping. Horizontal Scroll Bar for Additional Text.
Wrap=Virtual, Physical
Wrap Text Based on Number of Columns
Wrap=Virtual –Do Not Send Inserted Carriage Returns
Wrap=Physical – Send Inserted Carriage Returns
Example

28. Forms – CheckBoxes and Radio Buttons
Radio Buttons Allow Only One Option to Be Selected
Checkboxes Allow Multiple Selections
<INPUT Type=“CheckBox” Name=“CB1” Value=“A” CHECKED>Pick1
<INPUT Type=“CheckBox” Name=“CB1” Value=“B”> Pick2
Name - Identifies the Grouping.
Value – The Value Passed to the Server if This Item is Selected.
For Multiple Selections, Values are Concatenated
CHECKED – Indicates the Default Status is Checked
Examples:
If the User Checks Pick1:
Sent to Server: CB1=A
If the User Checks Pick1 and Pick2:
Sent to Server: CB1=AB
Example

29. Forms – List Boxes <SELECT Name=“LBox” Size=“5” Multiple=“5”>
<OPTION Value=“Choice1” >First Choice
<OPTION> Second Choice
</SELECT>
Size – The Number of Rows to Display
Access Additional Rows Via Scroll Bar
Size=1 Creates a Drop-Down List
Multiple – The Maximum Number of Items That Can Be Selected From List
Values are Concatenated When Sent to Server
Value – If Specified, This is Sent to Server When Row is Selected
Unspecified – Text in Row is Sent to Server as the Value
Example

30. Forms – Submit and Reset Buttons
<INPUT type=“submit” value=“press here to submit”>
Reset
<INPUT type=“reset” value=“press here to reset”>
Sets all Fields to Their Default Values
Example

31. Forms –Uploading Files
Allows a User to Upload Contents of a File Instead of Text
<INPUT Type=“File” Name=“FileField”>
Browser Displays a Text Field and a Browse Button to Allow User to Select a File
If the Form has ENCTYPE=“multipart/form-data”
Contents of File Are Uploaded in This Field
Else
The Filename is Uploaded in This Field
BE CAREFUL!
Can Be a Security Hole if Uploaded Files are Stored in Web Accessible Directories
Accidentally Selecting a Large File Can Affect Performance
Example

32. Forms – Hidden Fields Allows You to Create “Variables”
Passed to Server as if Entered By User
Not Displayed to User in Form
Fully Visible in the HTML
Therefore, Not For Sensitive Info (e.g. Passwords)
<INPUT Type=“Hidden” Name=“HidVar” Value=“Myval”>
Example

33. HTML Extensions for Forms
“Tool Tips”
TITLE Attribute on Form Tags
Label Associated With Form Entry
User Can Click On Label to Select Entry Field
<LABEL FOR=“TextID”>Enter Name: </LABEL>
<INPUT TYPE=“Text” ID=“TextID” Name=“Tname”>
Shortcuts
Alt-Character selects Entry Field
ACCESSKEY=“X”
Tab Order
TABINDEX=3
Negative Number Excludes Field From Tab Order
FieldSet
Groups Controls Together (Outline Box)
<Legend> Adds Text To Outline Box
Example

34. Validating Forms Using JavaScript
Example