Today I learned in class that unlike HTML and CSS, JavaScript(JS) is a programming language. Instead of rendering content and telling it how it looks, JavaScript can decide what will be rendered, when it will be rendered, why it will be rendered, how it will be rendered and how much of it to be rendered on the screen. JS can control the flow of elements, information and interactions. Think of it this way: If HTML is the bones of your web page and CSS is the meat and fat that fleshes it out, then JS is the brains that controls the movement and flow of everything on it. JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a programming language that is characterized as dynamic, weakly typed, prototype-based and multi-paradigm. In computer programming, a variable or scalar is a storage location paired with an associated symbolic name, which contains some known or unknown quantity of information referred to as a value.

Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. When an event is fired on an element that has parent elements (e.g. the <video> in our case), modern browsers run two different phases — the capturing phase and the bubbling phase. In the capturing phase: The browser checks to see if the element’s outer-most ancestor (<html>) has an onclick event handler registered on it in the capturing phase, and runs it if so. Then it moves on to the next element inside <html> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on. In the bubbling phase, the exact opposite occurs: The browser checks to see if the element that was actually clicked on has an onclick event handler registered on it in the bubbling phase, and runs it if so. Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <html> element. Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

JS DOM objects have properties. These properties are kind of like instance variables for the particular element. As such, a property can be different types (boolean, string, etc.). Properties can be accessed using jQuery’s prop method (as seen below) and also by interacting with the object in vanilla JS. All of the properties we set in the HTML are available through prop. Other properties are available too, such as style, even though we didn’t explicitly set them. Properties can also be updated through the prop method:What is an attribute? Attributes are in the HTML itself, rather than in the DOM. They are very similar to properties, but not quite as good. When a property is available it’s recommended that you work with properties rather than attributes. An attribute is only ever a string, no other type. If an element has a default value, the attribute shows the default value even if the value has changed. Attributes can be useful when you want to set a custom attribute, that is, when there is no property associated. But, to be fair, you can also use custom properties (although this might be bad practice).