Quiz Questions Flashcards
Where do you put non-visible content about the HTML document?
. It’s about the meta information
head element
Where do you put visible content about the HTML document?
The body tag of the HTML document
Where do the and tags go in a valid HTML document?
The tag will usually go right after the tag and before the tag. The tag will go after the tag.
What is the purpose of a declaration?
The purpose is to tell a browser which version of HTML the page is using
Give five examples of HTML element types.
, <li>, <ul>, ,
</ul></li>
What is the purpose of HTML attributes?
Provides additional information about the contents of an element
Give an example of an HTML entity (escape character).
< less than <
> greater than >
How do block-level elements affect the document flow?
Makes certain elements start on a new line in the browser window
How do inline elements affect the document flow?
Makes it appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
Expands to a width of 100% of its parent container and the height would be according to the height of the content
What are the default width and height of an inline element?
The height and width of the content
What is the difference between an ordered list and an unordered list in HTML?
Ordered: numbered
Unordered: bullet point
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
Anchor tag
What is an absolute URL?
Linking to a different website / a full web address for the site
What is a relative URL?
When linking to other pages within the same site
How do you indicate the relative link to a parent directory?
use ../ to indicate the folder above the current one, then follow it with the file name
example: <a>Home</a>
How do you indicate the relative link to a child directory?
use the name of the child folder, followed by a forward slash, then the file name
example: <a></a>
How do you indicate the relative link to the same directory?
just use the file name (nothing else is needed)
example: <a>Reviews</a>
How do you indicate the relative link to a sibling directory?
use ../ to indicate the folder above the current one, then with a forward slash, write the sibling folder, then write the file name
example: <a>Home</a>
How do you indicate the relative link to a grand parent directory?
repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name
example: <a>Home</a>
What is the purpose of an HTML form element?
collect data from users
Give five examples of form control elements.
text input
password input
radio buttons
checkboxes
dropdown boxes
Give three examples of type attribute values for HTML elements.
type=”image” when you want to use an image for the submit button
type=”submit” used to send a form to the server
type=”file” creates a box that looks like a text input followed by a browse button to select a file from their cmp and upload it
Is an HTML element a block element or an inline element?
inline block
What are the six primary HTML elements for creating tables?
table row tr
table data td
table heading th
table header thead
table body tbody
table footer tfoot
What purpose do the thead and tbody elements serve?
thead - headings of the table
tbody - body/data of the table
Give two examples of data that would lend itself well to being displayed in a table.
stock reports
train timetables
sports results
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
In CSS, how do you select elements by their class attribute?
period and class name
.class {
}
In CSS, how do you select elements by their type?
match the element names
example: h1, h2, h3 {}
In CSS, how do you select an element by its id attribute?
Name three different types of values you can use to specify colors in CSS.
rgb, hex codes, color names
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?
keyword added to a selector that specifies a special state of the selected elements
What are CSS pseudo-classes useful for?
lets you apply a style to an element, not only in relation to the actual content, but to external factors like position of mouse, history of the navigator, etc
Name two types of units that can be used to adjust font-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?
nowrap: all flex items will be on one line
Why do two div elements “vertically stack” on one another by default?
because they’re block elements
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?
doesn’t affect the position of surround elements and they will stay in the position they would be in normal flow
How does setting position: relative on an element affect where it appears on the page?
you could change the position of the element where it would otherwise have been in normal flow
it doesn’t inherently affect where it appears, but you can move it from the original position
How does setting position: absolute on an element affect document flow?
it affects the document flow, as the other elements would simply ignore the space it would have taken up
How does setting position: absolute on an element affect where it appears on the page?
does not necessarily affect where it appears on the page, but it can affect where it appears on the page
How do you constrain an absolutely positioned element to a containing block?
using a relative position
What are the four box offset properties?
top
bottom
left
right
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 your css rules are written in your spreadsheet
styling provided last in your spreadsheet is the one that will take effect
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.
ID - CLASS - VALUE
Why is using !important considered bad practice?
it has side effects that mess with specificity
VERY HARD TO OVERRIDE
reverses the cascade order of stylesheets
What is the purpose of variables?
a temporary storage for data types
How do you declare a variable?
specify the type, leave at least one space, then the name for the variable and end the line with a semicolon;
How do you initialize (assign a value to) a variable?
use an assignment operator after the variable keyword and name, then give it its value
What characters are allowed in variable names?
letter, $, underscore, numbers
What does it mean to say that variable names are “case sensitive”?
there is a difference in identification of the variables using uppercase and using lowercase letters
What is the purpose of a string?
data type that is used to represent text
What is the purpose of a number?
data type that represents numbers
What is the purpose of a boolean?
data type that is used to create true/false statements
What does the = operator mean in JavaScript?
assignment operator
to perform operations on the variables and values (operands)
How do you update the value of a variable?
reassign the value of the variable
you don’t have to write the keyword var again
What is the difference between null and undefined?
undefined: primitive variable that has been declared but not defined yet / it is undefined
null: assigned nothing value / it is an object
Why is it a good habit to include “labels” when you log values to the browser console?
helps you debug as well and gives context of what to expect in the console
Give five examples of JavaScript primitives.
string
number
boolean
undefined
null
What data type is returned by an arithmetic operation?
number
What is string concatenation?
the combination of 2+ strings to form one string
What purpose(s) does the + plus operator serve in JavaScript?
concatenation (strings) and addition (numbers)
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
addition assignment operator
adds the value of the right operand to a variable and assigns the result to the variable
What are objects used for?
to group together a set of variables/functions to create of model of something you’d recognize from the real world
What are object properties?
variables set to the object
Describe object literal notation.
first define a variable and assign it a properties inside a curly brace
keys:value
then end it with a curly brace
How do you remove a property from an object?
delete key.value
What are the two ways to get or update the value of a property?
dot notation method
hotel.name = ‘Park’;
square bracket method
hotel[‘name’] = ‘Park’;
What are arrays used for?
stores a list of values
Describe array literal notation.
var colors;
colors = [‘white’, ‘black’, ‘custom’];
How are arrays different from “plain” objects?
in an object, the order of the properties is not important
however, in an array, the index numbers dictate the order of the properties
What number represents the first index of an array?
0
What is the length property of an array?
holds the number of items in the array
How do you calculate the last index of an array?
subtracting 1 from the length of an array gives the last index of an array
What is a function in JavaScript?
a set of statements that performs a task or calculates a value
Describe the parts of a function definition.
function keyword to start
optional name
comma separated list of 0+ parameters
start of a function’s code block
optional return statement
end of the function’s code block shown by }
Describe the parts of a function call.
function’s name
comma separated list of 0+ arguments surrounded by ()
When comparing them side-by-side, what are the differences between a function call and a function definition?
if there is a code block, it’s a function definition, if not it’s a function call
What is the difference between a parameter and an argument?
parameter is a placeholder
argument is actual value
Why are function parameters useful?
What two effects does a return statement have on the behavior of a function?
makes functions more reusable and flexible
Why do we log things to the console?
to debug our code
validate our assumptions about how something works
What is a method?
function which is a property of an object
How is a method different from any other function?
a method is associated with an object, while a function is not
How do you remove the last element from an array?
pop() method
How do you round a number down to the nearest integer?
Math.floor() method
How do you generate a random number?
Math.random() method
How do you delete an element from an array?
splice() method
pop() method
shift() method
How do you append an element to an array?
push() method
unshift () method
splice() method
How do you break a string up into an array?
string.split() method
Do string methods change the original string? How would you check if you weren’t sure?
it does not mutate the original string
you can assign a variable to the original string and check it at the end
Roughly how many string methods are there according to the MDN Web docs?
60-70 methods
Is the return value of a function or method useful in every situation?
no, it’s only useful when you need the function/method to return something
ex: pop(), shift() method
Roughly how many array methods are there according to the MDN Web docs?
around 40 methods (?)
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 to
=== strict equal to
=! not equal to
==! strict not equal to
> greater than
< less th an
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to check if a condition is true or false
Is else required in order to use an if statement?
a code block to execute if the value is true
Describe the syntax (structure) of an if statement.
What are the three logical operators?
logical &&
logical ||
logical !
How do you compare two different expressions in the same condition?
logical &&
logical ||
What is the purpose of a loop?
to repeat a portion of code a set number of times until the desired process is complete
What is the purpose of a condition expression in a loop?
tells how many times the loop should continue running until the counter reaches a certain number
What does “iteration” mean in the context of loops?
each time the code runs
When does the condition expression of a while loop get evaluated?
before executing the statement again
once before the initialization
When does the initialization expression of a for loop get evaluated?
occurs one time only before the loop begins
When does the condition expression of a for loop get evaluated?
each time before the loop runs
When does the final expression of a for loop get evaluated?
at the end of each loop iteration
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break statement
What does the ++ increment operator do?
increment the value of a variable by 1 and reassigning it
How do you iterate through the keys of an object?
Using the for in statement.
Why do we log things to the console?
it’s a feature for debugging purposes
What is a “model”?
general def: representation
Which “document” is being referred to in the phrase Document Object Model?
the document node in the DOM tree (webpage)
What is the word “object” referring to in the phrase Document Object Model?
the nodes in the dom tree
What is a DOM Tree?
model of the webpage
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(‘class’)
getElementsByTagName(‘tagName’)
Why might you want to assign the return value of a DOM query to a variable?
to store the location of the element in a variable
saves the browser looking through the DOM tree to find the same element again
caches the selection
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?
if you place the script tag on top, it’ll load up the main.js and run the dom, making the webpage take longer to load and slow down the pg rendering speed
What does document.querySelector() take as its argument and what does it return?
takes a string containing one or more selector and returns
the element object representing the first element in the doc that matches the argument
returns null if it doesn’t find anything
What does document.querySelectorAll() take as its argument and what does it return?
argument: selectors
returns: all of those elements that match the selector in a node list
Why do we log things to the console?
to debug
to see what our code is doing
What is the purpose of events and event handling?
`we want to get events to trigger some sort of JS code
allows our page to be more interactive
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?
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?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
target property of the event object
point of interaction on the dom
the object that dispatches the event
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
What is the className property of element objects?
`
How do you update the CSS class attribute of an element using JavaScript?
What is the textContent property of element objects?
How do you update the text within an element using JavaScript?
