JavaScript Flashcards
(120 cards)
1
Q
• What is the purpose of a boolean?
A
To give us true or false values. -if this-then this
or not this
2
Q
• What does the = operator mean in JavaScript?
A
Assigns a value to a variable
3
Q
What does string concatenation mean?
A
take two strings and adding them
4
Q
what does the + plus operator do?
A
+= takes right value and adds to left variable and new value is asigned to left variable
5
Q
• What data type is returned by an arithmetic operation?
A
number
6
Q
• What data type is returned by comparing two values (, ===, etc)?
A
boolean
7
Q
• Describe the parts of a function call.
A
Function name, parenthesis, and any arguments
8
Q
Why are parameters useful?
A
You can think of a parameter as a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function’s code block is run, the parameter is will be holding the value of the argument. Here’s an example of passing the string “friend” as an argument to sayHello.
9
Q
• What two effects does a return statement have on the behavior of a function?
A
a return stops the function from running further.
return xxx;
you can’t write more code after
and it has a return value if you run it
Causes the function to produce a value we can use in our program.
Prevents any more code in the function’s code block from being run.
10
Q
what does iteration mean?
A
single run of the loops code black?
11
Q
• When does the condition expression of a while loop get evaluated?
A
12
Q
• When does the initialization expression of a for loop get evaluated?
A
Before the loop begins
Before Anything
13
Q
when does the condition expression of the for loop get evaluated?
A
before each iteration, after initialization.
14
Q
• When does the final expression of a for loop get evaluated?
A
after the last iteration
15
Q
• Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
A
Break
16
Q
splice()
A
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
17
Q
slice()
A
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
slice()
slice(start)
slice(start, end)
18
Q
Math.random()
A
Return value
A floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).
19
Q
Math.floor(Math.random() * x)
A
function getRandomInt(max) {
return Math.floor(Math.random() \* max);
}
console.log(getRandomInt(3)); // expected output: 0, 1 or 2
20
Q
.unshift(x)
A
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5)); // expected output: 5
console.log(array1); // expected output: Array [4, 5, 1, 2, 3]
21
Q
shift()
A
The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array. const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1); // expected output: Array [2, 3]
console.log(firstElement); // expected output: 1
22
Q
split(x)
A
The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method’s call.
split()
split(separator)
split(separator, limit)
const str = ‘The quick brown fox jumps over the lazy dog.’;
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over the lazy dog."]
23
Q
Loop iteration (FOR)
A
You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea “Go five steps to the east” could be expressed this way as a loop:
for (let step = 0; step \< 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
24
Q
For Loops
A
A for statement looks as follows:
for ([initialExpression]; [conditionExpression]; [incrementExpression])
statement
Copy to Clipboard
When a for loop executes, the following occurs:
The initializing expression initialExpression, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statements execute. Otherwise, the for loop terminates. (If the conditionExpression expression is omitted entirely, the condition is assumed to be true.)
The statement executes. To execute multiple statements, use a block statement ({ … }) to group those statements.
If present, the update expression incrementExpression is executed.
Control returns to Step 2.
25
A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:
he condition test occurs before statement in the loop is executed. If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops, and control is passed to the statement following while.
To execute multiple statements, use a block statement ({ ... }) to group those statements.
Example 1
The following while loop iterates as long as n is less than 3:
let n = 0;
let x = 0;
while (n \< 3) {
n++;
x += n;
}
26
# DOM
* What console method allows you to inspect the properties of a DOM element object?
console.dir('variable)
27
* Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
because it has to go through all the hetml
28
* What does document.querySelector() take as its argument and what does it return?
it takes a string (class etc) and returns the first instance of it
reminiscent of a css selector
29
* What does document.querySelectorAll() take as its argument and what does it return?
takes argument of string, takes the chunk of whatever class or attribute it is assigned too
CSS selecter
Return value is a Node list, what we would call an array like object
30
* What is a DOM Tree?
* An organization representing the html site or a chunk of the page, built as JS objects for the page
31
Node list
example of an array structure of a list of data, not an array, and not supposed to change it after it's been created.
It is not a Dom Element
just a collection of Dom Elements
32
why the $dollarSign?
Names we choose can make or break your code.
format that is used for variables that contain dom elements. Not variables with data pulled form something
like not $class
33
3 different kinds of events
INTERACTIONS CREATE EVENTS
Events occur when users click or tap on a link, hover or swipe over an element, type on the keyboard, resize the window, or when the page they requested has loaded.
EVENTS TRIGGER CODE
When an event occurs,
or fires, it can be used
to trigger a particular function. Different code can be triggered when users interact with different parts of the page.
CODE RESPONDS TO USERS
In t he last chapter, you
saw how the DOM can
be used to update a page. l The events can trigger the
~
1
'
j
I
1
-kinds of changes the DOM
is capable of. This is how a
34
How events trigger JS code
1.Select t he **element** node(s) you want the script to respond to.
## Footnote
For example, if you want to trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a DOM query (see Chapter 5).
2. Indicate which **e****ve****nt** on the selected node(s) will trigger the response.
Programmers call this binding an event to a DOM node.
The previous two pages showed a selection of the popular events that you can monitor for.
3State the **code** you want to run when the event occurs.
W hen the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function
35
In this example, the event listener appears on the last line of the JavaScript. Before you write an event listener, two things are put in place:
1. If you use a named function when the event fires on your chosen DOM node, write that function first. (You could also use an anonymous function.)
2. The DOM element node(s) is stored in a variable. Here the text input (whose id attribute has a value of username) is placed into a variable called el Username
The addEventli stener () method takes three properties:
i) The event you want it to listen for. In this case, the b1ur event.
ii) The code that you want it
to run when the event fires.
In this example, it is the checkUsername(} function. Note that the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads (rather than when the event fires).
iii) A Boolean indicating how events flow, see p260. (This is usually set to false.)
CD ® ® BROWSER SUPPORT
Internet Explorer 8 and earfier versions of IEdo not support the addEventli stener() method, but they do support a method called attachEvent(} and
you will see how to use this on p258.
Also, as with the previous example, IE8 and older versions of IE would not know what this referred to in the conditional statement.·An alternative approach for dealing with it is shown on p270.
EVENT NAMES
Unlike the HTML and traditional
DOM event handlers, when you specify the name of the event that you want to react to, the event name is not preceded by the word "on".
If you need to remove an event listener, there is a function called removeEventLi stener(} which removes the event listener from the specified element (it has the same parameters).
36
Add event listener
37
CallBack function
38
What is the purpose of events and event handling?
* Eventhandlers handle the response to that event.
39
capture vs. bubbling
use bubbles
don't need to use boolean false
bubbles find an element like button but uses the whole html
cpture does the oppostie, zero's in dont use
40
* What method of element objects lets you set up a function to be called when a specific type of event occurs?
You can add an addeventlister
41
callback functions
allow us cto create a function to have it be called when the event actually happens
42
* What object is passed into an event listener callback when the event fires?
the object that will only be called by the browser, the eventhandler is being called by the browser say when a click happens, we dont call the function thebrowser does
the ‘event’ i
43
* What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
target property of the event object
target property stores the dom element and also the start point of when the event occured.
The element of where the event actually originated from
like on a button element, if you span the text of the button in html, it might show you text versus the button element in the console. click me!
click me!
USE SPAN IF you dont want to make 1000's event listeners and make one
44
What is the difference between two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
First one: gets called when the button is clicked. sets up event lister on this element, that when this element is clicked,
(function definition)
second one: gets called the second you press enter, that function is called.
will say that it is undefined,
point is function being returned (aka func (event) console.log….}
returns undefined by itself - but if you
45
* Give four examples of CSS transform functions.
* The **translateY()** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) repositions an element vertically on the 2D plane. Its result is a data type.
* * The **rotate()** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data type.
* [matrix()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)
* Describes a homogeneous 2D transformation matrix.
* * [scale()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)
* Scales an element up or down on the 2D plane.
*
46
What does the transform property do?
The **transform** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS [visual formatting model](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model).
scale, skew rotate or translate
puts where element is on coordinnate plane x, y ,z
these are simialr to positiong, but moving where origin point
coordinate point starts in top left corner
47
* What is the className property of element objects?
it allows to get or set the attribute
48
* How do you update the CSS class attribute of an element using JavaScript?
element. className = newValue
49
* What is the textContent property of element objects?
textcontent property, set whats currently there or update
50
* Is the event parameter of an event listener callback always useful?
51
How do you update the text within an element using JavaScript?
element.textcontent = “string”
52
* Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
53
* What event is fired when a user places their cursor in a form control?
FOCUS METHOD
54
* What event is fired when a user's cursor leaves a form control?
BLUR
55
* What event is fired as a user changes the value of a form control?
56
* What event is fired when a user clicks the "submit" button within a ?
SUBMIT
57
* What does the event.preventDefault() method do?
prevents default action on form, meaning, when input is done, dont refresh or something!
58
* What does submitting a form without event.preventDefault() do?
59
* What property of a form control object gets and sets its value?
60
* What does submitting a form without event.preventDefault() do?
It refreshes the page, because the action attriute, if the attribute is ommitted, the data weill just be sent baack to itself
61
* What property of a form element object contains all of the form's controls.
elements
62
* What property of a form element object contains all of the form's controls.
elements
63
* What property of a form control object gets and sets its value?
property.value (accessed using the property name VALUE
64
* What property of a form control object gets and sets its value?
property.value (accessed using the property name VALUE
65
* What is one risk of writing a lot of code without checking to see if it works so far?
SHITTY , WHEN YOU dont check you dont know what went wrong
66
* What are serialization and deserialization?
Converting a string to a native object is called *deserialization*, while converting a native object to a string so it can be transmitted across the network is called *serialization*.
Converting a string to a native object is called *deserialization*, while converting a native object to a string so it can be transmitted across the network is called *serialization*.
67
serialization
takes data and makes it easier for other programs to compute
deserialized is the opposite
68
JSON Stringify() arguments are objects and arrays
The **JSON.stringify()** method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
```
console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"
```
69
Deserialize → JSON.parse()
The **JSON.parse()** method parses a JSON string, constructing the JavaScript value or object described by the string. An optional **reviver** function can be provided to perform a transformation on the resulting object before it is returned.
returns objects and arrays
```
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
```
```
console.log(obj.count);
// expected output: 42
```
```
console.log(obj.result);
// expected output: true
```
70
* What is a **method?**
a methid is an object having propert
const obj = {foo: function() {// ...},bar: function() {// ...} }
**object.foo()**
71
* How can you tell the difference between a method *definition* and a method *call*?
method definition show actula fucntion definition where call equals object.add()
72
* Describe method **definition** syntax (structure).
you have a function definition being assigned to an object
within the object, its assigned after the :
if its after the method already exists,
syntax is like this var object = {
add: foo()
this is the opposite var object {
add = create {
function
73
* Describe method **call** syntax (structure).
const obj = {foo: function() {// ...},bar: function() {// ...} }
**object.foo()**
74
* How is a method different from any other function?
method is stored to properties in objects
* A **method** is a [function](https://developer.mozilla.org/en-US/docs/Glossary/Function) which is a [property](https://developer.mozilla.org/en-US/docs/Glossary/property) of an [object](https://developer.mozilla.org/en-US/docs/Glossary/Object). There are two kind of methods: *Instance Methods* which are built-in tasks performed by an object instance, or [*Static Methods*](https://developer.mozilla.org/en-US/docs/Glossary/Static_method) which are tasks that are called directly on an object constructor.
75
* What is the **defining characteristic** of Object-Oriented Programming?
-**objects can contain both data (as properties) and behavior (as methods).**
**objects can make use of data stored in properties, you don't always need a parameter, because the method might just return whatever you put in the fucntion code block, like you dont need x, y if you are just returning ‘woof’**
76
* What are the four "principles" of Object-Oriented Programming?
* What are the four "principles" of Object-Oriented Programming?
* In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming) (OOP), **encapsulation** refers to the bundling of data with the methods that operate on that data, or the restricting of direct access to some of an object's components.[[1]](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)#cite_note-Rogers01-1) Encapsulation is used to hide the values or state of a structured data object inside a [class](https://en.wikipedia.org/wiki/Class_(computer_programming)), preventing direct access to them by clients in a way that could expose hidden implementation details or violate state invariance maintained by the methods.
* In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), **inheritance** is the mechanism of basing an [object](https://en.wikipedia.org/wiki/Object_(computer_science)) or [class](https://en.wikipedia.org/wiki/Class_(computer_programming)) upon another object ([prototype-based inheritance](https://en.wikipedia.org/wiki/Prototype-based_programming)) or class ([class-based inheritance](https://en.wikipedia.org/wiki/Class-based_programming)), retaining similar [implementation](https://en.wikipedia.org/wiki/Implementation). Also defined as deriving new classes ([sub classes](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming)#Subclasses_and_superclasses)) from existing ones such as super class or [base class](https://en.wikipedia.org/wiki/Fragile_base_class) and then forming them into a hierarchy of classes. In most class-based object-oriented languages, an object created through inheritance, a "child object", acquires all the properties and behaviors of the "parent object" , with the exception of: [constructors](https://en.wikipedia.org/wiki/Constructor_(object-oriented_programming)), destructor, [overloaded operators](https://en.wikipedia.org/wiki/Operator_overloading) and [friend functions](https://en.wikipedia.org/wiki/Friend_function) of the base class.
* In [programming language theory](https://en.wikipedia.org/wiki/Programming_language_theory) and [type theory](https://en.wikipedia.org/wiki/Type_theory), **polymorphism** is the provision of a single [interface](https://en.wikipedia.org/wiki/Interface_(computing)) to entities of different [types](https://en.wikipedia.org/wiki/Data_type)[[1]](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)#cite_note-1) or the use of a single symbol to represent multiple different types.[[2]](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)#cite_note-Luca-2) The concept is borrowed from a principle in biology where an organism or species can have many different forms or stages.[[3]](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)#cite_note-Moved-3)
* And Abstration
77
* What is "abstraction"?
simplifying more complex things
78
* What does API stand for?
* What are the four "principles" of Object-Oriented Programming?
* In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming) (OOP), **encapsulation** refers to the bundling of data with the methods that operate on that data, or the restricting of direct access to some of an object's components.[[1]](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)#cite_note-Rogers01-1) Encapsulation is used to hide the values or state of a structured data object inside a [class](https://en.wikipedia.org/wiki/Class_(computer_programming)), preventing direct access to them by clients in a way that could expose hidden implementation details or violate state invariance maintained by the methods.
* In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), **inheritance** is the mechanism of basing an [object](https://en.wikipedia.org/wiki/Object_(computer_science)) or [class](https://en.wikipedia.org/wiki/Class_(computer_programming)) upon another object ([prototype-based inheritance](https://en.wikipedia.org/wiki/Prototype-based_programming)) or class ([class-based inheritance](https://en.wikipedia.org/wiki/Class-based_programming)), retaining similar [implementation](https://en.wikipedia.org/wiki/Implementation). Also defined as deriving new classes ([sub classes](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming)#Subclasses_and_superclasses)) from existing ones such as super class or [base class](https://en.wikipedia.org/wiki/Fragile_base_class) and
* abstraction
79
What is the purpose of an API?
* An API (**Application Programming Interface**) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface.
* the DOM is an API
* it is not an actual document, it is a set of tools to be able to make changes to the html, becasue the actual actions and actual outcomes the user see,s , is way too complicated. Basically we can create elemt method, but we don't actually know how complicated create Element actually is
80
* What is this in JavaScript?
Refers to the object that you're working in currently, where this. function is being invoked from
variable whos calue is theobject you are currently working in
81
* What does it mean to say that this is an "implicit parameter"?
present variable within even though its not directly stated, doesn't need declaration.
this is different from **explicit** parameters: it's an [**implicit**](https://www.merriam-webster.com/dictionary/implicit) parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var.
82
* *When* is the value of this determined in a function; **call time** or **definition time?**
**the value of this is determined when the function is called**, not when it is defined. By default, when you call a function, it's this will be given the value of the global window object. Try the following function yourself in the browser console.
This only has a value when a function is running
or invoked. its not about how its written, you must remember to call it to find out what the value actually is, to check your work
83
```
* What does this refer to in the following code snippet?var character = { firstName: 'Mario', greet: function () { var message = 'It\'s-a-me, ' + this.firstName + '!'; console.log(message); } };
*
```
Since it hasnt been called yet, this. does not have a value yet.
so this is nothing
84
* Given the above character object, what is the result of the following code snippet? Why?character.greet();
character . greet comes back with its-a-me, Mario; because we are using thie the message and this.firstname, and its been called with the character object to the left of the method call
this is character, and greet function means it uses firstname value of this object
85
* Given the above character object, what is the result of the following code snippet? Why?var hello = character.greet; hello();
I took greet method and plugged into a new variable, when i call hello, this refers to the object to the left of this. dot. hello has no dot
since we reassigned the value of character.greet() to hello, we then implicitly do not have the proper character reference, hint if there is no object to the left of the method call it could be undefined/. output was this is me, undefined!
window.hello() the window has no first name
86
* How can you tell what the value of this will be for a particular function or method **definition**?
ZERO, WE DON'T KNOW
just like explicit parameters, **the value of this is determined when the function is called**, not when it is defined. By default, when you call a function, it's this will be given the value of the global window object
87
How can you tell what the value of this is for a particular function or method **call**?
There is a simple shortcut that you can use to remember what this is: **Find where the function is called and look for an object to the left of the dot.** If you can't see where the function (or method) is called, then **you cannot say for sure what the value of this is**.
88
this. is implicit
**Definition of** ***implicit***
**1a****:**capable of being understood from something else though unexpressed**:** [IMPLIED](https://www.merriam-webster.com/dictionary/imply)an *implicit* assumptionStill another problem for Middle America was how corporations … were allowed to breach the *implicit* social contract of the postwar era.
it's an [**implicit**](https://www.merriam-webster.com/dictionary/implicit) parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var.
89
So if this is a "parameter", then how could its value ever be changed?
We assign the function as a method of an object. Along with the above function definition,
function thisIsWindow() { if (this === window) { return 'yep' } else { return 'nope' } } thisIsWindow(); //
change:
var pet = { type: 'doggo', rating: 12}; pet.thisIsWindow = thisIsWindow; pet.thisIsWindow(); // "nope"
90
There is a simple shortcut that you can use to remember what this is: **Find where the function is called and look for an object to the left of the dot.** If you can't see where the function (or method) is called, then **you cannot say for sure what the value of this is**.
91
* this is an **implicit parameter** of **all JavaScript functions**.
* the value of this is determined at **call time**.
* the value of this can be recognized as **"the object to the left of the dot"** when the function is called (as a method).
* if there is no value to the left of the dot when the function is called, then **by default, this will be the global window object**.
* if you cannot see the function being called, then **you do not know what the value of this will be**.
92
Window object
JS is object oriented
say you plug in
var a = 7
that will come out undefined
but if you do window.a
answer is 7
93
* What kind of inheritance does the JavaScript programming language use?
The concept is given the name "inheritance" because it is similar to genetics. Parent organisms give traits to their offspring through their DNA. JavaScript includes a specific kind of inheritance known as [prototype-based (or prototypal)](https://en.wikipedia.org/wiki/Prototype-based_programming) inheritance. JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), **inheritance** is the mechanism of basing an [object](https://en.wikipedia.org/wiki/Object_(computer_science)) or [class](https://en.wikipedia.org/wiki/Class_(computer_programming)) upon another object ([prototype-based inheritance](https://en.wikipedia.org/wiki/Prototype-based_programming)) or class ([class-based inheritance](https://en.wikipedia.org/wiki/Class-based_programming)), retaining similar [implementation](https://en.wikipedia.org/wiki/Implementation). Also defined as deriving new classes ([sub classes](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming)#Subclasses_and_superclasses)) from existing ones such as super class or [base class](https://en.wikipedia.org/wiki/Fragile_base_class) and then forming them into a hierarchy of classes. In most class-based object-oriented languages, an object created through inheritance, a "child object", acquires all the properties and behaviors of the "parent object" , with the exception of: [constructors](https://en.wikipedia.org/wiki/Constructor_(object-oriented_programming)), destructor, [overloaded operators](https://en.wikipedia.org/wiki/Operator_overloading) and [friend functions](https://en.wikipedia.org/wiki/Friend_function) of the base class. Inheritance allows programmers to create classes that are built upon existing classes,[[1]](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming)#cite_note-1) to specify a new implementation while maintaining the same behaviors ([realizing an interface](https://en.wikipedia.org/wiki/Class_diagram#Realization/Implementation)), to reuse code and to independently extend original software via public classes and [interfaces](https://en.wikipedia.org/wiki/Interface_(object-oriented_programming)). The relationships of objects or classes through inheritance give rise to a [directed acyclic graph](https://en.wikipedia.org/wiki/Directed_acyclic_graph).
An inherited class is called a **subclass** of its parent class or super class. The term "inheritance" is loosely used for both class-based and prototype-based programming, but in narrow use the term is reserved for class-based programming (one class *inherits from* another), with the corresponding technique in prototype-based programming being instead called [*delegation*](https://en.wikipedia.org/wiki/Delegation_(object-oriented_programming)) (one object *delegates to* another).
94
* What is a prototype in JavaScript?
what is delegating to what?
yakko, wakko, and dot are delegating to the prototype to do that behavior
prototype is object or behavior can be accessed by all instances if objects that refer to protoype
JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
Prototypal inheritance in JavaScript a fairly simple concept (especially compared to this). The ultimate goal is to move properties and methods that we'd like to reuse into a ["prototype"](https://www.merriam-webster.com/dictionary/prototype) object and then tell other objects to simply [delegate (verb)](https://www.merriam-webster.com/dictionary/delegate) to that "prototype" object when they aren't able to perform the required tasks themselves.
Yep. Prototypes. As mentioned before, a JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
95
* How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
let's look at an array's prototype. There's a shed load of functionality baked in. Some of it you are already familiar with. It turns out arrays don't actually *have* the methods that you've come to know. Instead, those methods are defined on a "prototype" object and arrays simply *borrow* those methods when they're needed.
96
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
javascript looks o the prototype that is either assigned to all objects that match the particular parts of the object.
Object.setPrototypeOf(doggo, petPrototype)
var doggo = {
rating: 11,
type: 'good boi',
sound: document.querySelector('audio#bork')
};
var kitteh = {
rating: 12,
type: 'floofy kitty',
sound: document.querySelector('audio#mrow')
};
var petPrototype = {
speak: function () {
this. sound.currentTime = 0;
this. sound.play();
},
getDescription: function () {
var description = this.rating + ' out of 10 ' + this.type;
return description;
}
};
Object.setPrototypeOf(doggo, petPrototype);
Object.setPrototypeOf(kitteh, petPrototype);
97
prototype
tree effect
god creates 'animals that can breath
-→ animals who give life birth
in this case, you could put all animals who have lungs as the starting point, then whatever animals who give live birth so all mammals, so horse
98
prototype syntax
Object.setPrototypeOf(obj, prototype)
[Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf#parameters)
obj
The object which is to have its prototype set.
prototype
The object's new prototype (an object or [_null_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)).
[Return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf#return_value)
The specified object.
your specific object does not need the property and method within its object, if you set a parent object with like describe: function() {
return this.name)}
then → Object.setPrototype(doggo, prototype)
99
* What does the new operator do?
1. create a blank, plain JS object -, calls it **new instance, sets prototype of object to be in constructor function**
**2.** Points new instance prototype to obkect constructor func proto property
3. this. or \_proto\_ Object that is created is returned instead.
returns object
If you make a constructor, you're not making a return
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
**Creates a blank, plain JavaScript object. For convenience, let's call it newInstance.**
**Points newInstance's [[Prototype]] to the constructor function's prototype property.**
**Executes the constructor function with the given arguments, binding newInstance as the this context (i.e. all references to this in the constructor function now refer to newInstance).**
**If the constructor function returns a non-primitive, this return value becomes the result of the whole new expression. Otherwise, if the constructor function doesn't return anything or returns a primitive, newInstance is returned instead. (Normally constructors don't return a value, but they can choose to do so to override the normal object creation process.)**
100
* What property of JavaScript functions can store shared behavior for instances created with new?
Protoype property
that prototype property stores an object,
101
What does the instanceof operator do?
object then function def
new Obj instanceof Object();
102
How to create objects quick with brackets
// four variables are created and assigned in a single go,// separated by commasconst myObj = new Object(), str = 'myString', rand = Math.random(), obj = new Object();myObj.type = 'Dot syntax';myObj['date created'] = 'String with space';myObj[str] = 'String value';myObj[rand] = 'Random Number';myObj[obj] = 'Object';myObj[''] = 'Even an empty string';console.log(myObj);
103
the new operator example
The **new operator** lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
## Footnote
```
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
```
const car1 = new Car('Eagle', 'Talon TSi', 1993);
```
console.log(car1.make);
// expected output: "Eagle"
```
104
Creating an object with a user-defined constructor function requires two steps:
105
The **instanceof operator** tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
106
create new Object
JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an [_object initializer_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer). Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the new operator.
[Using object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#using_object_initializers)
Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.
The syntax for an object using an object initializer is:
const obj = {property\_1: value\_1,// property name may be an identifier...2: value\_2,// or a number...// ...,'property n': value\_n // or a string};
107
What is a "callback" function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Here is a quick example:
function greeting(name) { alert('Hello ' + name); } function processUserInput(callback) { var name = prompt('Please enter your name.'); callback(name); } processUserInput(greeting);
Copy to Clipboard
108
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
take an action delay
109
How can you set up a function to be called repeatedly without using a loop?
SetInterval()
110
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
111
What do setTimeout() and setInterval() return?
setTimeOut() - numeric value
112
What is parseInt()
Description. The parseInt function converts its first argument to a string, parses that string, then returns an integer or NaN . If not NaN , the return value will be the integer that is the first argument taken as a number in the specified radix .
113
Difference between slice() smf substring()
and substr()
With slice(), when you enter a negative number as an argument, the slice() interprets it as counting from the end of the string. With substring(), it will treat a negative value as zero.
const sentence = 'Mastering JS is a very helpful website'; sentence.slice(-7); // 'website' sentence.substring(-5, 12); // 'Mastering JS' sentence.slice(0, -26); // 'Mastering JS'
substr() extracts parts of a string, beginning at the character at the specified position, and returns the specified number of characters.
114
!! ==
If you want to know whether any value is true or false in a Boolean sense, you can print it out by prepending !! to it. A single ! will negate a Boolean value, while !! provides a double negative, and therefore prints out the Boolean value of any value: !!"" false !!"hello" true
115
img {max-width: 100%;height: auto;}
## Footnote
The max-width of 100% will make sure the image is never wider than the container it is in, and the height of auto will make the image keep its original aspect ratio.
116
VOCAB: GET Request
An internet request for data. Sent from a client to a server.
**Response**: A server's response to a request. Sent from a server to a client. A response to a GET request will usually include data that the client needs to load the page's content.
Response is a call back
117
5 to the power of 2 js syntax
```
const fiveSquared = 5 \*\* 2;
const eightCubed = 8 \*\* 3;
```
118
nth of type
you have to specify 3n will give you every 3rd, or every 2nd
119
:; selection
You can make whatever you like highlight on a page a certain color
120
Escape sequences ‘guy\’s'
* \' =\> single quote
* \" =\> double quote
* \\ =\> backslash
* \n =\> newline
* \r =\> carriage return
* \t =\> tab
* \b =\> backspace
* \f =\> form feed
