Internet intrarnet CIS class 6

Internet / Intranet
CIS-536

Class 6


Class 6 Agenda
Log File Homework
DHTML
DOM
Forms

2


Log File Analysis Homework

3


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

4


Core Browser Objects
Window
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

5


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

6


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

7


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

8


Window Events And Objects
Events
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

9


Frames & History
Frames
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();

10


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
11


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

12


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

13


Document Objects and Methods
Objects
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

14


Forms
Properties
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

15


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

16


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

17


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

18


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

19


HTML Element Methods
Objects

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

20


HTML Element Events
Events
Event Handlers Can Be Set Within JavaScript
E.g. element.onKeyDown=“functionname”

Accessing an HTML Element

name=“head1”>ABC

document.all(“firsthead”).style.color = “blue”
Or
document.all.firsthead.style.color = “blue”

21


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

22


Rollovers
Change Graphics Based On Cursor Position
Example

23


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

24


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 email Address
Example

25