HTML Flashcards
Where do you put non-visible content about the HTML document?
inside the head element
Where do you put visible content about the HTML document?
inside the body element
Where do the head and tags go in a valid HTML document?
inside the html element
What is the purpose of a doctype declaration?
to let the browser know what html version the page is using
Give five examples of HTML element tags.
p, div, head, title, h1
What is the purpose of HTML attributes?
to give more information about an element
Give an example of an HTML entity (escape character).
& amp for ampersand
How do block-level elements affect the document flow?
block-level elements always show up on a new line
How do inline elements affect the document flow?
inline elements do not take up a new line and start next to previous content
What are the default width and height of a block-level element?
default width is all the width of the container and default height is however much height it needs
What are the default width and height of an inline element?
default width and height are both however much space the element needs, however cannot be modified through CSS
What is the difference between an ordered list and an unordered list in HTML?
Unordered lists begin with bullet points, ordered lists are numbered
Is an HTML list a block element or an inline element?
Lists are block level elements
What HTML tag is used to link to another website?
the anchor tag
What is an absolute URL?
Absolute paths are the full paths to a specific resource
What is a relative URL?
Relative paths are paths that are relative to your current path
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
childDirectory/
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
./
What is the purpose of an HTML form element?
to collect information from a user
Give five examples of form control elements.
radio button, checkboxes, drop-down boxes, submit button, text input
Give three examples of type attributes for HTML input elements.
radio, checkbox, submit
Is an HTML input element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
table, thead, tbody, tr, td, th
What purpose do the thead and tbody elements serve?
thead is used as the heading for the table
tbody is used for the body content of the table
Give two examples of data that would lend itself well to being displayed in a table.
weather forecast, report card
What are the names of the individual pieces of a CSS rule?
selector and declaration
In CSS, how do you select elements by their class attribute?
.className
In CSS, how do you select elements by their type?
their tag
In CSS, how do you select an element by its id attribute?
idvalue
Name three different types of values you can use to specify colors in CSS.
hex value, name, rgb values, and hsl
What CSS properties make up the box model?
border, margin, padding
Which CSS property pushes boxes away from each other?
margin
Which CSS property add space between a box’s content and its border?
padding
What is a pseudo-class?
specifies a special state of an element
What are CSS pseudo-classes useful for?
let’s you dynamically change the style of an element based on a user’s interaction with it or other external factors
Name at least two units of type size in CSS.
pixels, percentages, ems
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
no-wrap
What are the four components of “the Cascade”.
source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
the order that css rulesets are written out in the css file determines what styling is applied. The LAST rule is what gets used.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
some properties are inherited properties and will take the parent properties’ value
List the three selector types in order of increasing specificity.
tag, class, id
Why is using !important considered bad practice?
disrupts the cascading nature of css which can make it difficult for debugging
Why do two div elements “vertically stack” on one another by default?
div is block level element so the second div goes under the first div due to divs taking up all the width of a page
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
moves an element in relation to where it would have been in normal flow.
How does setting position: relative on an element affect where it appears on the page?
by default won’t move the element but can set offset with the 4 offset properties
How does setting position: absolute on an element affect document flow?
it removes itself from the flow of the document
How does setting position: absolute on an element affect where it appears on the page?
its offset is based off of its constraining element
How do you constrain an absolutely positioned element to a containing block?
set the containing block’s position property to relative
What are the four box offset properties?
top, bottom, left, right
What is the purpose of variables?
to store a value for later usage
How do you declare a variable?
var, let, const
How do you initialize (assign a value to) a variable?
varName = value
What characters are allowed in variable names?
letters, digits, underscores, and dollar signs.
What does it mean to say that variable names are “case sensitive”?
different casing means different variables
What is the purpose of a string?
to describe text values
What is the purpose of a number?
to describe numeric values
What is the purpose of a boolean?
to describe true and false values
What does the = operator mean in JavaScript?
assignment operator
How do you update the value of a variable?
varName = value
What is the difference between null and undefined?
null is intentionally defined while undefined means a variable contains no value
Why is it a good habit to include “labels” when you log values to the browser console?
it is easy to lose track of which logs belongs to which variables
Give five examples of JavaScript primitives.
number, boolean, string, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
when two or more strings are added together
What purpose(s) does the + plus operator serve in JavaScript?
adds numbers together or concatenates strings together
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds variable’s value to operand and reassings the value to itself
What are objects used for?
group a set of variables and functions to model after real world objects
What are object properties?
variables in an object
Describe object literal notation.
{
property: value,
property: value
}
How do you remove a property from an object?
delete keyword in front of the dot notation of the property of the object you want to delete
What are the two ways to get or update the value of a property?
dot notation or square brackets
What are arrays used for?
store a list of values
Describe array literal notation.
[val1,val2,val3]
How are arrays different from “plain” objects?
used to store data that are related, array also preserves order, numeric indexing
What number represents the first index of an array?
0
What is the length property of an array?
contains the number of elements in an array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
reusable code that can be repeatedly called for different situations
Describe the parts of a function definition.
function keyword, function name, parameters, code block
Describe the parts of a function call.
function name, arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition defines the code block and parameters of the function while function call runs the code block with the given arguments
What is the difference between a parameter and an argument?
parameters are what arguments will be assigned to when passed into the function call
Why are function parameters useful?
allows a code block to be more dynamic depending on the input arguments
What two effects does a return statement have on the behavior of a function?
produces a value from function code block and stops running any additional code from the function code block
Why do we log things to the console?
to check if our code is running with intended behavior
What is a method?
a function property of an object
How is a method different from any other function?
methods are called with its containing object or object constructor
How do you remove the last element from an array?
array.pop()
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.random()
How do you delete an element from an array?
array.splice()
How do you append an element to an array?
array.push()
How do you break a string up into an array?
string.split()
Do string methods change the original string? How would you check if you weren’t sure?
no, strings are immutable in JS, can console log the string
Roughly how many string methods are there according to the MDN Web docs?
36
Is the return value of a function or method useful in every situation?
no sometimes you only need the functionality of the function/method
Roughly how many array methods are there according to the MDN Web docs?
38
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
What is the purpose of a loop?
to run a code block multiple times until a condition is met
What is the purpose of a condition expression in a loop?
it lets the for loop know when to stop running
What does “iteration” mean in the context of loops?
each full run through of the for loop code block
When does the condition expression of a while loop get evaluated?
when first entering the while loop and in the beginning of every iteration
When does the initialization expression of a for loop get evaluated?
before the first iteration of the for loop
When does the condition expression of a for loop get evaluated?
before each iteration of the for loop
When does the final expression of a for loop get evaluated?
at the end of each iteration of the for loop
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
increments the value of its operand by 1
How do you iterate through the keys of an object?
for(let keys in object)
Give 6 examples of comparison operators.
,<=,>=,===,==,!==
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to check a condition to determine if a specific code block should run
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if(condition){
code
}
What are the three logical operators?
&&. || , !
How do you compare two different expressions in the same condition?
have each expression in paraenthesis
Why do we log things to the console?
to check if our code is running with the intended logic or values
What is a “model”?
a representation of an object or idea
What is the word “object” referring to in the phrase Document Object Model?
the objects within the DOM tree or each element of the page
What is a DOM Tree?
the document object representation of the entire page
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector(‘h1’), document.querySelector(‘body’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll(‘p’)
Why might you want to assign the return value of a DOM query to a variable?
so you can alter its properties
Why might you want to assign the return value of a DOM query to a variable?
so you can alter its properties, the bigger document gets, the longer it’ll take for the query selectors to look thru to find the elements so saving elements that you will access more than once is efficient
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
it ensures all of the DOM is loaded properly before being accessed within the script
What does document.querySelector() take as its argument and what does it return?
a css selector and returns the first element matches
What does document.querySelectorAll() take as its argument and what does it return?
a css selector and returns all matching elements
What does document.querySelectorAll() take as its argument and what does it return?
a css selector and returns all matching elements as a NodeList
NodeList vs Arrays
NodeLists are array-like but are not arrays, happens to contain some similar methods/properties
Why do we log things to the console?
to check if our code is running with the intended logic or values
What is the purpose of events and event handling?
to programtically respond to changes or actions on the webpage
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
a function that is passed into another function as an argument that can be invoked later
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?
reference to the object that the event was dispatched on. Use MDN to check info on it
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
one passes in the callback function handleClick as an argument, one passes in the return value of the function handleClick as an argument
What is the className property of element objects?
gives the value of the class attribute of the element
How do you update the CSS class attribute of an element using JavaScript?
element.className = newName
What is the textContent property of element objects?
contains only the text content of an element
How do you update the text within an element using JavaScript?
element.textContent = new text
Is the event parameter of an event listener callback always useful?
no sometimes you just want the callback to run specific code regardless of the event’s data
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
harder
Why is storing information about a program in variables better than only storing it in the DOM?
the larger the DOM gets the longer it’ll take to find elements with query selectors so storing them in variables improves efficiency
What does the transform property do?
rotate, scale, skew, or translate