ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
JavaScript Tutorial - Index
JavaScript Tutorial - Introduction to JavaScript
JavaScript Tutorial - Basic JavaScript Concepts
JavaScript Tutorial - Working with Operators and Variables
JavaScript Tutorial - How to work with Loops and Functions?
JavaScript Tutorial - How to work with Forms and Events?
JavaScript Tutorial - How to work with Objects?
JavaScript Tutorial - How to work with Browsers and Cookies?
JavaScript Tutorial - More about Objects
JavaScript Tutorial - How to validate Forms with JavaScript?
JavaScript Tutorial - Advanced Techniques in JavaScript

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > JavaScript Tutorial > How to work with Objects?

JavaScript Tutorial - How to work with Objects?

Page 1 of 4
In this chapter you will learn :
  • What is Document Object Model.
  • What are JavaScript objects and how they are used.
  • The object hierarchy followed in DOM
  • Creating objects and accessing object's properties, events and methods.
  • Various in-built objects.



When an HTML page is rendered in a browser; the browser brings together all the elements (objects) contained in the HTML page, downloaded from the web server, in its memory. It is important that the browser continues to identify individual HTML objects even after they are rendered in the browser window, if you want to create a user-friendly web page. With the identification of objects, the browser is allowed to access the properties of these objects using the built-in methods of the object. Once the properties of an object are accessible then the utility of the object can be controlled.
           Once the page has been rendered in the browser, JavaScript enabled browsers are capable of identifying objects in an HTML page, because such browsers recognizes and uses the Document Object Model ( DOM ). Using the Document Object Model (DOM), JavaScript enabled browsers recognize the  objects that have to be dealt with while rendering an HTML based web page.
           The HTML objects, also known as the collection of web page elements, belong to the DOM. These objects have a descending relationship with each other. The foremost object in the DOM is the 'Navigator' (i.e. the Browser) itself (for example, Netscape, Internet explorer, Mozilla etc). The next level in the DOM is the browser's 'Window' or frame. The next object in the DOM is the 'Document' displayed in the browser's window. If the browser's window, next displays HTML form, then the next level in the DOM is the 'Form'.
          The DOM hierarchy continues downward to surround individual elements on a 'Form', such as Text boxes, Text area, Labels, Radio buttons, Check boxes, Push buttons and so on, which belong to the form. The Dom recognized by JavaScript is described below :

             Thus, with JavaScript enabled browser, most of the web page objects  accessible except few of the elements which are not part of the DOM. For example, HTML tags such as <HEAD></HEAD>, <BODY></BODY>,  Presentation styles, headings, body text, H1 to H6 etc are not part of the DOM hence not recognized by JavaScript.
                                                                                                                                      However, when  JavaScript assisted Style Sheets ( JSSS ) are included a web page, JavaScript recognizes the presentation styles, headings, body text, H1 to H6 and so on. JSSS is usually included between <HEAD></HEAD> tags in a web page. Objects  added to the DOM by the use of JSSS are :                   

As JavaScript understands the DOM and can extend the DOM with the use of JSSS in a web page JavaScript understands 'Objects'. So, What are objects ? An object is an aggregate data type, that is made up of a collection of data elements. An object provides for the storage of multiple data values in a single unit. Each value is assigned a name which may then be used to reference it. All objects have :

Properties have values, belonging to objects.

Methods are ways of manipulating and accessing objects.

Events are a result of an action done by the user. To react to an event, it requires JavaScript code to be connected to JavaScript event handlers.
                                               HTML objects have a number of properties that determine the behavior of that object. Properties determine the state of an object. An object's properties can be referenced as :


For example, if the document object has a property called bgcolor then it can be referred as document.bgcolor. Both object name and property name are case sensitive. An object's property is set dynamically, when building interactive web pages, i.e., value of the property is set only when the object is being used. Thus program code can control the state of the object at run time. Methods of an object are used to set or get a value of an object's property. All objects have methods associated with them. An object's methods can be referenced as :


For example, document.write( ) is a method for accessing the object 'document'. JavaScript also allows you to access object's built-in methods.
The JavaScript objects are:

       Object Name                                                           Its use
       Navigator To access information about the browser and its version that is currently executing the script.
       Window It is a predefined object and does not require the prefix 'window'. It allows you to access a browser 'window' or a frame within a window.
       Document To access the document currently loaded in a window. It has properties that relate to the current HTML document, such as title, name of a form, links, background color etc.
       Location It represents a URL based on the current document location. It can be used to create a URL object, access parts of a URL, or modify an existing URL.
       History To maintain a history of the URLs previously accessed within a window.





Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.