HTML Flashcards
HTML skeleton, syntax, block and inline, lists, links, relative links
Where do you put non-visible content about the HTML document?
Between the head element opening and closing tags.
Where do you put visible content about the HTML document?
Between the body element opening and closing tags.
Where do the <head> and <body> tags go in a valid HTML document?
Between the doctype declaration and the HTML element opening and closing tags.
What is the purpose of a <!DOCTYPE> declaration?
Tell the browser which version of HTML the page is using, it helps the browser render the page correctly.
Give five examples of HTML element types.
Html, head, body, h1, p
What is the purpose of HTML attributes?
Attributes provide additional information about the contents of an element.
Give an example of an HTML entity (escape character).
” & a m p ; “ for ampersand
“ & e a c u t e ; “ - accent on e
How do block-level elements affect the document flow?
They create elements that will start on a new row and use the entirety of the row (horizontal space)
How do inline elements affect the document flow?
Appears on the same line as their neighboring elements.
What are the default width and height of a block-level element?
The default height is the height of the content and the width is the entire length of the page.
What are the default width and height of an inline element?
The default height and width is the height of the content and the width of the content.
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists are numbered (alphabetical, etc.) and unordered lists begin with a bullet point (squares, etc.).
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
<a> tag and href attribute.</a>
What is an absolute URL?
Full web address of a site to visit a specific page.. (domain name for that site, followed by the path to a specific page).
What is a relative URL?
Links to other pages within the same site. (shorthand versions because they do not need the domain name).
How do you indicate the relative link to a parent directory?
Use ../ to indicate the folder above the current one, then the file name. <a href= “../index.html”>
How do you indicate the relative link to a child directory?
Name of child folder, followed by forward slash, the the file name . <a href= “ child/child.html “ >
How do you indicate the relative link to a grand parent directory?
You can use ../ as many times to reach the root directory/grandparent directory
How do you indicate the relative link to the same directory?
You can just name the file of the directory <a href = “ filename.html”>
What is the purpose of an HTML form element?
The form element identifies the webpage as a form in which a user can input information
Give five examples of form control elements.
Input, label, select, button, option
Give three examples of type attribute values for HTML <input></input> elements.
Radio, checkbox, email, submit, time, calendar
Is an HTML <input></input> element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
Table, tr, td, th, tbody, thead, (optional: tfoot)
What purpose do the thead and tbody elements serve? (semantic elements)
thead= defines a set of rows defining the head of the columns of the table
tbody= encapsulates a set of table rows, indicating that they comprise the body of the table.
Helps people who needs screen readers, improves search engine indexing, control appearance of tables better
Give two examples of data that would lend itself well to being displayed in a table.
TV schedules, stocks
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?
.class (period followed by the class name)
In CSS, how do you select elements by their tag name?
Just use the element name followed by {}.
In CSS, how do you select an element by its id attribute?
ID (hashtag followed by the ID name)
Name three different types of values you can use to specify colors in CSS.
Rgb values, hex codes, color names.
What CSS properties make up the box model?
Border, margin , padding, content
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 added to a selector that specifies a special state of the element.
What are CSS pseudo-classes useful for?
Pseudo-classes allow for stylization of elements in relation to external factors, status of the content, or the position of the mouse.
Makes changes based on user interaction
Name two types of units that can be used to adjust font-size in CSS.
Pixels, percentages, em, etc.
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?
They are block-level elements and will not allow other elements to sit next to it
What is the default flex-direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, column, row
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
Contains everything in the web page to group together
Gives us a boundary for the web page.
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
Element remains in normal document flow.
An elements final position can be modified to overlap other elements
How does setting position: relative on an element affect where it appears on the page?
Will not affect where it appears on the page. It will stay in the same place.
You can control how far an element is placed from its original position.
How does setting position: absolute on an element affect document flow?
Element will be removed from normal document flow.
How does setting position: absolute on an element affect where it appears on the page?
Element will be positioned relative to closest positioned non-static ancestor.
The element sits on its own separate layer from all other elements
How do you constrain an absolutely positioned element to a containing block?
You make the containing block that you want it to be positioned to into a relative position. They will position themselves within the first non-static ancestor.
Parent element can use (Absolute, sticky, fixed) to be a non static element
What are the four box offset properties?
Top, bottom, left, right
What is the purpose of variables?
To store data
How do you declare a variable?
Keyword + creating a variable and giving it a name.
How do you initialize (assign a value to) a variable?
Using the assignment operator. (=)
What characters are allowed in variable names?
letters , numbers, $ dollar sign, _ underscore
What does it mean to say that variable names are “case sensitive”?
A variable starting with a lowercase and a variable starting with an uppercase will create two separate variables.
What is the purpose of a string?
Hold data type consisting of letters/ other characters. Any type of text content.
What is the purpose of a number?
Hold any data type handling numbers/numeric values. Counting, calculating sums, determining size, moving the position, setting time, etc.
What is the purpose of a boolean?
To hold data types of true or false.
To turn a script on or off.
What does the = operator mean in JavaScript?
Assign a value to the variable, also used to update the value given to a variable.
How do you update the value of a variable?
Using the assignment operator.
Do not need to use ‘var’ again, just the name and (=)
What is the difference between null and undefined?
Null represents a placeholder value, might hold value in the future.
Undefined is a value that has not been thought of yet, does not hold value yet.
Why is it a good habit to include “labels” when you log values to the browser console?
To help debug. It makes it clearer which variables are being logged and in which order.
Give five examples of JavaScript primitives.
String, number, boolean, undefined, null
What data type is returned by an arithmetic operation?
A numerical value
What is string concatenation?
The joining of two or more strings using (+) to create a new string
What purpose(s) does the + plus operator serve in JavaScript?
This will combine the value of the string before and after the (+) operator
(a concatenated string)
Addition for numerical numbers.
What data type is returned by comparing two values (<, >, ===, etc)?
true/false
What does the += “plus-equals” operator do?
This will add the number value on the right and assigns the result to the variable
What are objects used for?
To group together a set of variables and functions to create a model.
What are object properties?
Variables that are part of an object.
Describe object literal notation.
The object is in curly braces with its contents, then stored in a variable. Each key is separated from its value using a colon and each property and method is separated with a comma.
Var (varName) = { property: ‘string’, };
How do you remove a property from an object?
Use keyword delete then dot notation to identify the property or method you want to remove from the object.
Delete var.varName;
What are the two ways to get or update the value of a property?
Using square brackets or dot notation.
Bracket: varName[‘newString’] = ‘updatedVal’;
Dot: varName.newString = updatedVal;
What are arrays used for?
To create ordered list of data.
Describe array literal notation.
Var varName = [ ‘one’, ‘two’, ‘three’];
Open brackets
List of data values followed by commas
How are arrays different from “plain” objects?
Arrays are a special type of objects, they hold a related set of values
Arrays use numbers as indexes
What number represents the first index of an array?
0
What is the length property of an array?
Gives you the total number of items in an array
How do you calculate the last index of an array?
Subtracting 1 from the array length
arrayName.length - 1
What is a function in JavaScript?
An object that can be called to make code more dynamic.
A set of statements to perform a task or calculate a value.
Describe the parts of a function definition.
Function keyword to begin the creation of a new function
An optional name for the function
Zero or more parameters surrounded by parentheses.
{ } opening and closing curly brace for the start and end of the function code block.
Optional return statement.
Describe the parts of a function call.
Function name, 0 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 has a series of statements to be run in the codeblock.
The function call is just the function name.
What is the difference between a parameter and an argument?
Parameter: a placeholder / stores local variables to the function
Argument: the value that we want to use for the function.
Why are function parameters useful?
Parameters are useful because they can be replaced with different arguments to run the same code block on that argument.
What two effects does a return statement have on the behavior of a function?
Produces a value from the function.
Prevents any more code in the function’s code block from being run.
A return will exit the function, any code after a return will not be logged..
Why do we log things to the console?
To check whether we get the desired results
What is a method?
A function that is a property of an object that
contains a function definition. Actions that can be performed on objects.
How is a method different from any other function?
Methods are associated with an object property whereas any other function themselves are objects
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 - takes any float values 1.9 → to 1
Math.round (not preferred) - based on the rounding system (less than .4 rounds down, greater than .5 rounds up)
Not relevant to question ceil() rounds up: 1.1 → 2
How do you generate a random number?
Math.random() method
Returns 0-1
How do you delete an element from an array?
shift()- beginning
pop() - end
splice() method
Syntax: you can specify which index in the first argument and how many objects in the second argument
How do you append an element to an array?
unshift() method
push() method
How do you break a string up into an array?
split() method of the string
Do string methods change the original string? How would you check if you weren’t sure?
No, the original string would still be present. You can console.log to make sure.
Strings cannot be changed in Java.
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?
Not always
Roughly how many array methods are there according to the MDN Web docs?
40
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 true or false
What is the purpose of an if statement?
If statements set conditions that will run a code block whether it is true or false
If the initial condition is false, it will keep running until the last condition
Is else required in order to use an if statement?
No it is not required, it is only needed if there a condition you want to run if the first is not true.
Describe the syntax (structure) of an if statement.
If (keyword) if
Condition surrounded by parenthesis ex. (score > 50)
Opening curly brace {
Code to execute if value is true ex: congratulate()
Closing curly brace }
What are the three logical operators?
And logical &&: both conditions must be true to pass
Or logical ||: one or the other condition must be true to pass
Not logical !: inverts the boolean value
How do you compare two different expressions in the same condition?
Using the logical && or logical || operators
Ex: ((5>2) && (2<=3)) will run both expressions and only give true if both are.
Ex ((5>2) || (2>3)) This will run true because the first statement is true.
Using an else if
What is the purpose of a loop?
The purpose of a loop is to perform repeated tasks based on a condition
What is the purpose of a condition expression in a loop?
The condition expression in a loop dictates when a loop should stop running.
What does “iteration” mean in the context of loops?
Each pass through the loop.
When does the condition expression of a while loop get evaluated?
Before each iteration.
When does the initialization expression of a for loop get evaluated?
Once before the loop begins.
When does the condition expression of a for loop get evaluated?
Before each loop iteration.
When does the final expression of a for loop get evaluated?
At the end of each loop iteration, until condition is false.
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?
Increments the value by 1.
How do you iterate through the keys of an object?
Using a for in loop.
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 your spreadsheet. The last stylization will take effect over the previous one.
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.
Class, ID or element type
Why is using !important considered bad practice?
It overrides everything before it, so it is hard to be specific or maintain elements.
Other elements are being read by specificity, source order, etc.
Why do we log things to the console?
To check if we got the desired results.
What is a “model”?
An example of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML document / whatever DOCTYPE is being declared
What is the word “object” referring to in the phrase Document Object Model?
Javascript objects
Represents different parts of the page that is loaded
The document represented as a large object that holds all info about its content
What is a DOM Tree?
The model of the HTML webpage as a tree of objects.
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID: Selects an element by a specified ID
querySelector: CSS selectors
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll
getElementsByClassName
getElementsByTagName
Why might you want to assign the return value of a DOM query to a variable?
Saves the browser time looking for the element again. Also makes it easier to reuse.
What console method allows you to inspect the properties of a DOM element object?
console.dir(): Selects an element by specifying the ID
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to access all elements of the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
It takes CSS selectors and returns the first element that matches that selector/group of selectors.
What does document.querySelectorAll() take as its argument and what does it return?
It takes CSS selectors and returns a NodeList with a list of the document’s elements that match the specified group of selectors.
Why do we log things to the console?
To check if we got the desired results
What is the purpose of events and event handling?
Events can be selected for event handling to trigger code that responds to users.
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?
A call back is when a function is passed into another function as an argument.
A function that you don’t call but is called when an event occurs.
ex) $hoverButton.addEventListener - when mouseover happens, the function handleMouseover fires
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?
Can find more info on MDN
A reference to the object where the event is occurring.//object that triggered the event
Can be checked by console.log
The element that the user interacts with
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
No ()= function only runs when event is fired.
A callback function// The definition of the function
When using an addEventListener, the function should always be a callback function
() = The function with no parameters. . Will run the function before the page finishes loading., instead of when the event occurs.
What is the className property of element objects?
The class attribute of the object.
How do you update the CSS class attribute of an element using JavaScript?
Using the className property of the element object and assigning a value.
What is the textContent property of element objects?
The text content of the node and its descendants.
How do you update the text within an element using JavaScript?
Using the textContent property of the object and assigning a value with an assignment operator.
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?
more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
It is easily retrievable and caching the elements allows for the browser to find it quicker.
What does the transform property do?
Applies a 2d or 3d transformation to an element
Can manipulate the element by rotation, scaling, skewing, or translating
Give four examples of CSS transform functions.
translateY(), scale(), skew() , rotate()
The transition property is shorthand for which four CSS properties?
Transition is a shorthand property for 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 <form>?
submit
What does the event.preventDefault() method do?
Prevents the browser from performing the default action of the event, in this case it
Prevents the browser from automatically reloading the page with the form’s values in the URL
What does submitting a form without event.preventDefault() do?
Loads the form’s values in the URL
What property of a form element object contains all of the form’s controls?
Elements property
DOM.elements()
What property of a form control object gets and sets its value?
value property
What is one risk of writing a lot of code without checking to see if it works so far?
Being unable to find the point of where it is wrong later.
What is an advantage of having your console open when writing a JavaScript program?
Being able to see any changes you made, being able to see console log to see if you got the correct data.
You can see any console error every time you save changes
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendChild()
What do you pass as the arguments to the element.setAttribute() method?
A source attribute and the value.
What steps do you need to take in order to insert a new element into the page?
Create element, give it a class name (optional ) give it an attribute (optional) , give it text content ( optional) , query for an element already on page, append child.
What is the textContent property of an element object for?
To assign text content to an element.
Name two ways to set the class attribute of a DOM element.
className, set attribute to class and value of class name.
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You don’t need to manually do everything, ensures everything is consistent.
Give two examples of media features that you can query in an @media rule.
width, height
Which HTML meta tag is used in mobile-responsive web pages?
content= “viewport
What is the event.target?
It retrieves the object from which an event was dispatched from
The element that was interacted with
Why is it possible to listen for events on one element that actually happen its descendent elements?
The event travels down to the point of interaction (event bubbling)
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
Event.target at the beginning and takes the css selector
It will return the closest element it was nested in
How can you remove an element from the DOM?
element.remove();
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Add an event listener to the parent tag.
What is the event.target?
Element that triggered the event
What is the affect of setting an element to display: none?
Hides the element
What does the element.matches() method take as an argument and what does it return?
CSS Selectors, returns true or false.
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
each step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
Add an event listener to each tab
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
else if statements
What is a breakpoint in responsive Web design?
The point at which a media query is introduced
Ex: when we set the browser to a specific width, it will change to the respective CSS
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
It will resize according to the screen/device dimensions, whereas pixels will vary between devices
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
It will take the latest ruleset and override the previous rules set
Should be styling from small to large
What is JSON?
JSON is a string that represents structured data. It is used to easily transmit data.
What are serialization and deserialization?
Serialization is turning data into a linear “string” of bytes to store information
Deserializaiton turning a string of bytes into an object in memory.
Why are serialization and deserialization useful?
It easily helps transmit and store data.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How do you store data in localStorage?
You stringify the data and then use the localStorage.setItem() method.
How do you retrieve data from localStorage?
localStorage.getItem() method
What data type can localStorage save in the browser?
JSON Strings
When does the ‘beforeunload’ event fire on the window object?
Before the document is about to be unloaded
Document still visible and event can still be canceled
Can ask the user to confirm before closing out/leaving a web page
