JavaScript Flashcards
• What is the purpose of variables?
o Variables create permanence in your data
o It creates a box and stores information
• How do you declare a variable?
o Use a keyword like let or var.
• How do you initialize (assign a value to) a variable?
o Use an assignment operator (SINGLE EQUAL SIGN “=”)
• What characters are allowed in variable names?
o _ underscore and $. BUT variable names CANNOT start with a numeric value.
• What does it mean to say that variable names are “case sensitive”?
o String and string are different.
o It is not good practice to use variable names that are the same but with different casing.
• What is the purpose of a string?
o JavaScript strings are for storing and manipulating TEXT.
o These character are written INSIDE quotes.
o The string object is used to represent and manipulate a sequence of characters
• What is the purpose of a number?
o To store numeric values FOR calculations – mathematical operations
• What is the purpose of a boolean?
o To express a value of True or false
o Kind of like a light switch –
o Necessary for conditions and comparisons
o Helpful to determine whether or not to execute or not. (ON/OFF | it IS or IS NOT)
o Purpose of Booleans is to make DECISIONS (Yes or No)
• What does the = operator mean in JavaScript?
o Assigner
• How do you update the value of a variable?
o Use the assignment operator and WOULD NOT USE the keyword.
o VAR keyword is only necessary when creating the variable for the first time.
o CONFUSING.
o Does this variable already exist in my code?
• What is the difference between null and undefined?
o Null is assigned
Null is a value that can only exist because someone has assigned it to something.
It is purposeful – since someone intentionally put it there
o Undefined
Undefined is organic.
If there is no return value, it will come back as undefined.
Undefined is assigned by the browser – the ONLY value that JS can use to say “nothing”
• Why is it a good habit to include “labels” when you log values to the browser console?
o For clarity so that when we return to the code, we can see what we were working on and not get confused.
o Labels makes it clear what we were working with.
• Give five examples of JavaScript primitives.
o String, number, Boolean, null, undefined.
• What data type is returned by an arithmetic operation?
o Numbers – not necessarily integers.
• What is string concatenation?
o Adding together multiple strings.
o Concatenation will NEVER change the original string.
o Strings are immutable.
o They can never, EVER change.
• What purpose(s) does the + plus operator serve in JavaScript?
o Summing numerical data or string concatenation.
• What data type is returned by comparing two values (<, >, ===, etc)?
o Boolean
• What does the += “plus-equals” operator do?
o Shorthand for reassigning a value of the original variable to the new value.
o =+ will make a lasting change to something while + will add but will not save the previous value.
• What are objects used for?
o Objects group together a set of variables and functions to create a model of something you would recognize from the real world.
o In an object, variables and functions take on new names.
• What are object properties?
o In an object, variables become known as properties.
o If a variable is part of an object, it is called a PROPERTY.
o Properties tell us about the object, such as the name of a hotel or the number of rooms it has.
o Each individual hotel might have a different name and a different number of rooms.
• Describe object literal notation.
o THEY ARE A SET OF CURLY BRACES
o Properties separated by a colon.
o Commas to separate lines.
• How do you remove a property from an object?
To delete a property, use the delete keyword followed by the object name and property name.
ex: delete hotel.name;
• What are the two ways to get or update the value of a property?
o Use a dot or the brackets
o Bracket notation might be used when a property is inside an existing object.
• What are arrays used for?
o Allows us to group data types (typically alike – but can be different) and gives us a way to put it into a list format and helps us deal with them one item at a time and see the scope of each item.
• Describe array literal notation.
o Enclosed in square brackets [ ] – separated by commas.
• How are arrays different from “plain” objects?
o Arrays do not have individually named pieces of data – BUT are ordered sequentially numerically indexed.
o Arrays have an order and tell us how many properties are inside. Objects do NOT.
o To add data to an array, you use a method named PUSH.
o To add data to a property of an object, use the assignment operator.
o Arrays show and tell us how many things we are working with.
• What number represents the first index of an array?
o 0 ZERO
• What is the length property of an array?
o Property in all arrays
o Returns a true count of how many items are in that array.
• How do you calculate the last index of an array?
o Write out the length property of the length object.
o Whatever the value is of the array object and subtract 1.
• What is a function in JavaScript?
o A block of code
o A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value
• Describe the parts of a function definition.
o Function keyword, optional name, parameter list (with optional parameters), code block, return
• Describe the parts of a function call.
o Write the name of the function, parenthesis, and any number of arguments.
o What if there are no parameters?!
EMPTY PARENTHESIS.
A function call at its most basic form is the name and empty parenthesis.
Without parenthesis, NOTHING happens.
• When comparing them side-by-side, what are the differences between a function call and a function definition?
o Function call has the function name and argument.
o Function definition has function keyword – otherwise, it is a function call.
• What is the difference between a parameter and an argument?
o Parameter is a placeholder that just stays there.
o Argument, actual value that takes space in the placeholder.
• Why are function parameters useful?
o Without parameters, you’d have to create a new function for each use.
o Parameters provide mutability.
• What two effects does a return statement have on the behavior of a function?
o Causes the function to produce a value
o Prevents any more code in the function’s code block from being run. AKA – IT STOPS THE FUNCTION ENTIRELY!
o Functions that are meant to do a job won’t have a return BUT Functions that are meant to have a value WILL HAVE a return.
• Why do we log things to the console?
o A window we can communicate with the code –
a debugging tool
o Log stuff out and see what values are being used!
• What is a method?
• A method is a function which is a property of an object.
There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or
Static Methods which are tasks that are called directly on an object constructor.
• How is a method different from any other function?
o A function is a block of code
o A method requires you to specify what object that function is attached to USING DOT NOTATION. (library.push(js))
• How do you remove the last element from an array?
o pop() method.
• How do you round a number down to the nearest integer?
o Floor method of the Math object. –> math.floor
• How do you generate a random number?
o Math.random
(range 0 to 1… not including 1 – so, .9999999999)
• How do you delete an element from an array?
o Math.splice
• How do you append an element to an array?
o Push method
• How do you break a string up into an array?
o Split method – give it a set of character and it will look for those character and chop them out.
• Do string methods change the original string?
How would you check if you weren’t sure?
o It does not. No string methods EVER change the original string – they are IMMUTABLE!
o If not sure, you can console.log the method of the string.
o Log out the string and see if it changes!
• Roughly how many string methods are there according to the MDN Web docs?
o Many many.
• Is the return value of a function or method useful in every situation?
o a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
• Roughly how many array methods are there according to the MDN Web docs?
o Many many.
• What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
o MDN
• Give 6 examples of comparison operators.
o Simply equal to
o NEVER USE = =
• What data type do comparison expressions evaluate to?
o Booleans
• What is the purpose of an if statement?
o To determine whether to run a code block and check a condition
• Is else required in order to use an if statement?
o Nope
• Describe the syntax (structure) of an if statement.
o If keyword with the condition which is evaluated to true/false
o If keyword, condition, code block.
• What are the three logical operators?
o And &&
o Or ||
o Not !
• How do you compare two different expressions in the same condition?
o Use AND / OR && or ||
• What is the purpose of a loop?
o Loops offer us the ability to repeat a single step / an action
• What is the purpose of a condition expression in a loop?
o To evaluate when to stop
o In the absence of a condition, loops will go on forever.
• What does “iteration” mean in the context of loops?
o One time that the code block gets run.
• When does the condition expression of a while loop get evaluated?
o At the beginning before each iteration
(BEFORE the code block runs)
• When does the initialization expression of a for loop get evaluated?
o The initialization step occurs one time only,
before the loop begins
o BEFORE ANYTHING – the very first thing.
• When does the condition expression of a for loop get evaluated?
o First time, after the initialization
o Every subsequent time, before the code block of the next iteration
And after the final expression or the initialization
• When does the final expression of a for loop get evaluated?
o 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?
o Break.
• What does the ++ increment operator do?
o Adds AND saves one to the variable
• How do you iterate through the keys of an object?
o With a for – in loop
• Why do we log things to the console?
o To ensure what your code is doing what you want it to do.
• What is a “model”?
o A representation of something.
• Which “document” is being referred to in the phrase Document Object Model?
o The HTML document
• What is the word “object” referring to in the phrase Document Object Model?
o Data type that can refer to
o DOM is a javascript object that is modeling the html document’s content.
o The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
• What is a DOM Tree?
o All of the information necessary to convey ONE element and all of its content.
o All of the necessary data to make an element.
• Give two examples of document methods that retrieve a single element from the DOM.
o getElementByID and querySelector
o the only method you need to retrieve a single element is QUERYSELECTOR.
o The reason is, querySelector can find anything you are looking for.
• Give one example of a document method that retrieves multiple elements from the DOM at once.
o querySelectorAll
• Why might you want to assign the return value of a DOM query to a variable?
o So you don’t have to continue calling the result over and over again.
o Get it once and hold onto it.
• What console method allows you to inspect the properties of a DOM element object?
o console.dir
o logged elements will look like the html code.
o If you need to look closer, use dir and it will show you the actual details that element is associated with.
• Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
o You want elements to exist BEFORE you look for them.
o LOAD ORDER (html runs from top to bottom).
o All of the body info must load in FULL before looking for those elements.
• What does document.querySelector() take as its argument and what does it return?
o Takes a string containing a CSS selector and it only returns that which matches that selector.
• What does document.querySelectorAll() take as its argument and what does it return?
o Takes the string and returns all of the matching elements.
• Why do we log things to the console?
o To check the functionality and accuracy of our code
• What is the purpose of events and event handling?
o Event handling – allows the developer to do something with the code – INTERACTIVITY.
• Are all possible parameters required to use a JavaScript method or function?
o No – some are optional (LIKE BOOLEANS)
• What method of element objects lets you set up a function to be called when a specific type of event occurs?
o addEventListener – allows us to create a functionality that will occur when users click on an event.
• What is a callback function?
o A function passed as an argument to another function. And that other function can use that function if it needs to
• What object is passed into an event listener callback when the event fires?
o Event object (Page 246-247 in Duckett)
o Javascript is aware that this is a problem so what it does, when an event occurs, in that exact micro second, it creates an object from scratch and in that object there is all the relevant data – that way inside the handler definition, you can dig into that object and get specific information about that occurrence.
• What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
o Where the event originated
console.log – log it out and inspect
MDN – read the documentation.
• What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
o The first one will execute when the task is triggered (e.g when the item is clicked)
o The second one will return an error
• What is the className property of element objects?
o The className property of the Element interface 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?
o className property
o You need the DOM element dot notation and className (camelCase) assigned to the new object.
• What is the textContent property of element objects?
o The textContent property returns:
The text content of the element and all descendants, with spacing and CSS hidden text, but without tags.
o All the text hidden or not.
• How do you update the text within an element using JavaScript?
o Query the element somehow and then…
o textContent property to access it by assignment
• Is the event parameter of an event listener callback always useful?
o Not always – vast majority of the time, it is.
• Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
o Variable needs to exist outside of the function block
o Query select the element that increases the click count
• Why is storing information about a program in variables better than only storing it in the DOM?
o You want the data you use to be present in JS.
o It’s better to use data within the same language you are in rather than depending on other languages.
What do we actually do to get data from a form?
We set up our own code to take data out of the form and work with it.
This helps to validate and use it before sending it to wherever we are sending it.
It is control.
• What event is fired when a user places their cursor in a form control?
o Focus
• What event is fired when a user’s cursor leaves a form control?
o Blur
• What event is fired as a user changes the value of a form control?
o Input
o JavaScript INPUT vs. JavaScript CHANGE EVENT – THEY ARE DIFFERENT!
• What event is fired when a user clicks the “submit” button within a ?
o Submit
• What does the event.preventDefault() method do?
o It prevents the default action
o Make it your FIRST line of code IN the function.
o The default action should NOT be taken as it normally would.
Example: Checkboxes, that by default have a check – would not be marked.
o event.preventDefault() is ALWAYS present with a Submit button.
Otherwise, it will reload.
• What does submitting a form without event.preventDefault() do?
o It will simply RELOAD the page.
• What property of a form element object contains all of the form’s controls?
o Every dom element has a property named ELEMENTS and that Elements property contains all of the form controls.
• What property of a form control object gets and sets its value?
o The Value Property in the Form Control gives you the value.
• What is one risk of writing a lot of code without checking to see if it works so far?
o It can be broken – amongst a variety of other things.
• What is an advantage of having your console open when writing a JavaScript program?
o You can see the small push forward and progress with the development of the page.
o Keep track of code and logs and errors in real time.
• Does the document.createElement() method insert a new element into the page?
o Not right away… not ever.
o By calling the createElement element, it will create it, but it will not be visible to the user.
• How do you add an element as a child to another element?
o appendChild method.
• What do you pass as the arguments to the element.setAttribute() method?
o Html does not have data types so no need to preserve data types.
• What steps do you need to take in order to insert a new element into the page?
o Create the element, give some content, insert to the page (appendChildmethod),
o If we do not have a variable already holding that element, use a querySelector (seek out and find the element)
o With newly made elements, we have immediate access because you created it… but for existing elements, you have to look for it.
o Query the element, actually make the element you want to put in the dom, configure it with any necessary information, and call it.
• What is the textContent property of an element object for?
o appendText to node….
o Give it a new piece of content or observe a new piece.??
• Name two ways to set the class attribute of a DOM element.
o setAttribute with string class o assign a new value to the property.
• What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
o You can reuse it.
o You can call that function again to make the same structure multiple times
o Utilize for multiple contexts.
o Use more than once, yes, but ALSO in multiple situations.
• What is the event.target?
o Property on the event object that is a reference where the event was fired from
• Why is it possible to listen for events on one element that actually happen its descendent elements?
o Event bubbling
• What DOM element property tells you what type of element it is?
o Tag name
o Could be node name – but no.
• What does the element.closest() method take as its argument and what does it return?
o Argument is the CSS selector
o Closest ancestor.
o Closest is LITERALLY the opposite of the querySelector – querySelector only looks inward whilst closest works outward.
TWIST: every dom element has a querySelector-
So in this exercise there is a $tasklist that is holding the element, UL
• How can you remove an element from the DOM?
o Use remove method (remove()) on the object or 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?
o Add it to its parent.
• What is the event.target?
o A property on the event object which stores an element of the dom object to where the event originated from.
• What is the affect of setting an element to display: none?
o Removes that from the document flow = it is no longer visible.
• What does the element.matches() method take as an argument and what does it return?
o It takes the CSS selector as a string and returns a Boolean that represents matches the selector as an argument
• How can you retrieve the value of an element’s attribute?
o Call the getAttribute
o Argument will be a string which is the name of the attribute we want to retrieve.
• At what steps of the solution would it be helpful to log things to the console?
o Any time you want to store it to a variable and check what you’re using. o Call a method o Comparison expressions o Variables you assign values to. o EVERY TIME YOU DO ANYTHING.
• 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?
o Add an eventListener for individual actions.
o Doing that would be code that is not scalable nor would it grow nicely.
• 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?
o A long list of if statements (a HUGE CONDITIONAL Block – again, not scalable).
• What is JSON?
o Javascript object notation – a format for rendering data that follows the __ of js objects
• What are serialization and deserialization?
o Serialization uses data where all of the data is in one continuous string – pieces of data lined up right next to each other.
o Deserialization takes the data that is one continuous string and reverts it back to its more complex state to make things easy to access.
Think about Cody’s illulstration on packing for a trip and unpacking when you get back… from multiple locations to your bag… then back to their respective locations.
• Why are serialization and deserialization useful?
o When you store data, you want an easy way to store it.
• How do you serialize a data structure into a JSON string using JavaScript?
o Use the stringify method and pass the json
• How do you deserialize a JSON string into a data structure using JavaScript?
o Use the parse method
• How do you store data in localStorage?
o Setitem method of the local storage object
• How do you retrieve data from localStorage?
o Getdata method of the local storage object
• What data type can localStorage save in the browser?
o JUST STRINGS
• When does the ‘beforeunload’ event fire on the window object?
o Right before you close.
o When the window document and resources are about to close
o (close/refresh/close the browser/crashes)
• What is a method?
o A method is a function which is a property of an object.
• How can you tell the difference between a method definition and a method call?
o Method definition will have the function code block including keyword and code block
o Method call will ….
• Describe method definition syntax (structure).
o Object literal and send it to a variable
o Property name WITH Colon
o Function definition with or without a name (use the name of the property)
• Describe method call syntax (structure).
o object.methodName(arguments)
• How is a method different from any other function?
o Method is associated with an OBJECT
• What is the defining characteristic of Object-Oriented Programming?
…
• What are the four “principles” of Object-Oriented Programming?
…
• What is “abstraction”?
o Process of reducing complexity to the bits the user needs to know.
• What does API stand for?
o Application Programming Interface
• What is the purpose of an API?
o To hide the internal details of how a system is architected.
o Gives us a more simplistic way to interact with a more complex system.
o Light switch…
o DOM is an API – it is not part of the JavaScript language … it was built in the periphery – a complex system that has access to the complexities of the page. Very complicated but we can simply use it.
• What is ‘this’ in JavaScript?
o ‘this’ is different from explicit parameters
o implicit parameter to see where the object was invoked
• What does it mean to say that this is an “implicit parameter”?
o 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.
• When is the value of this determined in a function; call time or definition time?
o 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);
}
};
o NOTHING – it is NOT being called.
o Implicit parameter – very important to understand.• Given the above character object, what is the result of the following code snippet? Why?
character.greet();
o It’s-a-me, Mario!
• Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet; hello(); o It’s-a-me, undefined!
• How can you tell what the value of this will be for a particular function or method definition?
o Within a definition, you can’t guarantee that it will have any specific value. It’s a place holder for a future value.
• How can you tell what the value of this is for a particular function or method call?
o Whatever is to the left of the dot… i.e. window.hello();
o Look to the left of the dot when the function is called as a method.
• What kind of inheritance does the JavaScript programming language use?
o 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” object and then tell other objects to simply delegate (verb) to that “prototype” object when they aren’t able to perform the required tasks themselves.
• What is a prototype in JavaScript?
o a JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
o The prototype is responsible for being the focal point of the behavior that needs to be in one spot for all other methods to use.
• 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?
o Because all of those have a prototype and have a shared behavior used/borrowed for later on.
• If an object does not have its own property or method by a given key, where does JavaScript look for it?
o In the prototype object
o If there are three or four layers of prototype, it will begin at the nearest parent to the next and to the next. (prototypal chain)
• What does the new operator do? READ MDN
o It allows us to invoke a function as an constructor function.
o THIS MEANS: It makes an empty object and it will take the __proto__ property and assigns it to the prototype function
Points the
o 3 –
o 4 – It returns the object if no other is specified.
In a constructor function, there is no return value (< 0.000001%).
By not having a return, you get the default, which is to return the object you’ve created.
• What property of JavaScript functions can store shared behavior for instances created with new?
o Prototype property
o Every function EVER has the prototype property and it is an object.
• What does the instanceof operator do?
o It checks
o OBJECT –> instanceof –> CLASS
• What is a “callback” function?
…
• 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?
o setTimeout()
• How can you set up a function to be called repeatedly without using a loop?
o setInterval
• What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
o Default time delay of zero.
• What do setTimeout() and setInterval() return?
o setTimeout returns…
o setInterval returns…
o They both share the same ID pool.
• What is AJAX?
o Ajax is a technique for loading data into part of a page without having to refresh the entire page.
o (Data is often sent in a format called JavaScript Object Notation (or JSON)
• What does the AJAX acronym stand for?
o Asynchronous JavaScript and XML
o However, Ajax is no used to refer to a group of technologies that offer asynchronous functionality in the browser.
• Which object is built into the browser for making HTTP requests in JavaScript?
o XMLHttpRequest
• What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
o Load
• Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
o They share a prototype object.
