Study Cards Flashcards
Where do you put non-visible content about the HTML document?
In the head element.
Where do you put visible content about the HTML document?
In the body element.
Where do the head and body tags go in a valid HTML document?
In the html element.
What is the purpose of a !DOCTYPE declaration?
To instruct the web browser what document type to expect.
What is the purpose of HTML attributes?
To provide additional information about the contents of an element.
How do block-level elements affect the document flow?
Always appear on a new line, and take up the entire horizontal space of their parent element.
How do inline elements affect the document flow?
Continue on the same line as neighboring elements.
What are the default width and height of a block-level element?
Width: Entire horizontal space of its parent element.
Height: Height of its contents.
What are the default width and height of an inline element?
The width and height of its contents.
What is the difference between an ordered list and an unordered list in HTML?
Ordered list items are numbered, unordered list items are not.
Is an HTML list a block element or an inline element?
Block.
What HTML tag is used to link to another website?
a tag
What is an absolute URL?
The full web address.
What is a relative URL?
A shorthand link address for a page within the same site.
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
The name of the directory.
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the link to the same directory?
Simply use the name of the target file.
What is the purpose of an HTML form element?
To allow users to submit data.
Give five examples of form control elements.
buttons, checkboxes, radio buttons, text input, select lists
Give three examples of type attributes for HTML < input > elements.
text, email, password, radio, checkbox, submit
Is an HTML < input > element a block or inline element?
inline
What are the six primary HTML elements for creating tables?
< table >, < thead >, < tbody >, < tr >, < th >, < td >
What purpose do the thead and tbody elements serve?
Differentiate between the headers and the general table data.
Give two examples of data that would lend itself well to being displayed in a table.
Stocks, sports statistics, etc.
What are the names of the individual pieces of a CSS rule?
Selector, curly braces which define the declaration block, and property/value pairs.
In CSS, how do you select elements by their class attribute?
With a .classname
In CSS, how do you select elements by their type?
The name of the element
In CSS, how do you select an element by its id attribute?
With a #idname
Name three different types of values you can use to specify colors in CSS.
Color names, RGB values, HEX codes
What CSS properties make up the box model?
Content, padding, border, and margin.
Which CSS property pushes boxes away from each other?
Margin
Which CSS property adds space between a box’s content and its border?
Padding
What is a pseudo-class?
A keyword added to a selector that specifies a special state of the selected element(s), like :hover or :visited
What are pseudo-classes useful for?
Allow you to apply style not just to the content, but in relation to the status of content items, like :hover, :visited, :checked etc.
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
Why do two div elements “vertically stack” on one another by default?
They are block level elements by default
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?
It doesn’t
How does setting position: relative on an element affect where it appears on the page?
It doesn’t
How does setting position: absolute on an element affect document flow?
It removes the element from the document flow.
How does setting position: absolute on an element affect where it appears on the page?
The element will be positioned relative to its first non-static parent element (usually with a position: relative)
What is the main purpose of using position: absolute?
Layering elements on top of other elements.
How do you constrain an absolutely positioned element to a containing block?
Give a parent element a position: relative
What are the four box offset properties?
top, bottom, left, right
What is the purpose of variables?
To store data for later use.
How do you declare a variable?
const or let variableName = value;
How do you initialize (assign a value to) a variable?
with const or let keyword variableName = value
What characters are allowed in variable names?
Letter, number, underscore. The first character CANNOT be a number.
What does it mean to say that variable names are “case sensitive”?
References to a variable must be made using the identical case/capitalization as the variable declaration.
What is the purpose of a string?
To hold data that can be represented in text form.
What is the purpose of a number?
To save a number to be used in mathematical calculation.
What is the purpose of a boolean?
Useful when the data can only have two possible values, true or false.
What does the = operator mean in JavaScript?
assignment
How do you update the value of a variable?
variableName = newValue; (var keyword only to be used during initial variable creation)
What is the difference between null and undefined?
null is an empty value, undefined means no value has been assigned
Why is it a good habit to include “labels” when you log values to the browser console?
Clarifies what data is being logged to the console.
Give five examples of JavaScript primitives
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
appending one string to the end of another string
What purpose(s) does the + plus operator serve in JavaScript?
addition operator and concatenation operator
What data type is returned by comparing two values (greater than/less than operator, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
Adds the provided value to a variable
What are objects used for?
Holding data in the form of multiple properties split into key-value pairs.
What are object properties?
Data held within objects in the form of key-value pairs
Describe object literal notation.
A set of curly braces with key-value pairs contained within
How do you remove a property from an object?
with the delete operator (delete objectName.propertyName)
What are two ways to get or update the value of a property?
Dot notation (objectName.propertyName) (preferred) and bracket notation (objectName[“propertyName”])
What are arrays used for?
Holding lists of related data in an ordered format.
Describe array literal notation.
A set of brackets with values separated by commas.
How are arrays different from “plain” objects?
They are ordered, and contain values at numbered indexes rather than key-value pairs
What number represents the first index of an array?
0
What is the length property of an array?
Determines the number of values contained in the array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
A set of “instructions”, whose code can be saved and called for later use
Describe the parts of a function definition.
The function keyword, the function name (optional), parameters in parentheses (optional), and the code block contained by curly braces. Often a return statement is included in the code block.
Describe the parts of a function call.
The name of the function and parentheses, as well as any arguments in the parentheses if necessary
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function definition includes function keyword and code block, which are not used in function call
What is the difference between a parameter and an argument?
Parameter is a placeholder used in a function definition, argument is the actual data passed to the function in a function call.
Why are function parameters useful?
Allows us to pass different data to functions, to use the same function to perform different tasks.
What two effects does a return statement have on the behavior of the function?
The function will produce a value, and prevents any more code in the function’s code block from being run.
Why do we log things to the console?
To check our work during the development phase
What is a method?
A function which is a property of an object
How is a method different from any other function?
A method is a function which is a property of an object, rather than just a free-floating function
How do you remove the last element from an array?
the .pop() method
How do you round a number down to the nearest integer?
the Math.floor() method
How do you generate a random number?
the Math.random() method
How do you delete an element from an array?
.unshift() will remove an element from the beginning of an array;
.pop() will remove an element from the end of an array;
.splice() can remove an element from a specified index of an array
How do you append an element to an array?
.shift() will add an element to the beginning of an array;
.push() will add an element to the end of an array;
.splice() can add an element to a specified index of an array
How do you break a string up into an array?
the .split() method
Is the return value of a function or method useful in every situation?
No, sometimes the return value is not needed
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators?
Equal, strictly equal, not equal, strictly not equal, less than, greater than, less than or equal to, greater than or equal to
What data type do comparison expressions evaluate to?
Boolean
What is the purpose of an if statement?
To determine whether or not to run code based on a condition
Is else required in order to use an if statement?
No
Describe the syntax of an if statement
if (condition) {
}
What are three logical operators?
and (&&), or (||), and not (!)
What is the purpose of a loop?
To require code to be repeated
What is the purpose of a condition expression in a loop?
Determine whether or not the code should be run again
What does “iteration” mean in the context of loops?
Each time the loop is run, ie every time the condition is tested, the code is run, and the final expression is executed
When does the condition expression of a while loop get evaluated?
Every iteration before the code block is run
When does the initialization expression for a for loop get evaluated?
At the beginning of the for loop, the first time the loop is run
When does the condition expression for a for loop get evaluated?
After the initialization, and on every iteration before the code block is run
When does the final expression of a for loop get evaluated?
Every iteration after the code block is run, and before the condition is evaluated
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?
Increases the value of the variable by 1
How do you iterate through the keys of an object?
for…in loop
What are the 4 components of the CSS cascade?
source order, inheritance, specificity, and !important
What does the term “source order” mean with respect to CSS?
The styling provided for an element LAST in the stylesheet is the styling that will be applied
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
List the three selector types in order of increasing specificity
element, class, id
Why is using !important considered bad practice?
It overrides other declarations and breaks the natural cascading of stylesheets
Why do we log things to the console?
To show data of what our code is doing for use in the development phase.
Which “document” is being referred to in the phrase Document Object Model?
The actual html page that is being modeled in JavaScript
What is the word “object” referring to in the phrase Document Object Model?
A JavaScript object, which is being used to model the html document
What is a DOM Tree?
The model of the web page with parent/child relationships, created by the DOM.
Give two examples of document methods that retrieve a SINGLE element from the DOM
.querySelector(), .getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once
.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
Makes it easier to access that DOM query later.
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So the code before it will run, which will allow us to make changes to that code in the .js file referenced by our script tag
What does document.querySelector() take as its argument and what does it return?
It takes a CSS selector as its argument, and returns the FIRST element that matches that description
What does document.querySelectorAll() take as its argument and what does it return?
It takes a CSS selector as its argument, and returns ALL elements that match that description
What is the purpose of events and event handling?
To allow JavaScript to make changes when a user interacts with the page