Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Unit 5 Starting to Integrate JavaScript and HTML

# Starting to Integrate JavaScript and HTML

#### File: /Learning Plan 6/firstInnerHTML.html

- JavaScript was invented to be used in conjunction with web pages, with a major use being to change HTML after a web page is fully rendered on a user's screen. We're going to start learning how.

- We have seen some code like this in some of the previous demos:
- Now we're going to look at these a little more closely. We'll start by looking at the model of the Document object, known as the DOM, for Document Object Model. The DOM shows the basic structure of an HTML document hierarchy. Web pages can have some of these or lots of these tags. In the DOM they are called elements, and each one is considered to be an object with which JavaScript can work. These types of objects are therefore known, not surprisingly, as element objects. And, as objects, they have properties and methods associated with them.

- Here's a simple HTML document:
- As you have learned in your HTML course, we can add attributes to tags. The attribute we're interested for this unit is id. When we add a unique id to a tag it is very easy for JavaScript to find and manipulate it.
- When a browser renders a page, as indicated above all these tags are made into a kind of running code called objects. JavaScript can get access to these objects and change them, even after the Web page is fully rendered in the screen being viewed by the user. : JavaScript can also add new objects to the page, and cause the Web page being viewed by the user to change. We'll start by adding content to the tags/objects with our programs.
- We start by getting access to a specific tag with a known id.
- The JavaScript variable named `headerTag` is available to our program when the Web page first loads, but contains no reference (it initially refers to undefined). However, after the JavaScript assign statement just above executes, the variable `headerTag` then contains a reference to the <h2> element. Once we have captured a reference to the <h2> element, we can now have JavaScript work with this element.
  Note that unlike CSS, JavaScript cannot simply immediately use the id value of an element to work with it. Rather, JavaScript requires that the JavaScript method document.getElementById() must be employed first to generate a reference to the element. Only then, can other features of JavaScript work with it. For example, element objects have a property known as innerHTML, which is a reference to whatever is currently coded between the opening and closing tags of a two-sided tag set.
- Thus,we could completely replace the current content with the following assign statement:
- This will change the text inside of the h2 tag to this:
- We can also add text to the text that is already there with a simple `+=` like this:
- Which will give us this:
- We can even add new tags with this technique. Here's an unordered list with no list item tags:
- Here's code that adds a couple of `<li>` tags to the list:
- The list will now be this:
- `innerHTML` does cause the browser to refresh so you want to use it sparingly. The above code would be better like this:
- Let's practice this a bit!
  - 6.1 Lab 1