HTML 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 > tags go in a valid HTML document?
In the html element
What is the purpose of a < !DOCTYPE > declaration?
To tell what type of document the file is and which version of html to use
What is the purpose of HTML attributes?
To attach extra information to elements
How do block-level elements affect the document flow?
Block elements starts on a new line, take up the entire width of the page and elements after it starts on a new line
How do inline elements affect the document flow?
Inline only takes up space as needed
What are the default width and height of a block-level element?
Width is 100% and height is auto
What are the default width and height of an inline element?
Width and height are auto
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists is numbered and unordered lists use bullet points
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
Anchor tag
What is an absolute URL?
The full URL address
What is a relative URL?
A URL without the domain name, partial directory
How do you indicate the relative link to a parent directory?
../(file name)
How do you indicate the relative link to a child directory?
(child directory name)/(file name)
How do you indicate the relative link to a grand parent directory?
../../(file name)
How do you indicate the relative link to the same directory?
file name
What is the purpose of an HTML form element?
collect data from user
Is an HTML element a block element or an inline element?
inline
What are the six primary HTML elements for creating tables?
< table > , < thead > , < tbody > , < th > , < tr > , < td >
What purpose do the thead and tbody elements serve?
Organizing and formatting information
What are the names of the individual pieces of a CSS rule?
selector, declaration block, property, property value
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)
What CSS properties make up the box model?
content, border, margin, padding
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?
Defining a special state of an element
What are CSS pseudo-classes useful for?
styling elements in specific cases
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 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?
Does not affect the flow
How does setting position: relative on an element affect where it appears on the page?
Does not affect the position of its appearance
How does setting position: absolute on an element affect document flow?
It takes it out of the flow
How does setting position: absolute on an element affect where it appears on the page?
It appears on the first non-static element from the parental hierarchy
How do you constrain an absolutely positioned element to a containing block?
make the containing block non-static
What are the four box offset properties?
top, bottom, left, right
What is the purpose of variables?
To hold values to be used later
How do you declare a variable?
var (variable name)
How do you initialize (assign a value to) a variable?
using the = assignment operator
What characters are allowed in variable names?
letters, numbers, $, _
What does it mean to say that variable names are “case sensitive”?
the variable must be spelled exactly or else it will be considered a different variable
What is the purpose of a string?
to hold any series of characters
What is the purpose of a number?
for calculation and counting
What is the purpose of a boolean?
for comparison that gives a define answer to determine the next course of action
What does the = operator mean in JavaScript?
to assign a value to a variable
How do you update the value of a variable?
assign the variable a new value
What is the difference between null and undefined?
null is purposely assigning no value, undefined is declaring a variable without assigning a value
Why is it a good habit to include “labels” when you log values to the browser console?
for other people and yourself to know which variables the values belong
What data type is returned by an arithmetic operation?
number
What is string concatenation?
combining strings to form one string
What purpose(s) does the + plus operator serve in JavaScript?
concatenating strings and adding numbers
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adding/concatenating the value to the value of the variable
What are objects used for?
to organize data into groups without any specific order
What are object properties?
the variables in the object
Describe object literal notation.
{ properties }
How do you remove a property from an object?
using the delete operator
What are the two ways to get or update the value of a property
the . and []
What are arrays used for?
creating ordered lists of information
Describe array literal notation.
[]
How are arrays different from “plain” objects?
- information within the array has an order
- arrays do not have alpha numerical property names
What number represents the first index of an array?
0
What is the length property of an array?
returns how much elements are in the array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
A re-usable block of code that performs a specific task
Describe the parts of a function definition.
function keyword, function name(optional), parentheses, parameter, code block, return statement(optional)
Describe the parts of a function call.
function name with parentheses
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call does not have the keyword function, does not have any code block, not followed by the {} and passes actual values
What is the difference between a parameter and an argument?
parameter is the name of the value and argument is the value being passed in
Why are function parameters useful?
it allows functions to be used in more than one way
What two effects does a return statement have on the behavior of a function?
function stops after reaching the return statement and the function must produce a value
Why do we log things to the console?
for debugging and checking the values
What is a method?
a function that is a property of an object
How is a method different from any other function?
it needs the object to access the method while a function doesn’t
How do you remove the last element from an 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?
splice()
How do you append an element to an array?
push()
How do you break a string up into an array?
split()
Do string methods change the original string? How would you check if you weren’t sure?
Some methods probably does. Check MDN documentation and log the return value of the method if it has one
Is the return value of a function or method useful in every situation?
no
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
for decision making. getting different results based on the conditions
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
key word if, the condition inside parentheses, { code block } , optional else
What are the three logical operators?
||, &&, !
How do you compare two different expressions in the same condition?
&&, ||
What is the purpose of a loop?
to run a block of code a certain amount of time
What is the purpose of a condition expression in a loop?
To stop the loop
What does “iteration” mean in the context of loops?
executing the loop’s code block once
When does the condition expression of a while loop get evaluated?
before the loop starts and before each iteration
When does the initialization expression of a for loop get evaluated?
after the initialization and before the first iteration
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?
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
What does the ++ increment operator do?
increments the variable 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 and important
What does the term “source order” mean with respect to CSS?
lower rules have more priority than higher rules
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance from parent element
List the three selector types in order of increasing specificity.
id, class, element
Why is using !important considered bad practice?
Makes debugging difficult
What is a “model”?
a representation or imitation 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
What is a DOM Tree?
a model showing the relationship between the different nodes that makes up the root node
Why might you want to assign the return value of a DOM query to a variable?
In case it needs to be used multiple times and will not have to query for it each time
What console method allows you to inspect the properties of a DOM element object?
.dir()
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
the html must be loaded and read first to create a model(DOM tree)
What does document.querySelector() take as its argument and what does it return?
takes in a string argument with a value of a css selector and returns the first element it finds
What does document.querySelectorAll() take as its argument and what does it return?
takes in a string with a value of a css selector and reurns a node list of all the matching element it finds
What is the purpose of events and event handling?
purpose of event to perform certain tasks when the user do interact with certain parts of the web page
What do [ ] square brackets mean in function and method syntax documentation?
it means optionals parameter/argument
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 function passed as an argument
What object is passed into an event listener callback when the event fires?
an object that contains the information of the event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
- the reference to the element that fired the event
- check mdn for more information
What is the difference between these two snippets of code?
- element.addEventListener(‘click’, handleClick)
- element.addEventListener(‘click’, handleClick())
- replaces handClick with the definition
- replaces handleclick() with the return of the function
What is the className property of element objects?
the property that gets and sets the class name of an element
How do you update the CSS class attribute of an element using JavaScript?
first get the reference to the element and then use the className property
What is the textContent property of element objects?
returns all readable text within the element
How do you update the text within an element using JavaScript?
assigning a new value to the textContent
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?
easier to access the data if stored in variables, do not have to keep querying the DOM
What does the transform property do?
allows the element to be shown differently
Give four examples of CSS transform functions.
translate, rotate, skew, scale
The transition property is shorthand for which four CSS properties?
duration, delay, property, timing-function
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?
The method prevents the current page from refreshing
What does submitting a form without event.preventDefault() do?
Refresh the current page
What property of a form element object contains all of the form’s controls.
elements property
What property of form a control object gets and sets its value?
value property
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 string with the value of a property name and another string used for the property value
What steps do you need to take in order to insert a new element into the page?
- create new element
- query for an element and append the created element to it
What is the textContent property of an element object for?
gets and sets the texts of the element
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta element
What is the event.target?
the element where the event is fired from
Why is it possible to listen for events on one element that actually happen in its descendent elements?
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 in a css selector name
- returns closest ancestor that matches the css selector name
How can you remove an element from the DOM?
.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 the click event to the parent/ancestor node of the new elements
What is the affect of setting an element to display: none?
the element and its child will not be rendered
What does the element.matches() method take as an argument and what does it return?
css selector string for an argument and returns boolean
How can you retrieve the value of an element’s attribute?
getAttribute()
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?
has to manually add in the addEventListener for the new tab
What is a breakpoint in responsive Web design?
The points where the media queries are used to restructure the layout of the wbpage
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?
percentages scales with width of the screen while pixels do not
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?
source order
What is JSON?
JavaScript Object Notation is a JS object format in a text file
What are serialization and deserialization?
- serialzation is converting an Object memory into bytes
- deserialzation is converting bytes into an Object memory
Why are serialization and deserialization useful?
- serialization makes it easier to store and transfer
- deserialization makes the information easier to work with
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?
localStorage.setItem(string variable name, value)
How to you retrieve data from localStorage?
localStorage.getItem(string variable name)
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
right before the current page switch to a new page
What is a method?
A function definition that is assigned to a property of an object
How can you tell the difference between a method definition and a method call?
- method definition has the keyword function followed by the parentheses followed by curly braces
- method call has the method name after a dot and not open curly braces after the parentheses
How is a method different from any other function?
must use dot notation to show where the function comes from
Describe method definition syntax (structure).
function keyword followed by parentheses with optional parameters inside, followed by the opening curly brace with the code block inside and then the closing curly brace
Describe method call syntax (structure).
object variable name followed by the dot followed by the method name, then the parentheses with optional parameters
What is the defining characteristic of Object-Oriented Programming?
Objects can have both data and methods in it
What are the four “principles” of Object-Oriented Programming?
Abstraction, Inheritance, Encapsulation, Polymorphism
What is “abstraction”?
Defining a concept/model of something that is real
What does API stand for?
application programming interface
What is the purpose of an API?
It only shows what the user needs to use and hide the rest of the functions/methods
What is this in JavaScript?
An implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
It will still be included in the parameter of the function even though the programmer did not include it as one
When is the value of this determined in a function; call time or definition time?
call time
What kind of inheritance does the JavaScript programming language use?
prototype inheritance
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
JavaScript follows the prototype chain
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
It’s parents/ancestor protype object
What does the new operator do?
- creates a blank object
- sets the prototype of the blank object
- the object gets sets as this
- returns this if no object is returned
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
What does the instanceof operator do?
compares the object to see if it has the same constructors and returns a boolean value
What is a “callback” function?
a function passed as an argument for another function
Besides adding an event listener callback function to an element or the document, what is one way to
delay the execution of a JavaScript function until some point in the future?
setTimeout()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 seconds
What do setTimeout() and setInterval() return?
Returns an intervalID which is a positive integer
What is a client?
a piece of software or application that allows user to request services
What is a server?
providers of resources or services
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
What three things are on the start-line of an HTTP request message?
- HTTP method
- Request target
- HTTP version
What three things are on the start-line of an HTTP response message?
- protocol version
- status code
- status text
What are HTTP headers?
additional information to be passed along with the HTTP request/response
Is a body required for a valid HTTP request or response message?
No
What is AJAX?
A technique to request data from a server and load the data into part of the site without needing to refresh
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
Which object is built into the browser for making HTTP requests in JavaScript?
JSON
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share the same prototype
