LFZ 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?
inside the 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 types.
html, head, title, body, h1, h2, h3, h4, h5, h6, p, div, span, a
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).
Less-than sign - & lt; Greater-than sign - & gt; Ampersand - & amp; Quotation mark - & quot; Cent-sign - & cent; Pound sign - & pound; Yen sign - & yen; Euro sign - & euro; Copyright symbol - & copy; Registered trademark - & reg; Trademark - & trade; Left single quote - & lsquo; Right single quote - & rsquo; Left double quotes - & ldquo; Right double quotes - & rdquo; Multiplication sign - & times; Division sign - & divide;
How do block-level elements affect the document flow?
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
How do inline elements affect the document flow?
An inline element does not start on a new line and only takes up as much width as necessary.
What are the default width and height of a block-level element?
The default height of a block-level element is the height of the content.
The default width of a block-level element is the length of the page.
What are the default width and height of an inline element?
The height of an inline element is the height of the content.
The width of an inline element is the width of the content.
What is the difference between an ordered list and an unordered list in HTML?
Ordered list displays numbered list. Unordered list displays bullet point list.
Is an HTML list a block element or an inline element?
block element
What HTML tag is used to link to another website?
<a> (anchor element)</a>
What is an absolute URL?
the full web address for the site
What is a relative URL?
link to other pages within the same site
How do you indicate the relative link to a parent directory?
Use ../ to indicate the folder above the current one, then follow it with the file name.
How do you indicate the relative link to a child directory?
For a child folder, use the name of the child folder, followed by a forward slash, then the file name.
How do you indicate the relative link to a grand parent directory?
Repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name.
How do you indicate the relative link to the same directory?
To link to a file in the same folder, just use the file name. (Nothing else is needed.)
What is the purpose of an HTML form element?
An HTML form is used to collect user input.
Give five examples of form control elements.
input label select textarea button fieldset legend datalist output option optgroup
Give three examples of type attribute values for HTML input elements.
text, password, radio, checkbox, file, submit, image, hidden
Is an HTML element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
table, tr, th, td, thead, tbody
What purpose do the thead and tbody elements serve?
The headings of the table should sit inside the thead element.
The body should sit inside the tbody element.
Give two examples of data that would lend itself well to being displayed in a table.
Examples of tables include financial reports, TV schedules, and sports results.
Give 6 examples of comparison operators.
==, !=, ===, !==, > < >= <=
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to execute code if a condition evaluates to true
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if key word condition opening curly brace code to execute if value is true closing curly brace
What are the three logical operators?
&&
||
!
How do you compare two different expressions in the same condition?
and operator
or operator
What is the purpose of a loop?
Loops are all about doing the same thing over and over again.
What is the purpose of a condition expression in a loop?
The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statements execute. If the value of condition is false, the for loop terminates.
What does “iteration” mean in the context of loops?
one loop
When does the condition expression of a while loop get evaluated?
before a loop begins
When does the initialization expression of a for loop get evaluated?
it’s executed once at the beginning of the first loop
When does the condition expression of a for loop get evaluated?
before each loop
When does the final expression of a for loop get evaluated?
end of the loop
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 one
How do you iterate through the keys of an object?
for…in loop
What are the names of the individual pieces of a CSS rule?
selectors, declarations
In CSS, how do you select elements by their class attribute?
.class-name
In CSS, how do you select elements by their type?
element-name
In CSS, how do you select an element by its id attribute?
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?
content, padding, 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 CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
What are CSS pseudo-classes useful for?
allow you to change the appearance of elements when a user is interacting with them
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentages, ems
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?
div elements are block-level elements by default
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?
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
How does setting position: relative on an element affect where it appears on the page?
The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
How does setting position: absolute on an element affect document flow?
The element is removed from the normal document flow
How does setting position: absolute on an element affect where it appears on the page?
, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
How do you constrain an absolutely positioned element to a containing block?
containing block position should be set to relative
What are the four box offset properties?
top, bottom, right, left
What are the four components of “the Cascade”.
source order, inheritance, specificity, importantance
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.
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?
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
What is the purpose of variables?
store information
How do you declare a variable?
var variable;
How do you initialize (assign a value to) a variable?
var variable = value;
What characters are allowed in variable names?
letters, numbers, dollar signs, underscore
What does it mean to say that variable names are “case sensitive”?
variables with the same name but different cases are different variables
What is the purpose of a string?
working with text
What is the purpose of a number?
counting or calculating
What is the purpose of a boolean?
logic
What does the = operator mean in JavaScript?
assign value
How do you update the value of a variable?
declare the variable and assign new value
What is the difference between null and undefined?
null is the given value of no value
undefined is no value given
Why is it a good habit to include “labels” when you log values to the browser console?
to help you debug
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
What data type is returned by an arithmetic operation?
number
What is string concatenation?
combining strings
What purpose(s) does the + plus operator serve in JavaScript?
adding numbers and combining strings
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the 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. In an object, variables and functions take on new names, properties and methods.
What are object properties?
variables that are part of an object
Describe object literal notation.
The object is the curly braces and their contents. The object is stored in a variable. Separate each key from its value using a colon. Separate each property and method with a comma.
How do you remove a property from an object?
delete
What are the two ways to get or update the value of a property?
dot notation or bracket notation
What are arrays used for?
store a list of values
Describe array literal notation.
var array = [value1, value2, value3, etc.];
How are arrays different from “plain” objects?
for arrays, the key for each value is its index number
What number represents the first index of an array?
0
What is the length property of an array?
number of items in an array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
A JavaScript function is a block of code designed to perform a particular task.
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.
Notice that we are simply writing the name of the function and placing () parentheses next to it.
When comparing them side-by-side, what are the differences between a function call and a function definition?
// defining the sayHello function
function sayHello() {
var greeting = 'Hello, World!';
console.log(greeting);
}
// calling the sayHello function sayHello();
What is the difference between a parameter and an argument?
parameter is for function definition
argument is for function calling
Why are function parameters useful?
we can pass information or instructions into our functions
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?
console.log() is a powerful tool for debugging and an easy way to inspect your variables in the browser.
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?
A function is independent, whereas a method is a function linked with an object.
How do you remove the last element from an array?
array.pop()
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?
array.splice()
How do you append an element to an array?
array.push() or array.unshift()
How do you break a string up into an array?
string.split()
Do string methods change the original string? How would you check if you weren’t sure?
No, logging to the console
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
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
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?
to prevent the browser from automatically reloading the page with the form’s values in the URL
What does submitting a form without event.preventDefault() do?
form’s values in the URL
What property of a form element object contains all of the form’s controls.
elements property
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?
if there is an error, it will be hard to find where the error is
What is an advantage of having your console open when writing a JavaScript program?
catch errors early
Why do we log things to the console?
easy way to inspect your variables in the browser
What is a “model”?
representation
Which “document” is being referred to in the phrase Document Object Model?
web page
What is the word “object” referring to in the phrase Document Object Model?
web page and everything in it
What is a DOM Tree?
model of a web page
Give two examples of document methods that retrieve a single element from the DOM.
get El ement Byld ()
querySe 1 ector ()
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 your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable.
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?
returns the first Element within the document that matches the specified selector, or group of selectors (valid CSS selector)
What does document.querySelectorAll() take as its argument and what does it return?
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors.
Why do we log things to the console?
easy way to inspect your variables in the browser
What is the purpose of events and event handling?
to have your web page react to the user
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 callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
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?
The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.
point of interaction
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
function runs as the page loads vs function runs when the event fires
What is the className property of element objects?
value of the class attribute
How do you update the CSS class attribute of an element using JavaScript?
assigning an updated value to className
What is the textContent property of element objects?
all the text inside
How do you update the text within an element using JavaScript?
assigning an updated value to the textContent property of that element
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?
access it faster
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
rotate, translate, skew, scale
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 method
What do you pass as the arguments to the element.setAttribute() method?
name and value of the attribute
What steps do you need to take in order to insert a new element into the page?
createElement method
appendChild method
What is the textContent property of an element object for?
manipulate the text content of the element
Name two ways to set the class attribute of a DOM element.
setAttribute method
class = ‘’
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
saves time
less code writing
What is a breakpoint in responsive Web design?
The points at which a media query is introduced
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?
width will scale with the page (more responsive)
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?
when the specificity is equal, the sequence of declaration decides which css rule will apply, which is the last rule in the sequence.
What is the event.target?
reference to the object onto which the event was dispatched
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What DOM element property tells you what type of element it is?
tagName property
What does the element.closest() method take as its argument and what does it return?
selector string
Will return itself or the matching ancestor. If no such element exists, it returns null.
How can you remove an element from the DOM?
remove method
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 and find a match on child elements
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?
viewport meta tag
What is the event.target?
point of interaction
What is the affect of setting an element to display: none?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist)
What does the element.matches() method take as an argument and what does it return?
Parameters
selectorString is a string representing the selector to test.
Return value
result is a boolean value.
How can you retrieve the value of an element’s attribute?
getAttribute method
At what steps of the solution would it be helpful to log things to the console?
each time you add in new functionality
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?
each tab would have its own addEventListener method
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?
we would need to change the class name for all elements one at a time
What is JSON?
JSON is a text-based data format following JavaScript object syntax
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
Why are serialization and deserialization useful?
JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the 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 to you store data in localStorage?
setItem method
How to you retrieve data from localStorage?
getItem method
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
