Objects, Functions, and Classes

Question 1

two types of exports

Answer 1

named

default

Question 2

considerations for using JS modules

Answer 2

the value of an imported feature is read only; it cannot be modified, but its properties can be changed (like const)

features are imported as live bindings. if the value of an imported feature changes in the source module, it is updated in the target module

when importing a feature from a module, a single dot (.) means the current directory, and two dots (..) means the parent directory

module imports are moved or hoisted to the beginning of the current scope; this means that a module can be imported anywhere in the module

Question 3

decorator

Answer 3

wrapper function that can be used to extend the behavior of another function. it receives the original function as a parameter and returns a new function with the extended behavior.

Question 4

in order to decorate a class or class method, it must be prefixed with…

Answer 4

@nameOfDecorator

Question 5

when a class method is decorated, the decorator receives three parameters…

Answer 5

target, name, and descriptor

Question 6

when a class is decorated, the decorator only receives…

Answer 6

the target parameter

Question 7

property descriptor of an object’s property

Answer 7

can be used in a decorator to modify its attributes; for instance, the writable attribute can be set to false to make a class read only

Question 8

using property descriptor

Answer 8

each object property has a property descriptor
method to return a property descriptor:
Object.getOwnPropertyDescriptor();

value: refers to the value of the property
writable: is true if the value of the property may be changed
configurable: true if the property descriptors of the property can be changed
enumerable: attribute is true if the property is appears during the enumeration of the object’s properties

Question 9

scope

Answer 9

which variables can be accessed

global
function
block

Question 10

hoisting

Answer 10

when a variable or function is moved to the top of their scope

Question 11

asynchronous

Answer 11

non blocking code

Question 12

some standard events

Answer 12

click
change
focus
input
keydown
keyup
load
mousedown
mouseup
resize
scroll
submit

Question 13

in order to use custom event…

Answer 13

you have to dispatch it

Question 14

two ways to handle events

Answer 14

addEventListener() - method of the EventTarget object that allows setting up a function that is called whenever the specified event is delivered to the target

onevent handler - property of an element (for example ‘onclick’) can be assigned to a single event handler function that is called when the event occurs

Question 15

considerations for using addEventListener()

Answer 15

it’s the more common method, lots of flexibility

target: any object that supports events, but common targets are Element, Document, and Window
parameters: the method can also accept an options object and useCapture (true or false) as parameters. the options objects represents the characteristics of the event listener
benefits: method allows adding more than a single handler for a particular event. it also allows controlling the phase (bubbling or capturing) when the listener is activated)

Question 16

commonly used DOM event properties

Answer 16

target: refers to an element that triggered an event
currentTarget: refers to an element where the event listener is attached
clientX: horizontal coordinate of mouse click
clientY: vertical coordinate of mouse click

Question 17

how to remove event listener

Answer 17

removeEventListener

Question 18

considerations for registering on even handlers

Answer 18

programmatic triggers: an even handler can be called programmatically. if ‘button’ is an element that represents a button, button.onclick() can be called

non element objects: non element objects like window, document, and XMLHttpRequest also support the use of onevent handlers

this keyword: when the handler is invoked, the this keyword is set to the DOM element on which the handler is registered

Question 19

event propagation

Answer 19

capturing: browser checks for an event handler for the fired event on the outermost ancestor and runs it. moving from top to bottom the same is done for each next element until the browser reachers the target element.
bubbling: the browser checks for an event handler for the fired event on the target element and runs it. moving from bottom to top, the same is done for each immediate ancestor element until the browser reaches

Question 20

6 fundamental DOM data types

Answer 20

Document
Node
Element
NodeList
Attribute
NamedNodeMap

Question 21

some methods to retrieve elements from the DOM

Answer 21

getElementById()
querySelector()
querySelectorAll()

Question 22

some methods to manipulate the DOM

Answer 22

appendChild()
setAttribute()

some properties:
innerHTML
style

Question 23

window

Answer 23

this object represents the browser window containing a DOM document and exposes several properties and methods

location: location.href - returns the URL of the current window / assigning a string URL to this property redirects the browser to the URL
history: contains the browser session history which contains methods for moving forward and backward etc

open() - this method can be used to open a link in a current or new window/tab

scrollTo() used to scroll to a specific location in the document by providing x and y coordinates

Question 24

css selectors

Answer 24

elements: string (e.g. ‘h3’)
id: pound (e.g. #subheader)
class: period (e.g. .bold)

Question 25

to retrieve elements by class or tag

Answer 25

getElementsByClassName() (string of class name)
getElementsByTagName()

Question 26

panels for chrome devtools

Answer 26

elements: used to inspect and modify the DOM and CSS
console: used to execute JS code and view logged messages
sources: three parts –> file navigator, code editor, JS debugging
scope pane: in the JS debugging pane can be used to check the values of variables
watch pane: monitor values over time

network: used to check the network activity of a web page; allows for inspecting whether resources are actually being downloaded or uploaded; used to inspect the properties of each resource

Question 27

network panel

Answer 27

resources
properties
network log

Question 28

main API

Answer 28

DOM API
Fetch API
History API
Geolocation API
Canvas API
URL API
Web Storage API