DrumSensei

betwixt code and music

Homework

What is 'this'?

Week 4 - Day 14

JS 'this'

Ok, things are about to get confusing. If you are not thinking clearly then go skip this and go read the facebooks or something. Maybe go take a walk.

Still here?
Well, let's talk about 'this'...



Just kidding. This is awesome. The easiest way to put this...erm, what I am trying to say is...the best way to get this down on paper...blurgggg... Using this word seems nearly impossible!

In JavaScript we are often dealing with a small snippet of code that does a task. It is called a function. Inside that function we might be targeting a specific item that triggered an event. A shorthand way of talking about some information that is passed in to the function is to use the
this keyword. It enables the programmer to talk about a generic piece of information without knowing exactly what it is ahead of time.

Specifically,
this refers to the current DOM element, at least in the way that we have been using it in class. It is also useful when creating new objects with a constructor. I have not used it a ton just yet (only a couple of times), so I have yet to build up a lexicon of knowledge to disseminate to the masses about this.

Also, here is a .gif. Enjoy!



If you want to learn more about
this, then go to MDN or just !google search it on DuckDuckGo.

The Iron Yard - Day 03

Day 03

2015-08-26 11.58.21

Today we had engaging lecture and examples over the specificity of CSS selectors. I definitely do not fully have it down, but it is starting to form in my brain matter.

HyperText Markup Language (a.k.a. HTML) is content. It contains everything that you see on the page that is
stuff. The containers that hold text, pictures, and links can be made to look prettier by adding Cascading Style Sheets (henceforth dubbed CSS).

CSS makes use of
selectors to apply a certain style to the content in the HTML page. In best practice, the HTML and CSS code are found in two (or more!) different files which are linked together at the top of each HTML page.

Color, font-size, height, width, and many other values can be added or adjusted to the content of the page using CSS. If you have seen a website, then you have definitely seen this in action. Without the CSS, the page looks like an outline on black text on a white background

CSS Selectors are fun!

Tag selectors are HTML tags (such as <
header>, < body>, <img>, <a>, etc.) that we target in order to style.

Tag selector example in CSS

body {
text-align: center;
font-family: "Roboto Mono", sans serif;
}

Class selectors are custom names that a developer can create to help modify the appearance and behavior or certain attributes.
In the HTML document they take the form <
HTML_element class="class-name">.
In the CSS file they are preceded with a period like so
.class-name {...}.

Class selector example in CSS

.class-name {
display: inline;
margin: 0 auto;
}

ID selectors are unique names that will only apply to a single element on the page (or a set of things, depending on how implemented). For best practice they can only be used one time per HTML document.

ID selector example in CSS

#batman {
background-color: black;
color: black;
}

That was the easy stuff. The fun begins when we try to determine what happens when the selectors are combined. Which one takes precedence? Will my text be blue or red?

Lastly, a
style tag included in the HTML side of things can override any of the CSS selectors from above. It is generally considered a party foul to use style in that context. Styling can be done "inline" in HTML, but this is an activity perfectly suited to CSS.

FUN stuff!!