Brainscape's Knowledge GenomeTM

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


See full index

LearningFuze > Week 3 > Flashcards

Week 3 Flashcards

1
Q

Why do we log things to the console?

A

To check our work.

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

What is a “model”?

A

Data structures that we use to define the shape of our data.

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

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

All the objects made in the document

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

What is a DOM tree?

A

A model of a Web Page. It stores in the browsers memory and it consists of four main types of nodes.

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(‘id)
querySelector(‘css selector’)

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

querySelectorAll(‘css selector’)

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

If your script needs to use the same element(s) more than once. It saves the browser from looking through the DOM tree to find the same element(s) again.

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 

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

It gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.

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

CSS Selector. Returns only the first of the matching elements.

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

CSS Selector. Returns all of those that match.a

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

What is the purpose of events and event handling?

A

To make the page interactive

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

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

A

Yes

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

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

A

AddEventListeners

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

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

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

A

An event object

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

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

A

In JavaScript, event.target is a property of an event object that refers to the element that triggered the event. This can be useful for identifying which element an event originated from, which is often necessary when working with event listeners.

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

What is the difference between these two snippets of code?

element.addEventListener(‘click’, handleClick)

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

A

handleClick in the first code snippet is used as a function reference rather than the return value of the function.

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

What is the className property of element objects?

A

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
21
Q

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

A

className

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

What is the textContent property of element objects?

A

Allows us to access the text and we can also change the text.

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

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

A

textContent

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

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

A

Yes

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

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

A

Faster to retrieve the information if stored. Better to rely on JavaScript rather than DOM.

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

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element.

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

Give four examples of CSS Transform functions.

A

Rotate, scale, skew, matrix

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

The transition property is shorthand for which four CSS properties?

A

Transition-property , transition-duration , transition-timing-function , and transition-delay.

30
Q

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

A

Focus

31
Q

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

A

Blur

32
Q

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

A

Input

33
Q

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

A

Submit

34
Q

What does the event.preventDefault() method do?

A

Tells the user that if the event does not get explicitly handled, its default action should not be taken as it normally would.

35
Q

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

A

It would automatically reload the page with the form’s values in the URL

36
Q

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

A

.element

37
Q

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

A

.value

38
Q

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

A

You don’t know where the error might have taken place.

39
Q

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

A

You can check your work while writing your code to see if you are doing it correctly.

40
Q

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

A

No

41
Q

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

A

Use appendChild()

42
Q

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

A

The name of the attribute and then the value

43
Q

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

A

create the element then appendChild() to an element in the document

44
Q

What is the textContent property of an element object for?

A

to access the text content of an element.

45
Q

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

A

className and setAttribute

46
Q

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

A

Can reuse the function and it is easier to run tests to see if your code is working.

47
Q

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

A

Width and Orientation

48
Q

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

A

HTML Viewport meta tag

49
Q

What is the event.target?

A

event.target is a property of the event object in JavaScript, used to identify the DOM element that triggered an event.

50
Q

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

A

Because of the bubbling phase

51
Q

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

A

nodeName

52
Q

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

A

The element.closest(selector) method takes a selector argument, which is a string that represents a CSS selector, and returns the closest ancestor element of the current element (element) that matches the selector.

The method returns null if no matching ancestor element is found.

53
Q

How can you remove an element from the DOM?

A

remove() method

54
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

Use event delegation

55
Q

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

A

Removes the element from the page.

56
Q

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

A

It takes a selector as an argument and it returns a boolean.

57
Q

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

A

getAttribute()

58
Q

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

A

Every step to see if you are getting what you want.

59
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

I would have to write a separate eventListener directly for each element.

60
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

A bunch of if/else statements.

61
Q

What is a breakpoint in responsive Web design?

A

The “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.

62
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 layout will be responsive based on the size of the screen, so the column will adjust to the size of the screen.

63
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

Cascading Style Sheets, and the “cascading” part refers to the way that styles are applied to an element. If multiple styles are defined for an element, the last declared style has the highest priority and will “win” over the previously declared styles.

64
Q

What is JSON?

A

JSON is a text-based data format following JavaScript object syntax. It is a string.

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

66
Q

Why are serialization and deserialization useful?

A

Serialization and deserialization are useful for converting complex data structures, such as objects in object-oriented programming or data in databases, into a format that can be easily stored and transmitted, such as a string of text or binary data. This enables you to save the state of an object or data structure, for example, to a file or database, and later restore it. It also makes it easier to transfer data between different systems and platforms, as the serialized data can be transmitted over a network or stored in a file that can be read on any system that supports the same format.

67
Q

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

A

JSON.stringify()

68
Q

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

A

JSON.parse()

69
Q

How do you store data in localStorage?

A

localStorage.setItem()

70
Q

How do you retrieve data from localStorage?

A

localStorage.getItem()

71
Q

What data type can localStorage save in the browser?

A

Strings

72
Q

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

A

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.

LearningFuze (8 decks)

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