JavaScript – Lec3
PRESENTED BY: AMAL MOHAMED ELHADY
What is DOM?
• Stands for Document Object Model.
• Defines a standard way to access and manipulate HTML documents.
• Platform independent.
• Language independent.
DOM Tree
JavaScript Object Hierarchy
❑ Every page has the following objects:
o window: the top-level object; has properties that apply to the entire window.
o navigator: has properties related to the name and version of the Navigator being
used.
o document: contains properties based on the content of the document, such as title,
background color, links, and forms.
o location: has properties based on the current URL.
o history: contains properties representing URLs the client has previously requested.
What is BOM?
❑ BOM Stands for Browser Object Model.
❑ BOM covers objects which relate to the browser.
❑ At the top of the BOM hierarchy is window object. Below that comes the
o navigator
o screen
o history
o location
o document objects (in no particular order).
❑ Each object below the window is of equal status, they all relate directly to the
window object.
What is BOM? (Cont.)
❑ Using the BOM, developers can move the window, change text in the status
bar, and perform other actions that do not directly relate to the page content.
❑ For some reason, the Browser Object Model is generally not referred to by its
proper name. More often, it's usually wrapped up with the DOM.
❑ In actuality, the DOM, which relates to all things pertaining to the document,
resides within the BOM.
Window
❑ The top level object in the JavaScript object hierarchy.
❑ The Window object represents a browser window.
❑ Window object has a set of properties & methods.
❑ Object Model Reference:
o window
❑ To reference its properties & methods:
o [window.]property // [Link] == prop
o [window.]method // [Link] == method
Properties:
[Link]()
//Displays an alert dialog.
[Link]()
//Moves back one in the window history.
[Link]()
//Sets focus away from the window.
[Link]()
//Closes the current window.
[Link]()
//Displays a dialog with a message that the user needs to respond to.
[Link]()
//Used to trigger an event.
[Link]()
//Writes a message to the console.
[Link]()
//Searches for a given string in a window.
[Link]()
//Sets focus on the current window.
[Link]()
//Moves the window one document forward in the history.
[Link]()
//Returns the browser to the home page.
[Link](100,100)
//Moves the current window by a specified amount.
[Link](100,100)
//Moves the window to the specified coordinates.
[Link]()
//Opens a new window.
[Link]()
//Opens a new dialog window.
[Link]()
//Opens the Print Dialog to print the current document.
[Link]()
//Returns the text entered by the user in a prompt dialog.
[Link]()
//Resizes the current window by a certain amount.
[Link]()
//Dynamically resizes window.
[Link]()
//Scrolls the window to a particular place in the document.
[Link]()
//Scrolls the document in the window by the given amount.
[Link]()
//Scrolls the document by the given number of lines.
[Link]()
//Scrolls to a particular set of coordinates in the document.
[Link]()
//Changes the cursor for the current window.
[Link]()
//Displays a modal dialog.
[Link]()
//This method stops window loading.
setInterval(expression, interval)
//Evaluates an expression at specified intervals.
clearInterval(interval_Obj_Name)
//Used to clear a time interval set using the above method.
setTimeout()
//Used to execute an expression or function after a time interval (in millisecond).
clearTimeout()
//Used to clear a timeout set using the above method.
Screen
❑ The screen object provides information about the desktop outside the
browser.
❑ This object allows scripts to:
o Detect the browser’s usable area.
o Return information on the display screen's dimensions and color depth.
❑ Object Model reference:
o [window.]screen
Screen
• Provides information about the size of the user’s display and the number of colors
available on it.
• [Link]: returns the width of the visitor's screen in pixels.
• [Link]: returns the height of the visitor's screen in pixels.
• [Link]: returns the width of the visitor's screen, in pixels, minus interface
features like the Windows Taskbar.
• [Link]: returns the height of the visitor's screen, in pixels, minus interface
features like the Windows Taskbar.
• [Link]: returns the number of bits used to display one color.
• [Link]: returns the pixel depth of the screen.
Navigator
• The navigator object represents the browser application.
• This object allows scripts to see:
▪ browser type
▪ browser version
• Object Model reference:
▪ [window.]navigator
• All of its properties are read-only.
Navigator
• [Link]: The full name of the web browser.
• [Link]: string that contains browser vendor and version
information.
• [Link]: A string that identifies the operating system (and possibly
the hardware) on which the browser is running.
• [Link]: Specifies whether the browser is currently connected to the
network.
• [Link](): Return true if the browser can run Java applets.
• [Link](): Return true if the browser can store persistent
cookies.
Location
❑ The Location object is part of a Window object.
❑ The location Object refers to the current URL.
❑ Object Model Reference:
• [window.]location
❑ href is the defult property of the location object.
• var url=[Link];
❑ replace method loads the specified URL over the current history entry.
• [Link](URL)
Location (Cont.)
• [Link]: returns the href (URL) of the current page.
• [Link]: returns the part of the URL from the #
• [Link]: return the query string part starts with ?
• [Link](URL): loads a new document
• [Link](URL): replaces the current document with a new one.
• [Link](true): Force reloading the current page from the server.
History
• The history Object is an Array of URLs.
• The history Object lets you send the user to somewhere in the history list from within a
JavaScript program.
• Object Model reference:
▪ [window.]history
• Properties:
▪ [Link]: returns the number of URLs in the history list of the current browser window
• Methods:
▪ [Link](): same as clicking back in the browser
▪ [Link](): same as clicking forward in the browser
▪ [Link](-2): Go back 2, like clicking the Back button twice
Event object
❑ Event object:
o HTML DOM events allow JavaScript to register different event handlers on elements
in an HTML document.
o Events are normally used in combination with functions, and the function will not be
executed before the event occurs (such as when a user clicks a button).
o When an event occurs an object of Event is created to hold some additional
information about the occurred event.
Event object properties
• Target: The element that fired the event (IE old versions = srcElement).
• type: Type of event.
• timeStamp: Returns the time in milliseconds (A Number, representing the
number of milliseconds since midnight of January 1, 1970) at which the event
was created.
• bubbles: Returns whether or not a specific event is a bubbling event.
• cancelable: Returns whether or not an event can have its default action
prevented.
MouseEvent object properties :
Property Description
screenX Returns the horizontal coordinate of the mouse pointer, relative to the screen, when
the mouse event was triggered
screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when the
mouse event was triggered
clientX Returns the horizontal coordinate of the mouse pointer, relative to the current
window, when the mouse event was triggered
clientY Returns the vertical coordinate of the mouse pointer, relative to the current window,
when the mouse event was triggered
pageX Returns the horizontal coordinate of the mouse pointer, relative to the document,
when the mouse event was triggered
pageY Returns the vertical coordinate of the mouse pointer, relative to the document, when
the mouse event was triggered
offsetX the horizontal coordinate of the mouse pointer relatively to the target element
offsetY the vertical coordinate of the mouse pointer relatively to the target element
Property Description
altKey True if the alt key was also pressed
ctrlKey True if the ctrl key was also pressed
shiftKey True if the shift key was also pressed
detail Returns a number that indicates how many times the mouse was clicked
button Any mouse buttons that are pressed .
Possible values:
0 : Left mouse button
1 : Wheel button or middle button (if present)
2 : Right mouse button
Note: Internet Explorer 8 and earlier has different return values:
1 : Left mouse button
2 : Right mouse button
4 : Wheel button or middle button (if present)
movementX / The X or Y coordinate of the mouse pointer relative to the position of the last
movementY mousemove event
KeyboardEvent object properties:
Property Description
altKey True if the alt key was also pressed
ctrlKey True if the ctrl key was also pressed
shiftKey True if the shift key was also pressed
code Returns String with the code value of the key represented by the event.
key Returns String representing the key value of the key represented by the event.
which Returns a Number representing a system dependent numeric code identifying the
value of the pressed key; this is usually the same as keyCode.
(For IE 8 and ealier use keyCode property instead)
Both the which and keyCode properties are deprecated and provided for compatibility
only.
The latest version of the DOM Events Specification recommend using the key property
instead.
Event object methods
Property Description
preventDefault() Cancels the event if it is cancelable, meaning that
the default action that belongs to the event will not
occur.
For example, this can be useful when:
• Clicking on a "Submit" button, prevent it from
submitting a form
• Clicking on a link, prevent the link from following
the URL
Note: Not all events are cancelable. Use the
cancelable property to find out if an event is
cancelable.
stopPropagation() Prevents further propagation of the current event.
Event - preventDefault
❑ Event handlers return value:
<a href=“#” onclick=“myFunc();return false”> click me </a>
This will make the browser ignore the action of href
❑ Another way that can also make the browser ignore the action of href is:
<a href="javascript: void(0)" onclick="alert('hi')" >click me</a>
❑ Or use preventDefault() method
<a href=“#” onclick=“myFunc();[Link]()”> click me </a>
Event Bubbling
• DOM elements can be nested inside each other. And somehow, the handler of the
parent works even if you click on it’s child.
• That’s because an eventbubbles from the nested tag up and triggers the parent.
Event Bubbling (Cont.)
❑ Cancel Event Bubbling:
❑ <input type="text" onclick="handlerFun(Event)"/>
Event handling
❑ Binding Events :
o Binding Event Handlers to Elements can be:
• Event handlers as tag attribute
• Event handlers as object property
Event handling (Cont.)
1. Event handlers as tag attribute:
Event handling (Cont.)
2. Event handlers as object property:
addEventListener() method
❑ The addEventListener() method attaches an event handler to the specified
element.
❑ The addEventListener() method attaches an event handler to an element
without overwriting existing event handlers.
❑ The addEventListener() method makes it easier to control how the event
reacts to bubbling.
❑ When using the addEventListener() method, the JavaScript is separated from
the HTML markup, for better readability and allows you to add event listeners
even when you do not control the HTML markup.
addEventListener() method (cont.)
❑ Syntax: [Link](event, function, [useCapture]);
❑ The first parameter is the type of the event (like "click" or "mousedown").
❑ The second parameter is the function we want to call when the event occurs.
❑ The third parameter (optional parameter): is a boolean value specifying
whether to use event bubbling or event capturing. Possible values:
• true - The event handler is executed in the capturing phase
• false- Default, the event handler is executed in the bubbling phase
addEventListener() method (cont.)
❑ You can easily remove an event listener by using the removeEventListener()
method.
o [Link]("mousemove", myFunction);
❑ Note: The addEventListener() and removeEventListener() methods are not
supported in IE 8 and earlier versions and Opera 6.0 and earlier versions.
However, for these specific browser versions, you can use the attachEvent()
method to attach an event handlers to the element, and the detachEvent()
method to remove it.
o [Link](event, function);
o [Link](event, function);
