JavaScript Flashcards
What is the purpose of variables?
they hold a value and preserve it for future use
How do you declare a variable?
var, let, const
How do you initialize(assign a value to) a variable?
=
What characters are allowed in variable names?
letters, numbers, $, _
What does it mean to say that variable names are “case sensitive”?
need to make sure casing is correct
What is the purpose of a string?
adds new text-value content into a page
What is the purpose of a number?
math use
What is the purpose of a boolean?
making decisions
What does the = operator mean in JavaScript?
making the variable contain value - assign value to a variable
How do you update the value of a variable?
variableName = new value;
What is the difference between null and undefined?
null: intentionally assign it as empty
undefined: does not exist yet
Why is it a good habit to include labels when you log values to the browser console?
To have an immediate reference to what exactly is being logged
Give 5 examples of JavaScript primitives:
string, number, boolean, undefined, null
What data type is returned by an arithmetic operation?
number
What is string concatenation?
joining together two or more strings to create one new string
What purpose does the + operator serve in JavaScript?
adds one value to another (math and concatenation)
What data type is returned by comparing two values (, ===, etc..)?
a boolean value - based on whether the comparison is true
What does the += operator do?
adds the value of the right operand to a variable and assigns the result to the variable
What are objects used for?
Group together a set of properties and methods to create a model of something you would recognize in the real world
What are object properties?
key/value pairs
Describe object literal notation:
{
key: value (properties),
method: function() {}
};
How do you remove(delete) a property from an object?
delete object.property
What are the two ways to get or update the value of a property?
- dot notation
- square bracket syntax
What are arrays used for?
a list of values that are related to each other
Describe array literal notation:
var arrayName = [‘value’, ‘value’, ‘value’];
How are arrays different than “plain” objects?
- array values are numbered
- the key for each value is its index #, rather than property name
- order matters, whereas order in objects doesn’t
What number represents the first index of an array?
0
What is the length property of an array?
tells us the number of items in the array
- starts count at 1 rather than 0
How do you calculate the last index of an array?
the value of the array’s length property minus 1
What is a function in JavaScript?
a reusable block of code
Describe the parts of a function definition:
function keyword, function name(parameters), {code block}
Describe the parts of a function call:
functionName(arguments);
What are the differences between function definition and a function call?
function definition: has function keyword, parameters, and {code block}
function call: functionName followed by arguments in parenthesisWhy do we log things to the console?
to verify expected output and see changes over time
What is a method?
a function stored in a property of an object
How is a method call different from any other function?
you need to specify what object they are coming from
- object.method()
How do you remove the last element of an array?
.pop()
How do you round a number down to the nearest integer?
Math.floor()
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?
No - strings cant change.
console.log()
Is the return value of a function or method useful in every situation?
No - sometimes you just want it to do what it does
What 3 letter acronym should you always include in your google search about a JavaScript method or CSS property?
MDN
Give six examples of comparison operators:
> , =, <=, ===, !==
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
checks if a condition is true, then executes code in the code block
Is else required in order to use an if statement?
No
Describe the syntax of an if statement
if, (condition), conditional code block
What are the three logical operators?
&& (and), | | (or), ! (not)
How do you compare two different expressions in the same condition?
with logical operators (&& | |)
What is the purpose of a loop?
to give us the ability to repeat actions over and over for as long as we need
What is the purpose of a condition expression in a loop?
how to end the loop
What does ‘iteration’ mean in the context of a loop?
one execution of the code block
When does the condition expression of a while loop get evaluated?
before each pass through the loop
When does the initialization expression of a for loop get evaluated?
before anything
When does the condition expression of a for loop get evaluated?
before each loop iteration
When does the final expression of a for loop get evaluated?
after each loop iteration - before the next evaluation of the condition
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?
adds 1 to the counter variable
How do you iterate through the keys of an object?
a for..in loop
(only used for objects);
Why do we log things to the console?
To verify expected output and see changes overtime
What is a “model”
a recreation/representation of something
Which “document” is being referred to in the phrase “Document Object Model”?
The HTML document
What is the word “object” referring to in the phrase “Document Object Model”?
it’s an object that is made referring to the original html document
What is a DOM Tree?
an element and all of its children elements and related information. similar to a family tree
Give 2 examples of document methods that retrieve a single element from the DOM:
.getElementById( ) & .querySelector( )
Give 1 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?
if the script needs to use the same element(s) more than once
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
the HTML content needs to load first
What does document.querySelector( ) take as its argument and what does it return?
argument: ‘css Selector’ returns: first element within the document that matches the selector
What does document.querySelectorAll( ) take as its argument and what does it return?
argument: ‘css Selector’ returns: all elements within the document that match the selector
What is the purpose of events and event-handling?
user interaction
Are all possible parameters required to use a JavaScript method or function?
No, just the first two (event and handler) are
What method of element objects lets you set up a function to be called when a specific type of event is called?
.addEventListener( )
What is a callback function?
passing a function by value. (a function as an argument in another call)
What object is passed into an event listener callback when the event fires?
event object - (an object built by javascript)
What is the event.target? If you weren’t sure, how would you check? Where could you get more info about it?
- an object referencing what started the event process/where the event started.
- can console.log it
- MDN
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?
element.className = ‘class-name’
What is the .textContent property of element objects?
represents the text content of the node(element) and its descendants
How do you update the text within an element using JavaScript?
element.textContent = ‘new text content’
Is the event parameter of an event listener callback always useful?
no - but always use it so you know its an event handler function
Is the event parameter of an event listener callback always useful?
no - but always use it so you know its an event handler function
Why is storing information about a program in variables better than only storing it in the DOM?
it’s easily accessible and easy to update
What event is fired when a user places their cursor in a form control?
‘focus’
What event is fired when a users 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 with a form?
‘submit’
What does the event.preventDefault( ) method do?
prevents the default action from taking place as it normally would
What does submitting a form without event.preventDefault( ) do?
refreshes the page
What property of a form element object contains all of the form controls contained in the form element?
.elements
What property of a form-control object gets and sets its value?
.value
What is one risk of writing a lot of code without checking to see if it works so far?
you wont know what exactly caused the error/misfunction
Does the document.createElement( ) method insert a new element to the page?
no - still hasn’t been appended to the visible page yet
How do you add an element as a child to another element?
.appendChild( )
syntax = oldEL.appendChild(new-El)
What do you pass as the arguments to the element.setAttribute( ) method?
(‘name’, ‘value’)
What steps do you need to take to insert a new element into the page?
- create the new element node - document.createElement()
- configure the element (add textContent, .className, etc..)
- query for the parent element
- append new child element onto the parent element
What is the .textContent property of an element object for?
represents the text content of the node/element and its descendants
Name two ways to set the class attribute of a DOM element:
- element.setAttribute(‘class’, ‘value’)
- element.className = ‘new’
What are two advantages of defining a function to create something?
(like the work of creating a DOM tree?)
- the work becomes much simpler and reusable
- easier to keep track of values and methods etc..
What is the event.target?
the object onto which the event happened/started on
Why is it possible to listen to events on one element that actually happened on its descendant elements?
due to event bubbling - (start at where event happened and makes its way up)
What DOM element property tells you what type of element it is?
.tagName
What does the element.closest( ) method take as its argument and what does it return?
- argument: css-selector
- returns: DOM of closest ancestor that matches that selector
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?
by adding an event listener to the parent element
What is the event.target?
the object of which the event happened/started on
What is the affect of setting an element to display: none?
turns off display of an element so that it has no affect on the layout.
(the document is rendered as though the element didn’t exist)
What does the element.matches( ) method take as an argument and what’s it return?
argument: a string representing the selector to test
returns: a boolean value
How can you retrieve the value of an elements attribute?
element.getAttribute( ‘attribute’ )
At what steps of the solution would it be helpful to log things to the console?
declaring a variable, changing variable value, going through a loop, conditionals…. basically after everything!
If you were to add another tab or view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
(JS view-swapping exercise)
you’d have to make an individual function for each tab/view swap, for each one you add you’d have to keep adding functions..
What is a breakpoint in responsive web design?
- the points at which an @media query rule is introduced is known as breakpoints
- to change the design to a better one suited for the viewport space you have available
What is the advantage of using a percentage width instead of a fixed (px) width for a column class in a responsive layout?
It becomes responsive/adaptive in relation to the size of the container/viewport
If you introduced CSS rules for smaller min-width after the styles for a larger min-width in your stylesheet, the CSS rules for the smaller min-width will “win”.. Why is that?
due to media queries being reliant on source order - (further bottom on stylesheet has priority)
How do you store data in localStorage?
localStorage.setItem( ‘keyName’, keyValue);
How do you retrieve data from localStorage?
localStorage.getItem ( ‘keyName’);
What data type can localStorage save in the browser?
a string
When does the ‘beforeunload’ event fire on the window object?
before the page unloads (reloading the page, reloading the tab, closing the page)
What must the return value of myFunction be if the following expression is possible?
myFunction( )( );
must return a function
What does this code do?
const wrap = value => ( ) => value;
It’s an anonymous function being defined with the parameter value, and within that function’s code block there is another anonymous function being defined with no parameters, and it returns value. The const variable wrap is then assigned the inner function
In JavaScript, when is a function’s scope determined? When it is called or when it is defined?
- When it is defined
What allows JavaScript functions to “remember” values from their surroundings?
- closures
