mode 5 JS III Flashcards
What is a scope?
- the memory space where a variable exists
- it has NOTHING to do with permissions, nothing to do with access levels.
What scopes does JavaScript support?
- 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
Hww do I declare a variable in JS?
- var only enforce the “global” and “function” scopes
- let enforces all 3 scopes
- const same as “let” BUT it makes the value immutable
Scope access
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
What is Hoisting?
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).
How do we work with VARIABLES WITH THE SAME NAME (but different scopes)
- 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
Using VARIABLES WITH SAME NAME AND THE SAME SCOPE
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
DOES OVERLOADING EXIST IN JS?
no, overloading doesn’t exist in JS like you’d expect
What is an anonymous function?
ANONYMOUS FUNCTION: a function without a name
What is a callback function?
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
SELF-INVOKING FUNCTIONS
What is an IIFE?
It is similar to initializer block
-Immediately Invoked Function Expression (aka Self-invoking function)
An IIFE is a function that calls itself.
What is a NESTED FUNCTION
A function inside another function
What is CLOSURE in JS?
- Closure are a way to create encapsulation in JS.
- A closure is a self invoking anonymous function that returns an inner function
What is Arrow Notation?
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
What is the DOM?
- Document Object Model
- The DOM is a virtual representation of the HTML page
Accessing DOM
GET ELEMENT BY ID: let para = document.getElementById(“para2”);
GET ELEMENT BY CLASSNAME: let header = document.getElementsByClassName(“headers”)
GET ELEMENT BY TAGNAME: document.getElementByTagName(“”)
Using Query Selectors
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");
How do we CREATE ELEMENTS DYNAMICALLY in JS?
//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);
Types of Events in JS?
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
What is bubbling?
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.
What is capturing?
The process of events propagating from parent to child; the opposite of bubbling
