HTML 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 and tags go in a valid HTML document?
Inside the HTML element
What is the purpose of a declaration?
To indicate the type of html for the browser
Give five examples of HTML element tags.
Body, head, img, h1, span
What is the purpose of HTML attributes?
Provide additional information about the contents of the element
Give an example of an HTML entity (escape character).
© (copyright symbol)
How do block-level elements affect the document flow?
Start on a new line
How do inline elements affect the document flow?
Continues on the same line as the previous element
What are the default width and height of a block-level element?
width: full line, hieght: whatever amount of space it needs
What is the difference between an ordered list and an unordered list in HTML?
ordered lists - list the bullet points in numerical order.
unordered lists - just bullets points
Is an HTML list a block element or an inline element?
block elements
What HTML tag is used to link to another website?
anchor tag
What is an absolute URL?
full url, takes you to a different domain
What is a relative URL?
related to realtive pathing, stays internal to your HTML, does not change domains
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
/
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
just indicate the file name
What is the purpose of an HTML form element?
collect data from users
Give five examples of form control elements.
text input, password input, checkboxes, dropdown boxes, submit buttons
Give three examples of type attributes for HTML < input > elements.
submit, checkbox, radio
Is an HTML < input > element a block element or an inline element?
inline
What are the six primary HTML elements for creating tables?
table, th, tr, td, thead, tbody
What purpose do the thead and tbody elements serve?
thead lables the tables and tbody is where the data resides
Give two examples of data that would lend itself well to being displayed in a table.
student grade table, customer data
What are the names of the individual pieces of a CSS rule?
selector, property, value
In CSS, how do you select elements by their class attribute?
.”class”
In CSS, how do you select elements by their type?
just type element name
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.
rgb, hex, color name, hsl
What CSS properties make up the box model?
content, border, margin
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?
a keyword that specifies a special state for the element
What are CSS pseudo-classes useful for?
useful for special cases in targeting specific elements
Name at least two units of type size in CSS.
px, rem
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
Why do two div elements “vertically stack” on one another by default?
they are block elements
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
does not affect flow, but allows it to move freely from it’s original position
How does setting position: relative on an element affect where it appears on the page?
positioned element has taken its place in the normal layout flow, you can then modify its final position
How does setting position: absolute on an element affect document flow?
takes the element out of the normal flow of the document
How does setting position: absolute on an element affect where it appears on the page?
places the element above the static layer. if there is a non-static positioning set on an element, the absolute positioned element was position itself around the non-static positioned.
How do you constrain an absolutely positioned element to a containing block?
set the containing block to position relative (or other non-static position) to set it’s boundaries
What is the purpose of variables?
stores values that can be referenced in the code
How do you declare a variable?
var, const, let
How do you initialize (assign a value to) a variable?
= sign
What characters are allowed in variable names?
_, $, letters (should not use capital letters) but not numbers at the start, no special characters
What does it mean to say that variable names are “case sensitive”?
ex: f and F are not the same, they are different
What is the purpose of a string?
store characters (often in succession) for javascript to allow transmission of data
What is the purpose of a number?
often used for counting or mathematical operations
What is the purpose of a boolean?
represent true or false
What does the = operator mean in JavaScript?
assigning a value to a variable
How do you update the value of a variable?
= operator with the new value to the variables
What is the difference between null and undefined?
null: represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
undefined: s a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments
Why is it a good habit to include “labels” when you log values to the browser console?
to help with debugging with more clairty when you are reading or someone else is reading.
Give five examples of JavaScript primitives.
undefined, strings, number, boolean, null
What data type is returned by an arithmetic operation?
numbers
What is string concatenation?
combining two strings together
What purpose(s) does the + plus operator serve in JavaScript?
adds one value to another
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
variable = variable + new variable -> variable += new variable
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?
when a variable is apart of the object
Describe object literal notation.
easiet and most popular way to create objects - curly braces and their contents
How do you remove a property from an object?
“delete”
What are the two ways to get or update the value of a property in an object?
bracket and dot notation
What are arrays used for?
storing information, often data that are related to each other
Describe array literal notation.
”[ ]”
How are arrays different from “plain” objects?
actual order to the list via indexes
What number represents the first index of an array?
0
What is the length property of an array?
used to determine have many indexes are in the array
How do you calculate the last index of an array?
array.length-1
What is a function in JavaScript?
-packing up code for reuse throughout a program
giving a name to a handful of code statements to
-make it code easier to read
-making code “dynamic”, meaning that it can be written once to handle many (or even infinite!) situations
Describe the parts of a function definition.
The function keyword to begin the creation of a new function.
An optional name. (Our function’s name is sayHello.)
A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn’t have any parameters.)
The start of the function’s code block, as indicated by an { opening curly brace.
An optional return statement. (Our sayHello function doesn’t have a return statement.)
The end of the function’s code block, as indicated by a } closing curly brace.
Describe the parts of a function call.
- The function’s name.
- A comma-separated list of zero or more arguments surrounded by () parentheses.
When comparing them side-by-side, what are the differences between a function call and a function definition?
the definition defines how the funciton should operate, function call is getting the function to actual perform the designed function
What is the difference between a parameter and an argument?
parameter is the input in the definintion, argument is during the function call
Why are function parameters useful?
You can think of a parameter as a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function’s code block is run, the parameter is will be holding the value of the argument
What two effects does a return statement have on the behavior of a function?
- Causes the function to produce a value we can use in our program.
- 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?
function that is a property of an object
How is a method different from any other function?
it is a property of an object - syntax will differ
How do you remove the last element from an array?
pop method
How do you round a number down to the nearest integer?
floor method of the Math object
How do you generate a random number?
Math.random()
How do you delete an element from an array?
pop, shift, splice
How do you append an element to an array?
push, unshift, splice
How do you break a string up into an array?
split method
Do string methods change the original string? How would you check if you weren’t sure?
no, to check you can console log or check MDN
Roughly how many string methods are there according to the MDN Web docs?
36
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Roughly how many array methods are there according to the MDN Web docs?
33
Give 6 examples of comparison operators.
===, <=, >=, ==, >,
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
lets you get different results for different data
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if (condition) {code block}
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?
checks a condition in a repeatable fashion
What is the purpose of a condition expression in a loop?
based on the outcome of the condition (either true or false) it will determine which action will be taken or to be repeated
What does “iteration” mean in the context of loops?
a series of repeatable steps->the beginning of when the condition is being evaluated is the iteration
When does the condition expression of a while loop get evaluated?
as long as the condition evaluates to true - gets evaluated at beginning
When does the initialization expression of a for loop get evaluated?
An expression (including assignment expressions) or variable declaration evaluated once before the loop begins
When does the condition expression of a for loop get evaluated?
An expression to be evaluated before each loop iteration
When does the final expression of a for loop get evaluated?
An expression to be 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?
adds 1 to a number
How do you iterate through the keys of an object?
for in loops
What are the four components of “the Cascade”.
source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet` - lower in stylesheet will have priority
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.
type selector, class selector, id selector
Why is using !important considered bad practice?
because it makes debugging more difficult by breaking the natural cascading in your stylesheets
Why do we log things to the console?
debugging and learning purposes
What is a “model”?
a repeatable template
Which “document” is being referred to in the phrase Document Object Model?
the HTML page
What is the word “object” referring to in the phrase Document Object Model?
represents a different part of the page that is loaded in the browser window
What is a DOM Tree?
DOM specifies the way in which the
browser should structure this model using
a DOM tree
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementById(), document.querySelector()
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?
if you need to work with the element multiple times in the code
What console method allows you to inspect the properties of a DOM element object?
console.dir()
dir = directory
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
html needs to load before javascript can work with DOM
What does document.querySelector() take as its argument and what does it return?
Uses a CSS selector, and returns
the first matching element.
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS selector to select all
matching elements as a node list (basically an array for HTML elements)
What is the purpose of events and event handling?
allows for scripts to be run to allow the page to be more interactive
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 that is called within another function
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?
The target property of the Event interface is a reference to the object onto which the event was dispatched. - can check mdn or console log
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
adding () will cause the function to run right away. but for events you want to wait until after it is triggered