Week 3 Quiz Questions Flashcards by Jonah Park

Why do we log things to the console?

Makes sure script is running properly

How well did you know this?

Not at all

Perfectly

What is a “model”?

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

What is a DOM Tree?

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

How well did you know this?

Not at all

Perfectly

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

.getElementById(‘id’)
.querySelector(‘.css selector’)

How well did you know this?

Not at all

Perfectly

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

.getElementByClassName(‘class’)

How well did you know this?

Not at all

Perfectly

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

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?

Not at all

Perfectly

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

console.dir()

How well did you know this?

Not at all

Perfectly

Why would a

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

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?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

how should DOM query variables look like?

generally, should start with ‘$’
$variable

How well did you know this?

Not at all

Perfectly

What is the purpose of events and event handling?

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?

Not at all

Perfectly

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

no, not all need parameters

How well did you know this?

Not at all

Perfectly

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

.addEventListener()

How well did you know this?

Not at all

Perfectly

What is a callback function?

a function that is passed into another function as an ARGUMENT

How well did you know this?

Not at all

Perfectly

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

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?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

What is the difference between these two snippets of code?

element.addEventListener(‘click’, handleClick)

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

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?

Not at all

Perfectly

What is the className property of element objects?

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

How well did you know this?

Not at all

Perfectly

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

use the className property:

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

How well did you know this?

Not at all

Perfectly

What is the textContent property of element objects?

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?

Not at all

Perfectly

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

element.textContent = ‘new text content’

How well did you know this?

Not at all

Perfectly

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

not always (like in the dom-manipulation exercise)

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

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)

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

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

What does the transform property do?

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

Give four examples of CSS transform functions.

skew, translate, rotate, scale

The transition property is shorthand for what CSS properties?

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

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

'focus' event

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

'blur' event

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

'change' event

What event is fired when a user clicks the "submit" button within a

'submit' event

What does the event.preventDefault() method do?

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.

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

it will refresh the page and all form control areas

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

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

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

'.value' property --

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

'.value' property -- document.forms[0].elements.[0].value

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

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

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

easy to check if code is running correctly

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

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

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

using the '.appendChild()' method

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

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

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

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

What is the textContent property of an element object for?

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

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

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

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

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

.append() vs .appendChild()

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

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

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

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

name="viewport"

What is the event.target?

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

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

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

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

.tagname property event.target.tagname

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

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

How can you remove an element from the DOM?

element.remove() method (no arguments inside

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?

adding an event listener to parent element

What is the event.target?

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

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

no content appears on the webpage

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

takes CSS selector and returns boolean

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

.getAttribute('attributename')

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

as often as you can!!!

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?

you can use addEventListeners directly to the child of any div rather than using event delegation (event listener on the parent)

What is a breakpoint in responsive Web design?

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

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?

percentages are relative and proportionally not thrown off when size changes

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?

CSS source order overrides

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?

CSS source order overrides

What is JSON?

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

What are serialization and deserialization?

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

Why are serialization and deserialization useful?

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

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

use JSON.stringify(dataToStringify)

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

use JSON.parse(dataToParse)

How do you store data in localStorage?

use localStorage.setItem('key', 'value')

How do you retrieve data from localStorage?

use localStorage.getItem('key') returns value/ data

What data type can localStorage save in the browser?

strings -- UTF-16 string data

When does the 'beforeunload' event fire on the window object?

it fires right before the page/ window unloads