JavaScript Flashcards
all algorithm are made with 3 parts, what are they?
variable, conditionals, and loops. how to save, decide, and repeat.
What is a script?
is a series of instructions a computer can follow step-by-step
how should you start writing a script?
start with the big picture of what you want to achieve and break down into smaller steps.
- define the goal
- design the script
- code each step
what are 2 ways to design a script
p. 18
1. tasks (flowchart)
2. steps (list)
flowchart keys
generic step (rectangle)
event (hexogon 6 sides)
input or output (slanted rectangle)
decision (diamond)
What is the purpose of variables?
to store values. easier to call upon the information and easier to reuse for future.
How do you declare a variable?
variable-keyword variable-name;
var name;
How do you initialize (assign a value to) a variable?
variable-keyword variable-name = value; var word = "word";
What characters are allowed in variable names?
lower and capital letters, $, _, and numbers, but cannot start.
var is what scope variable keyword
function scope
what is let and const variable keyword function
block scope
What does it mean to say that variable names are “case sensitive”?
score and Score are different
What is the purpose of a string?
for text
What is the purpose of a number?
to calculate and measure stuff, financial stuff.
What is the purpose of a boolean?
for decision making
What does the = operator mean in JavaScript?
assignment operator, it assigns/store the value to the variable. value will correlate with the variable.
What does the = operator mean in JavaScript?
assignment operator, it assigns the value to the variable
How do you update the value of a variable?
with an assignment operator, no need for keyword. variable = value
name = “yay”;
What is the difference between null and undefined?
undefined is never assigned by a user/programmer, it is a result that only the browser/javascript will give.
null is a value and is assigned and meant to on purpose.
Why is it a good habit to include “labels” when you log values to the browser console?
to see what that console log is for and easier to read/know when coming back to it later. makes it clear.
Give five examples of JavaScript primitives.
number, string, boolean, null, undefined.
example of uniary operator
typeof
What data type is returned by an arithmetic operation?
number
What is string concatenation?
adding 2 or more strings to make it into one string
What purpose(s) does the + plus operator serve in JavaScript?
it can add 2 numbers, can add two strings into one
What data type is returned by comparing two values ( less than, greater than, ===, etc)?
boolean
What does the += “plus-equals” operator do?
shorthand for adding the variable with an additional value and the result of that get the new value for the variable.
What are objects used for?
to group together a set of variable and functions to create a model of something that are related.
What are object properties?
they are variable. properties tells us about the object
Describe object literal notation.
it is to create an object. object is in curly braces and the object gets stored in a variable
keyword-variable variable = {
property: key value,
property: key value,
method: key(function-name) value(function)
};
*in object, functions are known as methods
variables are known as property
How do you remove a property from an object?
with delete operator
delete object.property
What are the two ways to get or update the value of a property?
with a dot notation or the bracket notation
how do you read vehicle[‘color’]?
vehicle at string color
[] usually read as at
what is delete?
delete operator
Ex. delete pet.name . delete operator is being used on name property of pet object.
What are arrays used for?
used when working with a list or a set of values that are related to each other. full view of that category
Describe array literal notation.
with an open bracket and closing bracket [ ]
How are arrays different from “plain” objects?
array: number index, know how many data there are, can add data by using method, numerical order
object: property names, cannot know how many property/method there are, can add by using assignment operator, not a numerical order
What number represents the first index of an array?
[0]
What is the length property of an array?
it gives the result of how many values are in an array.
How do you calculate the last index of an array?
length - 1
What is a function in JavaScript?
reusable tool that give directions on what to do/process
Describe the parts of a function definition.
function keyword with the function name(optional) parameters list(s) (optional) opening a function code block {
what to process or the optional return statment
closing a function code block }Describe the parts of a function call.
the function’s name with the arguments(optional if more than one-separated with commas)
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call needs only the funtion name and parentheses, arguments are optional. function definition is basically structuring the function so that it can be used when called. it has what is to be processed once called.
What is the difference between a parameter and an argument?
arguments are the data we are asking to use as an input from a function call.
parameters are the data that is unknown until the function is called with arguments. we take to use it inside the function: a placeholder.
Why are function parameters useful?
it can take on the values of the arguments that were passed to be used in the function. ability to have utibility. provides a functionality of same process but with different data.
What two effects does a return statement have on the behavior of a function?
it will exit the function, codes after the return statment will not executed.
it will produce a value in place of the function call.
What is the purpose of a loop?
to have a condition of iterate trough a number of times. to repeat functionality
What is the purpose of a condition expression in a loop?
to make a stop condition
What does “iteration” mean in the context of loops?
number of time it repeats the code block
When does the condition expression of a while loop get evaluated?
in the beginning, before it executes the while loop code block.
When does the initialization expression of a for loop get evaluated?
only once in the beggining before executing the for loop code block
When does the condition expression of a for loop get evaluated?
on the first time, it will execute after the initialization and, everytime before it executes the code block, but after the final expression on every iteration
When does the final expression of a for loop get evaluated?
before the condition and after the code block
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break;
What does the ++ increment operator do?
it increaments a number by one
How do you iterate through the keys of an object?
by using for…in loop
Why do we log things to the console?
to make sure it does what you are expecting to do. To keep track and know what the ouput is coming out as expected.
What is a “model”?
representation of something
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
list of properties and values.
DOM
Document Object Model, javascript object that is modeling html document contents
What is a DOM Tree?
collection of all the information that conveys one content, children, text content, elements,
Give two examples of document methods that retrieve a single element from the DOM.
getElementById, querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll, getElementsByClassName, getElementsByTagName
Why might you want to assign the return value of a DOM query to a variable?
easier to access or to call
What console method allows you to inspect the properties of a DOM element object?
dir method. console.dir
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
because the document flow, the load order, it will load from top to bottom. it will not have the info to load if script is above since it didn’t load all the body.
What does document.querySelector() take as its argument and what does it return?
takes a string css select, and will return the first element from top to bot
What does document.querySelectorAll() take as its argument and what does it return?
takes the string and will return all the elements in that string, in NodeList.
what is NodeList
array-like object, can’t easily add content like the array.push, push method will not word since NodeList is not a true array. can use like array.
What is the purpose of events and event handling?
the purpose of events is to process how to take action when user interacts with the HTML web page.
event handling 3 steps to trigger JS codes.
1. select the element
2. what even will trigger the response (specify event)
3. execute the code. (call code)
purpose, to be aware of when the action happens, handling allows us to do something when it occures
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
a function passed into another function as argument.
What object is passed into an event listener callback when the event fires?
event object. when event occurs, JS will create an object of that event.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
it is what the event is targeting. place where the even occured from, originated. log out event.target, or MDN
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
handleClick => call back function. name of the function to call, passing the function as an argument/parameter to the addEventListener() method
handleClick() => it will just call the function without there is no argument/parameter. not a call back function. will call the function loads
What is the className property of element objects?
property containing the value of p
How do you update the CSS class attribute of an element using JavaScript?
with className, elementObject.className = value
What is the textContent property of element objects?
property containing the text of element
How do you update the text within an element using JavaScript?
assignment operator
Is the event parameter of an event listener callback always useful?
not always useful, if we know what exact element we want to change.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
complicated. to be readily available in a form we understand
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit, for the form, the addevent should be submit
What does the event.preventDefault() method do?
prevents the default action to be taken.
What does submitting a form without event.preventDefault() do?
it reloads the page, and data input will be lost.
What property of a form element object contains all of the form’s controls.
elements, every form element has elements
What property of a form control object gets and sets its value?
value of form control element
What is one risk of writing a lot of code without checking to see if it works so far?
potential risk is that the code from the beginning might be wrong.
What is an advantage of having your console open when writing a JavaScript program?`
you can check your work in real time
Does the document.createElement() method insert a new element into the page?
no, it only creates the access to DOM
How do you add an element as a child to another element?
appendChild
called on parent and the argument is child
parent.appendChild(child)
What do you pass as the arguments to the element.setAttribute() method?
string with the attribute and the value
What steps do you need to take in order to insert a new element into the page?
createElement, setAttribute and or add textContent, appendChild, if we have something we want to append to is already on the DOM, use querySelector.
What is the textContent property of an element object for?
adding/changing text to Node or retrieve the current text value.
Name two ways to set the class attribute of a DOM element.
setAttribute(), className()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reuse and able to remember easily
What is the event.target?
the element that the event is targeting. property that is a reference to the event that is fired from.
where event originated from
Why is it possible to listen for events on one element that actually happen its descendent elements?
since we query to DOM of the parent, due to event bubbling.
What DOM element property tells you what type of element it is?
tagName <= should use for when targeting element, nodeName <= use for text name?
What does the element.closest() method take as its argument and what does it return?
argument is CSS selector, and return closest ancester.
querySelector looks inward decendents whereas closest looks outward ancestor.
How can you remove an element from the DOM?
remove method, on the object for the DOM element you want to remove
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add to nearest parent/ancestor
What is the event.target?
where the event is originated from,
What is the affect of setting an element to display: none?
it removes the display of the element with that property pair.
gets removed from document flow
What does the element.matches() method take as an argument and what does it return?
takes CSS Selector in a string as an argument and returns boolean, true/false. if it matches the selector with element.
How can you retrieve the value of an element’s attribute?
getAttribute() / method, the argument will be the string of the name of attribute.
At what steps of the solution would it be helpful to log things to the console?
when expecting something to happen and checking if it matches your expectation.
to check when you grab something to assign to variable and checking if the variable is actually storing it
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
will have to add eventListener for each one, it is a code that is not scaleable.
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
will have to manually do if statement for each of the new thing to check
What is JSON?
JS Object Notation, format for rendering data follows JavaScript
What are serialization and deserialization?
serialization: JSON.stringify is an example, making a data into all string and is stored in one location all in a row, in one continuous stream.
deserialization: taking the serialized data and making it into a javascrip object, making efficient accessible.
like packing for a trip, toothbrush, clothes, accessories into one bag.
Why are serialization and deserialization useful?
deserialized data is easier to work with, good for interaction with the data
serializaed is good for getting info
How do you serialize a data structure into a JSON string using JavaScript?
stringify method of the JSON obj
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How do you store data in localStorage?
setItem() method of localStorage
How do you retrieve data from localStorage?
getItem() method of localStorage
What data type can localStorage save in the browser?
only strings
When does the ‘beforeunload’ event fire on the window object?
when the resouses are about to be unloaded, close a tab, refresh tab, close the broswer or crashes.
What is a method?
is a function
A function which is a property of an object. 2 kinds of methods:
instance methods, which are built-in tasks performed by an object instance.
Static methods which are tasks that are called directly on an object constructors.
How can you tell the difference between a method definition and a method call?
in method definition, will have to assign function with the parameter, if needed, and the function code block to the method’s name (property). funtion keyword.
in a method call, you will actually use that method to process what is inside the function code block by calling the property name with () and argument if needed.
Describe method definition syntax (structure).
within an object.
method_name: function () { }
Describe method call syntax (structure).
object.method_name(arguments);
How is a method different from any other function?
a method is a property of an object while function is not. associated/attached with an object,
in order to call a method, need a dot notation and the object.
object.method
What is the defining characteristic of Object-Oriented Programming?
it can have both data (as properties and values) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
able to work with (possibly) complex things in simple ways.
It only displays the relevant attributes of objects and hids the unnecessary details
What does API stand for?
Application Programming Interface
What is the purpose of an API?
to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
What is “this” in JavaScript?
“this” is a keyword and it determines by how a function is called. always a reference to an object.
when it’s being provoked
What does it mean to say that this is an “implicit parameter”?
it is availalbe in a function’s code block even though it was never included in the function’s parameter list or declared with “var”
it’s alway there, able to get the value of it.
When is the value of “this” determined in a function; call time or definition time?
it is determined in the call time.
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);
}
};nothing, since it’s not called yet.
Given the previous (card #137) character object, what is the result of the following code snippet? Why?
character.greet();
It’s-a-me, Mario!
because it is using this object’s (character) firstName.
since we invoked character.greet();
Given the previous (card# 137) character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
it will console.log “It’s-a-me, undefined!”
because there is no firstName property in hello object?
hello() is free floating function. when there is no object, it will try to access window and windows doesn’t have a property named firstName.
How can you tell what the value of “this” will be for a particular function or method definition?
use the object and the method without the parantheses
can’t guarantee it’s going to be anything.
How can you tell what the value of “this” is for a particular function or method call?
use the object and the method with the parantheses
whatever is the left of the dot.
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal inheritance). In prototypal inheritance, an object “inherits” properties from another object via the prototype linkage.
move properties and methods that we’d like to reuse into a “prototype” object and then tell other objects to simply delegate to that “prototype” object when they aren’t able to perform the required tasks themselves
What is a prototype in JavaScript?
an object that is associated with every functions and objects by default. where function’s prototype property is accessible and modifiable and object’s prototype property (aka attribute) is not visible. every function includes prototype object by default.
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects. created a tool that can be passed to be used by others.
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?
these methods are defined on a “prototype” object and arrays and strings simply borrow those methods when they’re needed. will have a prototype that will have the shared behavior
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype object. it will search it’s nearest paraent and nearest parent and so on. prototypal chain. will look at prototypal chain ancestor.
What does the “new” operator do?
creates an instance of a user-defined object type or one of the built-in object types that has a constructor function.
- makes an empty object
- run the function block
- it returns an object if no return is specified.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property.
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
object instanceof class(constructor function)
What is a “callback” function?
function passed arond as a variable inside function to be called later
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?
setTimeout()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0, it runs immediately or more accurately, the next event cycle
action gets pushed into que immediately
What do setTimeout() and setInterval() return?
timeoutID and intervalID, which is a positive integer
What is AJAX?
Asynchronous JS and XML. allows you to update parts of the DOM of an HTML page without need for a full page refresh
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
new “XMLHttpRequest” ()
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
‘load’ event
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance. they share a prototype
How do you remove the last element from an array?
pop() method
How do you round a number down to the nearest integer?
Math.floor(). Math.trunc = will chop the decimals
How do you generate a random number?
Math.random()
How do you delete an element from an array?
splice
How do you append an element to an array?
push
How do you break a string up into an array?
split
Do string methods change the original string? How would you check if you weren’t sure?
string methods do not change. use console.log
Roughly how many string methods are there according to the MDN Web docs?
a lot refer to string in MDN
Is the return value of a function or method useful in every situation?
NOT ALL, push and unshift are not really useful
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
> , >=, <, <=, ===, !==
What data type do comparison expressions evaluate to?
BOOLEAN true/false
What is the purpose of an if statement?
to check if the condition stated in the if statement is true and if true, process the code inside the conditional code block. evaluates/checks a condition, if true, any statement in the subsequent code block are executed.
Is else required in order to use an if statement?
no it is not required, else is used when the condition in the if statment is false.
Describe the syntax (structure) of an if statement.
if (condition) {
}
What are the three logical operators?
and &&, or ||, not !
How do you compare two different expressions in the same condition?
by using the logical operator &&, ||
does the condition in if statment have to be true/false
no, it can also look at truthy/falsy values
