Quiz Flashcards
Where do you put non-visible content about the HTML document?
head element
Where do you put visible content about the HTML document?
body element
Where do the and tags go in a valid HTML document?
html element
What is the purpose of a declaration?
to tell a browser which version of HTML the page is using
Give five examples of HTML element tags
html, body, head, h1, p, a, span, ul, ol, li…
What is the purpose of HTML attributes
to provide additional information about the contents of an element
Give an example of an HTML entity
< < > > & & © ®
How do block-level elements affect the document flow?
always appear to start on a new line
How do inline elements affect the document flow?
appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
full width available of its parent element (container), and height of content length
What are the default width and height of an inline element?
width and height of parent element, non-adjustable
What is the difference between an ordered list and an unordered list in HTML
ol is numbered, while ul is bullet points
Is an HTML list a block element or an inline element?
block element
What HTML tag is used to link to another website?
a element (anchor)
What is an absolute URL?
domain name followed by the path to a specific page
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?
by using ../ to go up one folder, then followed by a file name (or could be a folder name)
How do you indicate the relative link to a child directory?
by using the name of the child folder, followed by a forward slash, then the file name
childfolder/file.name
How do you indicate the relative link to a grand parent directory?
by using ../../ to go up two folders, then followed by a file name (or could be a folder name)
How do you indicate the relative link to the same directory?
by using the file name (or ./)
What is the purpose of an HTML form element?
houses form controls/ group inputs together to capture submitted information
Give five examples of form control elements.
??
Give three examples of type attributes for HTML elements.
“text” “password” “email” “radio” “checkbox” “file” “submit” “image”
Is an HTML element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
html, head, body, doctype, title, meta
What purpose do the thead and tbody elements serve?
accessibility, semantically divide elements, styling purposes
Give two examples of data that would lend itself well to being displayed in a table.
schedule, tabular data - statistics, database
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?
.class
In CSS, how do you select elements by their type?
tag name
In CSS, how do you select an element by its id attribute?
id
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 CSS properties make up the box model?
margin, border, padding
Name three different types of values you can use to specify colors in CSS.
color name, hex, rgb, rgba
What is a pseudo-class?
allows to change the appearance of elements when a user is interacting with them :hover :active :focus
What are CSS pseudo-classes useful for?
engaging
Name at least two units of type size in CSS.
px em rem % 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
What is the default flex-wrap of a flex container?
no wrap
Why do two div elements “vertically stack” on one another by default?
block elements take up 100% width by default
What is the result flex-direction of an element with display: flex?
asdf
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
same as static, doesn’t affect document flow
How does setting position: relative on an element affect where it appears on the page?
moves the element in relation to where it would have been in normal flow
How does setting position: absolute on an element affect document flow?
taken out of normal flow, no longer affects the position of other elements
How does setting position: absolute on an element affect where it appears on the page?
relative to non-static position parent////
How do you constrain an absolutely positioned element to a containing block?
set the parent container as non-static
What are the four box offset properties?
top bottom left right
What is the purpose of variables?
to store values
How do you declare a variable
var = ;
How do you initialize a variable?
= on declared variable
What characters are allowed in variable names?
letters, numbers, _, $
What does it mean to say that variable names are “case sensitive”?
apple and Apple are different
What is the purpose of a string?
texts
What is the purpose of a number?
numbers
What is the purpose of a boolean?
to show true and false
What does the = operator mean in JavaScript?
assign a value
How do you update the value of a variable?
assign a new value
What is the difference between null and undefined?
null is assigned to show empty value, undefined is to show no value has been assigned, (null is an object, which is a mistake)
Why is it a good habit to include “labels” when you log values to the browser console?
to show what values are being logged
Give five examples of JavaScript primitives.
number, string, boolean, undefined, bigint, symbol
What data type is returned by an arithmetic operation?
number
What is string concatenation?
connecting strings together
What purpose(s) does the + plus operator serve in JavaScript?
adding numbers, concatenating strings
What data type is returned by comparing two values ( . ===, etc)?
boolean
What does the += “plus-equals” operator do?
add a value to a variable, and assign that value to the variable
What are objects used for?
to create model of something
What are object properties?
variables as opposed to functions
Describe object literal notation?
{ }
How do you remove a property from an object?
delete keyword
What are the two ways to get or update the value of a property?
. (member operator) and constructor [ ]
What are arrays used for?
storing lists of data, anything that needs numerically indexed
Describe array literal notation.
[ ]
How are arrays different from “plain” objects?
indexed, objects are non-iterable
What number represents the first index of an array?
0
What is the length property of an array?
array.length;
How do you calculate the last index of an array?
array[array.length - 1]
What is a function in JavaScript?
performs a set of tasks, reapeat
Describe the parts of a function definition.
function name(parameter) {return}
Describe the parts of a function call.
function() or function(para)
When comparing them side-by-side, what are the differences between a function call and a function definition?
name of function and argument, while definition has the.. definition
What is the difference between a parameter and an arguement?
parameter represents data that function will be called with, argument represents the actual data that’s been passed on to the function
Why are function parameters useful?
pass info to function that function needs
What two effects does a return statement have on the behavior of a function?
causes the function to produce a value we can use, prevents any more code in the function’s code block from being run
Why do we log things to the console?
to debug
What is a method?
a function that is a property of an object
How do you remove the last element from an array?
.pop()
How do you round a number down to the nearest integer?
round
How do you generate a random number?
.random() * range of the number
How do you delete an element from an array?
splice(position, how many to delete, inserting item)
How do you break a string up into an array?
split(string)
Do string methods change the original string? How would you check if you weren’t sure?
console.log()
Roughly how many string methods are there according to the MDN Web docs?
40s
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?
a lot, 40s?
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?
decision making
is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement?
if (condition) { statement }
What are the three logical operators?
! && ||
How do you compare two different expressions in the same condition?
( ) comparison ( )
What is the purpose of a loop?
to iterate through a process multiple times
What is the purpose of a condition expression in a loop?
loops start and stop
What does “iteration” mean in the context of loops?
repeat
When does the condition expression of a while loop get evaluated?
before statement
When does the initialization expression of a for loop get evaluated?
once before loop begins
When does the condition expression of a for loop get evaluated?
before each evaluation
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
What does the ++ increment operator do?
increment by 1
How do you iterate through the keys of an object?
for var in object
What are the four components of “the Cascade”.
source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
specificity
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?
harder to debug
Why do we log things to the console?
to see what’s there
What is a “model”?
DOM Tree
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
different part of the page loaded in the browser window
What is a DOM Tree?
connected nodes that represent the model
consists of 4 main types of 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 retireves multiple elements from the DOM at once.
getElementsByClassName(), getElementsByTagName(), querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
when working with an element more than once
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?
takes CSS selector, returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
takes CSS selector, returns a NodeList of all matching elements
Why do we log things to the console?
to test and debug
What is the purpose of events and event handling?
user interaction
What do [ ] square brackets mean in function and method syntax documentation?
optional
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 into another function as an argument, which is then invoked inside the outer function
What object is passed into an event listener callback when the event fires?
event object
What is the event.target? if you weren’t sure, how would you check? Where could you get more information about it?
where interaction occurred, MDN, debugger
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the latter won’t wait for the event
What is the className property of element objects?
gets and sets the value of the class attribute
How do you update the CSS class attribute of an element using JavaScript?
elementNodeReference.className = ‘new-class’
What is the textContent property of element objects?
represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
elementNodeReference.textContent = ‘new string’
Is the event parameter of an event listener callback always useful?
no
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
It would’ve been more complicated to keep track
Why is storing information about a program in variables better than only storing it in the DOM?
much easier to manipulate more than once, don’t depend on DOM
What does the transform property do?
manipulate images
Give four examples of CSS transform functions.
rotate(), scale(), skew(), translate()
What event is fired when a user places their cursor in a form control?
‘focus’
What event is fired when a user’s cursor leaves a form control?
‘blur’
What event is fired as a user changes the value of a form control?
‘input’