Internet intrarnet CIS class 6

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

Internet / Intranet

CIS-536

Class 6

Class 6 Agenda Log File Homework

DHTML

DOM

Forms

Log File Analysis Homework

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

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

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

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

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 pixelsresizeTo(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

Window Events And Objects

navigator – Specific Browser Information

screen – Information About the Display

document – The HTML Text Displayed in the Window

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();

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

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

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

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

Forms

Properties

action – The URL Where Form Will be Submittedlength – 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

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

Children of the Document

expando=false – Helps Debugging

Example

Browsers and the DOM

Names and Ids

All Tags Can Have a Name

Multiple Tags Often Have Same Name

E.g Radio ButtonsAll Tags Can Have an ID

Ids Should Be Unique

Uniquely Identify an HTML ElementNetscape 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

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

HTML Element Methods

Objects

style

parentElement – The Parent Element to This Element

document – The Document That This Element Belongs To

Element

setAttribute – Set the Value of an Element Attribute

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 WindowEvents Always Bubble Unless

event.cancelBubble=true

Event Capturing (Netscape)

Event Trickles From Top (Window) Down

Can Control How Events Trickle Through Calls

Rollovers Change Graphics Based On Cursor Position

Example

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

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

Forms – Text Fields

Text Box: Type=Text

<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

Forms – Multiline Text Fields

Multiline Text

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

Example

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

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

Forms – Submit and Reset Buttons

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

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

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”>

Groups Controls Together (Outline Box)

<Legend> Adds Text To Outline Box

Example

Validating Forms Using JavaScript

Example