Building Interactive JavaScript Websites: Course OverviewCourse Overview

JavaScript Interactive Websites

Learn how to bring JavaScript and HTML together with the script tag and the DOM model.

Start

Key Concepts

Review core concepts you need to learn to master this subject

HTML script element

HTML script element src attribute

HTML script tag async attribute

HTML script element defer attribute

The Document Object Model

HTML DOM

Nodes in DOM tree

DOM parent-child relationship

HTML script element

<script>
  console.log("Hello world!");
</script>

The HTML <script> element can contain or reference JavaScript code in an HTML file. The <script> element needs both an opening and a closing tag, and JavaScript code can be embedded between the tags.

HTML script element src attribute

<script>
  console.log("Hello world!");
</script>

The src attribute of a <script> element is used to point to the location of a script file.

The file referenced can be local (using a relative path) or hosted elsewhere (using an absolute path).

HTML script tag async attribute

<script>
  console.log("Hello world!");
</script>

Scripts are loaded synchronously as they appear in an HTML file, before the following HTML is loaded and parsed. The async attribute can be used to load the scripts asynchronously, such that they will load in the background without blocking the HTML parser from continuing.

In the example code block, the script will load asynchronously in the background, without blocking the HTML parser.

HTML script element defer attribute

<script>
  console.log("Hello world!");
</script>

The defer attribute of a <script> tag is a boolean attribute used to indicate that the script can be loaded but not executed until after the HTML document is fully parsed. It will only work for externally linked scripts (with a src attribute), and will have no effect if it is applied to an inline script.

In the example code block, the <h1> tag will be loaded and parsed before the script is executed due to the defer attribute.

The Document Object Model

<script>
  console.log("Hello world!");
</script>

The Document Object Model, or DOM is a representation of a document (like an HTML page) as a group of objects. While it is often used to represent HTML documents, and most web browsers use JavaScript interfaces to the DOM, it is language agnostic as a model.

The DOM is tree-like and heirarchical, meaning that there is a single top-level object, and other objects descend from it in a branching structure.

HTML DOM

<script>
  console.log("Hello world!");
</script>

The DOM is an interface between scripting languages and a web page’s structure. The browser creates a Document Object Model or DOM for each of the webpage it renders. The DOM allows scripting languages to access and modify a web page. With the help of DOM, JavaScript gets the ability to create dynamic HTML.

Nodes in DOM tree

<script>
  console.log("Hello world!");
</script>

A node in the DOM tree is the intersection of two branches containing data. Nodes can represent HTML elements, text, attributes, etc. The root node is the top-most node of the tree. The illustration shows a representation of a DOM containing different types of node.

DOM parent-child relationship

<script>
  console.log("Hello world!");
</script>

The parent-child relationship observed in the DOM is reflected in the HTML nesting syntax.

Elements that are nested inside the opening and closing tag of another element are the children of that element in the DOM.

In the code block, the two <p> tags are children of the <body>, and the <body> is the parent of both <p> tags.

Accessing HTML attributes in DOM

<script>
  console.log("Hello world!");
</script>

The DOM nodes of type Element allow access to the same attributes available to HTML elements. For instance, for the given HTML element, the id attribute will be accessible through the DOM.

The JavaScript `document.createElement()` Method

<script>
  console.log("Hello world!");
</script>

The document.createElement() method creates and returns a reference to a new Element Node with the specified tag name.

document.createElement() does not actually add the new element to the DOM, it must be attached with a method such as element.appendChild().

The `document.body` Object

<script>
  console.log("Hello world!");
</script>

document.body returns a reference to the contents of the <body> HTML element of a document/HTML page. The <body> element contains all the visible contents of the page.

JavaScript `document.getElementById()` Method

<script>
  console.log("Hello world!");
</script>

The document.getElementById() method returns the element that has the id attribute with the specified value.

document.getElementById() returns null if no elements with the specified ID exists.

An ID should be unique within a page. However, if more than one element with the specified ID exists, the .getElementById() method returns the first element in the source code.

JavaScript `element.appendChild()` method.

<script>
  console.log("Hello world!");
</script>

The parentElement.appendChild(childElement) method appends an element as the last child of the parent.

In the given code block, a newly created <li> element will be appended as the last child of the HTML element with the ID list.

`element.InnerHTML`

<script>
  console.log("Hello world!");
</script>

The element.innerHTML property can be used to access the HTML markup that makes up an element’s contents.

element.innerHTML can be used to access the current value of an element’s contents or to reassign them.

DOM Element Attributes

<script>
  console.log("Hello world!");
</script>

DOM Nodes of type Element provide access to attributes of those elements declared in HTML markup. For instance, if an HTML tag has attributes like id or class or src, those attributes can be accessed through the DOM.

The JavaScript `.querySelector()` Method

<script>
  console.log("Hello world!");
</script>

The .querySelector() method selects the first child/descendant element that matches its selector argument.

It can be invoked on the document object to search the entire document or on a single element instance to search that element’s descendants.

JavaScript `element.onclick` property

<script>
  console.log("Hello world!");
</script>

The element.onclick property can be used to set a function to run when an element is clicked. For instance, the given code block will add an <li> element each time the element with ID addItem is clicked by the user.

The `element.parentNode` Property

<script>
  console.log("Hello world!");
</script>

The .parentNode property of an element can be used to return a reference to its direct parent node. .parentNode can be used on any node.

Changing CSS in Javascript with `element.style`.

<script>
  console.log("Hello world!");
</script>

The element.style property can be used to access or set the CSS style rules of an element. To do so, values are assigned to the attributes of element.style. In the example code, blueElement contains the HTML elements with the ID colorful-element. By setting the backgroundColor attribute of the style property to blue, the CSS property background-color becomes blue.

Also note that, if the CSS property contains a hyphen, such as font-family or background-color, Camel Case notation is used in Javascript for the attribute name, so background-color becomes backgroundColor.

The Script Element

Lesson 1 of 3

1
HTML defines the structure of a web page by using page elements as the building blocks. However, HTML by itself can not produce web page interactivity, that’s where JavaScript comes in. Below, we …
2
The element allows you to add JavaScript code inside an HTML file. Below, the element embeds valid JavaScript code: This is an embedded JS example function Hello() { alert (‘Hello Wor…
3
Since you know how to use a element with embedded code, let’s talk about linking code. Linking code is preferable because of a programming concept called Separation of Concerns (SoC). Instead of …
4
A quick recap: the element allows HTML files to load and execute JavaScript. The JavaScript can either go embedded inside of the tag or the script tag can reference an external file. Before we …
5
When the HTML parser comes across a element, it stops to load its content. Once loaded, the JavaScript code is executed and the HTML parser proceeds to parse the next element in the file. This ca…
6
The async attribute loads and executes the script asynchronously with the rest of the webpage. This means that, similar to the defer attribute, the HTML parser will continue parsing the rest of the…
7
Let’s review. + HTML creates the skeleton of a webpage, but JavaScript introduces interactivity + The element has an opening and closing tag. You can embed JavaScript code inbetween the openin…

1
The Document Object Model, abbreviated DOM, is a powerful tree-like structure that allows programmers to conceptualize hierarchy and access the elements on a web page. The DOM is one of the bet…
2
Tree-like modeling is used in many fields, including evolutionary science and data analytics. Perhaps you’re already familiar with the concept of family trees: these charts represent the familial r…
3
Following the metaphor of a family tree, let’s define some key terminology in the DOM hierarchy: A parent node is the closest connected node to another node in the direction towards the root. A…
4
As mentioned, a node is the equivalent of each family member in a family tree. A node is an intersecting point in a tree that also contains data. There are nine different types of node objects in …
5
DOM element nodes model elements in an HTML document. Much like an element in an HTML page, the DOM allows us to access a node’s attributes, such as its class, id, and inline style. In the diagra…
6
Congratulations on completing our introduction to the Document Object Model, or DOM, as a structure! Let’s review what you’ve learned so far: - The DOM is a structural model of a web page that a…

1
The Document Object Model, abbreviated DOM, is a powerful tree-like structure that organizes the elements on a web page and allows scripting languages to access them. This lesson will focus on so…
2
When using the DOM in your script to access an HTML element, you also have access to all of that element’s properties. This includes the ability to modify the contents of the element as well as it…
3
In the previous exercise, we accessed the webpage elements with the document keyword! What if we wanted to select a specific element? The DOM interface allows us to access a specific element with …
4
Another way to modify an element is by changing its CSS style. The .style property of a DOM element provides access to the inline style of that HTML tag. The syntax follows an element.style.proper…
5
Just as the DOM allows scripts to modify existing elements, it also allows for the creation of new ones. The .createElement(tagName) method creates a new element based on the specified tag name pa…
6
In addition to modifying or creating an element from scratch, the DOM also allows for the removal of an element. The .removeChild() method removes a specified child from a parent. Because the .que…
7
You can add interactivity to DOM elements by assigning a function to run based on an event . Events can include anything from a click to a user mousing over an element. The .onclick property a…
8
In the DOM hierarchy, parent and children relationships are defined in relation to the position of the root node. A parent node is the closest connected node to another node in the direction tow…
9
In this lesson, you manipulated a webpage structure by leveraging the Document Object Model interface in JavaScript. Let’s review what we learned: + The document keyword grants access to the root …

What you'll create

Portfolio projects that showcase your new skills

Chore Door
It’s time to build fluency in your coding skills. In this next Pro Project, we’re going to practice building an interactive webpage in HTML, CSS, and JavaScript so you can hone your skills and feel confident taking them to the real world. Why? These three languages are the backbone of all web development. What’s next? Interactive JavaScript, chore-assigning robots, and game time. You got this!

JavaScript Interactive Websites

Start

JavaScript Interactive Websites

Key Concepts

HTML script element

HTML script element src attribute

HTML script tag async attribute

HTML script element defer attribute

The Document Object Model

HTML DOM

Nodes in DOM tree

DOM parent-child relationship

Accessing HTML attributes in DOM

The JavaScript `document.createElement()` Method

The `document.body` Object

JavaScript `document.getElementById()` Method

JavaScript `element.appendChild()` method.

`element.InnerHTML`

DOM Element Attributes

The JavaScript `.querySelector()` Method

JavaScript `element.onclick` property

The `element.parentNode` Property

Changing CSS in Javascript with `element.style`.

What you'll create

Chore Door

JavaScript Interactive Websites

Subjects

Languages

HTML script element

HTML script element src attribute

HTML script tag async attribute

HTML script element defer attribute

The Document Object Model

HTML DOM

Nodes in DOM tree

DOM parent-child relationship

Accessing HTML attributes in DOM

The JavaScript document.createElement() Method

The document.body Object

JavaScript document.getElementById() Method

JavaScript element.appendChild() method.

element.InnerHTML

DOM Element Attributes

The JavaScript .querySelector() Method

JavaScript element.onclick property

The element.parentNode Property

Changing CSS in Javascript with element.style.

Chore Door

The JavaScript `document.createElement()` Method

The `document.body` Object

JavaScript `document.getElementById()` Method

JavaScript `element.appendChild()` method.

`element.InnerHTML`

The JavaScript `.querySelector()` Method

JavaScript `element.onclick` property

The `element.parentNode` Property

Changing CSS in Javascript with `element.style`.