paraphrasing
amaal
Lecture2JavascriptObject.pptx
JavaScript: Window, Document & Form Objects
Part 2
Introduction
JavaScript is an object-oriented language.
An object is a set of variables, functions, etc., that are in some way related. They are grouped together and given a name
Internet browsers contain many objects.
The hierarchy of objects is known as the Document Object Model (DOM).
2
Introduction
Objects may have:
Properties: A variable (numeric, string or Boolean) associated with an object. Most properties can be changed by the user.
Example: The properties of all HTML elements
Methods: Functions associated with an object. Can be called by the user access all HTML elements
Example: the alert() method
Events: Notification that a particular event has occurred. Can be used by the programmer to trigger responses.
Example: the onClick() event.
3
DOM Example
4
In the DOM, all HTML elements are defined as objects.
Example:
The following example changes the content (the innerHTML) of the <p> element with id="demo":
In the example above, getElementById is a method, while innerHTML is a property.
5
Example Cont.
The getElementById Method: The most common way to access an HTML element is to use the id of the element.
The innerHTML Property: The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element, including <html> and <body>.
6
Finding HTML Elements - The Document Object
7
| Method | Description | Example |
| document.getElementById(id) | Find an element by element id | Example |
| document.getElementsByTagName(name) | Find elements by tag name | Example |
| document.getElementsByClassName(name) | Find elements by class name | Example |
More advance Example click here
Changing HTML Elements - The Document Object
| Property | Description |
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTML element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
8
The Window Object
Window is the fundamental object in the browser. It represents the browser window in which the document appears
Its properties include:
status: The contents of the status bar (at the bottom of the browser window). For example: window.status = "Hi, there!";
location:The location and URL of the document currently loaded into the window (as displayed in the location bar). For example: alert(window.location);
9
The Window Object
Window methods include:
alert(): Displays an 'alert' dialog box, containing text entered by the page designer, and an 'OK' button. For example: alert("Hi, there!");
confirm(): Displays a 'confirm' dialog box, containing text entered by the user, an 'OK' button, and a 'Cancel' button. Returns true or false. For example:
var response = confirm("Delete File?");
alert(response);
prompt(): Displays a message, a box into which the user can type text, an 'OK' button, and a 'Cancel' button. Returns a text string. Example:
var fileName = prompt("Select File", "file.txt");
alert(fileName);
10
The Window Object
Window events include:
onLoad() : Usually placed within the <body> tag, for example:
<body onLoad="displayWelcome()">
would cause the function displayWelcome() to execute automatically every time the document is loaded or refreshed.
onUnload(): Usually placed within the <body> tag, for example:
<body onUnload="displayFarewell()">
would cause the function displayFarewell() to execute automatically every time the document is closed or refreshed.
11
The Document Object
The Document object represents the HTML document displayed in a browser window. It has properties, methods and events that allow the programmer to change the way the document is displayed in response to user actions or other events.
12
