Web Development Deck 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 head and body element tags go in a valid HTML document?
In between the html element
What is the purpose of a !DOCTYPE declaration?
It lets the web browser know what version of HTML it is running
Give five examples of HTML element types.
- head
- body
- p
- img
- html
What is the purpose of HTML attributes?
HTML attributes provide additional information about the contents of an element
Give an example of an HTML entity (escape character).
© - copyright
How do block-level elements affect the document flow?
They are structural markups that always starts on a new line. Any content on the left or right side gets pushed up or down
How do inline elements affect the document flow?
They are semantic markups that provide extra information and does not disrupt the document flow
What are the default width and height of a block-level element?
The height is dictated by the content and the width takes up 100% of is parent container
What are the default width and height of an inline element?
Width and height are dictated by its content
What is the difference between an ordered list and an unordered list in HTML?
An ordered list uses numbers to indicate a list of steps, but an unordered list uses bullet points to display a list
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
An a tag with attribute href=”(website URL)”
What is an absolute URL?
The full web address used when linking to a different website
What is a relative URL?
a shorthand used when linking to another page within the same site
How do you indicate the relative link to parent directory?
../
How do you indicate the relative link to a child directory?
directory name and file name
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
Just the file name
What is the purpose of an HTML form element?
HTML forms gives you a set of elements to collect data from your users
Give five examples of form control elements.
textarea, option, select, button, label
Give three examples of type attributes values for HTML input elements.
text, radio, checkbox
Is an HTML input element a block element or inline element?
It is neither
What are the primary HTML elements for creating tables?
table, tr, td, th, thead, tbody, tfoot
What purpose do the thead and tbody elements serve?
They help distinguish the heading from the body of the table. Also allows you to style these sections in different manner than the rest of the table.
Give two examples of data that would lend itself well to being displayed in a table.
financial reports and tv schedules
What are the name of the individual pieces of a CSS ruleset?
A selector (indicates which element the rule applies to) and a declaration (indicates how the elements referred to should be styled)
In CSS, how do you select elements by their class attributes?
A class selector use a period followed by the attribute value
In CSS, how do you select elements by their tag name?
Use the element name
In CSS, how do you select an element by its id attribute?
An id selector uses a # followed by the attribute value
Name three different types of values you can specify colors in CSS.
RGB values, Hex code, and Color names
What CSS properties make up the box model?
Border, margin, padding
Which CSS properties 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 pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer
What are CSS pseudo-classes useful for?
To make stylistic changes to user feedback
Name two types of units that can be used to adjust font-size in CSS.
rem and px
What CSS property controls the font used for the text inside an element?
font-size
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?
Because they are block elements
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?
It doesn’t affect document flow
How does setting position: relative on an element affect where it appears in the page?
Relative positioning moves an element in relation to where it would have been in normal flow.
How does setting position: absolute on an element affect document flow?
It get removed from document flow and all other elements fill the space
how does setting position: absolute on an elements affect where it appears on the page?
Absolutely element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else.
How do you constrain an absolutely positioned elements to a containing block?
By looking for the parents container and setting it’s position to relative
What are the four box offset properties?
top, right, bottom, left
what is the purpose of variables?
a variable stores the data value that can used and changed later on
How do you declare a variable?
specify the type, leave at least one space, then the name for the variable and end the line with a semicolon ( ; )
How do you initialize (assign a value to) a variable?
add an equal sign (=) to the right of a variable name. to the right of the equal sign, write an expression
What characters are allowed in variable names?
letters, numbers, non-punctuation characters (except a period (.) is allowed, but cannot start with a number
What does it mean to say that variable names are “case sensitive”?
This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters
What is the purpose of a string?
A string is a data type used in programming, such as an integer and floating point unit, but is used to represent text rather than numbers
What is the purpose of a number?
Number is a primitive wrapper object used to represent and manipulate mathematical operations
What is the purpose of a boolean?
Boolean refers to a system of logical thought that is used to create true/false statements
What does the = operator mean in JavaScript?
an operator is a special symbol used to perform operations on operands (values and variables)
How do you update the value of a variable?
We can update our variables in shorter ways by using the += , *= , -= or /= operators. No keyword needed, variable = value
What is the difference between null and undefined?
undefined is a variable that refers to something that doesn’t exist, and the variable isn’t defined to be anything. null is a variable that is defined but is missing a value. Null is used to assign nothing to a variable purposefully. Undefined is JavaScripts response to nothing being assigned to the variable
Why is it a good habit to include “labels” when you log values to the browser console?
It helps organize which variables are being logged and in what order
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
What data type is returned by an arithmetic operation?
An arithmetic operation combines two or more numeric expressions using the Arithmetic Operators to form a resulting numeric expression
What is string concatenation?
the process of appending one string to the end of another string
What purpose(s) does the + plus operator serve in JavaScript?
returns the sum of the expression and concatenates strings
What data type is returned by comparing two values (<, >, ===, etc)?
returns the boolean values: true of false
What does the += “plus-equals” operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left
What are objects used for?
Used to group a collection of key-value pairs into one variable object
What are object properties?
Variables that are part of an object
Describe object literal notation.
an array of key-value pairs, with a colon separating the keys and values, and a comma after every key-value pair, except for the last
How do you remove a property from an object?
Use the delete operator
What are two ways to get or update the value of a property?
dot notation and bracket notation
What are arrays used for?
to store a list of data
Describe array literal notation.
values are separated by a comma in a bracket [ ] and then assigned to a variable
How are arrays different from “plain” object?
arrays have a length property
What number represents the first index of an array?
0
What is the length property of an array?
tells you how many items you have in an array
How do you calculate the last index of an array?
subtract the array length by 1 then index the array by that value
What is a function in JavaScript?
a set of statements that performs a task or calculates a value that can be replicated multiple times
Describe the parts of a function definition.
function keyword, optional name, comma-separated list of zero or more parameters surrounded by parentheses, start of the function’s code block, optional return statement,
end of the function’s code block
Describe the parts of a function call.
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
function definition has a function keyword, parameters, and a code bock. function calls have arguments and returns a value
What is the difference between a parameter and an argument?
a parameter is the variable in a function definition that has no value and is just a placeholder and an argument is the value passed when calling a function
Why are function parameters useful?
so that the function can be used multiple times with a variety of different values
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 and prevents any more code in the function’s code block from being run
Why do log things to the console?
console.log is a good debugging tool to check the progress of our code and see how things will appear in the browser
What is a method?
a function that is a stored into the property of an object
How is a method different from any other function?
includes an object that you are using the method from
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 - always goes down. Math.trunc( ) - take off the decimal
How do you generate a random number?
Math.random( ) method - function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1)
How do you delete an element from an array?
.splice( ) method - specifies a spot where you should delete
How do you append an element to an array?
.push( ) method
How do you break a string up into an array?
.split( ) method - takes an argument of a string and finds those values and breaks up the string at those locations
Do string methods change the original string? How would you check if you weren’t sure?
They do not change the original string. When in doubt test it out
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?
It is potentially useful but not always
Roughly how many array methods are there according to the MDN Web docs?
A lot
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?
it is a conditional statement that determines which lines of code should be run next based on the return value of the expression
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if keyword, condition within parentheses( ), open curly brace, code to execute if the value is true, semi-colon, end curly brace
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
separate the two expressions with a logical operator
What is the purpose of a loop?
It allows you to execute a block of code multiple times as long as a specified condition is true
What is the purpose of a condition expression in a loop?
Sets a stop for when the code should stop running
What does “iteration” mean in the context of loops?
each single pass through the sequence to complete all steps in the given order
When does the condition expression of a while loop get evaluated?
before the code block run before each iteration
When does the initialization expression of a for loop get evaluated?
before the very first iteration of the code block
When does the condition expression of a for loop get evaluated?
right before the code block and right after the final expression
When does the final expression of a for loop get evaluated?
at the end of 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 keyword
What does the ++ increment operator do?
it adds one to the 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 importance
What does the term “source order” mean with respect to CSS?
code that falls lower in the stylesheet is stronger than those higher on the stylesheet
How is it possible for the styles of an element to be applied to its children as well without an addition CSS rule?
inheritance process
List three selector types in order of increasing specificity.
element type, class, then id
Why is using !important considered bad practice?
it breaks the rules of the cascade
What does the transforms property do?
it modifies the coordinate space of the CSS visual formatting model
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
Why do we log things to the console?
use as a debugger tool to check if our code is running the way it’s intended to
What is a “model”?
a recreation of something
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
JavaScript object (that is modeling the HTML document)
What is a DOM tree?
structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree
Give two examples of document methods that retrieve a single element from the DOM.
querySelector( ) and getElementById( )
Give on 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?
This saves the browser looking though the DOM tree to find the same element(s) again. It is known as catching the selection
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So that the browser loads the HTML document before the javascript code
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
What does document.querySelectorAll( ) take as its argument and what does it return?
returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors
What is the purpose of events and event handling?
events are actions that happen in the system which then tells you so that your code can react to them. Programmers can create event handler code that will run when an event fires, allowing web pages to respond appropriately to change
Are all possible parameters required to use a JavaScript method of function?
no
What method of element objects lets you run a function to be called when a specific type of event occurs?
addEventListener( )
What is a callback function?
a function being passed to another function as an argument
What object is passed into an event listener callback when the event fires?
event object
What is the event.target?
Property whose value is where the element of this event occurs at, not where the listener was applied to
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick( ))
first one has a callback function that can be used later. Second one has a function that passes the return value of the function
What is the className property of element objects?
it gets and sets the value of the class attribute of the specified html element
How do you update the CSS class attribute of an element using JavaScript?
the element. classname = string of the class value
What is the textContent property of element objects?
it returns the text content of the element and all descendaces, with spacing and CSS hidden text, but without the tag.
How do you update the text within an elements using JavaScript?
element.textContent = ‘string’
Is the event parameter of an event listener callback always useful?
Most of the time yes, but there are some specific cases where it is not needed
Would this assignment be simper or more complicated if we didn’t use a variable to keep track of the number of clicks?
it would be more complicated because we wouldn’t have a variable to keep track of the value of the clicks
Why is storing information about a program in variables better than only storing it in the DOM?
storing in a variable allows you to access to a location that is easy to refer back to, rather than writing coding that looks through the entire node tree everything you need access to a value
What event is fired when a user places their cursor in a form control?
pointer event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
input event
What event is fired when a user clicks the “submit” button within a ?
submit event - even on the form element not the submit button
What does the event.preventDefault() method do?
it prevents the default action of an event
What does submitting a form without event.preventDefault() do?
it refreshes the page before the data is stored
What property of a form element object contains all of the form’s controls.
elements
What property of a form control object gets and sets its value?
every form control should include a name attribute
What is one risk of writing a lot of code without checking to see if it works so far?
it’ll be hard to find the location of a bug within your lines of code
What is an advantage of having your console open when writing a JavaScript program?
it notifies you if you run into any bugs while you are working on code
Does the document.createElement() method insert a new element into the page?
no, it just creates it
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?
it becomes a string
What steps do you need to take in order to insert a new element into the page?
create element, add config work if necessary, and append it using appendChild( ) method
What is the textContent property of an element object for?
used to add text content to an element or retrieve the text content
Name two ways to set the class attribute of a DOM element.
using the setAttribute method or the className property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
The function an be reused and the value of the return can also be returned
Give two examples of media features that you can query in an @media rule.
min-width, min-height
Which HTML meta tag is used in mobile-responsive web pages?
viewpoint metatag
What is the event.target?
It is the target property of the event to the object which the even 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?
takes css selectors in string form and returns the first ancestor of the selected element
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?
event delegation
What is the affect of setting an element to display: none?
it removes the element from the document flow
What does the element.matches() method take as an argument and what does it return?
it takes a css selector in string form and returns a boolean value
How can you retrieve the value of an element’s attribute?
getAttribute method
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?
you would have to write multiple codes in javascript for the other views and tabs
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?
you would need a bunch of different if statements
What is a breakpoint in responsive Web design?
the point at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience
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 moves based on the size of the window size
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?
because of the source order or the cascade
What is JSON?
text-based data format for representing structured data based on JavaScript object syntax
What are serialization and deserialization?
serialization is the process of turning an object into a stream of bytes to be transported or stored. Deserialization is the opposite
Why are serialization and deserialization useful?
used to send data - converts data into strings which are easily interpreted across all logic languages
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
How do you serialize a JSON into a data structure using JavaScript?
JSON.parse( )
How do you store data in localStorage?
use the setItem( ) method on the localStorage object
How do you retrieve data from localStorage?
use the getItem( ) method on the localStorage object
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
the event us fired when the window, the document, and its resources are about to be unloaded
