DOM I
What is the DOM
An _____ can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by API's to represent the progress of an asynchronous task.
What is event?
A _______ is made of several parts: HTML, CSS, or JavaScript brought together for reuse in a website or application.
What is component?
A ______ is a proxy for a value not necessarily known when it is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns this to supply the value at some point in the future.
What is a promise?
How long are you given to complete a sprint challenge?
What is three hours?
When a web page is loaded into a browser, the browser first looks for the ______ file.
What is the HTML file
______ takes two arguments, first the event to listen for and, second, the callback to fire when the event is triggered.
What is .addEventListener
Study the code below:
function buttonCreator(buttonText){
const button = document.createElement('button');
button.textContent = buttonText;
button.classList.add('button');
button.addEventListener('click', (e) => {
console.log('clicked!');
});
return button;
}
let firstButton = buttonCreator('Button 1');
let secondButton = buttonCreator('Button 2');
parent.appendChild(firstButton);
parent.appendChild(secondButton);
**What kind of component did we create?
What is a button component?
This is essentially a connection that allows two servers to communicate with one another.
What is an API?
What are you required to do each morning from 8:00-9:00 PST?
What is "TK prep"?
Given the following code,
Const firstTitle = document.querySelector(‘.card-title’);
How would I change the color of firstTitle to blue?
What is firstTitle.style.color = "blue";
This method prevents further propagation of the current event in the capturing and bubbling phases.
What is stopPropagation()
Given the following code,
button.textContent = 'Button 1';
How would we give this button a class called "button"?
What is button.classList.add('button'); ?
This is a way to keep track of all of our code in Javascript.
Also known as a mechanism for an interpreter (like JS) to keep track of it’s place in a script that calls multiple functions
Christina's example:
(Think of it as a stack of books) Whatever is on top, you take off first!
What is the callstack?
At Lambda, we follow the _____ minute rule when asking for help on a project
What is the 20 minute rule?
Study this code:
<header>
<h1 class="main-header">Selectors!</h1>
<nav class="main-nav">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Blog</a>
<a href="#" class="nav-item">Contact</a>
</nav>
</header>
How do we select all of the 'a' tags within our navigation?
What is const anything = document.querySelectorAll('a');
Which event method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be?
What is preventDefault() ?
One of the simplest array methods is _____ .. it runs the array through a loop, passing each item to our callback function. It doesn’t return a new array or mutate the data at all (unless we tell it to). This is a simple way to iterate over the array, create components, and add them instantly to the DOM
What is .forEach method?
What do we call code that does not run instantly in line?
What is Asynchronous code?
When did your ISA officially begin?
What is Last Monday! (first day of Unit 2)?
Given the following code,
<header>
<h1 class=”main-header">Selectors!</h1>
<nav class="main-nav">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Blog</a>
<a href="#" class="nav-item">Contact</a>
</nav>
</header>
const multipleSelections = document.querySelectorAll(‘a’);
console.log(multipleSelections[2]);
What would be the log result of the above code?
What is "<a href=’#’ class=’nav-item’>Blog</a>"
One of the most important properties of the event object is .________
(This property will give us all of the info about the DOM node where the event happened)
What is the core component in the repeatable nature of components?
What is JavaScript?
A promise can exist in one of three states. What are these three states?
What is pending, fulfilled, and rejected?
Who are both of WEB28's Section Leads? (First & Last names)
Who are Amber Sorensen and Christine Carpenter?