C0521 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 head and body tags go in a valid HTML document?
HTML Element
What is the purpose of a !DOCTYPE declaration?
To tell the browser which version of HTML
Give five examples of HTML element tags.
html, head, body, h1, p
What is the purpose of HTML attributes?
Attributes provide additional information about the Element
Give an example of an HTML entity (escape character).
© copyright
How do block-level elements affect the document flow?
Block-level elements start on a new line
How do inline elements affect the document flow?
They don’t interrupt the flow
What are the default width and height of a block-level element?
100% Width, Auto Height
What are the default width and height of an inline element?
Auto Width, Auto Height
What is the difference between an ordered list and an unordered list in HTML?
Ordered implies that that the content goes in an order. ie. 1, 2, 3, etc.
Unordered does not have a specific order and by default has bullet points.
Is an HTML list a block element or an inline element?
Block
What HTML tag is used to link to another website?
The anchor tag
What is an absolute URL?
Link to a specific page on the web (external source)
What is a relative URL?
Link to other pages on the same site (local files)
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
Name of the directory
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
Name of the file
What is the purpose of an HTML form element?
To collect information from visitors
Give five examples of form control elements.
input, textarea, select, label, button
Give three examples of type attributes for HTML input elements.
radio, submit, 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 separate the head and the body of the table
Give two examples of data that would lend itself well to being displayed in a table.
Tabular data
What are the names of the individual pieces of a CSS rule?
Selector, Declaration, Property, and Value
In CSS, how do you select elements by their class attribute?
.
In CSS, how do you select elements by their type?
Element name
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.
Hexcode, RGB, and HSL
What CSS properties make up the box model?
Content, Padding, Border, and 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 class added to a selector that specifies a special state of that element
What are CSS pseudo-classes useful for?
Adding styling to an element that is in that state
Name at least two units of type size in CSS.
px and 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?
no-wrap
Why do two div elements “vertically stack” on one another by default?
divs are a block element
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 document flow
How does setting position: relative on an element affect where it appears on the page?
Starts at normal flow position
How does setting position: absolute on an element affect document flow?
Doesn’t affect flow, gets removed from flow
How does setting position: absolute on an element affect where it appears on the page?
The element gets positioned to the nearest positioned ancestor that is non-static
How do you constrain an absolutely positioned element to a containing block?
Set parent to a position
What are the four box offset properties?
Top, Right, Bottom, Left
What is the purpose of variables?
Store information to go back to and use it
How do you declare a variable?
var
How do you initialize (assign a value to) a variable?
=
What characters are allowed in variable names?
Letters, Numbers, Dollar Sign, or an Underscore.
Can’t start with a number
What does it mean to say that variable names are “case sensitive”?
If you capitalize a letter in a variable name, it will be a different variable
ie. var score; is different from var Score;
What is the purpose of a string?
To contain text or any characters
What is the purpose of a number?
To hold numeric value
What is the purpose of a boolean?
To provide true or false values
What does the = operator mean in JavaScript?
Assign a value to a variable
How do you update the value of a variable?
Assign a value to that variable
What is the difference between null and undefined?
Null and Undefined are both empty but Null is the developers way of saying empty and Undefined is Javascript’s way of saying empty
Why is it a good habit to include “labels” when you log values to the browser console?
To know what you are logging and testing
Give five examples of JavaScript primitives.
String, Number, Boolean, Undefined, and Null
What data type is returned by an arithmetic operation?
Number
What is string concatenation?
Adding strings together to make a new string
What purpose(s) does the + plus operator serve in JavaScript?
To add numerical values or concatenating strings
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
Shorthand for x = x + y
What are objects used for?
To have multiple properties (variables) and methods (functions) under one value
What are object properties?
Variables that live within an object
Describe object literal notation.
Create an object and give it a name. Inside the pair of curly braces are name-value pairs that are separated by a comma. Those values can be properties (variables) and methods (functions).
How do you remove a property from an object?
Use the delete operator and then dot notation for the property in the object
ie. delete object.property
What are arrays used for?
To store a list of values that are related to each other
Describe array literal notation.
Create an array and give it a name. Inside the pair of square brackets are values that are separated by a comma.
How are arrays different from “plain” objects?
Arrays have an index
What number represents the first index of an array?
0
What is the length property of an array?
Returns the number of values in the array
How do you calculate the last index of an array?
Subtract 1 from the length
What is a function in JavaScript?
A block of code that can be named and used an infinite amount of times
Describe the parts of a function definition.
Function Keyword, Function Name, Parameter, Code Block
Describe the parts of a function call.
Function Name, and Argument(s)
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function keyword, and the code block
What is the difference between a parameter and an argument?
Parameters are used when you define a function and arguments are used when you call a function
Why are function parameters useful?
Parameters let us run the function with different values instead of having a fixed result.
What two effects does a return statement have on the behavior of a function?
Stops the function and takes the result out of the function
Why do we log things to the console?
To test our code and see what the value of something is at a certain point
What is a method?
A method is a function which is a property of an object
How is a method different from any other function?
Methods are properties of an object
How do you remove the last element from an array?
The .pop method
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?
The .splice method
How do you append an element to an array?
The .push method
How do you break a string up into an array?
The .split method
Do string methods change the original string? How would you check if you weren’t sure?
No, you can check by logging the console of the original string and checking the return value of the documentation
Roughly how many string methods are there according to the MDN Web docs?
Over 30
Is the return value of a function or method useful in every situation?
Sometimes the return value will be useful but not always
ie. splice method return value is the removed value
Roughly how many array methods are there according to the MDN Web docs?
Over 30
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 values
What is the purpose of an if statement?
the if statement checks if the condition is met to run the code in the block
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if keyword follow by a condition in between parentheses which is followed by a code block that will run if the condition is met
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
logical operator
What is the purpose of a loop?
To repeat code
What is the purpose of a condition expression in a loop?
Permission to run code and also to stop running code
What does “iteration” mean in the context of loops?
Each the code block is executed
When does the condition expression of a while loop get evaluated?
Beginning of each iteration
When does the initialization expression of a for loop get evaluated?
Beginning of everything else and it only happens once
When does the condition expression of a for loop get evaluated?
Before each iteration
When does the final expression of a for loop get evaluated?
After each 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 the value of a variable
How do you iterate through the keys of an object?
For in loop
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 last rule that was applied to the same element is stronger than the ones created before it
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, Class, ID
Why is using !important considered bad practice?
It rules out any other styling and will be harder to debug because it destroys the natural cascade
Why do we log things to the console?
To see if the code is working
What is a “model”?
A model is a representation of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
The objects in the HTML document
What is a DOM Tree?
A DOM tree is a model of a web page
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.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To quickly access the values of that DOM method so that the code doesn’t have to run every time
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?
To create a model after the whole page has loaded
What does document.querySelector() take as its argument and what does it return?
It takes a selector as an argument and returns a JavaScript object or null if nothing is found
What does document.querySelectorAll() take as its argument and what does it return?
It takes a selector as an argument and returns a NodeList
What is the purpose of events and event handling?
To run code if something occurs
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 callback function is a function passed into another function as an argument
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 object holds the element that the event was triggered on
MDN
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The first one has a function that will wait til the event happens
The second one runs immediately and returns undefined
What is the className property of element objects?
The className property is the class name of the element
How do you update the CSS class attribute of an element using JavaScript?
Assign the new class name to the className property of the object
What is the textContent property of element objects?
The textContent is the text content of the element
How do you update the text within an element using JavaScript?
Assign the new text content to the textContent property of the object
Is the event parameter of an event listener callback always useful?
No
Why is storing information about a program in variables better than only storing it in the DOM?
You can reuse the information stored in variables rather than calling the DOM every time
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element
Give four examples of CSS transform functions.
rotate, scale, skew, translate
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
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’
What does the event.preventDefault() method do?
prevents the default behavior of the event
i.e. preventing the data to be in the url