Week 3 Flashcards
Why do we log things to the console?
To check our work.
What is a “model”?
Data structures that we use to define the shape of our data.
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
All the objects made in the document
What is a DOM tree?
A model of a Web Page. It stores in the browsers memory and it consists of four main types of nodes.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(‘id)
querySelector(‘css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll(‘css selector’)
Why might you want to assign the return value of a DOM query to a variable?
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.
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
It gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
What does document.querySelector() take as its argument and what does it return?
CSS Selector. Returns only the first of the matching elements.
What does document.querySelectorAll() take as its argument and what does it return?
CSS Selector. Returns all of those that match.a
What is the purpose of events and event handling?
To make the page interactive
Are all possible parameters required to use a JavaScript method or function?
Yes
What method of element objects lets you set up a function to be called when a specific type of event occurs?
AddEventListeners
What is a callback function?
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.
What object is passed into an event listener callback when the event fires?
An event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
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.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
handleClick in the first code snippet is used as a function reference rather than the return value of the function.
What is the className property of element objects?
Gets and sets the value of the class attribute of the specified element
How do you update the CSS class attribute of an element using JavaScript?
className
What is the textContent property of element objects?
Allows us to access the text and we can also change the text.
How do you update the text within an element using JavaScript?
textContent
Is the event parameter of an event listener callback always useful?
Yes
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
Why is storing information about a program in variables better than only storing it in the DOM?
Faster to retrieve the information if stored. Better to rely on JavaScript rather than DOM.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element.
Give four examples of CSS Transform functions.
Rotate, scale, skew, matrix
The transition property is shorthand for which four CSS properties?
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
What event is fired when a user’s cursor leaves a form control?
Blur
What event is fired as a user changes the value of a form control?
Input
What event is fired when a user clicks the “submit” button within a <form>?
Submit
What does the event.preventDefault() method do?
Tells the user that if the event does not get explicitly handled, its default action should not be taken as it normally would.
What does submitting a form without event.preventDefault() do?
It would automatically reload the page with the form’s values in the URL
What property of a form element object contains all of the form’s controls?
.element
What property of a form control object gets and sets its value?
.value
What is one risk of writing a lot of code without checking to see if it works so far?
You don’t know where the error might have taken place.
What is an advantage of having your console open when writing a JavaScript program?
You can check your work while writing your code to see if you are doing it correctly.
Does the document.createElement() method insert a new element into the page?
No
How do you add an element as a child to another element?
Use appendChild()
What do you pass as the arguments to the element.setAttribute() method?
The name of the attribute and then the value
What steps do you need to take in order to insert a new element into the page?
create the element then appendChild() to an element in the document
What is the textContent property of an element object for?
to access the text content of an element.
Name two ways to set the class attribute of a DOM element.
className and setAttribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Can reuse the function and it is easier to run tests to see if your code is working.
Give two examples of media features that you can query in an @media rule.
Width and Orientation
Which HTML meta tag is used in mobile-responsive web pages?
HTML Viewport meta tag
What is the event.target?
event.target is a property of the event object in JavaScript, used to identify the DOM element that triggered an event.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because of the bubbling phase
What DOM element property tells you what type of element it is?
nodeName
What does the element.closest() method take as its argument and what does it return?
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.
How can you remove an element from the DOM?
remove() method
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?
Use event delegation
What is the affect of setting an element to display: none?
Removes the element from the page.
What does the element.matches() method take as an argument and what does it return?
It takes a selector as an argument and it returns a boolean.
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
Every step to see if you are getting what you want.
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?
I would have to write a separate eventListener directly for each element.
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 bunch of if/else statements.
What is a breakpoint in responsive Web design?
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.
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?
The layout will be responsive based on the size of the screen, so the column will adjust to the size of the screen.
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?
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.
What is JSON?
JSON is a text-based data format following JavaScript object syntax. It is a string.
What are serialization and deserialization?
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.
Why are serialization and deserialization useful?
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.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How do you store data in localStorage?
localStorage.setItem()
How do you retrieve data from localStorage?
localStorage.getItem()
What data type can localStorage save in the browser?
Strings
When does the ‘beforeunload’ event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
