Check out a free preview of the full The Hard Parts of UI Development course:
The "Displaying Data Summary" Lesson is part of the full, The Hard Parts of UI Development course featured in this preview video. Here's what you'd learn in this lesson:

Will summarizes the process of displaying content and data. JavaScript creates and stores data and accesses DOM elements through the document API. Getters and setters can access and change the DOM element values.

Get Unlimited Access Now

Transcript from the "Displaying Data Summary" Lesson

>> Okay, good. So I think we're coming to another wipe down. In a moment we will, yeah, well, let's just summarize. Webcore gives JavaScript access to the DOM and therefore pixels. That's not nothing. I should have said, have you ever seen in any of the workshops us adding anything to the page, the actual page ever?

[00:00:26] Never have we done it, because you just saw it ain't easy to add a single piece of text. We've never touched it. However, fortunately, Webcore and with the help Web IDL defining the DOM API or allowing DOM API to be described, we do get access. Goal 1 with the display content data to the user.

[00:00:43] With HTML, we did it in, I think we dwelled on it too long, honestly, but we did it quickly. With JavaScript, it ain't so easy, but we did get to create and store changeable mutable data posts this high. Then we got a link to the actual DOM element, the div, via using the object document that itself has a link to the whole list of elements, where we ran the querySelector method that allowed us to search this is an element.

[00:01:12] Retrieve not the actual element back into JavaScript in a jsDiv, because we can't copy a C++ object into JavaScript, not possible. Instead, we created a brand new object, or JavaScript did for us with Crusader's help, in JavaScript. It was assigned to jsDiv, and that object was populated with a hidden link to that list of elements in C++.

[00:01:33] No, incorrect, to the individual element div in C++ in the DOM. And a bunch of methods in JavaScript or properties, but they do a lot more than a regular property, cuz as Ian rightly pointed out, a regular property would have assigned the value of Hi post to textContent here in JavaScript on that object.

[00:01:53] But it ain't a regular object, it's a special object that has these methods paying out to set the value of the text on the C++ element in the DOM to the value of our content from JavaScript. People talk about declarative versus imperative, or I would say descriptive versus imperative, or easy versus a lot of steps.

>> [LAUGH]
>> And my goodness, what do we think of JavaScript? What a wonderfully undeclarative, undescriptive, unintuitive, and we're gonna spend the rest of our time. That's why the HTML is so important to value, because it was all about doing it the way that we spend the rest of our time in UI engineering trying to get back to.

[00:02:38] Describing on the page what I wanna show up. Unfortunately, it was a one-time description with no changeable data. Can I get back to that with changeable data? By the way, I should say, side note, things like web components try to do that without us having to build it all out from scratch ourselves.

[00:02:54] Whether they take off fully or not, but they're all trying to solve that problem. Describe the page like we did in HTML, in ordered list down the page, but now we get changeable data. Do we get changeable data in HTML? Everybody, thumbs changeable? No, not thumbs. That's gonna ruin that meaning.

[00:03:10] Do we get changeable data in HTML?
>> No.
>> Yes, exactly. When I do that voice, it's often yes. Okay, use built-in property methods to add the content. I say methods cuz they do more than just set a local value in a key value pair, right, in an object.

[00:03:30] Instead they send a message out to set through the link to the development. They cross the streams. I like to do a double line down here really because it's between JavaScript runtime and C++ runtime, exactly. And then DOM automatically displays the content on the page itself, known as the views, what the user sees.

[00:03:50] Success, but so much harder than <div>7<div>.