Javascript Flashcards
What is the purpose of variables?
to store data for the future.
How do you declare a variable?
utilizing the var keyword to declare it.
How do you initialize (assign a value to) a variable?
You assign the variable name (identifier) to a value using a single = sign.
What characters are allowed in variable names?
letters, underscore, start with $ or underscore camelCased capitalized letters but numbers cant be in the front.
What does it mean to say that variable names are “case sensitive”?
that the same variable name but with different casing have different variable names.
What is the purpose of a string?
how to hold a sequence of data characters of characters of numbers letters and other characters
What is the purpose of a number?
to store number mainly for math
What is the purpose of a boolean?
to compare expressions as true or false.
What does the = operator mean in JavaScript?
assignment operator.
How do you update the value of a variable?
you set the variable name without the keyword to another variable value
What is the difference between null and undefined?
null is the intentional absence of value where it is an object. it can be assigned but not output by java. but undefined does not have a value assigned to a variable. 1) null get data later or it was never going to be added and you will know. Java outputs undefined so developers should not.
Why is it a good habit to include “labels” when you log values to the browser console?
logging the value without the label makes it unknown what it is being used and where it comes from.
Give five examples of JavaScript primitives.
str, num, undefined, boolean, null
What data type is returned by an arithmetic operation?
numbers
What is string concatenation?
when you combine strings utilizing , or + as any other data type becomes a string
What purpose(s) does the + plus operator serve in JavaScript?
Addition or concatenation
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
it sets the value of the left side as it self plus what is on the right side
What are objects used for?
objects group together different variables datatypes can group multiple properties in association of the same object as well as being able have multiple similar object with differing properties be better organized.
What are object properties?
piece of data stored in object. easiest method to notate objects with curly brackets being assigned to a variable. with key vales.
Describe object literal notation.
defining the object and assigning to a curly brackets with a property key name : value
How do you remove a property from an object?
delete object.property
What are the two ways to get or update the value of a property?
through appending or using the = operator to the property and giving a value.
Give 6 examples of comparison operators.
> =
<=
<
===
!=
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to compare in a conditional.
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if condition {conditional block}
What are the three logical operators?
&& and
|| or
! not
How do you compare two different expressions in the same condition?
using logical operators
Why do we log things to the console?
for debugging or to better understand how a process works.
What is a method?
it is a function within an object
How is a method different from any other function?
its is held within an object
How do you remove the last element from an array?
array.pop
How do you round a number down to the nearest integer?
Math.floor
How do you generate a random number?
math.random float number between 0 and 1 representing a percentage
How do you delete an element from an array?
array.splice(index, how many)
How do you append an element to an array?
array.push
How do you break a string up into an array?
array.split(what it splits by) delimiter
Do string methods change the original string? How would you check if you weren’t sure?
no. console.log
Is the return value of a function or method useful in every situation?
no they have return values but you wont always use it
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
mdn
What is the purpose of a loop?
a way to run a code block until a specific condition is met
What is the purpose of a condition expression in a loop?
To top the loop from continue running
What does “iteration” mean in the context of loops?
how many times it will be running
When does the condition expression of a for loop get evaluated?
after the initialization
When does the final expression of a for loop get evaluated?
After each iteration
When does the condition expression of a while loop get evaluated?
before running the while loop
When does the initialization expression of a for loop get evaluated?
the beginning of the loop
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?
increases value by 1 by default.
How do you iterate through the keys of an object?
for (keys in object) {
}
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 <form>?
‘submit’ which is fired on the form and not the button. Never have the click event listener on a button
What does the event.preventDefault() method do?
preventing the default behavior. for check box it will not show a check. not common you want to rid the default
What does submitting a form without event.preventDefault() do?
if you dont call it, page reloads and refreshes. the data is on the url but irrelevant to the point. based on initial behavior of form behaviors and action attributes. default behavior would submit to same page.
What property of a form element object contains all of the form’s controls.
form.elements has certain properties. numbered properties, named properties in multiple forms. same thing is saved multiple times. email too message too. two out of three are saafety cases. dom is trying to pass it. have property based off of id attribute. user-email will show minus not the whole thing. using .email takes the name attribute. is relevant to form submissions. use a name attribute in every input using dot notation.
What property of a form control object gets and sets its value?
any form control containing the value property is get and set by VALUE
What is one risk of writing a lot of code without checking to see if it works so far?
if it doesn’t work, you wont know whats working and not working
What is an advantage of having your console open when writing a JavaScript program?
see if there are any errors.
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
parent.appendchild(child)
What do you pass as the arguments to the element.setAttribute() method?
assigned value to attribute
What steps do you need to take in order to insert a new element into the page?
create element then add textcontent if required then parent.appendchild(child)
make element, configure with class application or event listener, query for parent element, and then pass argument with appendchild.
What is the textContent property of an element object for?
assign value to textcontent
Name two ways to set the class attribute of a DOM element.
classname or set attribute or even set list.
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
What is the event.target?
it references the object to which an event happened
Why is it possible to listen for events on one element that actually happen its descendent elements?
bubbling allows its parents know which of its descendants are being listened to.
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
the closest item matching the argument string for css selector returning the nearest parent element with the css selector ancestor or null
How can you remove an element from the DOM?
element.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?
event delegation by putting the event listener on the ancestor
What is the affect of setting an element to display: none?
makes the element not visible and not take any space.
What does the element.matches() method take as an argument and what does it return?
How can you retrieve the value of an element’s attribute?
At what steps of the solution would it be helpful to log things to the console?
every step
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?
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?
What is JSON?
JSON is a text-based data format
What are serialization and deserialization?
Serialization is when code is being transcoded to bits and stored data whereas deserialization is taking the bits and stored data into real code
Why are serialization and deserialization useful?
To transmit information through the internet.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(file you want serialized)
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(string you want deserialized)
What are arrays used for?
To store a list of values
Describe array literal notation.
set a variable = to square brackets [] and input items
How are arrays different from “plain” objects?
Arrays use index values instead of keys like objects
What number represents the first index of an array?
0
What is the length property of an array?
it tells the length of the array.
How do you calculate the last index of an array?
array at index [array.length]
What is a function in JavaScript?
a set of statements that performs a task
Describe the parts of a function definition.
it has the keyword function, an optional name, parameters in parenthesis curly brackets executing a statement and an optional return statement with a closing curly bracket for the function code block.
Describe the parts of a function call.
using the defined name and simply passing an argument inside parenthesis.
When comparing them side-by-side, what are the differences between a function call and a function definition?
‘function calls’ call the defined function. it utilizes it.
What is the difference between a parameter and an argument?
parameters are defined within the definition while arguments utilize the function with its values as the parameters used in functions
Why are function parameters useful?
They are utilized as variables within the function when the function is called.
What two effects does a return statement have on the behavior of a function?
it returns the statement out of the function and ends the function.
What is a “model”?
How html page can access and contents update
Which “document” is being referred to in the phrase Document Object Model?
the DOM document node
What is the word “object” referring to in the phrase Document Object Model?
the different parts of the page loaded in the browser window
What is a DOM Tree?
The list of elements attribute and text in the html from parent to child
Give two examples of document methods that retrieve a single element from the DOM.
getElementby or queryselector
Give one example of a document method that retrieves multiple elements from the DOM at once.
queryselectorAll
Why might you want to assign the return value of a DOM query to a variable?
to access and add methods to the queried return
What console method allows you to inspect the properties of a DOM element object?
console.dir
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
because of the dom tree not existing prior to whatever scripts would be queried
What does document.querySelector() take as its argument and what does it return?
a selector and returns what the element the selected argument holds
What does document.querySelectorAll() take as its argument and what does it return?
It takes a selector and returns a nodelist of all the selected elements are.
What is the purpose of events and event handling?
To have user interaction from the user and have a function run when the interaction happens.
Are all possible parameters required to use a JavaScript method or function?
function
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?
function called when an event is fired.
What object is passed into an event listener callback when the event fires?
a callback function
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
reference to the object onto which the event was dispatched. in the console log.
What is the difference between these two snippets of code?
one will pass it no matter what where as one will wait til the event listener is passed
What is the className property of element objects?
gets and sets the value of the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
by query selecting the object and setting className = ‘a class name’
What is the textContent property of element objects?
the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
by query selecting the object and setting textContent = ‘a class name’
Is the event parameter of an event listener callback always useful?
No. It can be called but can just run the function.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
harder as we would need to reference the dom for the current text content of which number is being used on how many clicks were done
Why is storing information about a program in variables better than only storing it in the DOM?
It is easier to reference within the variables than constantly refer to the dom
What event is fired when a user places their cursor in a form control?
What event is fired when a user’s cursor leaves a form control?
What event is fired as a user changes the value of a form control?
What event is fired when a user clicks the “submit” button within a <form>?
What does the event.preventDefault() method do?
What does submitting a form without event.preventDefault() do?
What property of a form element object contains all of the form’s controls.
What property of a form control object gets and sets its value?
What is one risk of writing a lot of code without checking to see if it works so far?
What is an advantage of having your console open when writing a JavaScript program?
Does the document.createElement() method insert a new element into the page?
How do you add an element as a child to another element?
What do you pass as the arguments to the element.setAttribute() method?
What steps do you need to take in order to insert a new element into the page?
What is the textContent property of an element object for?
Name two ways to set the class attribute of a DOM element.
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
What DOM element property tells you what type of element it is?
What does the element.closest() method take as its argument and what does it return?
How can you remove an element from the DOM?
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?
What is the affect of setting an element to display: none?
What does the element.matches() method take as an argument and what does it return?
How can you retrieve the value of an element’s attribute?
At what steps of the solution would it be helpful to log things to the console?
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?
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?
What is JSON?
What are serialization and deserialization?
Why are serialization and deserialization useful?
How do you serialize a data structure into a JSON string using JavaScript?
How do you deserialize a JSON string into a data structure using JavaScript?
How do you store data in localStorage?
localStorage.setItem(key, value);
How do you retrieve data from localStorage?
var storage = localStorage.getItem(key);
What data type can localStorage save in the browser?
stringdata
When does the ‘beforeunload’ event fire on the window object?
before the window closes
How can you tell the difference between a method definition and a method call?
if it has code block or keyword for function
Describe method definition syntax (structure).
function keyword with function and codeblock with keyword assigned with method
Describe method call syntax (structure).
object.method(arguments)
What is the defining characteristic of Object-Oriented Programming?
Objects can hold both data as properties and behavior as methods
How is a method different from any other function?
it utilizes an object to hold multiple functions and is accessed using methods
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
work with complex systems in simple ways like light switches.
What does API stand for?
application programming interface
What is the purpose of an API?
to communicate with a system which is simplified for the developers.
What is the affect of setting an element to display: none?
It will make the display of the element not exist in the window out of document flow.
What does the element.matches() method take as an argument and what does it return?
tests whether the element would be selected by the specified CSS selector with the selector being passed returning a boolean
How can you retrieve the value of an element’s attribute?
using the getAttribute() method
At what steps of the solution would it be helpful to log things to the console?
all of them
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?
by using a loop to see if it matches the code
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?
setting it per event listen of the tab click
Does the document.createElement() method insert a new element into the page?
Not until it has been appended
How do you add an element as a child to another element?
target.appendChild(element)
What do you pass as the arguments to the element.setAttribute() method?
‘the attribute’, what you want to set it as
What steps do you need to take in order to insert a new element into the page?
create element
append text content to element.
append element to a parent
What is the textContent property of an element object for?
It is used to add text content to the element before it is appended to the element.
Name two ways to set the class attribute of a DOM element.
className and setattribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
to reutilize the function each time called and have it exist when needed
What is this in Javascript
Keyword implicit parameter of where the object is being invoked from
What does it mean to say that this is an “implicit parameter”?
It is a parameter that exists only when called but never explicitly written
When is the value of this determined in a function; call time or definition time?
when it is called only because the argument fills the parameter
What does this refer to in the following code snippet?
the object but not called so it doesn’t exist and not invoked
Given the above character object, what is the result of the following code snippet? Why?
The greet is being invoked in the character object and is passing off of whatever object it is off of.
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
because this doesnt reference anything in lines
this doesnt reference anything on its left defaulting to window.
How can you tell what the value of this will be for a particular function or method definition?
By checking what the left side of the . of this is. If it is a definition, this is nothing until called.
How can you tell what the value of this is for a particular function or method call?
the object of the method when called but if not defined, it is window.
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance
What is a prototype in JavaScript?
A object that all created instances of a certain type of thing can be used within
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?
its in the prototype object
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype
What does the new operator do?
creates a blank, plain javascript object,
points the new object’s prototype to the constructor’s prototype property. Object.prototype is its prototype.
runs the constructor function with its arguments with this. refering to the object’s function
no return statement means object will be returned instead.
What property of JavaScript functions can store shared behavior for instances created with new?
object.prototype
What does the instanceof operator do?
returns a boolean of whether the right side of instanceof is an prototypal chain of the left.
What is a client?
A client requests or takes a piece of functionality from a provider
What is a server
It is a provider of the requests.
Which HTTP method does a browser issue to a web server when you visit a URL
GET
What three things are on the start of an HTTP start message.
METHOD or GET, PUT, POST,
Path
or HTTP Version
What three things are on the start of an HTTP response message
HTTP Version, Status code, and Status Textf
what are http headers
Give additional data about the message you are providing. Like html heads.
WHere would you go if you wanted to learn more about a specific HTTP Headers
MDN and httpie
Is a body required for a valid HTTP request or response message.
No
What is AJAX?
Asynchronous runs in the background instead one thing at a time. You draw the page and send information over the network without blocking the user.
What does AJAX acronym stand for?
Asynchronous Javascript and XML. Xml is html with strict rules. but JSON took over.
Which object is built into the browser for making HTTP request in JavaScript
XMLHTTPRequest <- object function instantiating a class in the browser.
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load
An XMLHttpReqest objects have an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They are inherited objects OOP
