Javascript Flashcards

1
Q

What is the purpose of variables?

A

Used to store data

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

How do you declare a variable?

A

var keyword + variable name

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

How do you initialize a variable?

A

By using the assignment operator ( = ) and giving it value

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, numbers, dollar signs, and underscores

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

Uppercase and lowercase variables with the same name will have different values

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

Used to store data of letters and words.
Used to add new content into a page
Can contain HTML markup

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

Used for calculations or tasks such as determining size of screen, moving the position of an element on a page, or setting the amount of time an element should take to fade it

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

Helpful in determining which part of a script should run

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

the assignment operator.

states that you are going to assign 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

Reassign it.

Variable name + equal sign +new value

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 is an assigned value (means nothing)
Undefined means a variable has been declared but not yet defined
Null is an object, undefined 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

For clarity - to keep your code clean and help you fix issues

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

Give 5 examples of javascript primitives:

A
  1. String
  2. Number
  3. Boolean
  4. Undefined
  5. Null
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

Numbers

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

What is string concatenation?

A

Adding two strings together with the + symbol

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

What purpose does the + operator serve in javascript

A

Addition with numbers, concatenation with strings or strings & numbers

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

Boolean

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

What does the += “plus equal” operator do

A

assigns the value of the right operand to a variable and assigns the result to the variable
x+=5 is the same as x= x+5

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

What are objects for?

A

Grouping together a set of variables and functions to create a model of something
Objects store related data

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

What are object properties?

A

The variables of the object

collection of key: value pairs

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

Describe object literal notation

A

Key value pairs that are separated from each other with a colon and separated from other properties and methods with a comma and then stored in a variable inside curly braces

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

delete keyword followed by object name period and property name

delete object.property

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: var name = object.newproperty
bracket: var name = object['property']
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are arrays used for?

A

storing lists or sets of values

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

Describe the array literal notation

A

var keyword followed by the name of the array, equal sign, then the lists of values within square brackets.
each value is separated by a comma

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

arrays can store a series of objects and remember their order

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

holds the number of items in the 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

array.length -1

the length of the array - 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

collection of code that is reusable and helps make the code easier to read
allow you to package up code for use later in your program

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
  1. function keyword
  2. an optional name
  3. zero or more parameters
  4. a code block
  5. an optional return statement
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

function named followed by ( ) parentheses with zero or more arguments

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
  • calling causes the functions code block to be executed
  • definition has parameters, calling has arguments with ( )
  • definition includes the function keyword, code block & return statement
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 occur in the definition, while arguments occur when called
parameters are placeholders, arguments are values

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

Why are function parameters useful?

A

when a function is called, the parameters in its definition take on the values of the arguments that were passed

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

exits the function

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

as a debugging tool - easy way to inspect your variables in the browser

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

What is a method?

A

a function which is a property of an object

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

methods are associated with 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

pop ( ) method

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

Math.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

splice( )

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

push( )

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

split ( )

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 do you check if you werent sure?

A

no

MDN or the console

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

3 static methods

34 instance methods

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

Is the return value of a function or method useful in every situation?

A

no - sometimes return isn’t needed

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

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

A

3 static methods

31 instance methods

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

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

A

MDN

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

Give 6 examples of comparison operators

A
  1. ==
  2. !=
  3. ===
  4. !==
  5. > , >=
    6.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What data type do comparison expressions evaluate to?

A

boolean

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

What is the purpose of an if statement?

A

to evaluate a condition and if true, to execute the code block

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

Is else required in order to use an if statement?

A

no

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

Describe the syntax (structure) of an if statement

A
  1. if keyword
  2. condition in parentheses ( )
  3. code block to execute within curly brace { }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

What are three logical operators?

A

&& logical and
|| logical or
! logical not

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

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

A

using logical operators and (&&) or (||)

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

What is the purpose of a loop?

A

to repeat an action or a code to check a condition

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

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

A

if returns true a code block will run, if false it will stop

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

What does ‘iteration’ mean in the context of loops?

A

each time the loop runs through

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

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

A

before each pass through the loop

- if evaluates true, statement is executed

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

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

A

once before the loop begins

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

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

A

before each loop iteration

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

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

A

at the end of each loop iteration but before the condition runs a second time

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

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

A

break

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

What does the ++ increment operator do?

A

adds one to its operand and returns a value

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

How do you iterate through the keys of an object?

A

for..in loops

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

Why do we log things to the console?

A

to check for errors/debugging/double checking your values

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

What is a model?

A

a recreation or representation of something

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

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

A

the model of the webpage created by the browser

71
Q

What is the word ‘object’ referring to in the phrase Document Object Model?

A

the objects that make up the DOM - each object represents a different part of the page loaded in the browser window

72
Q

What is a DOM tree?

A

the model of a webpage created by the browser
- has four main types of nodes
a structure with all the child elements inside it

73
Q

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

A

getElementById( )

querySelector ( )

74
Q

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

A

getElementsByClassName ( )

querySelectorAll ( )

75
Q

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

A

allows you to access those elements faster in the future

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 go through all 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

CSS selectors

returns the first element with the document that matches the specified selector or group of selectors

79
Q

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

A

one or more selectors to match against

returns a NodeList (that is static) of the documents elements that match the specified group of selectors

80
Q

What is the purpose of events and event handling?

A

to notify code of interesting things that have taken place

  • handling is the steps involved in triggering javascript code when a user interacts with the HTML on a webpage
  • to respond to the actions of users
81
Q

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

A

square brackets in syntax documentation indicates an optional section

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 ( )

83
Q

What is a callback function?

A

function that is 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

object built by the javascript engine that is describing all the relative info that occurred.
- the event object which contains all the data

85
Q

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

A
  • the element object from which the event originated from
  • a reference to the object onto which the event was dispatched
  • console.log(event.target)
  • MDN
86
Q

What is the difference between element.addEventListener(‘click’, handleClick)& element.addEventListener(‘click’, handleClick())?

A

when the parentheses are after a function call, the code will run straight away rather than waiting until the event triggers it

87
Q

What is the className property of element objects?

A

sets or returns the class name of an element

88
Q

How do you update the CSS class attribute of an element using Javascript?

A

element.className

89
Q

What is the textContent property of element objects?

A

represents the text content of the node and its descendants

90
Q

How do you update the text within an element using Javascript?

A

node.textContent

91
Q

Is the event parameter of an event listener callback always useful?

A

not always necessary

92
Q

Why is story information about a program in variables better than only storing it in the DOM?

A

easier to keep track of and cleaner code

93
Q

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

A

focus

94
Q

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

A

blur

95
Q

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

A

input

96
Q

What event is fired when a user clicks the ‘submit’ button within a ?

A

submit

97
Q

What does event.preventDefault() method do?

A

cancels the event if it is cancelable

98
Q

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

A

submits the form and disappears

99
Q

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

A

elements property

100
Q

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

A

value property

101
Q

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

A

you wont know if the code isnt working

102
Q

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

A

always helps check for error in code

103
Q

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

A

no

104
Q

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

A

appendchild()

105
Q

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

A

name of the attribute and its value

106
Q

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

A
1. create the element node
optionally give it content
2. grab the spot you want to append it to
using querySelector
3. add the element to the DOM tree
107
Q

What is the textContent property of an element object for?

A

reading and writing textContent

108
Q

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

A

element. setAttribute(“class”)

element. className

109
Q

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

A

can define function once and repeat it as much as you want throughout the code
can manipulate based on user response

110
Q

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

A
  1. width

2. aspect-ratio

111
Q

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

A

viewport meta tag

- < meta name=”viewport” content=”width=device-width, initial-scale=1” >

112
Q

What is the event.target?

A

the target property of the Event interface.

a reference to the object onto which the event was dispatched

113
Q

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

A

Event bubbling

114
Q

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

A

element.tagName property

115
Q

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

A

takes selectors as its argument - a DOMString containing a selector list
- will return itself or the matching ancestor

116
Q

How can you remove an element from the DOM?

A

remove ( ) method

- removes objects from the tree it belongs to

117
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

event delegation

- adds the event listener to the one parent and then analyzes the bubbled events to find a match on child elements

118
Q

What is the event.target?

A
  • the thing on which the event was dispatched

the target property of the Event interface
- a reference to the object onto which the event was dispatched

119
Q

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

A

hides the entire document and removes it from the document flow

120
Q

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

A

a string representing the CSS selector it wants to test

returns a boolean

121
Q

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

A

getAttribute ( ) method

122
Q

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

A

after you declare a variable or any time a variable changes

after an if statement or conditional to see if code is working

123
Q

If you were to add another tab and view to your html, but you didnt use event delegation, how would your javascript code be written instead?

A

would have to use a new addEventListener for each tab and view you wanted to add

124
Q

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?

A

lots more conditionals

lots more code - would have to change each className and attribute individually

125
Q

What is JSON?

A

A standard text-based format for representing structured data based on Javascript Object Syntax

126
Q

What are serialization and deserialization?

A

Serialization is the process of converting an object into a stream of bytes so that it can be transferred over a network or stored in persistent storage
Deserialization is the reverse: when you get a stream of bytes from network or storage and convert it back into an object

127
Q

Why are serialization and deserialization useful?

A

allows you to transfer data between different platforms
network transmission
persistence

128
Q

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

A

stringify method of the JSON object

129
Q

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

A

parse method of the JSON object

130
Q

How do you store data in localStorage?

A

localStorage.setItem

- takes a key name and value name as arguments

131
Q

How do you retrieve data from localStorage?

A

localStorage.getItem

132
Q

What data type can localStorage save in the browser?

A

only strings

133
Q

When does the ‘beforeunload’ event fire on the window object?

A

when the window, the document and its resources are about to be unloaded

134
Q

What is a method?

A

A function that is the property of an object

135
Q

How can you tell the difference between a method definition and a method call?

A

A call will have real values in its arguments whereas a definition will placeholders as parameters

136
Q

Describe method definition syntax (structure).

A

Variable declared with the name of the function as its property
the function has a function keyword as its value along with the function codeblock and return statement

137
Q

Describe method call syntax (structure).

A

object.method(argument)

138
Q

How is a method different from any other function?

A

method is a function, but it is a function attached to an object which has access to the data stored on that object
it is a property of an object

139
Q

What is the defining characteristic of Object-Oriented Programming?

A

objects can contain both data (as properties) and behavior (as methods)
pairs data with behavior

140
Q

What are the four principles of object-oriented programming?

A
  1. abstraction
  2. encapsulation
  3. inheritance
  4. polymorphism
141
Q

What is abstraction?

A

being able to work with possibly complex things in simple ways

142
Q

What does API stand for?

A

application programming interface

143
Q

What is the purpose of an API?

A

simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer needs

144
Q

What is this in javascript?

A

an implicit parameter that refers to the object it belongs to

145
Q

What does it mean to say that this is an implicit parameter?

A

its available in a functions code block even though it was never included in the functions parameter list or declared with var

146
Q

When is the value of this determined in a function; call time or definition time?

A

call time

147
Q

How can you tell what the value of this will be for a particular function or method definition?

A

you can’t determine until it has been called

148
Q

How can you tell what the value of this is for a particular function or method call?

A

its either given the value of the global window object OR

you find where the function is called and look for an object to the left of the dot

149
Q

What kind of inheritance does the Javascript programming language use?

A

a prototype based (or prototypal) inheritance

150
Q

What is a prototype in javascript?

A

an object that contains properties and (predominantly) methods that can be used by other objects

151
Q

How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?

A

by defining on a prototype object and calling the datatypes with those methods

152
Q

If an object does not have it’s own property or method by a given key, where does javascript look for it?

A

the proto object

153
Q

What does the new operator do?

A

creates an instance of a user-defined object type or of one of the built in object types that has a constructor function

154
Q

What property of Javascript functions can store shared behavior for instances created with new?

A

function.prototype property

155
Q

What does the instanceof operator do?

A

tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object
return value is a boolean value

156
Q

What is a callback function?

A

a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine action

157
Q

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?

A

setTimeout( )

158
Q

How can you set up a function to be called repeatedly without using a loop?

A

setInterval( )

159
Q

What is the default time delay if you omit the delay parameter from setTimeout( ) or setInterval( )?

A

0 - executes immediately

160
Q

What do setTimeout( ) and setInterval( ) return?

A

a non-zero number that identifes the timer created by the call to setInterval - value can be passed to clearInterval to cancel

161
Q

What is a client?

A

service requester

162
Q

What is a server?

A

provider of a resource or service

163
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

164
Q

What three things are on the start-line of an HTTP request message?

A

HTTP method
Request Target
HTTP version

165
Q

What three things are on the start-line of an HTTP response message?

A

protocol version

usually 1.1

166
Q

What are HTTP headers?

A

the metadata of your requests
let the client and the server pass additional information with an HTTP request or response
consists of its case-insensitive name followed by a colon then by its value
whole header consist of one single line

167
Q

Is a body required for a valid HTTP request or response message?

A

no it is optional

168
Q

What is AJAX?

A

a technique for loading data into part of a page without having to refresh the entire page

169
Q

What does the AJAX acronym stand for?

A

Asynchronous Javascript and XML

170
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

XMLHttpRequest

171
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server

A

load

172
Q

An XMLHttpRequest object has an addEventListener( ) method just like DOM elements. How is it possible that they both share this functionality?

A

prototypal inheritance

173
Q

What is the JavaScript Event Loop?

A

checks if the call stack is empty - if it is then new functions are added from the event queue, if it’s not then the current function is processed

174
Q

What is different between ‘blocking’ and ‘non-blocking’ with respect to how code is executed?

A

blocking executes in a series - blocks executing of a statement until it completes the current statement
non-blocking executes in parallel or concurrently
blocking refers to operations that block further execution until that operation finishes while non-blocking refers to code that doesn’t block execution