Complex Data Types Review and DOM Interactions

Complex Data Types Review

Let's revisit some of the Primitive Data types we covered in the last module:

String, e.g. "Hello", "1", or ""
Number, e.g. 1, 1239, 1.2, or 1e4
Boolean, e.g. true or false
undefined <- that's, right undefined. In JavaScript, undefined values have their own data type!

Primitive data types like we covered in the last module are meant to represent a single piece of discrete data. It can be a large piece (think of War and Peace as a single String), but it's still just one item.

Complex or Composite data types represent Collections of data. One of the Complex data types in JavaScript is Objects. We've already created a few of these using Literal Notation.

Objects are collections of data just like Arrays, but we can access data by name instead of sequence. All names are themselves arbitrary Strings that you're free to make up as you see fit. Let's try to re-write part of myArray as an Object:

const myObject = {
  myString: "String",
  myNum: 23,
  myBoo: true
};

console.log(myObject["myString"]);

Objects are the foundation of an entire programming paradigm known as Object Oriented Programming, which we'll definitely be revisiting. For right now, it's enough to understand that we can store data in Objects and access them by name using either bracket notation or a shortcut called dot notation.

Dot notation for the above example would be something like:

console.log(myObject.myNum); // 23

Hopefully you recognize that we've already been working with built-in Objects, including window and console. Typing window.location was accessing the location property of the window Object provided by the browser. console.log() invokes the log function contained in a console Object provided by the browser. window and console are part of the BOM, or Browser Object Model (notice the 'Object' part of that). It's the collection of all of the data and built-in functions provided by the browser, that we can access at any time.

JavaScript, the DOM, and YOU

Document Object Model (DOM)

When we write HTML, we use opening and closing tags - we have 'parents' and 'children.'

<body>
    <form action="#">
      <div>
        <label for="minimum">Minimum Value</label>
        <input type="number" id="minimum" />
      </div>

      <div>
        <label for="maximum">Maximum Value</label>
        <input type="number" id="maximum" />
      </div>

      <input type="submit" value="Sum!" />
    </form>

    <script src="./scripts.js"></script>
  </body>

We model this 'tree' of 'parents' and 'children' as the the Document Object Model (DOM), a 'subset' of the Browser Object Model (BOM). The BOM encompasses all of the parts of the browser - file uploads, clipboard, CSS painting, etc. While using BOM data is extremely useful, most of what users really care about happens inside the DOM: the Document Object Model.

Now, to interface with the DOM, we need a convenient way to interact with it without manually 'hacking' into the browser and having to learn about all of its inner workings. Fortunately, JS has a built in object (recall that all the things in JS are objects except for primitives) - document. This serves an Application Programming Interface (API) - a collection of convenience properties and methods that allow us to 'program' another application w/o having to know about all of the specific inner workings of it.

Because of the document object, we can 'program' the DOM in the 'browser' without having to become expert 'browser programmers.'

Let's try exploring your Portfolio project through the document Object!

Navigate to the latest deployed version of your Portfolio Project in a browser, go to your blog page, then open up the developer console.

Try the following commands from the browser's REPL:

document.body;
document.querySelector("p");
document.querySelectorAll("p");
document.querySelector("nav");
document.querySelector("nav li").textContent;
document.querySelector("h1").textContent = "I'm on the page!";

Greeter Practice

Just like we did with the first greeter exercise, we can also manipulate the DOM through JavaScript files (instead of the console). To explore this further, let's add a new-and-improved greeter to your landing page in your Portfolio Project!

At the top of your content section, add a new <div> with the attribute id='greeting'.

Then we need to pick out the #greeting element of our HTML document and change its .textContent to include a greeting for our visitor. HINT:

const name = prompt("Hi there! What's your name?");
const output = document.querySelector("#greeting");
output.textContent = "Thanks for visiting, " + name + ".";

While textContent works, it would be nice if we could wrap our greeting in a <p> element to keep styling consistent. To do that, we'll use a different method attached to DOM nodes called .innerHTML. Try this:
```
const name = prompt("Hi there! What's your name?");
const output = document.querySelector("#greeting");
output.innerHTML = "<p>Thanks for visiting, " + name + ".</p>";
```
Now you can add some specific styles to #greeting p to make your greeting section look nice! Once your greeting area looks good, add, commit, push, and deploy your changes.

PreviousJavaScript Overview and Practice NextTemplate Literals and First Class Citizens

Last updated 5 years ago

Was this helpful?