Internet / Intranet Fall 2000 Class 6

Brandeis University Internet/Intranet Spring Class 6 Agenda Log File Homework DHTML DOM Forms

Brandeis University Internet/Intranet Spring Log File Analysis Homework

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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();

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring HTML Element Events Events Event Handlers Can Be Set Within JavaScript E.g. element.onKeyDown=“functionname” Accessing an HTML Element ABC document.all(“firsthead”).style.color = “blue” Or document.all.firsthead.style.color = “blue”

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring Rollovers Change Graphics Based On Cursor Position Example

Brandeis University Internet/Intranet Spring 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. Example

Brandeis University Internet/Intranet Spring 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

Brandeis University Internet/Intranet Spring Forms – Text Fields Text Box: Type=Text 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

Brandeis University Internet/Intranet Spring Forms – Multiline Text Fields Multiline Text 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

Brandeis University Internet/Intranet Spring Forms – CheckBoxes and Radio Buttons Radio Buttons Allow Only One Option to Be Selected Checkboxes Allow Multiple Selections Pick1 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

Brandeis University Internet/Intranet Spring Forms – List Boxes First Choice Second Choice 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

Brandeis University Internet/Intranet Spring Forms – Submit and Reset Buttons Submit Reset Sets all Fields to Their Default Values Example

Brandeis University Internet/Intranet Spring Forms –Uploading Files Allows a User to Upload Contents of a File Instead of Text 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

Brandeis University Internet/Intranet Spring 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) Example

Brandeis University Internet/Intranet Spring 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 Enter Name: 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) Adds Text To Outline Box Example

Brandeis University Internet/Intranet Spring Validating Forms Using JavaScript Example