Working with the DOM

We looked at the Document Object Model a bit last time, but this is an important part of what we do in JavaScript, so it warrants additional focus.

Reminder:

Syntax is important. Syntax is like the grammar of programming languages. it is the distinct structure that keywords, constructs, values, and variables must be invoked with in order to have a running program.

For example, when calling or invoking a function, you would do something like myFunction();. The () at the end tell the interpreter that you want to call - as a function - whatever is stored at the variable myFunction. If you were to place a space between the two parts like myFunction (); you will get an error, as this is a syntax violation.

A lot of it is trial and error early on, but Javascript is pretty forgiving with things like semicolons and commas, which cause a lot of problems in other languages when they are left out.

Thankfully using advanced code editors like Brackets and Visual Studio Code helps solve this problem, because the code editors can highlight these issues to us.

Styles and CSS

As mentioned previously, Cascading Style Sheets are what give visual styling to our websites. Generally speaking, CSS only changes the visual representation of our content, but without it, our sites look very bland. The power of styling is immense, as CSS has the ability to override the built in rules of HTML when it comes to layout and presentation. this means that with sufficiently advanced CSS, your website may not actually look like what you would expect it to by reading the HTML.

For an example of the power of CSS, check out CSS Zen Garden. All of these pages have the same HTML, and only the CSS is different, yet they are all visually distinct. CSS is powerful.

While we don't technically need CSS if we focus purely on functional JS, CSS is an important skill to have and understand, so let's take a look at the basics of styling a page.

Examples

Let's take a look at An example of some of the things we can do with CSS

Manipulating CSS with JS

Now that we can see the power of styling, we can look at controlling these styles with JavaScript. By bringing together visual presentation and logic, we can make some truly cool stuff. Interactions which respond to the user with visual feedback, which is an essential part of the experience in any web app.

See this example

Data Attributes

Data Attributes are special attributes or properties on HTML tags which let us store arbitrary information. This is useful for building dynamic applications because it allows us to bind information to our HTML, which as we know, defines the data and structure of the page. This opens up a whole bunch of opportunities for us.

According to the HTML spec, even though most attributes are defined in the spec and have specific purposes, prefixing an arbitrary attribute with data- makes it considered a valid data attribute, and can be used to store information on HTML elements.

We will take a look at some examples of how this can be of benefit.

See this example

Activity

Let's use some of what we have gone over today to do the following:

Make a program which does the following:

• From an array of colors, display a list of colors, and store the color name as a data attribute on the dom node

• when the user clicks on one of the colors, get the name of the color from its data attribute

• use the name you got from the above step to change the background-color of the entire HTML document (or a small part of it if you prefer) to the color chosen by the user

Things you will need to use for this (probably):

• event listeners

• creating dom nodes dynamically

• storing data on dom nodes

• manipulating styles with JS