Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

LearningFuze Full Immersion > 3/28 - 4/1/2022 > Flashcards

3/28 - 4/1/2022 Flashcards

1
Q

Why do we log things to the console?

A

To keep track of what is going on in our code and for debugging purposes.

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

What is a “model”?

A

A representation of a real-world object or some structure.

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

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

A

The HTML document

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

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

A

It is referring to what the DOM is made of, which are objects.

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

What is a DOM Tree?

A

It is what the DOM uses to tell the browser how to structure the model of the HTML page in its memory.

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

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

A

getElementById and querySelector

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

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

A

getElementsByClassName

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

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

A

You might want to use it later on down the script.

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

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

A

console.dir()

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

Why would a script 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.

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

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

A

It takes a CSS selector and returns the first matching element.

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

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

A

It takes a CSS selector and returns all matching elements.

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

Why do we log things to the console?

A

To keep track of what’s going on in our program and for debugging.

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

What is the purpose of events and event handling?

A

Events specify what event is occurring in the browser and event handlers handle code when an event is triggered or fired.

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

Are all possible parameters required to use a JavaScript method or function?

A

No

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

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

A

addEventListener()

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

What is a callback function?

A

A function passed into another function as an argument.

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

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

A

Event object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
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 node that is selected by the access method (querySelector or getElementByID).
You could check by checking the console. And you could get more information by google searching it and looking it up on MDN.

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

What is the difference between these two snippets of code?

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

A

The first line is listening for the event and waiting before calling the function by omitting the parentheses after the function name “handleClick”.
The second line is calling the function without listening for the ‘click’ event by including the parentheses after ‘handleClick’. So this line would run the function as the page loads, regardless of the event happening or not.

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

What is the className property of element objects?

A

The className property of an element object gets and sets the value of the class attribute of the specified element.

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

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

A

Use the className property of the targeted class and assign it the updated value.

Ex: var $hotButton = document.querySelector(‘.hot-button’);
$hotButton.className = ‘not-button’;

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

What is the textContent property of element objects?

A

The textContent property of the Node interface represents the text content of the Node and its descendants.

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

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

A

Use the textContent property of the targeted node; and assign it the updated value.

Ex: var $clickCount = document.querySelector(‘.click-count’);
$clickCount.textContent = ‘some text’;

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

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

A

No

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

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

More complicated

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

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

A

Because it saves the extra time of having to search through the DOM every time we need the same information.

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

What does the transform property do?

A

It lets you scale, rotate, skew or translate an element. It modifies the coordinate space of the CSS visual formatting model.

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

Give four examples of CSS transform functions.

A

translate, scale, rotate, skew

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

The transition property is shorthand for which four CSS properties?

A
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
31
Q

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

A

focus

32
Q

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

A

blur

33
Q

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

A

input

34
Q

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

A

submit

35
Q

What does the event.preventDefault() method do?

A

It prevents the browser from automatically reloading the page with the form’s values in the URL.

36
Q

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

A

The page is submitted, browser reloads the page, and it leaves the form’s values in the URL.

37
Q

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

A

The ‘elements’ property

38
Q

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

A

name

39
Q

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

A

If something goes wrong, it is hard to track down where you made the mistake(s).

40
Q

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

A

You can see whether your program is working as you’d expect it to.

41
Q

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

A

No, it just creates a new element.

42
Q

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

A

Using the appendChild() method with the element being added placed inside the parentheses. The name of the element (or variable) that you want to add the element to comes before the appendChild() method.

43
Q

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

A
  1. The name of the attribute.

2. The name of the value of the attribute. This can also be the parameter if this method is used inside a function.

44
Q

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

A
  1. Create the element using createElement()
  2. Create the text node (if any) using createTextNode() with the text to be added inside the parentheses.
  3. Add it to the DOM using appendChild(). The node being added to comes before the ‘appendChild()’ and the node to insert is placed inside the parentheses.
45
Q

What is the textContent property of an element object for?

A

The textContent property of an element object is used to get or set the text content of a node and its descendants.

You can use this property to assign the text content of a node to a variable; or you can change the text content of a node by assigning some text content to the node on the left of the assignment operator(=).

ex. var text = document.getElementById(‘get’).textContent;
ex. document.getElementById(‘set’).textContent = ‘some text’;

46
Q

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

A
  1. setAttribute(‘class’, ‘value’)

2. className property

47
Q

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

A
  1. You don’t have to go into the HTML file and create a moderately complex structure composed of several divs potentially a large number of times. If it’s all in the function, you just have to call it.
  2. It allows much more flexibility as you can pass in an argument, such as an index of an array that is to be applied to specific parts of an HTML structure with attributes such as classes and ‘src’ of img’s.
48
Q

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

A
  1. The inverted colors media feature can be used to test whether the user agent or underlying OS is inverting colors.
  2. The hover media feature can be used to test whether the user’s primary input mechanism can hover over elements.
49
Q

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

A

The “viewport” meta tag

50
Q

What is the event.target?

A

event.target is a property of the event interface; and it is a reference to the object onto which the event was dispatched (or a reference to the object on which the event occurred).

Another answer is the element that triggered the event.

51
Q

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

A

Because of event bubbling

52
Q

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

A

event.target.tagName

53
Q

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

A

A selector that is a DOMString and it returns the first matching element. It returns null or undefined if it doesn’t find the specified selector

54
Q

How can you remove an element from the DOM?

A

Using the remove() method.

ex. element.remove()

55
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

Using event delegation on the parent of the clickable DOM element by adding an event listener on the parent and setting an if statement to compare the clicked element to the name of the new element.

56
Q

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

A

It hides that element on the page.

57
Q

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

A

element.matches() takes a string that represents an a selector to test and returns a boolean.

58
Q

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

A

The getAttribute() method.

59
Q

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

A

The line following the definition of a for loop to see what the value of the counter is and to see the value of the index of the array being looped.
It can also be helpful to place a console.log after the line declaring an if statement to see what is going on in the code.

60
Q

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?

A

You would have to create an event listener for each tab and view.

61
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

You would have to write a separate function for each view specifying one view to display while all the others were hidden.

62
Q

What is a breakpoint in responsive Web design?

A

It is a point where a media query is introduced. If the browser window or a device’s window is above or below the breakpoint size, the media query rule will be applied.

63
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

The percentage width is relative to the viewport of the device opposed to the fixed width which is absolute because it is measured in pixels. This is useful for a column class in a responsive layout because percentages allow for flexibility. This is especially useful for phones and tablets where the display can be in portrait or landscape modes and the pixel sizes for their viewports change depending on the mode.

64
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

Source order of CSS. The cascade will only consider the rule set that was defined later in the stylesheet. In this case, the smaller min-width is defined after the larger min-width; so CSS will consider the smaller min-width over the larger min-width rule.

65
Q

What is JSON?

A

JSON is a data interchange format used to send and store information in computer systems.
JSON is a text-based data format following JavaScript object syntax.

66
Q

What are serialization and deserialization?

A

Serialization is converting a native object to a string so it can be transmitted across the network.
Deserialization is converting a string to a native object in order to access data.

67
Q

Why are serialization and deserialization useful?

A

Serialization is useful because it allows you to store data on disks and send it over the network.
Deserialization is useful because it takes the data from the network and stores it in memory and allows access to the data.

68
Q

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

A

JSON.stringify() with the string to be serialized placed in the parentheses

69
Q

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

A

JSON.parse() with the string to be deserialized placed inside the parentheses.

70
Q

How do you store data in localStorage?

A

localStorage.setItem(keyName, keyValue);

The keyName and keyValue should be in quotes.

71
Q

How do you retrieve data from localStorage?

A

localStorage.getItem(keyName);

The keyName should be in quotes.

72
Q

What data type can localStorage save in the browser?

A

JSON string

73
Q

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

A

When you reload the page.

Or when the document is unloaded

LearningFuze Full Immersion (56 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions