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

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

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

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

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

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

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

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

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

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

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

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

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

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”

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

Rollovers Change Graphics Based On Cursor Position Example

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

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

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

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

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 Example

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

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

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

Validating Forms Using JavaScript Example