Working with the DOM
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
()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.
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.
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.
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.
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