Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

Cheat Sheet

HTML5 Programming with JavaScript For Dummies Cheat Sheet

From HTML5 Programming with JavaScript For Dummies

By John Paul Mueller

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.