Introduction to JavaScript Objects & the DOM

Topics Covered in This JavaScript & jQuery Tutorial:

Introduction to Objects, the Global Object, Accessing & Manipulating Objects

Exercise Preview

Exercise Overview

JavaScript is fundamentally an object-oriented language where nearly every element you'll encounter is an object. Understanding this concept is crucial for modern web development success. An object is essentially a container that holds related data and functionality through properties—each property consists of a name (key) paired with a value, forming what developers call key-value pairs. When an object's property contains a function, we refer to it as a method.

Objects serve as powerful data structures that can represent complex, real-world entities with multiple characteristics. Consider a car object that might include properties like doors, color, seats, engine type, and methods for starting or stopping. This abstraction makes JavaScript incredibly flexible for modeling everything from user interfaces to business logic.

In this hands-on exercise, you'll master the fundamentals of JavaScript objects through practical implementation. You'll create custom objects from scratch, explore how objects integrate within HTML documents, and discover techniques for dynamic object manipulation—skills that form the foundation of modern JavaScript development.

Getting Started

Let's establish your development environment and access the necessary files for this exercise.

1. Launch your code editor if it isn't already running.
2. Close any open files to start with a clean workspace.
3. Open a new file using Cmd–O (Mac) or CTRL–O (Windows).
4. Navigate to your Desktop, then into the Class Files folder, followed by yourname-JavaScript jQuery Class folder, and finally the Objects directory.

5. Double–click js-objects.html to open it in your editor.

   You'll see a foundational HTML page featuring basic styling and an h1 heading element with the ID main-heading. This simple structure provides the perfect canvas for our object manipulation exercises.

6. Preview js-objects.html in Chrome browser. (Chrome's DevTools will be essential for our debugging and testing process.)

   The page displays minimal content—just a heading against a gray background. This intentionally sparse design allows us to focus on the JavaScript concepts while we build both custom objects and explore browser-native objects.

7. Keep the Chrome tab open for easy switching as we'll frequently test our code changes in real-time.

Introduction to Objects

Now we'll create your first JavaScript object and explore its structure through hands-on coding.

1. Return to your code editor with the HTML file open.

2. Add the following script tags at line 19, just before the closing body tag:

   <h1 id="main-heading">Introduction to JavaScript Objects</h1>
      <script>
   
      </script>
   </body>

3. Create your first object by declaring a variable to store it:

   <script>
      var myObject = {};
   </script>

   NOTE: myObject serves as our object identifier—you can choose any descriptive name that doesn't begin with a number. The curly braces {} represent JavaScript's object literal syntax, the most common way to create objects in modern development.

4. Add your first property inside the object:

   var myObject = {
      name: 'Bob'
   };

   NOTE: Our myObject now contains a name property with the string value 'Bob'. Property names should follow JavaScript naming conventions (starting with lowercase letters), while values can be any valid JavaScript data type—strings, numbers, booleans, arrays, functions, or even other objects. In key-value terminology, name represents the key and 'Bob' represents the value. This pattern forms the building blocks of JavaScript's data modeling capabilities.

5. Save your file to preserve the changes.
6. Switch to Chrome and reload the page to load your updated JavaScript.
7. Access Chrome's Console using Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows).

8. Test your object by typing myObject; in the Console and pressing Return (Mac) or Enter (Windows).

   The Console should display: Object {name: "Bob"}, confirming your object was created successfully.

9. Access the specific property using dot notation:

   myObject.name;

10. Press Return (Mac) or Enter (Windows). Excellent! The Console returns just the property value: "Bob". This dot notation is fundamental to object property access in JavaScript.
11. Return to your code editor to expand the object's capabilities.

12. Add a numeric property, ensuring you include the comma separator between properties:

    <h1 id="main-heading">Introduction to JavaScript Objects</h1>
    <script>
       var myObject = {
          name: 'Bob', 
          age: 23
       };
    </script>

    NOTE: While properties can exist on a single line, separating them improves readability and maintainability—crucial practices in professional development environments.

13. Include a Boolean property to demonstrate JavaScript's type flexibility:

    <script>
       var myObject = {
          name: 'Bob', 
          age: 23, 
          alive: true
       };
    </script>

    NOTE: Boolean values in JavaScript are limited to true or false (lowercase, no quotes). These are essential for conditional logic and state management in applications.

14. Save the file to apply your changes.
15. Reload the Chrome page to refresh the JavaScript environment.
16. Ensure the Console remains open, or reopen it using Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows).

17. Examine the complete object by typing myObject; and pressing Return (Mac) or Enter (Windows).

    You should see all three properties displayed: name, age, and alive with their respective values.

18. Test specific property access with myObject.alive; and press Return (Mac) or Enter (Windows).

    The Console should return true, confirming our Boolean property works correctly.

19. Demonstrate dynamic property addition by typing this directly in the Console:

    myObject.hairColor = 'brown';

    NOTE: Console-based modifications are temporary and perfect for testing—they'll disappear when you reload the page. For permanent changes, always modify your source code files.

20. Execute the command by pressing Return (Mac) or Enter (Windows).

    The Console confirms the assignment by displaying: "brown".

21. Verify the new property exists by typing myObject.hairColor; and pressing Return (Mac) or Enter (Windows).
22. Display the complete updated object using myObject; followed by Return (Mac) or Enter (Windows) to confirm the hairColor property was successfully added.

23. Update an existing property value to demonstrate object mutability:

    myObject.age = 24;

    Press Return (Mac) or Enter (Windows) to execute.

24. Confirm the age update by typing myObject; and pressing Return (Mac) or Enter (Windows). The age should now display as 24.

    NOTE: To clear the Console output without losing your temporary variables, use Cmd–K (Mac) or CTRL–L (Windows). This maintains your current JavaScript session while providing a clean workspace.

The Global Object

Understanding the global object is crucial for grasping how JavaScript operates within the browser environment. Every variable and function you create becomes part of this global scope, which in browsers is represented by the window object.

The global object (known as window in browsers) represents the outermost scope of your JavaScript execution environment. Think of it as the top-level container that holds all other objects, variables, and functions. This concept is fundamental to understanding variable scope, object hierarchy, and how different parts of your application communicate.

1. Explore the global object structure by typing console.dir(window); in the Console and pressing Return (Mac) or Enter (Windows).
2. Click the arrow beside Window to expand and reveal its contents.
3. Scroll past the uppercase properties (which represent native browser APIs) to find the lowercase properties where your custom variables reside. Look for myObject in this section.

4. When you locate myObject, click its arrow to expand and examine the properties you defined.

   This exploration reveals JavaScript's object hierarchy in action. Every custom variable becomes a property of the global window object, and each object can contain nested objects with their own properties and methods. This nested structure is how JavaScript organizes and provides access to all browser functionality, from DOM manipulation to network requests.

   Your class files include a visual diagram that illustrates these object relationships more clearly.

5. Keep Chrome open with the Console active, then navigate to your Desktop.

6. Access the reference diagram: Desktop > Class Files > yourname-JavaScript jQuery Class > Objects and open dom.pdf.

   This diagram presents a simplified but essential view of the window object structure. At the top level sits the window/global object—literally representing your browser window and serving as the root of all JavaScript activity. Within this container, notice the document object, which houses all HTML elements and serves as your primary interface for DOM manipulation.

7. Observe how the location object appears alongside the document, providing access to URL information and navigation capabilities.
8. Keep dom.pdf accessible for reference as you continue exploring these concepts.
9. Return to Chrome with the Console ready for testing.

10. If the Console closed or you need to refresh the window object view:

    • Type console.dir(window); and press Return (Mac) or Enter (Windows).
    • Click the arrow beside Window to expand the object.
11. Locate the location: Location property among the lowercase entries.
12. Expand location: Location by clicking its arrow.
13. Find the href property, which contains the current page's URL. For local files, this shows your file system path; for live websites, it displays the complete HTTP URL.

14. Access this property directly by typing in the Console:

    window.location.href;

15. Press Return (Mac) or Enter (Windows) to see the current page location.

    You should see the full file path to your HTML document.

16. Demonstrate the global object's implicit nature. Since window is the global scope, you can omit it from property access:

    Type location.href; in the Console.

17. Press Return (Mac) or Enter (Windows).

18. Notice identical results despite omitting window. This implicit behavior applies to all global properties and methods.

    NOTE: Many familiar JavaScript functions like alert(), setTimeout(), and console.log() are actually window object methods. Both window.alert() and alert() work identically because the window object is implied in global scope.

19. Reference your dom.pdf again to review additional window object components:

    • The history object manages browser navigation history, enabling back/forward functionality.
    • The console object provides debugging and logging capabilities you've been using throughout this exercise.

HTML Elements Are Objects Too

One of JavaScript's most powerful features is treating HTML elements as manipulable objects. This object-oriented approach to the DOM (Document Object Model) enables dynamic web applications where content, styling, and behavior can change in response to user interactions or application logic.

Every HTML element becomes a JavaScript object with properties you can read and modify. This transformation from static markup to dynamic objects is what enables modern web interactivity—from simple hover effects to complex single-page applications.

1. Begin by examining the HTML structure. In Chrome's DevTools, click the Elements tab.
2. Expand the <body> element to reveal the <h1> tag with its main-heading ID.
3. Return to the Console tab to begin object manipulation.

4. Create a variable to store a reference to the heading element for easier repeated access:

   var heading = document.getElementById('main-heading');

   This practice of storing element references improves performance and code readability, especially when manipulating elements multiple times.

5. Execute the command by pressing Return (Mac) or Enter (Windows).
6. Type heading; and press Return (Mac) or Enter (Windows) to verify the element was captured.
7. The Console displays the HTML element, confirming successful selection.

8. Explore the element's object properties using:

   console.dir(heading);

   Press Return (Mac) or Enter (Windows) to execute.

9. Expand the h1#main-heading object to reveal its extensive property collection.
10. Locate and expand the style: CSSStyleDeclaration property, which contains all CSS styling options.

11. The style object houses numerous properties for visual manipulation. Test dynamic styling by changing the text color:

    heading.style.color = 'green';

    NOTE: You can use any valid CSS color value—names, hexadecimal codes (#00FF00), RGB values (rgb(0,255,0)), or HSL values.

12. Press Return (Mac) or Enter (Windows) and observe the heading immediately turn green, demonstrating real-time DOM manipulation.

13. Now explore content manipulation properties. Re-examine the heading object structure:

    console.dir(heading);

    Press Return (Mac) or Enter (Windows).

14. Expand h1#main-heading to access content-related properties.
15. Scroll to locate innerHTML and examine its current value. Click (…) if present to reveal full content.

16. Continue scrolling to find textContent and compare its value with innerHTML.

    Currently, both properties contain identical content since no HTML tags exist within the heading. However, innerHTML preserves any HTML markup within the element, while textContent returns only the plain text content. For content updates, choose innerHTML when you need to include HTML tags, and textContent for plain text changes.

    NOTE: You may notice innerText nearby. While supported by most modern browsers, innerText originated as a proprietary Internet Explorer feature and differs from textContent in how it handles hidden elements and whitespace. For consistent cross-browser behavior, prefer textContent for text manipulation.

17. Test text content modification:

    heading.textContent = 'Hello';

18. Press Return (Mac) or Enter (Windows) to see the heading text change instantly.

19. Demonstrate HTML content insertion using innerHTML:

    heading.innerHTML = 'Hello, <em>world!</em>';

20. Press Return (Mac) or Enter (Windows) to execute the change.
21. Switch to the Elements tab to examine the resulting HTML structure.
22. Expand the <body> element, then expand the <h1 id="main-heading" style="color: green;"> element.

23. Notice how JavaScript dynamically inserted the <em> tags around "world!", demonstrating innerHTML's ability to parse and inject HTML markup.

    NOTE: For reference implementations and completed examples, navigate to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Objects.

This exercise has introduced you to JavaScript's object-oriented foundation—from creating custom objects to manipulating DOM elements as objects. These concepts form the cornerstone of modern web development, enabling the dynamic, interactive experiences users expect from contemporary web applications. As you progress in JavaScript development, you'll build upon these object manipulation techniques to create increasingly sophisticated user interfaces and application logic.