JS Flashcards

1
Q

What is the purpose of variables?

A

to store and remember information

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How do you declare a variable?

A
the js keyword var 
var fullName = 'aly'
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How do you initialize (assign a value to) a variable?

A

= assignment operator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What characters are allowed in variable names?

A

letters, $ and _

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does it mean to say that variable names are “case sensitive”?

A

captialization and lower case letters are different from each other

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the purpose of a string?

A

to hold sentences and strings and a string of characters

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the purpose of a number?

A

to hold the value of a number, and for using math in js

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the purpose of a boolean?

A

T/F, its how js makes decisions in code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the = operator mean in JavaScript?

A

assignment operator, assigns a value to a variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you update the value of a variable?

A

you change the value and whats on the right side of the assignment operator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the difference between null and undefined?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Why is it a good habit to include “labels” when you log values to the browser console?

A

a way of debugging and organization so you know what value goes to what variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Give five examples of JavaScript primitives.

A

null, undefined, string, boolean, number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What data type is returned by an arithmetic operation?

A

number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is string concatenation?

A

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;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What purpose(s) does the + plus operator serve in JavaScript?

A

adds one value to another

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What data type is returned by comparing two values (, ===, etc)?

A

a boolean T/F

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What does the += “plus-equals” operator do?

A

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"
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are objects used for?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are object properties?

A

variables that hold information about the object, key:value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Describe object literal notation

A

how to access an object’s properties, or add/delete key value points.

pet.name = ‘scout’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How do you remove a property from an object?

A

using the delete keyword and bracket/dot notation

delete pet.name;
delete pet[‘name’];

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the two ways to get or update the value of a property?

A

dot notation
pet.name

brackets - use if property name is a number or a variable is being used in place of the property name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are arrays used for?

A

to list together a group of related data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Describe array literal notation.

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

How are arrays different from “plain” objects?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What number represents the first index of an array?

A

0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is the length property of an array?

A

tells you how many items are in that array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

How do you calculate the last index of an array?

A

number of items in an array - 1

array.length - 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What is a function in JavaScript?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Describe the parts of a function definition.

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Describe the parts of a function call.

A

write the name of the function and then () to call it and pass in any arguments
getData(‘proton’)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

When comparing them side-by-side, what are the differences between a function call and a function definition?

A
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 ()
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is the difference between a parameter and an argument?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Why are function parameters useful?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What two effects does a return statement have on the behavior of a function?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Why do we log things to the console?

A

debugging to see what and where your problem is, also to explore and play around in JS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What is a method?

A

a function that is a property and is placed on a function to alter the object in some form

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

How is a method different from any other function?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

How do you remove the last element from an array?

A

array.pop()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

How do you round a number down to the nearest integer?

A

.floor()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

How do you generate a random number?

A

Math.random()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

How do you delete an element from an array

A
.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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

How do you append an element to an array?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

How do you break a string up into an array?

A
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"
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

Do string methods change the original string? How would you check if you weren’t sure?

A

strings do not change their original forms, if you are not sure just console.log

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Roughly how many string methods are there according to the MDN Web docs?

A

A LOT around 25

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Roughly how many array methods are there according to the MDN Web docs?

A

A LOT

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

A

MDN

50
Q

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

A

MDN

51
Q

Give 6 examples of comparison operators.

A
===
 > 
< 
!= 
=>
 =
52
Q

What data type do comparison expressions evaluate to?

A

boolean

53
Q

What is the purpose of an if statement?

A

for your computer to make decisions

54
Q

Is else required in order to use an if statement?

A

No. you can run code with just “if” statements with their condition

55
Q

Describe the syntax (structure) of an if statement.

A
  1. if statement
  2. go into the condition (what is being tested or compared (will come out a boolean)
  3. opening curly for the if statement code block
  4. if that condtion runs true, put the code you want to execute.
  5. 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
56
Q

What are the three logical operators?

A

They test multiple conditions within a condition.
&& - and
|| - or
!= - not

57
Q

How do you compare two different expressions in the same condition?

A

&&

||

58
Q

What is the purpose of a loop?

A

to repeat code

59
Q

What is the purpose of a condition expression in a loop?

A

the loop continues to run until that comparison statement runs false

60
Q

What does “iteration” mean in the context of loops?

A

the number of time the loop executes within the condition

61
Q

When does the condition expression of a while loop get evaluated?

A

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

62
Q

What does the ++ increment operator do?

A

increments and updates the number of times the loop has ran

63
Q

How do you iterate through the keys of an object?

A

for..in loop

64
Q

Besides return, what other keyword breaks out of a loo?

A

break

65
Q

When does the initialization expression of a for loop get evaluated?

A

runs one time and only one time before the loop starts. before anything happens

66
Q

When does the condition expression of a for loop get evaluated?

A

evaluated before the work is done, as soon as the condition evaluates as false - it terminates the loop. After each

67
Q

When does the final expression of a for loop get evaluated?

A

evaluated after each loop iteration. whatever is in the code block is ran it increments.

68
Q

Why do we log things to the console?

A

debugging, and organizing our code to see what we are printing out

69
Q

What is a “model”?

A

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

70
Q

Which “document” is being referred to in the phrase Document Object Model?

A

the html document that loads

71
Q

What is the word “object” referring to in the phrase Document Object Model?

A

a data type of a collection of data.

72
Q

What is a DOM Tree?

A

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

73
Q

Give two examples of document methods that retrieve a single element from the DOM.

A

getElementByld( 1 id 1
)
querySelector( 1
css selector’)

74
Q

Give one example of a document method that retrieves multiple elements from the DOM at once.

A
getEl ementsByClassName( 1
class 1 )
getEl ementsByTagName( 1
tagName 1
) 
querySelectorAll ( 1
css select or•)
75
Q

Why might you want to assign the return value of a DOM query to a variable?

A

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.

76
Q

What console method allows you to inspect the properties of a DOM element object?

A

console.dir

77
Q

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

A

The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

78
Q

What does document.querySelector() take as its argument and what does it return?

A

Uses CSS ‘selector’ syntax that would select one or more elements .
This method returns only the first of the matching elements.

79
Q

What does document.querySelectorAll() take as its argument and what does it return?

A

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.

80
Q

What is the purpose of events and event handling?

A

to add activity to your web page and user interaction, when something is done - an interaction is send to javascript

81
Q

What do [] square brackets mean in function and method syntax documentation?

A

that it is optional

82
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener(‘event’, function, boolean(usually false);

83
Q

What is a callback function?

A

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.

84
Q

What object is passed into an event listener callback when the event fires?

A

the query selector object

85
Q

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred,

86
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

1 is being wait to called

2 is being evoked immediately

87
Q

What event is fired when a user places their cursor in a form control?

A

(‘focus’)

88
Q

What event is fired when a user’s cursor leaves a form control?

A

(‘blur’)

89
Q

What event is fired as a user changes the value of a form control?

A

(‘input’)

90
Q

What event is fired when a user clicks the “submit” button within a ?

A

(‘submit’)

91
Q

What does the event.preventDefault() method do?

A

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

92
Q

What does submitting a form without event.preventDefault() do?

A

gather up our users data and store it as an object

93
Q

What property of a form element object contains all of the form’s controls.

A

submit

94
Q

What property of form a control object gets and sets its value?

A

.elements

ex.
myForm.elements.email.value grabs the value of the email property of the .elements property on your form

95
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

You might not catch a bug until its too late, then you will have to go back and rework

96
Q

What is an advantage of having your console open when writing a JavaScript program

A

you can see what you are doing, what the value of variables/array/objects etc are so you dont make mistakes

97
Q

Does the document.createElement() method insert a new element into the page?

A

No, this method justs creates an element

98
Q

How do you add an element as a child to another element?

A

.appendChild()

theParent.appendChild(theChildNode)

99
Q

What do you pass as the arguments to the element.setAttribute() method?

A

Within the first argument, place the attribute and the second argument is the value of that attribute

100
Q

What steps do you need to take in order to insert a new element into the page?

A
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 ' );
  1. Attach the text node to the page.
    newEl.appendChild(newText);
101
Q

Name two ways to set the class attribute of a DOM element.

A
  1. myNode.className = ‘class’

2. myText.setAtrribute(‘class’, ‘name)

102
Q

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

A

stay organized and when you make a new object it can automatically get placed into the dom

103
Q

Give two examples of media features that you can query in an @ media rule.

A

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.

  1. color
  2. device-width
104
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

< meta name = ”viewport” conten t= ”width=device-width,initial-scale=1″ >

105
Q

What is the event target?

A

the dom variable you query selected

106
Q

Why is it possible to listen for events on one element that actually happen its descendent elements?

A

Event bubbling. Whatever happens on the parent element itself, can affect what is inside this element. The parent element affects its children element

107
Q

What DOM element property tells you what type of element it is?

A

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

108
Q

What does the element.closest() method take as its argument and what does it return?

A

this method takes the event.target object and returns the closest child element. Inside the argument, place the class or id name.

109
Q

How can you remove an element from the DOM?

A

The ChildNode.remove() method removes the object from the tree it belongs to.

var $closestItem = event.target.closet(‘.task-list-item’)
$closestItem.remove()

110
Q

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?

A

Go into the elements parent’s event listener method and within the function, you can target a specific node

111
Q

What is the affect of setting an element to display: none?

A

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:

112
Q

What does the element.matches() method take as an argument and what does it return?

A

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)

113
Q

How can you retrieve the value of an element’s attribute?

A

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"
114
Q

At what steps of the solution would it be helpful to log things to the console?

A

every step

115
Q

What is a breakpoint in responsive Web design?

A

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

116
Q

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?

A

its easy, fast and with percentages can give you the exact measurement to fill a page nicely

117
Q

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?

A

The smaller rule will win because of CSS source order rule, the bottom

118
Q

What is JSON?

A

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

119
Q

What are serialization and deserialization?

A

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.

120
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

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

121
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string