JS Flashcards
What is the purpose of variables?
to store and remember information
How do you declare a variable?
the js keyword var var fullName = 'aly'
How do you initialize (assign a value to) a variable?
= assignment operator
What characters are allowed in variable names?
letters, $ and _
What does it mean to say that variable names are “case sensitive”?
captialization and lower case letters are different from each other
What is the purpose of a string?
to hold sentences and strings and a string of characters
What is the purpose of a number?
to hold the value of a number, and for using math in js
What is the purpose of a boolean?
T/F, its how js makes decisions in code
What does the = operator mean in JavaScript?
assignment operator, assigns a value to a variable
How do you update the value of a variable?
you change the value and whats on the right side of the assignment operator
What is the difference between null and undefined?
null represents and points to a nonexsitent or invalid object, a human purposely assigned its value to null.
undefined automatically assigned to variables that have just been declared. Never been assigned by a human that is js machine telling you something is undefined.
Why is it a good habit to include “labels” when you log values to the browser console?
a way of debugging and organization so you know what value goes to what variable
Give five examples of JavaScript primitives.
null, undefined, string, boolean, number
What data type is returned by an arithmetic operation?
number
What is string concatenation?
Concatenate is a fancy programming word that means “join together”. Joining together strings in JavaScript uses the plus (+)
let one = 'Hello, '; let two = 'how are you?'; let joined = one + two; joined;
What purpose(s) does the + plus operator serve in JavaScript?
adds one value to another
What data type is returned by comparing two values (, ===, etc)?
a boolean T/F
What does the += “plus-equals” operator do?
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable. The types of the two operands determine the behavior of the addition assignment operator.
let a = 2; let b = 'hello';
console.log(a += 3); // addition // expected output: 5
console.log(b += ' world'); // concatenation // expected output: "hello world"
What are objects used for?
Objects group together a set of variables and functions to create a model
of a something you would recognize from the real world. In an object,
variables and functions take on new names.
key:value pair
What are object properties?
variables that hold information about the object, key:value
Describe object literal notation
how to access an object’s properties, or add/delete key value points.
pet.name = ‘scout’
How do you remove a property from an object?
using the delete keyword and bracket/dot notation
delete pet.name;
delete pet[‘name’];
What are the two ways to get or update the value of a property?
dot notation
pet.name
brackets - use if property name is a number or a variable is being used in place of the property name
What are arrays used for?
to list together a group of related data
Describe array literal notation.
variable with the name of the array, assign it to brackets and place each data type item inside with a comma.
var arr = [‘aly’, ‘sam’, ‘will’]
How are arrays different from “plain” objects?
They relate and hold together related data, objects hold a bunch of data that is about an object. Arrays are more specific in the items they hold, whereas objects can hold a bunch of properties that relate to the object itsself not the actual data pertaining to that property
What number represents the first index of an array?
0
What is the length property of an array?
tells you how many items are in that array
How do you calculate the last index of an array?
number of items in an array - 1
array.length - 1
What is a function in JavaScript?
code blocks that act like machines and run and transform data.
packing up code for reuse throughout a program
giving a name to a handful of code statements to make it code easier to read
making code “dynamic”, meaning that it can be written once to handle many (or even infinite!) situations
Describe the parts of a function definition.
The function keyword to begin the creation of a new function.
An optional name. (Our function’s name is sayHello.)
A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn’t have any parameters.)
The start of the function’s code block, as indicated by an { opening curly brace.
An optional return statement. (Our sayHello function doesn’t have a return statement.)
The end of the function’s code block, as indicated by a } closing curly brace.
Describe the parts of a function call.
write the name of the function and then () to call it and pass in any arguments
getData(‘proton’)
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition is the name of the function and has the code inside that will actually do something with data. A call is when the function is already defined and its not time to run the function, just state the name of the function followed by ()
What is the difference between a parameter and an argument?
Parameters are within the function definition and acts as a placeholder for the incoming data when the function is called. when you are calling the function and actually pass in data, that is an argument
Why are function parameters useful?
Because they act as placeholders, we dont need the exact incoming data because we dont know what that will be, so parameters hold that spot in abtraction
What two effects does a return statement have on the behavior of a function?
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.
Why do we log things to the console?
debugging to see what and where your problem is, also to explore and play around in JS
What is a method?
a function that is a property and is placed on a function to alter the object in some form
How is a method different from any other function?
you dont see the full function defintion and its code, also with methods you just place it onto the object itself using dot notation. objects are attached to 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?
.floor()
How do you generate a random number?
Math.random()
How do you delete an element from an array
.shift() const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1); // expected output: Array [2, 3]
console.log(firstElement); // expected output: 1
How do you append an element to an array?
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
const months = [‘Jan’, ‘March’, ‘April’, ‘June’];
months.splice(1, 0, ‘Feb’);
// inserts at index 1
console.log(months);
// expected output: Array [“Jan”, “Feb”, “March”, “April”, “June”]
months.splice(4, 1, ‘May’);
// replaces 1 element at index 4
console.log(months);
// expected output: Array [“Jan”, “Feb”, “March”, “April”, “May”]
How do you break a string up into an array?
The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
Do string methods change the original string? How would you check if you weren’t sure?
strings do not change their original forms, if you are not sure just console.log
Roughly how many string methods are there according to the MDN Web docs?
A LOT around 25
Roughly how many array methods are there according to the MDN Web docs?
A LOT
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
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
What is the purpose of an if statement?
for your computer to make decisions
Is else required in order to use an if statement?
No. you can run code with just “if” statements with their condition
Describe the syntax (structure) of an if statement.
- if statement
- go into the condition (what is being tested or compared (will come out a boolean)
- opening curly for the if statement code block
- if that condtion runs true, put the code you want to execute.
- else or else if statement with another condition, if that executes as true, then it runs but if not, the code continues to go down the else if statements
What are the three logical operators?
They test multiple conditions within a condition.
&& - and
|| - or
!= - not
How do you compare two different expressions in the same condition?
&&
||
What is the purpose of a loop?
to repeat code
What is the purpose of a condition expression in a loop?
the loop continues to run until that comparison statement runs false
What does “iteration” mean in the context of loops?
the number of time the loop executes within the condition
When does the condition expression of a while loop get evaluated?
An expression evaluated before each pass through the loop. If this condition evaluates to true, statement is executed. condition is excecated before the loops code block
What does the ++ increment operator do?
increments and updates the number of times the loop has ran
How do you iterate through the keys of an object?
for..in loop
Besides return, what other keyword breaks out of a loo?
break
When does the initialization expression of a for loop get evaluated?
runs one time and only one time before the loop starts. before anything happens
When does the condition expression of a for loop get evaluated?
evaluated before the work is done, as soon as the condition evaluates as false - it terminates the loop. After each
When does the final expression of a for loop get evaluated?
evaluated after each loop iteration. whatever is in the code block is ran it increments.
Why do we log things to the console?
debugging, and organizing our code to see what we are printing out
What is a “model”?
As a browser loads a web page, it creates a model of that page and the DOM tree. The representation of the html and css
Which “document” is being referred to in the phrase Document Object Model?
the html document that loads
What is the word “object” referring to in the phrase Document Object Model?
a data type of a collection of data.
What is a DOM Tree?
Every element, attribute, and piece of text in the
HTML is represented by its own DOM node. Dom tree is the nodes, attributes and selectors not the actual DOM itself
Give two examples of document methods that retrieve a single element from the DOM.
getElementByld( 1 id 1
)
querySelector( 1
css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
getEl ementsByClassName( 1 class 1 ) getEl ementsByTagName( 1 tagName 1 ) querySelectorAll ( 1 css select or•)
Why might you want to assign the return value of a DOM query to a variable?
So it can save all of its information into memory for it to update that certain node.. Every single time u dont have tot search for it - its always there. If you ever plan on using that variable and not search our DOM again.
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?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
Uses CSS ‘selector’ syntax that would select one or more elements .
This method returns only the first of the matching elements.
What does document.querySelectorAll() take as its argument and what does it return?
Uses CSS selector syntax to select one or more elements and returns all
of those that match. Returns a node list, collections of nodes. it is not an array, but can be used with forEach.
What is the purpose of events and event handling?
to add activity to your web page and user interaction, when something is done - an interaction is send to javascript
What do [] square brackets mean in function and method syntax documentation?
that it is optional
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener(‘event’, function, boolean(usually false);
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.
What object is passed into an event listener callback when the event fires?
the query selector object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred,
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
1 is being wait to called
2 is being evoked immediately
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’)
What does the event.preventDefault() method do?
prevents the function from immediately sending and not saving the data we gathered. If it sends off, we are unable to do anything with our users data
What does submitting a form without event.preventDefault() do?
gather up our users data and store it as an object
What property of a form element object contains all of the form’s controls.
submit
What property of form a control object gets and sets its value?
.elements
ex.
myForm.elements.email.value grabs the value of the email property of the .elements property on your form
What is one risk of writing a lot of code without checking to see if it works so far?
You might not catch a bug until its too late, then you will have to go back and rework
What is an advantage of having your console open when writing a JavaScript program
you can see what you are doing, what the value of variables/array/objects etc are so you dont make mistakes
Does the document.createElement() method insert a new element into the page?
No, this method justs creates an element
How do you add an element as a child to another element?
.appendChild()
theParent.appendChild(theChildNode)
What do you pass as the arguments to the element.setAttribute() method?
Within the first argument, place the attribute and the second argument is the value of that attribute
What steps do you need to take in order to insert a new element into the page?
1. create the element and store it var newEl = document .createEl ement( ' li ');
2. create the text information going within the new element. var newText = document.createTextNode( 'quinoa ' );
- Attach the text node to the page.
newEl.appendChild(newText);
Name two ways to set the class attribute of a DOM element.
- myNode.className = ‘class’
2. myText.setAtrribute(‘class’, ‘name)
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
stay organized and when you make a new object it can automatically get placed into the dom
Give two examples of media features that you can query in an @ media rule.
Media features describe specific characteristics of the user agent, output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
- color
- device-width
Which HTML meta tag is used in mobile-responsive web pages?
< meta name = ”viewport” conten t= ”width=device-width,initial-scale=1″ >
What is the event target?
the dom variable you query selected
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling. Whatever happens on the parent element itself, can affect what is inside this element. The parent element affects its children element
What DOM element property tells you what type of element it is?
event. target.tagName tells you if its a button, span that html element.
event. target brings up the actual piece of html that the event is targeting or happening on
What does the element.closest() method take as its argument and what does it return?
this method takes the event.target object and returns the closest child element. Inside the argument, place the class or id name.
How can you remove an element from the DOM?
The ChildNode.remove() method removes the object from the tree it belongs to.
var $closestItem = event.target.closet(‘.task-list-item’)
$closestItem.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?
Go into the elements parent’s event listener method and within the function, you can target a specific node
What is the affect of setting an element to display: none?
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:
What does the element.matches() method take as an argument and what does it return?
The matches() method checks to see if the Element would be selected by the provided selectorString – in other words – checks if the element “is” the selector.
the agr is a css selector (‘.tab)
How can you retrieve the value of an element’s attribute?
returns the value of a specified attribute on the element.
<div>Hi Champ!</div>
// in a console
const div1 = document.getElementById('div1');
//=> <div>Hi Champ!</div>
const example= Attr= div1.getAttribute('id');
//=> "div1"
At what steps of the solution would it be helpful to log things to the console?
every step
What is a breakpoint in responsive Web design?
When your design starts to becomes too hard to read, there is a certain point you can switch the design of the elements so it flows and is readable
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
its easy, fast and with percentages can give you the exact measurement to fill a page nicely
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
The smaller rule will win because of CSS source order rule, the bottom
What is JSON?
JSON is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify() takes the object and makes it into strings so it can tranfer the data and then reassemble using JSON.parse() back into an object
How do you deserialize a JSON string into a data structure using JavaScript?
The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string
