Internet / Intranet Fall 2000 Class 6. Brandeis University Internet/Intranet Spring 2000 2 Class 6 Agenda Log File Homework DHTML DOM Forms

Internet / Intranet

Fall 2000

Class 6

Brandeis University Internet/Intranet Spring 2000 2

Class 6 Agenda

Log File HomeworkDHTMLDOMForms


Log File Analysis Homework


JavaScript, DHTML and the DOM

HTML “Source” Can Be Changed DynamicallyMultiple WindowsDynamic PositioningEvents Trigger Client-Script

Form Validation

JavaScript Pros and ConsRobust Applications Can Be Written in JavaScriptCan Be Distributed as Web Page

No Installation, etc. Required

Browser DependentSource Code is in Plain ViewInterpreted – Source Downloaded Each Time


Core Browser Objects

WindowAn Instance of the BrowserRefer to Own Window as self, or windowFrames are Also Windows

DocumentThe HTML Document Being Displayed in The Window

ScreenThe Video Display

All Windows Use the Same Screen

EventGlobal Containing Info About the Current Event


Window Propertiesdefaultstatus – Default Status Messagestatus – Status Messagelocation – URL For this Window

Set Location to New Value to Change PagesWindow.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 Windowname – Name of the Window

Name Specified in window.open

opener – Window Object of Window That Opened This Window


Window Methodsalert(message) – Create a Pop-Up Windowprompt (message,default string) – Asks the User for a Response

Returns string enterednull if user

confirm(“question”) – Asks a Yes/QuestionReturns: true/false

open(url,name,features) – Open a New WindowFeatures Specifies Format of Browser

Can Disable Buttons, etc.close() – Closes This Window


More Window MethodsmoveBy(x,y) – Move the Browser Window x pixels right, y pixels downmoveTo(x,y) – Move to Absolute Position x,yresizeBy(x,y) – Increase Window Size by x,y pixelsresizeTo(x,y) – Resize the Window to x,y pixelsscrollBy(x,y) – Scroll the Window by x,y pixelsintid = setInterval (functionname, interval in milliseconds, args)

Call the Function Every interval MillisecondsclearInterval (intID) – Clear the Interval Identified by intID


Window Events And Objects

EventsonblurondragdroponerroronfocusonloadonmoveonresizeOnunload

Objectsframes[] – Array of Frames Contained by the Windowhistory – History navigator – Specific Browser Informationscreen – Information About the Displaydocument – The HTML Text Displayed in the Window


Frames & History

FramesFrames Inherit All Attributes of a Window ObjectUseful Properties

name – As Specified in NAME attributeparent – The Parent Object of a Frametop – Window That Frame Belongs To

Status Messages are Only Displayed When Focus is In Frame

Historylength – The Number of Items in Historyback() – Go Back to a the nth Previously Visited URLforward() – Go Forward to the nth Previously Visited URLgo (n) – Go Back/Forward n URL’s

Go(-2) is equivalent of back();back();


Navigator

Also Accessed as clientinformation in Internet Explorer

appCodeName – Code Name of the BrowserappName – Browser NameappVersion – Browser Versionmimetypes[] – Array of Mime Types SupportedPlatform – Platform That Browser is Running OnuserAgent – String Passed as user-agent in HTTP header

Other Browser Specific Methods


Screen

Requires JavaScript 1.2Height – Height of Display in PixelsWidth – Width of Display in PixelscolorDepth – Depth of Browser’s Color PalettePixelDepth – Number of Bits Per Pixel in the Display

availHeight – Available Height of Screen in PixelsavailWidth – The Available Width of the Screen in PixelsavailLeft – First Available Pixel on LeftavailTop


Document PropertieslinkColor – Color of Linksvlinkcolor – Color of Visited LinksalinkColor – Color of Activated Links

bgColor – Background ColorfgColor – Foreground Colorlocation – The Actual URL of the Current Document

NOTE: Window.location is the Requested URLMay Be Different Due to Redirection

cookie – Cookies Associated With the DocumentlastModified – Most Recent Date of Change (Read Only)referrer – Referrer to the Document From HTTP Header (Read Only)title – Document TitleURL – URL of the Document


Document Objects and Methods

Objectsanchors[] – Array of Anchor Objectslinks[] – Array of Link Objectsforms[] – Array of Form Objectsimages[] – Array of Images Used in the Document

Methodsopen() – Opens a Stream to Which HTML Can Be Writtenclose() – Closes the Document Streamwrite() – Writes HTML to the Documentwriteln() – Same as write, but appends a Newline

Example


Forms Properties

action – The URL Where Form Will be Submittedlength – The Number of Elements in the Formmethod – “Get” or “Post”name – Name as Specified by Name Attributetarget – If in a Frame, the Target Frame Name

Methodsreset() – Reset the Formsubmit() – Submit the Form

Objectselements[] – Array of input elements in the form.

EventsonResetonSubmit

Return false to Prevent Submission


Getting at HTML Elements

The Document Object ModelAllows Each Element to Be IdentifiedMethod Varies in Netscape, IE

Netscapeclasses – CSS Style Classesids – Individual Document Elements

ids.elementname – Refers to Element With That ID

layers[] – Array of Layer ObjectsTags[] – Defines CSS Styles for HTML TagsForms[] – Array of Forms

Can Address Elements Within a Form


Getting at HTML Elements (2)

Internet Explorerall[] – An Array of All Elements Within the Documentall.item(itemname) – Returns the Element With name=itemnameAll.tags(tagname)[] – Array of Elements of The Specified TypeactiveElement – The Element With Current Focuschildren[] – Array of All Elements That are Children of the Documentexpando=false – Helps Debugging

Example


Browsers and the DOMNames and Ids

All Tags Can Have a NameMultiple Tags Often Have Same Name

E.g. Radio ButtonsAll Tags Can Have an ID

Ids Should Be UniqueUniquely Identify an HTML Element

Netscape Often Uses Name to Address an ElementMost HTML Attributes are Not Accessible

Only Form Elements AccessibleUses Layer Model

Used Form Dynamic PositioningIE Uses ID to Address an ElementOther Browsers Likely Support NeitherWriting Portable DHTML/JavaScript is Complex

Each Browser Has Own SyntaxMore 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

PropertiesclassName – The Value of the Class AttributeId – The Value of the ID AttributeinnerHTML –HTML Text Within the ElementinnerText – Plain Text Within the ElementouterHTML – HTML Text Including Start/End TagsouterText – Plain Text, Including Start/End TagssourceIndex – The Index of the Element in Document.all[]tagName – Name of the HTML Tag That Created the Elementtitle – Value of the Title Attribute


HTML Element MethodsObjects

style parentElement – The Parent Element to This Elementdocument – The Document That This Element Belongs To

Methodscontains() – Determine Whether the Element Contains a Specified ElementinsertAdjacentHTML(where,text) – Insert HTML Text Into the Document

BeforeBeginAfterBeginBeforeEndAfterEnd

insertAdjacentText() – Insert Plain Text Into the DocumentremoveAttrubute() – Delete an Attribute and its Value From the ElementsetAttribute – Set the Value of an Element Attribute


HTML Element Events

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


Event Propagation

Event is Passed Through Hierarchy of Event HandlersEvent Bubbling (Microsoft)

Event Bubbles From Source Element UpE.g. Click on Text Field in Form Invokes:

1. Event Handler for Text Field2. Event Handler for Form3. 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


Rollovers

Change Graphics Based On Cursor Position

Example


HTML FormsA Method to Allow Users to Pass Information to a CGI ScriptForms Allow Information to Be Entered Via:

Text FieldsSelectable ListsCheckboxesRadio ButtonsSubmit / Reset Buttons

Each Field Is Identified by a NameOptional Default ValueE.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 MethodParameters are Sent in URL

“Command Line” ArgumentsData Follows “?”

Easily Visible to UsersSome Servers Truncate the URLPassed 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


Forms – Text Fields

Text Box: Type=Text<INPUT Type=“Text” Name=“Field1” Value=“Default” Size=“15” Maxlength=“20”>

Size – Size of Text Box in CharactersMaxlength – The Maximum Number of Characters Allowed

Type=PasswordSame, 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 CharactersNote: 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 ColumnsWrap=Virtual –Do Not Send Inserted Carriage ReturnsWrap=Physical – Send Inserted Carriage Returns

Example


Forms – CheckBoxes and Radio Buttons

Radio Buttons Allow Only One Option to Be SelectedCheckboxes 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=AIf 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 BarSize=1 Creates a Drop-Down List

Multiple – The Maximum Number of Items That Can Be Selected From List

Values are Concatenated When Sent to ServerValue – If Specified, This is Sent to Server When Row is Selected

Unspecified – Text in Row is Sent to Server as the Value

Example


Forms – Submit and Reset Buttons

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


Forms –Uploading FilesAllows 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

ElseThe Filename is Uploaded in This Field

BE CAREFUL!Can Be a Security Hole if Uploaded Files are Stored in Web Accessible DirectoriesAccidentally Selecting a Large File Can Affect Performance

Example


Forms – Hidden Fields

Allows You to Create “Variables”Passed to Server as if Entered By UserNot Displayed to User in Form

Fully Visible in the HTMLTherefore, 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”>

Shortcuts Alt-Character selects Entry FieldACCESSKEY=“X”

Tab OrderTABINDEX=3Negative Number Excludes Field From Tab Order

FieldSetGroups Controls Together (Outline Box)<Legend> Adds Text To Outline Box

Example


Validating Forms Using JavaScript

Example

Documents

Internet / Intranet Fall 2000 Class 6. Brandeis University Internet/Intranet Spring 2000 2 Class 6 Agenda Log File Homework DHTML DOM Forms