1. Internet / Intranet Fall 2000 Class 6

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

3. Brandeis University Internet/Intranet Spring 2000 3 Log File Analysis Homework

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21. Brandeis University Internet/Intranet Spring 2000 21 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”

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

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

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

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

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

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

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

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

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

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

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

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

34. Brandeis University Internet/Intranet Spring 2000 34 Validating Forms Using JavaScript Example