Day 133: Ch. 63 "A Smarter Way to Learn JavaScript"

I'm starting today off on Chapter 63 The DOM: Getting a Target's Name.  I learned about the node name property today, .nodeName.  If the variable it's targeting is an element, it will return a string that corresponds to the html tag, such as "P", "DIV", or "SPAN."  It will output an all caps string, even if the html itself is in lower caps.  If the node is a text node, the name of the node is #text, in lower case.  For a text node, you use .nodeValue to find out its value (its content).  The value for a text node would be a string with the actual text.  Meanwhile, an element node has a name, like "P" or "IMG," but no value.  If you try to assign an element node value to a variable, the variable will be assigned null.  

That said, .nodeValue is not the same as .innerHTML.  So, .innerHTML is a property of the parent element, such as the <p> element, while .nodeValue is the property of the actual text node itself.  Also, .innerHTML includes all the descentants of the element, including any inner element nodes like <em> as well as text nodes, while .nodeValue only includes that single text node.

All right, now I'm on Chapter 64 The DOM: Counting Elements.  We used .childNodes by itself (without brackets at the end) to gather all the child nodes of an element and place them in variables.  Note that this does not gather grand children or anything further, only children.

I'm now on Chapter 65 The DOM: Attributes.  When we look at code like this:

<div id="p1">
<p class="special">
<span style="font-size:24px;">

The first item to the left of the equal sign is the attribute name, and the item to the left of the equal sign, in quotation marks, is the attribute value.  An element can have any number of attributes.  We can find out if an element has a particular attribute like so:

var target = document.getElementById("p1");
var hasClass =target.hasAttribute("class");

The code above returns true or false.  To read the value of an attribute, as opposed to the attribute itself, this is the code:

var target = document.getElementById("p1");
var hasClass =target.getAttribute("class");

You can set the value of an attribute with .setAttribute, like so:

var target = document.getElementById("div1");
target.setAttribute("class", "special");

Now I'm on Chapter 66 The DOM: Attribute Names and Values. Attributes are nodes, so when we target them and ask for .nodeName, the returned value will be the name of the attribute, such as "onMouseover" or "src", for example.  .nodeValue used in the same way will give you the value of the attribute.

Now I'm on Chapter 67 The DOM: Adding Nodes.  We used .createElement(), .createTextNode(), and .appendChild() to add nodes with JavaScript. 

Now I'm on Chapter 68 The DOM: Inserting Nodes, which is the last of the DOM chapters in the book!  That's great, there's really no difference between completing one chapter or another, but it still feels like a mini-accomplishment to complete a series of chapters that deal with related subject matter.  Okay, I've completed that chapter!

Tomorrow I'll be starting on Chapter 69 Objects.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 216)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4

Total Hours Coding: 599