Internet intrarnet CIS class 6

Internet / Intranet CIS-536 Class Class 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 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 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 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(); 10 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 20 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” 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: Event Handler for Text Field Event Handler for Form 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 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 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 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 26 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 27 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 28 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 29 Forms – Submit and Reset Buttons Submit 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 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) 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 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 33 Validating Forms Using JavaScript Example 34 ... 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 className – The Value of the Class Attribute... 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)... 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