DOM 0206

Question 1

Why do we log things to the console?

Answer 1

so u can see what ur code’s doing

Question 2

What is a “model”?

Answer 2

a model made of objects representing the document (html)

Question 3

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

Answer 3

the document in the browser, an html document

Question 4

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

Answer 4

*all objects that make the model

Question 5

What is a DOM Tree?

Answer 5

a model of a web page in form of a tree

Question 6

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

Answer 6

getElementById( ) - uses value of id attribute
querySelector( ) - this uses css selector or element name etc, returns first matching element

Question 7

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

Answer 7

getElementByClassName( )
querySelectorALL( )

Question 8

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

Answer 8

In situations where you want to use it more than once.

storing it will make performance better later so the query doent’ have to be run again

Question 9

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

Answer 9

console.dir( )
*is dir directory?

Question 10

Why would a

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

Answer 10

Because JavaScript runs from top to bottom … the html needs to be parsed before we get to our js

Question 11

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

Answer 11

takes a css selector , or others, as an argument. it returns the first element

Question 12

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

Answer 12

elements (and others) and returns all nodes with that name

Question 13

what is the defer keyword?

Answer 13

it is legacy style, but it allows for full page to load before creating dom tree, NO MATTER WHERE the script tag is located

Question 14

What is the purpose of events and event handling?

Answer 14

To run code under specific circumstances

Question 15

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

Answer 15

no

Question 16

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

Answer 16

add event listener method

E g,

Document. queryselector(class).addeventlistener(‘click’, callbackfunction)

Question 17

What is a callback function?

Answer 17

function passed into another as an argument

Question 18

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

Answer 18

the “event” object

Question 19

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

Answer 19

the specific html element that was interacted with

I guess you could console log it or you could console.dir it

Question 20

What is the difference between these two snippets of code?

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

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

Answer 20

the second one will be unfefined
*(review this for as to why)

Question 21

What is the className property of element objects?

Answer 21

it allows you to get or update a class name

Question 22

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

Answer 22

select element with class name and assign

• Query selector for getting
• .className = ‘class’
  I think without the period for the class name

Question 23

What is the textContent property of element objects?

Answer 23

allows u to access text content in an element

*And change it?

Question 24

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

Answer 24

uses textContent property to update it

Question 25

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

Answer 25

I believe it is not only useful but also always necessary

Question 26

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

Answer 26

More complicated because we would have to write some of the code more than once, that is each time we would want to use the code that we could otherwise put inside a variable

Question 27

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

Answer 27

it’s faster to retrieve, and we don’t want to depend on the dom as it’s dynamic and changing

Question 28

this (below) is a getter/setter. how do u convert from one to the other?

className

Answer 28

(this sets it)
$hotButton.className = ‘hot-button hot’;

vs

(this gets it)
$hotButton.className;

Question 29

should u use “innterText” method?

Answer 29

no, it’s a hacking vulnerability

Question 30

Css.
What does the transform property do?

Answer 30

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

Question 31

Give four examples of CSS transform functions.

Answer 31

rotate, scale, skew, or translate

Question 32

what does the space before colon do?:

.pokeball-wrapper:first-child

.pokeball-wrapper :first-child

Answer 32

without space: first child among pokeball wrapper children, that is this Pokeball rappers siblings

with space: first child inside the pokeball wrapper, that is this Pokeball rapper’s children

*double check to confirm this

Question 33

how do you select items for manipulation with the dom?

Answer 33

Query selector method

Question 34

how do you listen for things on the dom?

Answer 34

Add event listener

Question 35

The transition property is shorthand for which four CSS properties?

Answer 35

delay, duration, easing, delay

Question 36

do you apply transitions to the class or pseudo class?

Answer 36

apply it to the class for full functionality

Question 37

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

Answer 37

the “focus” event

Question 38

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

Answer 38

*the “blur” event

Question 39

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

Answer 39

the input event

Question 40

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

Answer 40

the “submit” event

Question 41

What does the event.preventDefault() method do?

Answer 41

prevents default behavior,

*and in the case today it prevents the page from resetting after submitting a form

Question 42

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

Answer 42

it would reload the page

Question 43

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

Answer 43

.elements

Question 44

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

Answer 44

.value

Question 45

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

Answer 45

wasting time!

Question 46

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

Answer 46

so you can see functionality thru console logs etc.

Question 47

study and explain this code:

function handleFocus(event) {
console.log(‘focus event fired’);
console.log(event.target.name);
}

function handleBlur(event) {
console.log(‘blur event fired’);
console.log(event.target.name);
}

function handleInput(event) {
console.log(event.target.name, event.target.value);
}

var inputUserName = document.querySelector(‘#user-name’);
var inputUserEmail = document.querySelector(‘#user-email’);
var textArea = document.querySelector(‘#user-message’);

inputUserName.addEventListener(‘focus’, handleFocus);
inputUserName.addEventListener(‘blur’, handleBlur);
inputUserName.addEventListener(‘input’, handleInput);

inputUserEmail.addEventListener(‘focus’, handleFocus);
inputUserEmail.addEventListener(‘blur’, handleBlur);
inputUserEmail.addEventListener(‘input’, handleInput);

textArea.addEventListener(‘focus’, handleFocus);
textArea.addEventListener(‘blur’, handleBlur);
textArea.addEventListener(‘input’, handleInput);

Question 48

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

Question 49

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

Question 50

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

Question 51

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

Question 52

What is the textContent property of an element object for?

Question 53

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

Answer 53

*
.setAttribute or
.setClassName?

Question 54

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

Question 55

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

Answer 55

min-width
max-width

Question 56

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

Answer 56

*viewport?

Question 57

What is the event.target?

Answer 57

tells you what was interacted with

Question 58

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

Question 59

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

Answer 59

tag name

Question 60

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

Question 61

How can you remove an element from the DOM?

Answer 61

using the remove( ) method

Question 62

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?

Answer 62

*add to parent to catch what happens on children

Question 63

What is the event.target?

Question 64

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

Answer 64

it is treated as having disappeared (not being there)

Question 65

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

Answer 65

*class, id, element?

Question 66

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

Answer 66

the getAttribute( ) method

Question 67

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

Answer 67

whenever possible, before writing too much more code

Question 68

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?

Answer 68

target the children

Question 69

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?

Answer 69

more conditional statements (e.g. if else, switch etc.)

Question 70

What is a breakpoint in responsive Web design?

Answer 70

the point at which a css rule activates based on parameters set

Question 71

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?

Answer 71

it responds to changes in screen size / different screen sizes

Question 72

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?

Answer 72

all else equal, selectors lower in the document are higher in priority.

that is, source order

Question 73

should design begin with mobile or desktop screens?

Answer 73

you should perhaps start with mobile because it’s easier to make things for bigger from smaller screens than vice versa

side note, min width is as screen grows, and what u use when u start with designing for mobile. and vice versa.

Question 74

what do these do?

git stash
git stash apply

Answer 74

git stash saves a copy and puts it aside

git stash apply brings that previous copy back

Question 75

how do you get code which spills out the window to fit?

Answer 75

ctrl + z

Question 76

What is JSON?

Answer 76

JavaScript Object Notation (JSON) is an extremely common data interchange format used to send and store information in computer systems.

It is is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You’ll come across it quite often,

Question 77

What are serialization and deserialization?

Answer 77

Serialization is the process of turning an object in memory into a stream of bytes (1s and 0s) 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.

Question 78

Why are serialization and deserialization useful?

Answer 78

*so it can be stored and sent.

*it’s more efficient because it turns it into a simpler, more generic format?

Question 79

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

Answer 79

use the JSON.stringify(books)

e.g.
var books = [
{
isbn: ‘1234567’,
title: ‘book one’,
author: ‘author one’
},
{
isbn: ‘234567’,
title: ‘book two’,
author: ‘author two’
}
];

JSON.stringify(books)

Question 80

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

Answer 80

use: JSON.parse( )

call the method using a string of the data structure, e.g.

JSON.parse(‘{ “id”: 567, “name”: “Jon Doe” }’)

Question 81

How do you store data in localStorage?

Answer 81

use the setItem method on the localStorage object, e.g.

localStorage.setItem(‘javascript-local-storage’, todosJSON)

Question 82

How do you retrieve data from localStorage?

Answer 82

use the getItem method on the localStorage object, e.g.

localStorage.getItem(‘javascript-local-storage’);

Question 83

What data type can localStorage save in the browser?

Answer 83

a JSON string

allows you to access a Storage object for the Document’s origin; the stored data is saved across browser sessions.

Question 84

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

Answer 84

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

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Question 85

what is event handling?

Answer 85

the three steps involved in getting an event to trigger JS code

those are:
1 select element
2 specify event
3 call the code

Question 86

how do you change the text content of a node?

Answer 86

e.g.

document.getElementById(‘divA’).textContent = ‘This text is different!’;

Question 87

what does this tag do?

<meta></meta>

*from css-media-queries exercise

mdn doc:
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Answer 87

it sets the scale to 100% on mobile devices, not manipulating it to scale up or down as it usually does in the default mode

Question 88

what does this do:
e.target.closest(‘.task-list-item’) ancestor element.

Answer 88

it gets the event’s closest ancestor with that class name, in this case it’s task-list-item.

if the event is a ‘click’ on a button element, which is a child of an element with ‘.task-list-item class, the clicking of the button would get that element (class: task-list-item). it could then be removed by using the .remove() method

Question 89

what is this code doing?

var taskList = document.querySelector(‘.task-list’);

taskList.addEventListener(‘click’, taskListCallback);
function taskListCallback(e) {
console.log(‘event target:’, e.target);
console.log(‘event tagname:’, e.target.tagName);
if (e.target && e.target.nodeName === ‘BUTTON’) {
console.log(taskList.closest(‘.task-list-item’));
e.target.closest(‘.task-list-item’).remove();
}
}

OR THE BELOW(THEY ARE DOING THE SAME THING BUT BELOW HAS ONE LINE SEPARATED INTO A VARIABLE

var taskList = document.querySelector(‘.task-list’)

taskList.addEventListener(‘click’, callBackFunction);
function callBackFunction(e) {
console.log(‘event target:’, e.target);
console.log(‘event tagname:’, e.target.tagName);
if (e.target.tagName === ‘BUTTON’) {
var closestAncestor = e.target.closest(‘.task-list-item’);
console.log(closestAncestor);
e.target.closest(‘.task-list-item’).remove();
}
}

https://photos.app.goo.gl/bBR6vCTogWtTbkKu9

Answer 89

you know if you succeeded/failed

Question 90

read and explain this dom-creation code

https://photos.app.goo.gl/oLMaEFW8iumAXgFJ8

Answer 90

https://photos.app.goo.gl/oLMaEFW8iumAXgFJ8

Question 91

read and explain this javascript-view-swapping code

JS

https://photos.app.goo.gl/UCmjRdCDEtwipxoA8

HTML
https://photos.app.goo.gl/K2LqJybHX2PxfD3P9