slide môn học HDJ bài 9 the browser objects in javascript
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (421.32 KB, 25 trang )
The Browser Objects in JavaScript
Session 9
Objectives
Common events in JavaScript
Browser Objects – Attributes and Methods
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 2 of 21
Event Object - Concept
Events are a result of an action done by the user
An event may be user-generated or generated by the
system
Each event has an associated event object. The event
object provides information on:
the type of event
the location of the cursor at the time of the event
Web Page Programming with
The event object is used as a part
of an event &
handler
HTML,DHTML
JavaScript/Session 9/ 3 of 21
Event – Life Cycle
The life cycle of an event generally consist of
following steps:
The user action or condition associated with the
event occurs
The event object is instantly updated to reflect
the conditions of the event
The event fires
The associated event handler is called
The event handler carries out its actions and
Web Page Programming with
returns
HTML,DHTML &
JavaScript/Session 9/ 4 of 21
JavaScript Event
Common events supported by JavaScript includes:
•
•
•
•
•
onClick
onChange
onFocus
onBlur
onMouseOver
•
•
•
•
•
onMouseOut
onLoad
onSubmit
onMouseDown
onMouseUp
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 5 of 21
Handling the Events
This segment of JavaScript code that will be executed in
response to the event is called an event handler.
NAME="docode"
onClick="DoOnClick();">
Event Handler are categorized as:
Event handlers for HTML tags
<TAG eventHandler="JavaScript Code">
Event Handlers as Properties
Web Page
object.eventhandler = function;
Programming with
HTML,DHTML &
JavaScript/Session 9/ 6 of 21
onClick - Example
The onClick event is generated whenever the user clicks
the mouse button on certain form elements or on a
hypertext link.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form)
{
if(confirm("Are you sure?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
SIZE=15 ><BR><BR>
VALUE="Calculate"
ONCLICK="compute(this.form)">
<BR><BR><BR>
Result:
SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 7 of 21
onClick - Output
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 8 of 21
onChange - Example
The onChange event occurs whenever a form element changes.
This can happen whenever the contents of a text control
changes, or when a selection in a selection list changes.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
onChange="checkNum(this.value)">
</FORM>
</BODY>
</HTML>
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 9 of 21
onChange - Output
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 10 of 21
onFocus/onBlur/onMouseOver/
onMouseOut
onFocus
onBlur
Blur is the opposite of focus. When the user leaves a form element,
the onBlur event is activated.
onMouseOver
The onFocus event is sent whenever a form element becomes the
current form element. Only when an element has the focus can it
accept input from the user.
The onMouseOver event is generated whenever the mouse cursor is
moved over an element.
onMouseOut
Web Page Programming with
The onMouseOut event is generated whenever the mouse cursor
HTML,DHTML &
moves off of an element.
JavaScript/Session 9/ 11 of 21
onMouseOut -Example
Example:
<html> <head>
<script language = "javascript">
var num =0
function showLink(num)
{ if (num==1)
{
document.forms[0].elements[0].value=
"You have selected Aptech";
}
if (num==2)
{ document.forms[0].elements[0].value =
"You have selected Asset";
}
if (num==3)
{
document.forms[0].elements[0].value =
"You have selected Arena";
} } </script>
</head> <body>
<form>
<input type=text size=60 >
</form>
onMouseOver="showLink(1)"document.bgcolor
= “ green">Aptech</a>
onMouseOver="showLink(2)">Asset</a>
onMouseOver="showLink(3)">Arena</a>
</body>
</html>
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 12 of 21
onMouseOut -Output
On moving the mouse over Aptech, the following output
is displayed.
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 13 of 21
onLoad - onSubmit
onMouseDown - onMouseUp
OnLoad
onSubmit
The onSubmit event is generated whenever the user submits a form
(using the "Submit" button). The event occurs before the form is
actually submitted.
onMouseDown
The onLoad event is sent to the document body object when the
document has finished loading.
The event is activated when a MouseDown event occurs. That is,
when the user depresses a mouse button.
onMouseUp
Web Page Programming with
The event is activated when a MouseUp event occurs. That is, when
the user releases a mouse button. HTML,DHTML &
JavaScript/Session 9/ 14 of 21
onResize - Example
onResize
This event is activated when a resize event occurs. That is,
when a user or script resizes a window or frame.
<html>
Output:
<head>
<script language="JavaScript">
window.onresize= notify;
function notify()
{
alert("Window resized!");
}
</script>
</head>
<body> Please resize the
window.
</body> </html>
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 15 of 21
Browser Objects
A browser is an application that is used to display the contents of an
HTML document
Browsers also expose some objects that can be accessed and used in
script
IE Browser Objects
Web Page Programming with
HTML,DHTML &
Netscape Browser Objects
JavaScript/Session 9/ 16 of 21
DOM
One important feature of JavaScript is that it is Object
based language.
Helps the user to develop program, which are modular and
reusable.
An object can be defined as a single entity, consisting of
Properties and Methods.
Programming with
A property is a value that belongs Web
to anPage
object.
HTML,DHTML &
Eg: Document.bgcolor
JavaScript/Session 9/ 17 of 21
Window Object
It represents the browser’s window and can be used to
retrieve information about the state of the window
Properties:
Methods:
• document
• alert(str)
• event
• blur()
• history
• close()
• location
• focus()
• name
• navigate()
• navigator
• screen
• status
Web Page Programming
• open(“URL”,“Name”,“Feature”)
with
HTML,DHTML &
JavaScript/Session 9/ 18 of 21
Window Object
Attribute
Value
Description (IE)
toolbar
Boolean
Back, Forward, other buttons in that row, and Address
field, displaying the current URL
location
Boolean
N/A (always defaults to the value of toolbar)
status
Boolean
Status bar at the bottom of the window
menubar
Boolean
Menu bar at the top of the window (File, Edit, View, Go,
etc.)
scrollbars
Boolean
N/A (always defaults to “yes”)
resizable
Boolean
N/A (always defaults to “yes”)
width
Pixels
Window’s width in pixels
height
Pixels
Web Page Programming with
HTML,DHTML &
Window’s height in pixels
JavaScript/Session 9/ 19 of 21
<HTML>
<HEAD>
<TITLE>A custom "alert"</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function pop(height, width, content)
{
win = window.open("", "", "height=" + height + ",width=" + width);
if(win != null) {
win.document.open();
win.document.write("<HTML><HEAD><TITLE>JavaScript Alert </TITLE> </HEAD> <BODY>");
win.document.write(content);
win.document.write("</BODY></HTML>");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
onClick="pop(75, 250,
'You can use such windows instead of alert dialog boxes')">
</FORM>
</BODY>
Document Object
It represents the HTML document in a given browser window
and is used to retrieve information about the document
Properties:
Methods:
• alinkColor
• clear()
• bgColor
• close()
• Body
• open()
• fgColor
• write(str)
• linkColor
• writeln(str)
• location
• Title
• URL
• vlinkColor
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 21 of 21
History Object
This object provides a list of the URL's most recently
visited by the client
Example, history's "back()" method cause the
window to again display the immediately previous
document: history.back();
Methods:
• back()
• forward()
• go(int)
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 22 of 21
Location Object
This object maintains information about the current URL. It
provides a method that causes the window's current URL to be
reloaded.
Properties:
Methods:
• hash
• assign(URL)
• host
• reload(boolean)
• hostname
• replace(URL)
• href
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 23 of 21
Navigator Object
The navigator object does not belong to
JavaScript’s bulk of browser objects. It is an
independent object, just like the Math object.
This object combines various methods and
properties providing information related to the
user’s software.
For example, you can use this object to detect the
user’s browser, platform, plug-ins, and many other
Web Page Programming with
essential pieces of information.
HTML,DHTML &
JavaScript/Session 9/ 24 of 21
Navigator Object
The navigator object features four properties on
all versions of JavaScript:
appName
appVersion
appCodeName
userAgent
Web Page Programming with
HTML,DHTML &
JavaScript/Session 9/ 25 of 21
