Quiz Questions Flashcards
Where do you put non-visible content about the HTML document?
In the header element
Where do you put visible content about the HTML document?
In the body element
Where do the and tags go in a valid HTML document?
The header element goes below the html tag, and the body goes below the header tag.
What is the purpose of a declaration?
Instruction to the browser on which version of HTML the page is written in
Give five examples of HTML element tags.
- h1
- p
- div
- body
- html
What is the purpose of HTML attributes?
Attributes control an elements behavior
Give an example of an HTML entity (escape character).
® &
How do block-level elements affect the document flow?
Take up all the width available
Starts on a new line
Has a top and bottom margin by default
How do inline elements affect the document flow?
Only takes up as much width as necessary
Does not start on a new line
What are the default width and height of a block-level element?
The width is the entirety of the available space on the page
The height is the height of whatever content is in the element
What are the default width and height of an inline element?
The default width and height are based on the content that reside in the element
What is the difference between an ordered list and an unordered list in HTML?
An ordered list uses numbers to form a list that has a specific order while an unordered list uses bullet points and does not have a specific order to the elements
Is an HTML list a block element or an inline element?
They are block elements
What HTML tag is used to link to another website?
an a element tag
What is an absolute URL?
Uses a http or https and links to an outside website
What is a relative URL?
Links to a page within the same directory
How do you indicate the relative link to a parent directory?
../ (Parent directory)
How do you indicate the relative link to a child directory?
/ (folder) / (child directory)
How do you indicate the relative link to a grand parent directory?
../../(Grandparent directory)
How do you indicate the relative link to the same directory?
./(same directory)
What is the purpose of an HTML form element?
Collect data from a user or visitor of your site
Give five examples of form control elements.
input label select text area button
Give three examples of type attributes for HTML input elements.
radio
email
text
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 th td
What purpose do the thead and tbody elements serve?
To specify which elements are in the header and body of the table created
Give two examples of data that would lend itself well to being displayed in a table.
Class grades
Schedules
What are the names of the individual pieces of a CSS rule?
Selector Declaration block Declaration Property Value
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
type {
}
In CSS, how do you select an element by its id attribute?
#id {
}Name three different types of values you can use to specify colors in CSS.
Hexadecimal
Keywords
RGB
(also HSL)
What CSS properties make up the box model?
Content
Margin
Padding
Border
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?
Keyword added to a selector to specify a specific state
What are CSS pseudo-classes useful for?
Helps add style when certain actions are performed by user (i.e. hover, focus)
Name at least two units of type size in CSS.
px, em, pt, %
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 (left-to-right)
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
They are block level elements
What is the default flex-direction of an element with display: flex?
row (left-to-right)
What is the default value for the position property of HTML elements?
Static, normal flow
How does setting position: relative on an element affect document flow?
It does not
How does setting position: relative on an element affect where it appears on the page?
Does not change unless you have offset properties
How does setting position: absolute on an element affect document flow?
Removed from document flow
How does setting position: absolute on an element affect where it appears on the page?
It will reposition to top left of parent that is non-static unless it is contained
How do you constrain an absolutely positioned element to a containing block?
Make sure parent is non-static
What are the four box offset properties?
top, bottom, left, right
What are the four components of “the Cascade”.
Source Order, Inheritance, Specificity and !important
What does the term “source order” mean with respect to CSS?
the order in which css rule sets are in your style sheet will define their specificity
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
by inheriting the properties from all the parent elements
inheritance
List the three selector types in order of increasing specificity.
type -> class -> ID
Why is using !important considered bad practice?
It makes debugging hard and breaks the natural cascading in style sheets
What is the purpose of variables?
Store data
How do you declare a variable?
using var before a name for the variable
How do you initialize (assign a value to) a variable?
using the = operator and adding a value after it with a semicolon at the end
What characters are allowed in variable names?
letter, underscores, dollar signs, numbers but cannot start with a number and cannot contain spaces
What does it mean to say that variable names are “case sensitive”?
The capitalization of variable names matters and must be typed with consistent capitalization
What is the purpose of a string?
To store text or characters within a variable
What is the purpose of a number?
To store numerical data within a variable
What is the purpose of a boolean?
To store a value of true or false to a variable to create true/false statements
What does the = operator mean in JavaScript?
Means a value is assigned to a variable
How do you update the value of a variable?
Reassign a value to it
What is the difference between null and undefined?
Null is an object while undefined is a type
Undefined means no value is set to it yet, where as null is intentional absence
Why is it a good habit to include “labels” when you log values to the browser console?
Makes debugging your code easier and checking your results
Give five examples of JavaScript primitives.
Boolean, Null, Undefined, String, Number
What data type is returned by an arithmetic operation?
number
What is string concatenation?
combines two or more strings together
What purpose(s) does the + plus operator serve in JavaScript?
for arithmetic or string concatenation
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left
What are objects used for?
Objects group together a set of variables and functions to create a model
of a something you would recognize from the real world
What are object properties?
Storing information
Describe object literal notation.
The object is the curly braces and their contents
Each key is separated from its value by a colon
Separate each property and method with a comma
How do you remove a property from an object?
using the delete operator
What are the two ways to get or update the value of a property?
dot notation and bracket notation
hotel.name = ‘Park’;
or
hotel[‘name] = ‘Park’;
What are arrays used for?
Creating a list of values that are related to each other.
Describe array literal notation.
var (variable name) = []
How are arrays different from “plain” objects?
They use index numbers as keys
What number represents the first index of an array?
0
What is the length property of an array?
the number of values in an array
How do you calculate the last index of an array?
the length of an array minus 1
What is a function in JavaScript?
a set of statements that takes an input and performs a task or calculates a value as an output
Describe the parts of a function definition.
function functionName(parameters) {
}Describe the parts of a function call.
functionName(arguments);
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call doesn’t need the word function before it, defn does
What is the difference between a parameter and an argument?
a parameter is in the function definition, where an argument is the value passed in the function when called
Why are function parameters useful?
Allow passing of information in the function
What two effects does a return statement have on the behavior of a function?
Ends the function
Returns a value to the calling function
Why do we log things to the console?
To check that we are getting the correct results
What is a method?
A function that is the property of an object
How is a method different from any other function?
Regular functions aren’t associated with objects, methods are
How do you remove the last element from an 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?
.splice()
How do you append an element to an array?
.push()
How do you break a string up into an array?
.split()
Do string methods change the original string? How would you check if you weren’t sure?
They do not. You can check by using console.log()
Roughly how many string methods are there according to the MDN Web docs?
40 ish
Is the return value of a function or method useful in every situation?
No
Roughly how many array methods are there according to the MDN Web docs?
30 ish
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.
> , =, <=, ===. !==, !=
What data type do comparison expressions evaluate to?
Boolean
What is the purpose of an if statement?
Making logical comparisons
Is else required in order to use an if statement?
Else is optional
Describe the syntax (structure) of an if statement.
if (condition) {
instruction;
}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
Using logical operators
What is the purpose of a loop?
Repeating through code multiple times until we tell it to stop
What is the purpose of a condition expression in a loop?
To tell the computer to keep looping that coding or to stop based on value of true or false
What does “iteration” mean in the context of loops?
How many times to go through the loop
When does the condition expression of a while loop get evaluated?
Before each pass through of the loop
When does the initialization expression of a for loop get evaluated?
One time before the first loop begins
When does the condition expression of a for loop get evaluated?
Once before every iteration
When does the final expression of a for loop get evaluated?
end of each 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?
Increase value of a variable by 1
How do you iterate through the keys of an object?
using a for in loops of the object and pushing the key values of that object
Why do we log things to the console?
To check that our results are accurate, makes debugging issues easier
What is a “model”?
the DOM tree, or the model of the web page
Which “document” is being referred to in the phrase Document Object Model?
all the elements and information in the HTML
What is the word “object” referring to in the phrase Document Object Model?
Each node represents an object in the document
What is a DOM Tree?
The document model containing document nodes, element nodes, attribute nodes and text nodes.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById()
querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName()
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
In case we need to access a particular node in the DOM
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?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
A CSS selector and returns the first element in the document with that selector
What does document.querySelectorAll() take as its argument and what does it return?
A CSS selector and returns a node list of the document’s elements that match the specified selectors
Why do we log things to the console?
To make sure that we are getting the expected results
What is the purpose of events and event handling?
to execute code based on an event that happens to an element
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 passed in another function as an argument
What object is passed into an event listener callback when the event fires?
The function which we want to execute
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The element that triggered the event. By checking the console and MDN
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
One calls a function and one is a definition
What is the className property of element objects?
sets the value of the class attribute of the specified element
How do you update the CSS class attribute of an element using JavaScript?
elementNodeReference.className =
What is the textContent property of element objects?
the text content of the node and its descendants
How do you update the text within an element using JavaScript?
elementNodeReference.textContent =
or
innerHTML
