Introduction to Objects are a natural way of thinking about the - - PowerPoint PPT Presentation

▶
introduction to
SMART_READER_LITE
LIVE PREVIEW

Introduction to Objects are a natural way of thinking about the - - PowerPoint PPT Presentation

Oct 27, 2022 427 likes •919 views

Introduction to Objects are a natural way of thinking about the world and about scripts that manipulate XHTML documents. JavaScript uses objects to perform many tasks and therefore is referred to as an object-based programming language (

slide-1
SLIDE 1

Introduction to

slide-2
SLIDE 2

 Objects are a natural way of thinking about

the world and about scripts that manipulate XHTML documents.

 JavaScript uses objects to perform many

tasks and therefore is referred to as an

  • bject-based programming language (not
  • bject-oriented).

 Objects have attributes and exhibit

behaviors.

slide-3
SLIDE 3

 Array  Boolean  Date  Math  Number  String  RegExp  Global

slide-4
SLIDE 4

 Window  Navigator  Screen  History  Location

slide-5
SLIDE 5

 Window

  • The top-level object; has properties that apply to

the entire window. There is also a window object for each "child window" in a frame document.

 Navigator  Screen  History  Location

slide-6
SLIDE 6

 http://www.w3schools.com/jsref/obj_window

.asp

slide-7
SLIDE 7

 Window  Navigator

  • Has properties for the name and version of the

Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client.

 Screen  History  Location

slide-8
SLIDE 8
slide-9
SLIDE 9

 Window  Navigator  Screen

  • The screen object contains information about the

visitor's screen.

 History  Location

slide-10
SLIDE 10
slide-11
SLIDE 11

 Window  Navigator  Screen  History

  • The history object contains the URLs visited by

the user (within a browser window).

  • The history object is part of the window object

and is accessed through the window.history property.

 Location

slide-12
SLIDE 12
slide-13
SLIDE 13

 Examples:

  • // goes to the URL the user visited three clicks

ago in // the current window

▪ history.go(-3)

  • // causes window2 to go back one item in its

window // (or session) history:

▪ window2.history.back()

slide-14
SLIDE 14

 Window  Navigator  Screen  History  Location

  • The location object contains information about

the current URL.

  • The location object is part of the window object

and is accessed through the window.location property.

slide-15
SLIDE 15
slide-16
SLIDE 16

 Examples:

  • // sets the URL of the current window to the

Netscape home page:

▪ window.location.href=“http://home.netscape.com/”

  • r simply

▪ window.location=“http://home.netscape.com/”

  • // sets the URL of a frame named frame2 to the

Sun home page:

▪ parent.frame2.location.href="http://www.sun.com/"

slide-17
SLIDE 17
slide-18
SLIDE 18

 A piece of text that can be the target of a

hypertext link.

  • If an anchor object is also a link object, the object has

entries in both the anchors and links arrays.

  • Example: Define an anchor for the text "Welcome to

JavaScript".

▪ <A NAME="javascript_intro"><H2>Welcome to

JavaScript</H2></A>

  • Example: If the preceding anchor is in a file called intro.htm,

a link in another file could define a jump to the anchor as follows:

▪ <A HREF="intro.html#javascript_intro">Introduction</A>

slide-19
SLIDE 19

 A pushbutton on an HTML form.  Cannot be customized (can only change its

length)

 Properties

  • name reflects the NAME attribute
  • value reflects the VALUE attribute

 Methods

  • click

 Event handlers

  • onClick
slide-20
SLIDE 20

 A checkbox on an HTML form  A toggle switch that lets the user set a value on or

  • ff

 Properties

  • checked lets you programatically check a checkbox
  • defaultChecked reflects the CHECKED attribute
  • name reflects the NAME attribute
  • value reflects the VALUE attribute
slide-21
SLIDE 21

 Methods: click  Event handlers: onClick  Property of: form  Example:

The following example displays a group of four checkboxes that all appear checked by default.

  • <B>Specify your music preferences (check all that apply):</B>
  • <BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
  • <BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
  • <BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
  • <BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age
slide-22
SLIDE 22

 Example:

FileName: toUpper.htm <SCRIPT> function convertField(field) { if (document.form1.convertUpper.checked) { field.value = field.value.toUpperCase()} } function convertAllFields() { document.form1.lastName.value = document.form1.lastName.value.toUpperCase() document.form1.firstName.value = document.form1.firstName.value.toUpperCase() } </SCRIPT> <FORM NAME="form1"> <B>Last name:</B> <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> <BR><B>First name:</B> <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> <P><INPUT TYPE="checkBox" NAME="convertUpper"

  • nClick="if (this.checked) {convertAllFields()}"> Convert fields to upper case

</FORM>

slide-23
SLIDE 23

 Contains information on the current document

(e.g., title, last modified, color), and provides methods for displaying HTML output to the user.

 To use a document object's properties and methods:

  • 1. document.propertyName
  • 2. document.methodName(parameters)
slide-24
SLIDE 24

 Properties

  • alinkColor reflects the ALINK attribute
  • anchors is an array reflecting all the anchors in a document
  • bgColor reflects the BGCOLOR attribute
  • cookie specifies a cookie
  • fgColor reflects the TEXT attribute
  • forms is an array reflecting all the forms in a document
  • lastModified reflects the date a document was last modified
  • linkColor reflects the LINK attribute
  • links is an array reflecting all the links in a document
  • location reflects the complete URL of a document
  • referrer reflects the URL of the calling document
  • title reflects the contents of the <TITLE> tag
  • vlinkColor reflects the VLINK attribute
slide-25
SLIDE 25

 Methods

  • clear, close, open, write, writeln

 Event handlers

  • None. The onLoad and onUnload event handlers are specified in

the <BODY> tag but are actually event handlers for the window

  • bject.

 Property of

  • Window (or Frame) object

 Examples:

  • document.fgColor = "#ff0000"
  • document.form1.controlname = ...
slide-26
SLIDE 26

 Lets users input text and make choices from form

  • bjects such as checkboxes, radio buttons, and

selection lists.

 Can also be used to post data to a server

slide-27
SLIDE 27

 The forms array

  • 2 ways of referencing forms

▪ by using the forms array ▪ by using the form names

  • form array contains an entry for each form object (<FORM> tag)

in a document in source order.

  • e.g., if a document contains three forms, these forms are

reflected as document.forms[0], document.forms[1], and document.forms[2].

  • To use the forms array:

▪ 1. document.forms[index] ▪ 2. document.forms.length

slide-28
SLIDE 28

 Properties

  • action reflects the ACTION attribute
  • elements is an array reflecting all the elements in a form
  • encoding reflects the ENCTYPE attribute
  • length reflects the number of elements on a form
  • method reflects the METHOD attribute
  • target reflects the TARGET attribute
  • length reflects the number of forms in a document (for forms

array)

 Methods: submit  Event handlers: onSubmit  Property of: document

slide-29
SLIDE 29

 A text object that is suppressed from form display

  • n an HTML form. A hidden object is used for

passing name/value pairs when a form submits.

 Typically used with PHP scripts to pass special data

between the browser and the server

 Value is reset when the document is reloaded

(unlike other form elements)

slide-30
SLIDE 30

 Properties

  • name reflects the NAME attribute
  • value reflects the current value of the hidden object

 Methods

  • None.

 Event handlers

  • None.

 Property of

  • form
slide-31
SLIDE 31

 Image array called document.images

  • created for all images defined by <IMG>
  • each is an Image object
  • use: document.images[0],

document.images[1], etc.

  • can dynamically change the content of graphics

▪ document.images[0].src = “http://xyz.com/1.gif”;

slide-32
SLIDE 32

 A piece of text or an image identified as a hypertext

  • link. When the user clicks the link text, the link

hypertext reference is loaded into its target window.

 Each link object is a location object and has the

same properties as a location object.

 If a link object is also an anchor object, the object

has entries in both the anchors and links arrays.

slide-33
SLIDE 33

 Properties

  • hash specifies an anchor name in the URL
  • host specifies the hostname:port portion of the URL
  • hostname specifies the host and domain name, or IP address, of a

network host

  • href specifies the entire URL
  • pathname specifies the url-path portion of the URL
  • port specifies the communications port that the server uses for

communications

  • protocol specifies the beginning of the URL, including the colon
  • search specifies a query
  • target reflects the TARGET attribute
  • length reflects the number of links in a document (for link array)
slide-34
SLIDE 34

 Methods: None.  Event handlers: onClick, onMouseOver  Property of: document  Examples

  • // creates a hypertext link to an anchor named numbers in the file

DOC3.HTML in the window window2. If window2 does not exist, it is created.

  • <A HREF=doc3.html#numbers TARGET="window2">Numbers</A>
  • // takes the user back x entries in the history list:

▪ <A HREF="javascript:history.go(-1 * x)">Click here</A>

slide-35
SLIDE 35

 A text field on an HTML form that conceals its value

by displaying asterisks (*). When the user enters text into the field, asterisks (*) hide anything entered from view.

 Properties

  • defaultValue reflects the VALUE attribute
  • name reflects the NAME attribute
  • value reflects the current value of the password object's field (If a user

interactively modifies the value in the password field, you cannot evaluate it for security reasons. )

slide-36
SLIDE 36

 Methods

  • focus
  • blur
  • select

 Event handlers

  • None.

 Property of

  • form

 Examples

  • <B>Password:</B> <INPUT TYPE="password" NAME="password"

VALUE="" SIZE=25>

slide-37
SLIDE 37

 A selection list or scrolling list on an HTML form. A

selection list lets the user choose one item from a

  • list. A scrolling list lets the user choose one or more

items from a list.

 Properties

  • The select object has the following properties:

▪ length reflects the number of options in a select object ▪ name reflects the NAME attribute ▪ options reflects the <OPTION> tags ▪ selectedIndex reflects the index of the selected option (or the first selected

  • ption, if multiple options are selected)
slide-38
SLIDE 38
  • The options array has the following properties:

▪ defaultSelectedreflects the SELECTED attribute ▪ indexreflects the index of an option ▪ length reflects the number of options in a select object ▪ namereflects the NAME attribute ▪ selected lets you programatically select an option ▪ selectedIndexreflects the index of the selected option ▪ textreflects the textToDisplay that follows an <OPTION> tag ▪ value reflects the VALUE attribute

slide-39
SLIDE 39

 Methods

  • blur
  • focus

 Event handlers

  • onBlur
  • onChange
  • onFocus

 Property of

  • The select object is a property of form
  • The options array is a property of select
slide-40
SLIDE 40

 JavaScript provides a moderate level of event

detection to pass control to functions attached to built-in event handlers

 e.g.,

  • <INPUT type=“button” VALUE=“button1”
  • nClick=“computeSomething()”>

 Events are triggered in the browser primarily by

user actions such as button click, page load, form submit.

slide-41
SLIDE 41

 The following event handlers are available in JavaScript:

  • onAbort
  • onBlur
  • onChange
  • onClick
  • onDragDrop
  • onError
  • onFocus
  • onKeyDown
  • onKeyPress
  • onKeyUp
  • onLoad

– onMouseDown – onMouseMove – onMouseOut – onMouseOver – onMouseUp – onMove – onReset – onResize – onSelect – onSubmit – onUnload

slide-42
SLIDE 42

 onAbort

  • An abort event occurs when a user aborts the loading of an image

(for example by clicking a link or clicking the Stop button)

 onBlur

  • A blur event occurs when a select, text, or textarea field on a form

loses focus.

 onChange

  • A change event occurs when a select, text, or textarea field loses

focus and its value has been modified.

 onClick

  • A click event occurs when an object on a form is clicked.
slide-43
SLIDE 43

 onDragDrop

  • A drapDrop event occurs when a user drops an object onto the

browser window, such as dropping a file on the browser window

 onError

  • An error event occurs when the loading of a document or image

causes an error

 onFocus

  • A focus event occurs when a field receives input focus by tabbing

with the keyboard or clicking with the mouse.

 onKeyDown, onKeyPress, onKeyUp

  • A keyDown, keyPress, or keyUp event occurs when a user

depresses a key, presses or holds down a key, or releases a key, respectively

slide-44
SLIDE 44

 onLoad

  • A load event occurs when Navigator finishes loading a

window or all frames within a <FRAMESET>.

  • Examples

▪ In the following example, the onLoad event handler displays a

greeting message after a web page is loaded.

▪ <BODY onLoad="window.alert('Welcome to my home page!')">

 onMouseDown, onMouseMove, onMouseOut,

  • nMouseOver, and onMouseUp
  • A MouseDown, MouseMove, MouseOut, MouseOver, or MouseUp

event occurs when a user depresses a mouse button, moves a cursor, moves a cursor out of a link or image map, moves a cursor over a link, releases a mouse button, respectively

slide-45
SLIDE 45

 onMouseOver

  • A mouseOver event occurs once each time the

mouse pointer moves over an object from

  • utside that object.

 Example

<A HREF="http://www.ilstu.edu/"

  • nMouseOver="window.status=‘A Good Place …!';

return true"> Click me</A>

Return true tells the browser not to perform its own event handling routine of displaying the link’s URL in the status bar

slide-46
SLIDE 46

OnResize

  • A Resize event occurs when a user or script resizes a window

<html> <head> <script language="JavaScript"> window.onresize= message; function message() { alert("The window has been resized!"); } </script> </head> <body> Please resize the window. </body> </html>

slide-47
SLIDE 47

Another look at onClick: <body> <form name="myForm"> <input type="button" name="myButton" value="ClickMe!"> </form> <script language="JavaScript"> document.myForm.myButton.onClick=message; functionmessage() { alert('Clickevent occured!'); } </script> </body>

slide-48
SLIDE 48

 onSelect

  • A select event occurs when a user selects some of the text

within a text or textarea field.

 onSubmit

  • A submit event occurs when a user submits a form

 onUnload

  • An unload event occurs when you exit a document.