Brainscape's Knowledge GenomeTM

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


See full index

LFZ Coding > Week 3 Quiz Questions > Flashcards

Week 3 Quiz Questions Flashcards

1
Q

Why do we log things to the console?

A

Makes sure script is running properly

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

What is a “model”?

A

it is a version/ representation of the webpage that is not the original, source file/ code

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

document/ document node represents the entire page in the DOM tree

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

the different objects in nodes in a DOM tree (text content, etc)

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

What is a DOM Tree?

A

DOM tree is a representation of the different nodes that make up the DOM

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

.getElementByClassName(‘class’)

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

we can cache the selection and not have to worry about the browser having to look through the DOM tree– it knows exactly where the element is, if saved to a variable

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

so that the browser can access and parse out all the code to the webpage before the javascript code can do anything

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

takes a CSS selector and returns the first instance of that selector

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

takes a CSS selector and returns all instances of the selector in a nodelist

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

how should DOM query variables look like?

A

generally, should start with ‘$’
$variable

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

so that when an action/ event occurs in a webpage there is dynamic code that is executed because of the event

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, not all need parameters

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

it is the ‘event’ object (the function(event))
event being provided from the element that is being queried
indicates where event is taking place

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

specific element that is being targeted in the event object that executes

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

first one function only executes once the event executes.

second one’s function ‘handleClick() will always run regardless of the event click(when the browser is loaded)

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

allows your to retrieve the class name of an element and/or change the class name

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:

object.className = ‘new-class-name’ (no periods)

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

you can collect all text content from the specified object with textContent and can also change the text content within (changes the markup as well)
(anything between the tags)

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

element.textContent = ‘new text content’

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

not always (like in the dom-manipulation exercise)

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– using a variable to track the number of clicks allows for the variable to change as the clicks change, so trying the assignment without the variable would create extra steps
(would have to query the p tag to get the number and then change it)

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

the information in the variable can be used/accessed in other places other than that specific webpage

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

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element. (2d or 3d)

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

skew, translate, rotate, scale

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

The transition property is shorthand for what CSS properties?

A

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

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

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

A

‘focus’ event

32
Q

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

A

‘blur’ event

33
Q

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

A

‘change’ event

34
Q

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

A

‘submit’ event

35
Q

What does the event.preventDefault() method do?

A

tells the user agent (browser) that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

36
Q

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

A

it will refresh the page and all form control areas

37
Q

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

A

elements property:
document.forms[0].elements.password
OR document.forms[0].elements.[0]

38
Q

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

A

‘.value’ property –

39
Q

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

A

‘.value’ property – document.forms[0].elements.[0].value

40
Q

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

A

if theres an error you don’t know exactly where it may be in the many steps that you are taking if you dont check frequently

41
Q

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

A

easy to check if code is running correctly

42
Q

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

A

not necessarily– it will create the element, but it still needs to be appended

43
Q

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

A

using the ‘.appendChild()’ method

44
Q

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

A

two arguments, first you set the attribute type (id, class, etc.) and second you set the value.

45
Q

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

A

first create the new element with .createElement() and then give it some content (optional) .createTextNode() or .textContent you need to select the parent of the element by .querySelector() (or other methods) to determine where the new element goes, and then you append the new element with .append() or .appendChild()

46
Q

What is the textContent property of an element object for?

A

can obtain / update the text content of the targeted element object

47
Q

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

A

element.setAttribute(‘class’, ‘image.png’)
OR element.className = ‘class’

48
Q

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

A

a function can be used multiple times in different places without having to write a ton more code to do the same thing

49
Q

.append() vs .appendChild()

A

append() you can add multiple elements as opposed to appendChild() appends just one element

50
Q

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

A

(min-width: 000px) or (max-width: 000px)

51
Q

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

A

name=”viewport”

52
Q

What is the event.target?

A

event.target returns the element where the event occurred (whatever element that was ‘clicked’ on or any other event)

53
Q

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

A

event flow– event bubbling.
even listeners to parent elements also apply to its children elements

54
Q

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

A

.tagname property
event.target.tagname

55
Q

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

A

takes any valid CSS selector in quotations and returns the closest ancestor element of the selector (or itself)

56
Q

How can you remove an element from the DOM?

A

element.remove() method (no arguments inside

57
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

adding an event listener to parent element

58
Q

What is the event.target?

A

it is the element that is being targeted when an event occurs

59
Q

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

A

no content appears on the webpage

60
Q

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

A

takes CSS selector and returns boolean

61
Q

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

A

.getAttribute(‘attributename’)

62
Q

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

A

as often as you can!!!

63
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 can use addEventListeners directly to the child of any div rather than using event delegation (event listener on the parent)

64
Q

What is a breakpoint in responsive Web design?

A

we use media queries to determine where to make a break point/ flow changes

65
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

percentages are relative and proportionally not thrown off when size changes

66
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

CSS source order overrides

66
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

CSS source order overrides

67
Q

What is JSON?

A

text-based data in the format of Javascript object
requires double quotes for the “properties”– single quotes wont work

68
Q

What are serialization and deserialization?

A

serialization– turning objects in memory into a stream of bytes
deserialization– opposite: turning a stream of bytes into and object in memory

69
Q

Why are serialization and deserialization useful?

A

useful for transmitting data across a network (as it is just a string of characters)

70
Q

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

A

use JSON.stringify(dataToStringify)

71
Q

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

A

use JSON.parse(dataToParse)

72
Q

How do you store data in localStorage?

A

use localStorage.setItem(‘key’, ‘value’)

73
Q

How do you retrieve data from localStorage?

A

use localStorage.getItem(‘key’)
returns value/ data

74
Q

What data type can localStorage save in the browser?

A

strings – UTF-16 string data

75
Q

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

A

it fires right before the page/ window unloads

LFZ Coding (8 decks)

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