Internet Intranet Fall 2000 - PowerPoint PPT Presentation

About This Presentation
Title:

Internet Intranet Fall 2000

Description:

Events Trigger Client-Script. Form Validation ... Event. Global Containing Info About the Current Event ... activeElement The Element With Current Focus ... – PowerPoint PPT presentation

Number of Views:52
Avg rating:3.0/5.0
Slides: 35
Provided by: mkat
Category:

less

Transcript and Presenter's Notes

Title: Internet Intranet Fall 2000


1
Internet / IntranetFall 2000
  • Class 6

2
Class 6 Agenda
  • Log File Homework
  • DHTML
  • DOM
  • Forms

3
Log File Analysis Homework
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
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
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
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
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
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
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 URLs
  • Go(-2) is equivalent of back()back()

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
Screen
  • Requires JavaScript 1.2
  • Height Height of Display in Pixels
  • Width Width of Display in Pixels
  • colorDepth Depth of Browsers 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
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
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
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
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
Getting at HTML Elements (2)
  • Internet Explorer
  • all An Array of All Elements Within the
    Document
  • all.item(itemname) Returns the Element With
    nameitemname
  • 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
  • expandofalse Helps Debugging
  • Example

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
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
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
HTML Element Events
  • Events
  • Event Handlers Can Be Set Within JavaScript
  • E.g. element.onKeyDownfunctionname
  • Accessing an HTML Element
  • ABC
  • document.all(firsthead).style.color blue
  • Or
  • document.all.firsthead.style.color blue

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.cancelBubbletru
    e
  • Event Capturing (Netscape)
  • Event Trickles From Top (Window) Down
  • Can Control How Events Trickle Through Calls

23
Rollovers
  • Change Graphics Based On Cursor Position
  • Example

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.
  • ValueDefault
  • Example

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
  • ACTIONURL
  • Identifies the Target URL
  • ACTION mailtoxxx
  • Data is Mailed to Target email Address
  • Example

26
Forms Text Fields
  • Text Box TypeText
  • Size15 Maxlength20
  • Size Size of Text Box in Characters
  • Maxlength The Maximum Number of Characters
    Allowed
  • TypePassword
  • Same, Except User Input is Echoed as s
  • Note Password is Still Sent to Server in Plain
    Text
  • Pwd Example
  • Example

27
Forms Multiline Text Fields
  • Multiline Text
  • Cols30 WRAPVirtual
  • Rows, Cols The Size of the Field in Characters
  • Note This Only Controls the Size of the Display
    Box.
  • Scroll Bars Allow More Data.
  • WrapOff
  • No Wrapping. Horizontal Scroll Bar for
    Additional Text.
  • WrapVirtual, Physical
  • Wrap Text Based on Number of Columns
  • WrapVirtual Do Not Send Inserted Carriage
    Returns
  • WrapPhysical Send Inserted Carriage Returns
  • Example

28
Forms CheckBoxes and Radio Buttons
  • Radio Buttons Allow Only One Option to Be
    Selected
  • Checkboxes Allow Multiple Selections
  • CHECKEDPick1

  • 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 CB1A
  • If the User Checks Pick1 and Pick2
  • Sent to Server CB1AB
  • Example

29
Forms List Boxes
  • First Choice
  • Second Choice
  • Size The Number of Rows to Display
  • Access Additional Rows Via Scroll Bar
  • Size1 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
Forms Submit and Reset Buttons
  • Submit
  • submit
  • Reset
  • Sets all Fields to Their Default Values
  • Example

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 ENCTYPEmultipart/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
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
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
  • ACCESSKEYX
  • Tab Order
  • TABINDEX3
  • Negative Number Excludes Field From Tab Order
  • FieldSet
  • Groups Controls Together (Outline Box)
  • Adds Text To Outline Box
  • Example

34
Validating Forms Using JavaScript
  • Example
Write a Comment
User Comments (0)
About PowerShow.com