JavaScript: Strings and Numbers

Since having started my search for a coding school, I have taken full advantage of Flatiron School's free online Bootcamp Prep course.  It appears to provide a lot of the fundamental requisites for success in the developer track

HMLT & CSS

To review, I have gone over HTML and CSS, with which I have a good deal of experience already.  I did, however, gain some additional knowledge that was unknown to me.  Rather, I have worked with these things through raw experimentation, without knowing them by name./

  • Compound Selector
    • h1, h2, #box {...}
  • Descendant Selector
    • #nav li {...}
  • Child
    • #list > li {...}
  • Adjacent Sibling
    • h3 + p {...}
  • General Sibling
    • h2 ~ p {...}
  • Universal
    • * {...}
  • Attribute Selectors
    • img[alt="Cat"] {...}
  • Pseudo Selectors
    • a:link {...}

JavaScript (JS) and the Document Object Model (DOM)

As for JS and the DOM, I have prior experience with this from introductory resources that I've utilized across the web. The bootcamp prep course has been a focus on utilizing the inspector tool with the Google Chrome Developer Tools and how to select certain elements within a page by using JS. For example, in order to find a CSS ID, such as "#height", I would type the following into the inspector Console:

document.querySelector("#height")

This might return something like this:

<p id="height">74</p>

And if I want to get the sole value from the elements returned with the previous code, I can add innerHTML to it.

document.querySelector("#height").innerHTML

This might return something like this:

"74" Now, let's say that I want to add two additional inches to the height. Note that the innerHTML value immediately above is a string and will need to be converted to a numerical value. This can be achieved by using the parseInt() function. Otherwise, if we simply attempt to add 2 to document.querySelector("#height").innerHTML , it will simply return a concatenation of "74" with the 2 , returning a new string value of "742" instead of the number 76 .

Here is an example using parseInt() :

parseInt(document.querySelector("#height").innerHTML)

This will return the following:

"76"

Instead of typing all of the code in the previous example, it can be stored in a variable for easier use and less code in the future.

var heightSelector = document.querySelector("#height").innerHTML

Then we can utilize the parseInt() function again and add two inches to it.

parseInt(heightSelector) + 2 will return the same value as the previous example: "76" .