Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Cheat Sheet

HTML5 Programming with JavaScript For Dummies

JavaScript uses objects extensively. Knowing which objects to use and when are important parts of working with JavaScript. By knowing the Browser, Core Document Object Model (DOM), and HTML DOM objects, you can build a considerable part of any standard application (and many simple applications). These are the most commonly used JavaScript objects, so keep them at your fingertips.

How to Use JavaScript Browser Objects to Manage the Application Environment

JavaScript browser objects make it possible to discover and change the application environment. By knowing where the user has gone, where the user is now, and where you can take the user, you can effectively control the application flow. Of course, it’s important to know what size screen the user has so that you can present data in a manner that reflects the physicality of the user’s device.

The following table details some of the more interesting JavaScript browser options.

Object Description
history Provides the means for examining and moving between URLs stored in the browser’s history. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/obj_history.asp.
location Contains information about the current URL. This object also provides the means to perform tasks such as loading a new page or reloading the current page. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/obj_location.asp.
navigator Contains information about the current browser. For example, you can determine the browser type and whether the browser has cookies enabled. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/obj_navigator.asp.
screen Specifies the physical characteristics of the device used to display the page, including page height, width, and color depth. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/obj_screen.asp.
window Provides access to the browser’s window so that you can perform tasks such as displaying message boxes. When working with pages that contain frames, the browser creates a window for the entire HTML document and another window for each frame. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/obj_window.asp.

How to Use Core DOM Objects to Manage Application Content

The goal of any JavaScript application is to manage content. This means adding, deleting, and editing the HTML document that holds the various elements that structure and support the content. These objects provide access to all the document details with regard to content.

Object Description
Attr Provides access to individual attributes within the document. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_attr.asp.
document Provides access to the entire document. You can use this object to access any part of the document. In addition, this object lets you display information directly on the page and perform other tasks related to the user interface. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_core_document.asp.
Element Contains an individual document element of any type supported as XML. This object provides access to attributes through the Attr object and properties through the Node object. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_element.asp.
Events Supports access to existing events and creation of new ones. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_event.asp.
HTMLElement Contains an individual HTML document element, such as a paragraph or a control. Use the Element and Node objects to gain access to element attributes and properties. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_all.asp.
Node Defines the particulars of any given node, which can include the document as a whole, an element within the document, and an attribute provided as part of an element, text, and comments. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_node.asp.
NodeFilter Specifies which nodes appear as part of a NodeIterator used to traverse the list of nodes within a document. You can see a complete list of the methods and properties associated with this object at https://developer.mozilla.org/en-US/docs/DOM/NodeFilter.
NodeIterator Provides a method of obtaining a list of nodes within a document. Traversing the list of nodes can help you locate specific nodes and interact with them. For example, you might find all of the <input> tag nodes and add a particular attribute to them. You can see a complete list of the methods and properties associated with this object at https://developer.mozilla.org/en-US/docs/DOM/NodeIterator.
NodeList Contains an ordered list of all the nodes within the document or in a particular area of the document. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_nodelist.asp.
NamedNodeMap Contains an unordered list of all the nodes within the document or in a particular area of the document. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_namednodemap.asp.

How to Use HTML DOM Objects to Manage Structure

Organizing the information the user sees onscreen into a cohesive presentation using JavaScript is important. The user should see the HTML document structure, but the structure should support the content — it shouldn't call attention to itself. When working with a page, structure includes everything from tables to controls used to interact with and manage the content that the user is most interested in seeing. The following HTML DOM objects help you perform this task when working with JavaScript.

Object Description
Document Provides access to all the elements of an entire page. Every page loaded into a browser becomes a Document object that you access using the document keyword. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_document.asp.
Event Allows interaction with the events and event handlers associated with a page. Each element type has specific events associated with it, such as the click event associated with the Button object. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_event.asp.
HTMLElement Provides a base class from which all HTML elements are derived. This base class defines the properties and methods that all HTML elements provide. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_all.asp.
Anchor Represents an HTML hyperlink. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_anchor.asp.
Area Defines the area within an HTML image map that's used to create clickable regions for a graphic element. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_area.asp.
Base Specifies the default address or a default target for all links on a page. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_base.asp.
Body Represents the <body> tag portion of a page, including all the elements contained within that tag. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_body.asp.
Button Represents a button on a page. This object is specifically associated with the <button> tag, rather than the <input> tag form of button. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_pushbutton.asp.
Form Represents a form and includes all the elements within that form. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_form.asp.
Frame and IFrame Represents a frame (the <frame> tag) or an inline frame (the <iframe> tag) and all the elements within that tag. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_frame.asp.
Frameset Provides access to a frameset that contains two or more frames. This object specifies only the number of rows and columns used to hold the associated frames. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_frameset.asp.
Image Represents an embedded image. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_image.asp.
Input Button Represents an <input> tag of type button used for building a form. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_button.asp.
Input Checkbox Represents an <input> tag of type check box used for building a form. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_checkbox.asp.
Input File Represents an <input> tag of type file upload used for building a form. When the user clicks the button, the browser presents a browse dialog box used to locate the file. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_fileupload.asp.
Input Hidden Represents an <input> tag of type hidden. A hidden element is used to send data to the server but is invisible to the end user. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_hidden.asp.
Input Password Represents an <input> tag of type text used for building a form. This particular form of text control displays asterisks instead of the characters the user has typed to keep passwords and other secret information hidden. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_password.asp.
Input Radio Represents an <input> tag of type radio button used for building a form. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_radio.asp.
Input Reset Represents an <input> tag of type button used for building a form. This button type is used to reset the form to its original state. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_reset.asp.
Input Submit Represents an <input> tag of type button used for building a form. This button type is used to send data to the server. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_submit.asp.
Input Text Represents an <input> tag of type text used for building a form. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_text.asp.
Link Creates an HTML link on the page. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_link.asp.
Meta Defines meta data used to describe page content, automatically refresh content, or perform other tasks. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_meta.asp.
Object Create a generic object used to hold non-text data such as pictures, controls, and audio. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_object.asp.
Option Represents a drop-down list where the user can choose a single entry. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_option.asp.
Select Represents a drop-down list where the user can choose one or more entries. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_select.asp.
Style Specifies the appearance of other elements on the page. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_style.asp.
Table Creates a table on the page and contains both row and cell elements used to hold content. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_table.asp.
td and th Represents a data cell within a table. The <td> tag is used for general data items, and the <th> tag defines headings. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_tabledata.asp.
tr Represents a row of data cells within a table. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_tablerow.asp.
Textarea Represents a multi-row text element on the page. You can see a complete list of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_textarea.asp.
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.