mode 5 JS III

Question 1

What is a scope?

Answer 1

• the memory space where a variable exists

- it has NOTHING to do with permissions, nothing to do with access levels.

Question 2

What scopes does JavaScript support?

Answer 2

• global scope: the variables/entities can be accessed by everything
• function scope: only accessible withing the specific function it is declared
• block scope: only accessible within the block it is declared

Question 3

Hww do I declare a variable in JS?

Answer 3

• var only enforce the “global” and “function” scopes
• let enforces all 3 scopes
• const same as “let” BUT it makes the value immutable

Question 4

Scope access

Answer 4

I CAN access my global variable from the global scope,

I CAN access my global variable from the function scope,
I CAN access my function variable from the function scope,

I CAN access my global variable from the block scope,
I CAN access my function variable from the block scope,
I CAN access my block variable from the block scope,
I CAN access randomVar from the block scope

I CAN access my block variable from the function scope, if the block variable was declared using "var"
    // block scope only functions appropriately when we use "let" to declare variables

Question 5

What is Hoisting?

Answer 5

Essentially, JS is a two pass translator. On the first pass through of a file, JS will find all global declarations and create those variables/functions. On the second pass through, JS will perform your program’s logic (like assignment, for-loops, method calls, etc).

Question 6

How do we work with VARIABLES WITH THE SAME NAME (but different scopes)

Answer 6

• variables in a higherscope will be shadowed, meaning that they are more difficult to access.
• using the variable name will access the “most immediate” scope’s version of the variable

Question 7

Using VARIABLES WITH SAME NAME AND THE SAME SCOPE

Answer 7

there is a window object inside of javascript’s “global scope”. Functions will be created inside of
this window object, using their names as their variableNames in the window object. SO, when you
create a second function with the same name, you’re essentially just reassigning the window
object’s variable

Question 8

DOES OVERLOADING EXIST IN JS?

Answer 8

no, overloading doesn’t exist in JS like you’d expect

Question 9

What is an anonymous function?

Answer 9

ANONYMOUS FUNCTION: a function without a name

Question 10

What is a callback function?

Answer 10

CALLBACK FUNCTION
-it’s a function that is passed as an argument to another function to be run at a later point in time.

Basically, using callback functions are used to chain functions and control the order in which they are called

Question 11

SELF-INVOKING FUNCTIONS

What is an IIFE?

Answer 11

It is similar to initializer block
-Immediately Invoked Function Expression (aka Self-invoking function)

An IIFE is a function that calls itself.

Question 12

What is a NESTED FUNCTION

Answer 12

A function inside another function

Question 13

What is CLOSURE in JS?

Answer 13

• Closure are a way to create encapsulation in JS.

- A closure is a self invoking anonymous function that returns an inner function

Question 14

What is Arrow Notation?

Answer 14

ARROW NOTATION (function shorthand notation)

(a,b) => a+b;  //this will return a+b immediately (automatic/implicit return value)
OR
(a,b) => {a+b; console.log(a+b);} //no implicit return value
OR
a => {console.log(a)}  //no implict return value
OR
() => {console.log("stuff")} //no implicit return value

Question 15

What is the DOM?

Answer 15

• Document Object Model

- The DOM is a virtual representation of the HTML page

Question 16

Accessing DOM

Answer 16

GET ELEMENT BY ID: let para = document.getElementById(“para2”);

GET ELEMENT BY CLASSNAME: let header = document.getElementsByClassName(“headers”)

GET ELEMENT BY TAGNAME: document.getElementByTagName(“”)

Question 17

Using Query Selectors

Answer 17

you can utilized a pattern similar to CSS selectors (tagname, “.”, or “#”)

let selection = document.querySelector(“#para2”);

// selection.innerText= “blahblahblah”;

// let selection2 = document.querySelector(".para");
let selection2 = document.querySelectorAll(".para");

Question 18

How do we CREATE ELEMENTS DYNAMICALLY in JS?

Answer 18

//step1: creating our new element
let newDiv = document.createElement("div");

//step2: populate our new element with attributes....and stuff
newDiv.id = "newestDiv";
newDiv.setAttribute("title", "new div, who dis?"); //either of these two methods work the same

//step3: create a text node, then append to our new div element
let divText = document.createTextNode("new text node information");
newDiv.appendChild(divText);

//step4: appending our new div element onto an existing element that is currently being displayed
let newSelection = document.querySelector("#para1");
newSelection.appendChild(newDiv);

Question 19

Types of Events in JS?

Answer 19

onsubmit, onchange, click, dblclick, mouseup, mousedown, mouseenter,
mouseleave, mouseout, mouseover, mousemove, and more

(mouseover includes children elements, mouseenter doesn't)
(same with mouseout and mouseleave respectively)

there is also:
keyup, keydown, keypress, cut, paste, change(statechange), submit, etc

Question 20

What is bubbling?

Answer 20

The process of events propagating to their parent elements to trigger even more events of the same type.

So if a click events fires, that click event will be pased to all parents, grandparents, etc to trigger more click event functionality.

Question 21

What is capturing?

Answer 21

The process of events propagating from parent to child; the opposite of bubbling