JS in the browser

Question 1

How would you avoid defining global variables in the Browser JS

Answer 1

https://gist.github.com/hallettj/64478

Global variables suck mostly because they’re error-prone. Coders in a large codebase might end up using the same variable name later in the same project and inadvertently create bugs. Using IIFE’s are the way to go if we want to avoid this. IIFE’s allow us to define variables and dispose of them once we’re done.

However when writing our IIFEs we need to be sure to use our ‘var’ keywords every time to define variables, this includes in our for loops.

Question 2

Can you bind to a DOM event in the Browser?

Answer 2

Examples of DOM events are the click of a mouse, hovering of a cursor, focus-in and focus-out etc ( See: https://en.wikipedia.org/wiki/DOM_events ).

To bind DOM event we can listen for them. Generally in one of two ways. We can either use the standard addEventListener( ) or we can use something called on-event handlers ( See: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers ).

addEventListener( ) takes two arguments, it takes the DOM event as a string an anon. function as the second argument. Only one action can be added to an event in this way though, so if we click a button and it fires hitting the button again will fail to have the event fire again. The addEventListener( ) can also be coupled with a removeEventListener, which will help remove the handler and allows us to use the handler as many times as we want to with the firing of an event.

on-event handlers are similar. We can use onload or onclick and have them equal functions.

window. onload = …
document. getElementByID(“div”).onclick = function( ){…}

http://eloquentjavascript.net/14_event.html

Question 3

Can you make HTTP requests from JS in the Browser?

Answer 3

Use postman?

Question 4

Describe DOM event bubbling in the Browser

Answer 4

? –> use case ?

Event bubbling and event trickling/capturing are two ways in which events propagate. This concept is actually incredible simple (what’s not as simple is the usecase). If we have an element within another element we could write code that says after clicking the inner/innermost element the other/othermost element(s) respond. In this way events are bubbling up from inner to outer. If we go the opposite way we trickle down.

Question 5

Describe what an HTML script tag does

Answer 5

The script tag is used to embed or reference an executable script.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Question 6

Describe the window variable is within JS in the Browser

Answer 6

Any variable declared on the window is considered a global variable or a variable available to every function declared and defined inside the window object itself. The window object also contains the DOM document.

Question 7

Find DOM nodes using querySelectorAll

Answer 7

A brilliant and highly useful tool when developing. It lets you select a number of elements in your DOM, along with querySelector.

You can imagine what the following allows you to do:
document.querySelector(“#my-id”).querySelectorAll(“img”)

https://developer.rackspace.com/blog/using-querySelector-on-elements/