WebDev Flashcards
Is an HTML list a block element or an inline element?
An HTML list is a block-level element.
What is the difference between an ordered list and an unordered list in HTML?
An unordered list is a list with bullet points. An ordered list is numbered.
How do block-level elements affect the document flow?
Block level elements push items on the same line as it down or up depending on orientation. To the left of the element means its pushed up and vice versa for items to the right.
How do inline elements affect the document flow?
Inline elements allow for other items to be on the same horizontal space as them.
What are the default width and height of a block-level element?
The default height of a block level element would be the height of the the element itself. The default width of a block-level element would be the length of the web page.
What are the default width and height of an inline element?
The default height and width of an inline element would be the height and width of the element itself.
Give five examples of HTML element types.
, , <h1>, , </h1><p></p>
What is the purpose of HTML attributes?
To modify the behavior of a specific element.
Give an example of an HTML entity (escape character).
The less-than sign ( < ) can be denoted as <
Where do you put non-visible content about the HTML document?
You put non-visible content in the element of the HTML document.
Where do you put visible content about the HTML document?
You place visible content about the HTML document in the element.
Where do the and tags go in a valid HTML document?
They go inside of the element.
What is the purpose of a declaration?
It is an instruction to the web browser about which version of HTML is being used.
What HTML tag is used to link to another website?
<a> </a>
What is an absolute URL?
An absolute URL contains all the information necessary to locate a resource
What is a relative URL?
A relative URL locates a resource using an absolute URL as a starting point. Generally used to link to resources within the same website.
How do you indicate the relative link to a parent directory?
You use the ../ to indicate the folder above the current one. EX. href=”../index.html”
How do you indicate the relative link to a child directory?
Use the name of the child folder.
EX. href=”music/listings.html”
How do you indicate the relative link to a grand parent directory?
You use two of the ../ operator in the file address.
EX. href=”../../index.html”
How do you indicate the relative link to the same directory?
You only need to use the file name. There are no other things needed.
EX. href=”reviews.html”
What is the purpose of an HTML form element?
It is a document section that allows for users to submit information
Give five examples of form control elements.
Input, select, textarea, button, a
Is an HTML element a block element or an inline element?
Inline-Block
Give three examples of type attribute values for HTML elements.
password, image, text
What are the six primary HTML elements for creating tables?
table, tr, td, th, tbody, thead
What purpose do the thead and tbody elements serve?
The thead serves as a container for the headings of the table. The tbody serves as a container for the body of the table
Give two examples of data that would lend itself well to being displayed in a table.
Sports results and financial reports both lend themselves to being displayed in a table.
What are the names of the individual pieces of a CSS rule?
A CSS rule consists of a selector and a declaration. Each line in the declaration block has a property and a value.
In CSS, how do you select elements by their class attribute?
Similar to a type selector, however you add a . in front of the class name.
EX. .note {}
In CSS, how do you select elements by their tag name?
You simply put the name of the tag that you wish to affect.
EX. h1, h2, h3 {}
In CSS, how do you select an element by its id attribute?
You would add a # in front of the tag that you would like to affect.
EX. #introduction {}
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, and Color names
What CSS properties make up the box model?
Margins, Borders, Padding, Content of box.
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 allows for styles to be applied to an element only under specific circumstances.
What are CSS pseudo-classes useful for?
They are useful for denoting an element in a special state.
For example, a button can have a pseudo class that makes the button feel more like it is being pressed by changing the style or position of the element slightly
Name two types of units that can be used to adjust font-size in CSS.
You can use percentages or EM’s
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?
In a row
What is the default flex-wrap of a flex container?
No Wrap is the default, namely, all items will try and be on one single line.
Why do two div elements “vertically stack” on one another by default?
They are default Block
What is the default flex-direction of an element with display: flex?
Flex Row
What is the default value for the position property of HTML elements?
Position: static
How does setting position: relative on an element affect document flow?
The element can now move in relation to where it would have been in normal flow. However, you can now move the element around the page.
How does setting position: relative on an element affect where it appears on the page?
Depending on offset properties, The image can be moved in relation to where it originally would have been in normal flow.
How does setting position: absolute on an element affect document flow?
The element is removed from normal flow and no long affects the position of other elements on the page. The other elements act as if the element doesnt exist.
How does setting position: absolute on an element affect where it appears on the page?
It appears relative to its nearest non-static ancestor.
How do you constrain an absolutely positioned element to a containing block?
You constrain it to the box of its nearest ancestor element.
Make the nearest ancestor element not static in positioning.
What are the four box offset properties?
top, bottom, left, and right.
What is the purpose of variables?
A way to store data so you can see it, manipulate it, etc. Adds permanence to data.
How do you declare a variable?
var variableName;
How do you initialize (assign a value to) a variable?
var hasName = true;
What characters are allowed in variable names?
Letters, numbers, dollar signs, underscores. However, variables cannot start with a number.
What does it mean to say that variable names are “case sensitive”?
Capital letters matter in the naming of variables.
What is the purpose of a string?
For storing and manipulating text/a set of characters. JS will not interpret this as code.
What is the purpose of a number?
For counting, measuring, or for seeing the numerical value of something.
What is the purpose of a boolean?
To measure if something is true or false, used for decision making.
What does the = operator mean in JavaScript?
This is the assignment operator. Whatever data is being declared will be stored inside of the variable.
How do you update the value of a variable?
To update a variable you only need to omit the var keyword :
var something = 8
something = 7
The value of variable something is now 7
What is the difference between null and undefined?
Null is a value that does not exist, a placeholder of sorts. Null is a value that can only be assigned. When you see null, a developer purposely set it as such.
Undefined is javascripts automatic way of saying empty. If you declare a variable without a value, JS reads it as undefined. As a developer, you should never use undefined.
Why is it a good habit to include “labels” when you log values to the browser console?
It can be difficult in longer projects to remember what a variables name or value is.
Give five examples of JavaScript primitives.
string, number, null, undefined, boolean
What data type is returned by an arithmetic operation?
A number data type.
What is string concatenation?
The combination of two strings to form one string.
What purpose(s) does the + plus operator serve in JavaScript?
It is the arithmetic operator for addition and it is used to add one value to another.
What data type is returned by comparing two values (<, >, ===, etc)?
A boolean data type.
What does the += “plus-equals” operator do?
The plus equals operators adds two number values together and then assigns the resulting number to a variable.
What are objects used for?
They are used to store multiple variables into a single container with one name (an object)
What are object properties?
Object Properties are variables that are defined under an object.
Describe object literal notation.
Object literal notation is when the object properties are directly defined inside of the object declaration
var object = {
property: propertyValue,
property2: propertyValue2
}
How do you remove a property from an object?
use the delete operator.
Delete student.firstName
What are the two ways to get or update the value of a property?
object.property
object[‘property’]
What are arrays used for?
It is used to store a collection of data, a list of sorts
Describe array literal notation.
[index1, index2,…]
How are arrays different from “plain” objects?
When adding to an array, we use the method push.
When adding to an object, we use dot or bracket notation and assign it a value.
Arrays also have a length property.
What number represents the first index of an array?
0
What is the length property of an array?
styled as array.length, the length property returns the number of items inside of the array. Automatically kept up to date.
How do you calculate the last index of an array?
You would use the length keyword and then subtract 1 off of that value.
array[0, 1, 2, 3]
array.length = 4
lastIndex = array.length - 1 (This is equal to 3)
length[lastIndex] will return 3 I.e. length[3]
What is a function in JavaScript?
A set of statements that do a task or calculate a value. It can also be reused.
Describe the parts of a function definition.
Starts with a function keyword, has a function name, a comma separated list of parameters in parenthesis, Then there is the function code block separated by curly braces, an optional return statement.
Describe the parts of a function call.
Name of the function, arguments located in the comma spaced parentheses.
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function call is just the name of the function with whatever arguments you wish to place into the function. In a function definition, the arguments are known as parameters and there is a placeholder parameter along with the definition of the actual function within curly braces. The function keyword is also present in a definition
What is the difference between a parameter and an argument?
A parameter is found in a function definition, an argument is used when the function is actually being called.
Why are function parameters useful?
Without them you lose the re-usability of functions. They allow us to use a function for multiple different situations.
What two effects does a return statement have on the behavior of a function?
The return statement ends the function execution and also returns a value to the user.
Why do we log things to the console?
Gives us a way to observe and communicate with our code.
What is a method?
It is a property of an object that contains a function definition.
How is a method different from any other function?
A method is specifically defined inside of an object. It is also technically a property of an object. To call a method you need to provide the context of its call.
ex. arr.pop()
How do you remove the last element from an array?
By using the .pop() method. The syntax would be arr.pop()
How do you round a number down to the nearest integer?
By using the Math.floor() method.
How do you generate a random number?
You would use the Math.random() method.
How do you delete an element from an array?
You could use the .splice method.
How do you append an element to an array?
You could use the .push() method
How do you break a string up into an array?
You would use the .split() method.
Do string methods change the original string? How would you check if you weren’t sure?
The string methods don’t change the original string specifically. You could console.log it to see if it has. Strings are immutable in JavaScript
Roughly how many string methods are there according to the MDN Web docs?
50?
Is the return value of a function or method useful in every situation?
No, not always. Often times, we want to delete something and we just want to make sure that thing has been removed.
I.e .pop() method
Roughly how many array methods are there according to the MDN Web docs?
A ton, like 50.
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN (Mozilla Developing Network)
Give 6 examples of comparison operators.
Equal to: ===
not equal to: !=
Greater than: >
Less than: <
Greater than or equal to: >=
Less than or equal to: <=
What data type do comparison expressions evaluate to?
Boolean data types
What is the purpose of an if statement?
An if statement provides a conditional for the code to make a decision.
Is else required in order to use an if statement?
No it is not.
Describe the syntax (structure) of an if statement.
if (score >= 50) {
congratulate();
}
if = keyword
(score >= 50) = condition
code block = code that will be executed if the condition is filled
What are the three logical operators?
And Operator = &&
Logical Or operator = ||
Logical Not = ! (inverts boolean value)
How do you compare two different expressions in the same condition?
You would link them with the && or the || operator
What is the purpose of a loop?
They are used to repeatedly run a block of code until a condition is met
What is the purpose of a condition expression in a loop?
The condition expression gives the loop the parameters it needs in order to stop the loop
What does “iteration” mean in the context of loops?
Each pass through the block of code is called an iteration
When does the condition expression of a while loop get evaluated?
It is evaluated prior to the execution of the statement and prior to each iteration.
When does the initialization expression of a for loop get evaluated?
It is evaluated once before the start of the loop. Before the first iteration.
When does the condition expression of a for loop get evaluated?
The condition expression is evaluated at the start of an iteration.
When does the final expression of a for loop get evaluated?
The final expression is executed at the end of an iteration.
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword.
What does the ++ increment operator do?
It adds one to its operand and returns the new value.
How do you iterate through the keys of an object?
You would use bracket notation paired with a for…in loop
I.E
function valuesFromKeys(object) {
var keys = [ ];
for( var x in object) {
keys.push(x);
}
return keys;
}
What are the four components of “the Cascade”.
Importance, Specificity, Source Order, !important
What does the term “source order” mean with respect to CSS?
Source order is the order in which CSS will display new stylings dependent on the order in which they are written in the stylesheet
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
When dealing with nested elements, when you apply a CSS styling to the parent element and there is no styling specified for the child element, the child will receive the same styling as the parent.
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 directly ignores the rules of CSS Specificity
What does the transform property do?
It allows you to scale, skew, rotate, or translate an element.
Give four examples of CSS transform functions.
Rotate, translate(Y), scale, skew
The transition property is shorthand for which four CSS properties?
Transition-property, transition-duration, transition-timing-function, transition-delay
Why do we log things to the console?
To communicate with our code and see how it is doing.
What is a “model”?
It is a rendition or a replica of something.
Which “document” is being referred to in the phrase Document Object Model?
The document is the actual webpage itself. The HTML document.
What is the word “object” referring to in the phrase Document Object Model?
The object in DOM refers to the nodes and objects that the webpage gets broken up into.
The JavaScript Objects.
The DOM realistically is JavaScript Objects that are representing the HTML document.
What is a DOM Tree?
It is a model of an element and all of its configurations and all of the contents contained.
Give two examples of document methods that retrieve a single element from the DOM.
.getElementByID( ) and .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?
So that you can reuse it in different scenarios.
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 through all of the HTML elements before we can access them with JavaScript
What does document.querySelector() take as its argument and what does it return?
It takes in a CSS selector as its argument and it returns the first matching element that it finds.
What does document.querySelectorAll() take as its argument and what does it return?
It takes a CSS selector as an argument and it returns a Node list of all the matching elements that it finds. A node list is not a DOM element, it is an object that stores DOM elements.
What is the purpose of events and event handling?
The purpose of events is so that the webpage can react to specific things that may occur from the user. Event handling is a routine that is performed when the event that is being watched for occurs.
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?
element.addEventListener( )
What is a callback function?
A callback function is when one function is passed into another function as an argument.
What object is passed into an event listener callback when the event fires?
The event object itself. Its contents are all of the data about said event.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
Event.target is a reference to the exact element in which the event affects. If I wasnt sure I could log event.target and see what comes out. You could also check MDN.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
The first snippet calls the function as an argument or a callback function.
The second snippet actually calls the function itself without any parameters which will result in a return value for said function.
1) Never call an event handler function yourself
What is the className property of element objects?
The className property of an element gets or sets the value of the name of the class.
How do you update the CSS class attribute of an element using JavaScript?
You would use the className method.
EX
$someDOMvar.className = ‘new class name’
What is the textContent property of element objects?
It is a property that returns all the text content of the element and all of its descendents.
How do you update the text within an element using JavaScript?
You would use the textContent method.
EX.
$domVar. textContent = ‘new text content’
Is the event parameter of an event listener callback always useful?
No. Because there are instances where you do not want variability in your event handler functions.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
I feel like it would be more difficult. The counter helped me track where I was in terms of amount of clicks.
Why is storing information about a program in variables better than only storing it in the DOM?
The DOM is only temporary and is applicable to only the instance of the webpage. Once you refresh it you restart to the beginning. There is also a security concern. Its better to have a variable to work off of instead of relying on output.
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
What event is fired when a user clicks the “submit” button within a ?
submit (on the form element, not on the button itself)
What does the event.preventDefault() method do?
If the event is not specifically handled, it should not take its normal default action.
What does submitting a form without event.preventDefault() do?
It will just refresh the page. ALWAYS include a preventDefault in your submit event listener
What property of a form element object contains all of the form’s controls.
HTML form elements
