Internet Intranet CIS536 Class 6 Brandeis University InternetIntranet

Internet / Intranet CIS-536 Class 6 Brandeis University Internet/Intranet Spring 2000

Class 6 Agenda Log File Homework DHTML DOM Forms 2

Log File Analysis Homework 3

Java. Script, DHTML and the DOM HTML “Source” Can Be Changed Dynamically Multiple Windows Dynamic Positioning Events Trigger Client-Script Form Validation Java. Script Pros and Cons Robust Applications Can Be Written in Java. Script Can Be Distributed as Web Page No Installation, etc. Required Browser Dependent Source Code is in Plain View Interpreted – Source Downloaded Each Time 4

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 5

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. opener – Window Object of Window That Opened This Window 6

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 7

More Window Methods move. By(x, y) – Move the Browser Window x pixels right, y pixels down move. To(x, y) – Move to Absolute Position x, y resize. By(x, y) – Increase Window Size by x, y pixels resize. To(x, y) – Resize the Window to x, y pixels scroll. By(x, y) – Scroll the Window by x, y pixels intid = set. Interval (functionname, interval in milliseconds, args) Call the Function Every interval Milliseconds clear. Interval (int. ID) – Clear the Interval Identified by int. ID 8

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 9

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

Navigator Also Accessed as clientinformation in Internet Explorer app. Code. Name – Code Name of the Browser app. Name – Browser Name app. Version – Browser Version mimetypes[] – Array of Mime Types Supported Platform – Platform That Browser is Running On user. Agent – String Passed as user-agent in HTTP header Other Browser Specific Methods 11

Screen Requires Java. Script 1. 2 Height – Height of Display in Pixels Width – Width of Display in Pixels color. Depth – Depth of Browser’s Color Palette Pixel. Depth – Number of Bits Per Pixel in the Display avail. Height – Available Height of Screen in Pixels avail. Width – The Available Width of the Screen in Pixels avail. Left – First Available Pixel on Left avail. Top 12

Document Properties link. Color – Color of Links vlinkcolor – Color of Visited Links alink. Color – Color of Activated Links bg. Color – Background Color fg. Color – 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 last. Modified – 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 13

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 14

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 on. Reset on. Submit Return false to Prevent Submission 15

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 16

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 active. Element – The Element With Current Focus children[] – Array of All Elements That are Children of the Document expando=false – Helps Debugging Example 17

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 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/Java. Script is Complex Each Browser Has Own Syntax More Than We Can Cover in Class: IE Specific From Here On 18

HTML Element Attributes (IE Only) Each Tag is an Element Maximum Control Over Interactivity Properties class. Name – The Value of the Class Attribute Id – The Value of the ID Attribute inner. HTML –HTML Text Within the Element inner. Text – Plain Text Within the Element outer. HTML – HTML Text Including Start/End Tags outer. Text – Plain Text, Including Start/End Tags source. Index – The Index of the Element in Document. all[] tag. Name – Name of the HTML Tag That Created the Element title – Value of the Title Attribute 19

HTML Element Methods Objects style parent. Element – The Parent Element to This Element document – The Document That This Element Belongs To Methods contains() – Determine Whether the Element Contains a Specified Element insert. Adjacent. HTML(where, text) – Insert HTML Text Into the Document Before. Begin After. Begin Before. End After. End insert. Adjacent. Text() – Insert Plain Text Into the Document remove. Attrubute() – Delete an Attribute and its Value From the Element set. Attribute – Set the Value of an Element Attribute 20

HTML Element Events Event Handlers Can Be Set Within Java. Script E. g. element. on. Key. Down=“functionname” Accessing an HTML Element <h 1 id=“firsthead” name=“head 1”>ABC</h 1> document. all(“firsthead”). style. color = “blue” Or document. all. firsthead. style. color = “blue” 21

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. cancel. Bubble=true Event Capturing (Netscape) Event Trickles From Top (Window) Down Can Control How Events Trickle Through Calls 22

Rollovers Change Graphics Based On Cursor Position Example 23

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=“Field 1” Value=“Default”> <INPUT TYPE=“Submit” Value=“Click Here”> Example 24

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 25

Forms – Text Fields Text Box: Type=Text <INPUT Type=“Text” Name=“Field 1” 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 26

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

Forms – Check. Boxes and Radio Buttons Allow Only One Option to Be Selected Checkboxes Allow Multiple Selections <INPUT Type=“Check. Box” Name=“CB 1” Value=“A” CHECKED>Pick 1 <INPUT Type=“Check. Box” Name=“CB 1” Value=“B”> Pick 2 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 Pick 1: Sent to Server: CB 1=A If the User Checks Pick 1 and Pick 2: Sent to Server: CB 1=AB Example 28

Forms – List Boxes <SELECT Name=“LBox” Size=“ 5” Multiple=“ 5”> <OPTION Value=“Choice 1” >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 29

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 30

Forms –Uploading Files Allows a User to Upload Contents of a File Instead of Text <INPUT Type=“File” Name=“File. Field”> 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 31

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=“Hid. Var” Value=“Myval”> Example 32

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=“Text. ID”>Enter Name: </LABEL> <INPUT TYPE=“Text” ID=“Text. ID” Name=“Tname”> Shortcuts Alt-Character selects Entry Field ACCESSKEY=“X” Tab Order TABINDEX=3 Negative Number Excludes Field From Tab Order Field. Set Groups Controls Together (Outline Box) <Legend> Adds Text To Outline Box Example 33

Validating Forms Using Java. Script Example 34