Coding FlashCards
Give five examples of HTML element tags.
- html
- head
- title
- body
- p tag
What is the purpose of HTML attributes?
are a modifier of an HTML element type
Give an example of an HTML entity (escape character)
” © “ = copyright
How do you indicate the parent folder in a path?
Use ../ to indicate the folder above the current one, then the file name
Example: ../index.html
How do you indicate the child folder in a path?
Use the name of child folder, then the file name
Example: music/listings.html
How do you indicate the grand parent folder in a path?
Repeat the ../ to go up two folders, then follow with the file name.
Example: ../../index.html
How do you indicate the current folder in a path?
Use the file name
Example: index.html
–
What purpose do the thead and tbody elements serve?
thead: separate chunks in your table (table header)
tbody: the body (information) of table
Give two examples of data that would lend itself well to being displayed in a table.
Numbers, finances, anything you can put in an excel sheet
What is an absolute URL?
What is a relative URL?
Absolute URL: When you link to a different website, the value of the href attribute will be the full web address for the site
Relative URL: When you are linking to other pages within the same site, you do not need to specificy the domain name in the URL (example: Home)
–
What attribute do you have to match between a label and an input?
for and id
What type of input allows you to select multiple items in a dropdown?
select
select needs to work with the element
What does the element do?
uses the action attribute to indicate the page that the data is being sent to
What does the element do?
indicates the purpose of each form control
Give three examples of type attributes for HTML elements.
type
id
value
Give three examples of type attributes for HTML elements.
password email radio checkbox text calendar phone number button color date time file
Why would we choose specific element types when we have elements such as div and span which can be used for anything?
Provide elements that provide content
SEO (search englines)
Accessibility
What factors contribute to a well-designed HTML document?
Proper formatting (indenting)
Using the correct functions
What are the names of the individual pieces of a CSS rule?
property, value, selector, declaration
How are key/value pairs related to CSS?
properties and values
name that correlates to a value
Name three different types of values you can use to specify colors in CSS.
RBG Values
HEX
Color Names
Why must you have backup fonts assigned when selecting custom fonts?
In case the user does not have that font installed
If the fall back doesn’t work, it will default to New Times Roman
What CSS properties make up the box model?
padding, border, margin
content is not a CSS property
Which CSS property pushes boxes away from each other?
margin
Which CSS property pushes box content away from its border?
padding
What are three important considerations for choosing fonts?
Readability, cross browsers reading, theme, target market
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness
What is source order?
order that CSS rule is written
Styling provided for an element LAST in stylesheet
What is inheritance?
If the child element does not have a value, it would look to the parent element for a value
Why might CSS include this feature?
To set font related properties instead of setting it individually
Is inheritance a good tool to use for styling? If so, on what occasions?
Yes, because you can simplify setting properties
although its on the weaker side - any direct styling will override it
When is ! important a good tool to use?
NEVER. It’s used to override a template that you have no control over or for people writing libraries for CSS
What is specificity?
A browser decide which CSS property values are the most relevant to an element.. then apply it
The more unique, the stronger it’ll be
How is specificity calculated?
determined by the number of each selector type in the matching selector
Why might CSS include this feature?
To make things more precise to an element and not worrying about it getting overwritten
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
id
class
element
universal selector
What is the CSS Cascade?
All the factors to determine what style is applied
What are CSS pseudo-classes useful for?
adds a specific selector to an element
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
What does the transform property do?
allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
What are 3 examples of what can be done with CSS transitions?
duration, timing, and delay
Are all properties able to be transitioned?
yes
Why is CSS transition a useful tool?
create elements to be more visually pleasing
another way to make website more comfortable for users
How do block-level elements affect the document flow?
start on a new line in the browser window
examples: h1, p, ul, li
How do inline elements affect the document flow?
some elements will continue on the same line as neighboring elements
examples: a, b, em, img
What are the default width and height of a block-level element?
100% (takes up any space available)
height: auto (same as content)
width: 100%
What are the default width and height of an inline element?
takes up space to accommodate its contents
height: auto (same as content)
width: auto (same as content)
What accessibility considerations must be considered when choosing HTML elements?
when you want emphasize through a spoken word (such as strong, em, del)
What is the difference between display: none and visibility: hidden?
display: none = hides an element on a page.. element will not be on the page at all (no spaces, no gaps)
visbility: hidden = hides an element.. all the other elements moves over it (shows a space for the hidden element)
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width
What is the initial display property of div s?
block
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width (you can resize height and width)
Why are CSS resets helpful for cross browser compatibility?
its good to be consistent across multiple browsers
Why is it important to be mindful of what you reset with your CSS resets?
you don’t want to reset everything as it’ll give us a starting point. you just want to get rid of things that will cause problems between different browsers
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time (more work for browser)
What is the default value for the position property of HTML elements?
Position default = Static
How does setting position relative on an element affect document flow and where the element appears on the page?
moves an element in relation to where it would have been in a normal flow
shift where it would normally be
How does setting position absolute on an element affect document flow and where the element appears on the page?
removed from document flow entirely and looks for the first non-static parent it can find to position itself against
What are the box offset properties?
top, bottom, left, and right
What were floats originally designed for?
to allow developers to float text around image elements similar to the way newspapers and magazines would display text. For example:
What are clears for with floats?
allows you to say that no element should touch the left or right hand sides of a box
What are some of the downsides for using floats in layout design?
Element is removed from the document flow.
What is the default flex-direction of a flex container?
row (left-to-right)
What is the default flex-wrap of a flex container?
no wrap = all flex items will be on one line
Why should flex-box not be used for building complete web page layouts?
cant make complex lay-outs
Why is it important to use a grid system for CSS layouts?
easy to adjust things in teams
Why is it important to use a grid system for CSS layouts?
container, column, row.
Why is it a good idea to use percentages for grid column widths?
because if you open your website in a crazy display you want your website to be contained.
How do you think building this layout would be different without a grid system?
T WOULD NOT BE FUN
It would be very tough…
What advantages do you see with using a grid system?
organized (easier to work with),
user friendly (easier for them to use and read)
Why are media queries crucial to responsive grid designs?
automatically adjust the set width of the container class depending on the size of the current browser window
without it, building responsive designs is almost impossible (it is important for the content of the website to adapt to the screen it is displayed on)
What is a variable?
to temporarily store the bits of information it needs to do its job
container that we can store data in and reference by data to be used later on
Why are variables useful?
ability to have something you can reference and use later
What two special characters can a variable begin with?
$ or underscore (_)
How do you declare a variable?
using the VAR keyword
ex. var quantity
Which words cannot be used as variable names?
JavaScript keywords
(if, while, var, const)
–
What is a number in JavaScript?
just a number = 12 , 2 , 3
data type
What is an arithmetic operator?
Name four of the arithmetic operators?
+ , - , / , *,
What is the order of execution?
PEMDAS!!!
What is a string?
data type that consists of letters and other characters in a pair of quotes
What is the string concatenation operator?
joining two or more strings to create a single value using the string operator (+)
What is the difference when it comes to using single quotes or double quotes ( ‘ ‘ or “ “ )?
nothing
How do you escape quotation characters?
backwards slash before any type of quotation mark
example: a href="sale.html\
What is type coercion?
one data type has been converted from one data type to another
ex. concatenation var phrase = 'I am' var age = 29 var phrase2 = ' years old' phrase + age + phrase2
What is a number in JavaScript?
data type that contains a number
What is an arithmetic operator?
mathematical operator
Name four of the arithmetic operators?
multiplication, division, addition, subtraction
What is a boolean?
data type with the values of true or false
What is a comparison operator?
used to compare values to test for true or false comparisons
What is the difference between undefined and null?
null: empty or non-existent, must be assigned (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
What is the difference between a parameter and an argument?
parameters: variables
arguments: values
What is a function?
performs a specific task
Define a function named addTwoNumbers with two parameters
function addTwoNumbers(a, b) { }
How do you call a function?
using the statements in between the parenthesis
What are the parts of a function definition?
functionKeyword functionName() {
return statement
}
name function
parameter list
return code block
CODE READING: var firstName = “Michael”;
The string, Michael, is being assigned as the value for the variable first name
CODE READING: var address = number + street
the value of the variable number is being concatenation (+) with the variable of the value street. The result of this expression is the variable address
CODE READING: var area = height * width
the variable stored for height is multiplied by the variable stored for width. The result of this expression is the variable address
CODE READING:
function multiplyTwoNumbers(a,b) {
return a*b
}
Function definition named multiplyTwoNumbers with the parameters a and b with an opening curly brace for the code block. The value for variable a is being multiplied with the value for the variable b and the result of the expression is being returned to the function. there is a closing curly bracket for the code block.
Why are functions useful?
you can reuse them.
Why is it important to understand truthy and falsy values?
important for doing comparisons
What is the difference between null and undefined?
null: empty or non-existent, must be assigned by a human (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
Why do you always use === for comparisons?
to execute a true equality test
Why do you want to avoid using == for comparison?
it loosely compares 2 values for equality after convert both values to a common data type
Do all if statements require an else statement?
no
What is the proper syntax for using the or operator?
x == 5 || y == 5 is false
What is the primary use case for switches?
used to perform different actions based on different conditions.
Does the default case have to be at the bottom of the switch statement?
no
What happens if there is no break statement between cases?
the (default or else) will be executed even if the evaluation does not match the case
CODE READING: switch (operator)
Switch statement checking the EXPRESSION of operator
Difference between if and switch statement
ex. friend ask for a banana
if statements (checks one at a time) - you take one fruit out at a time until you get to the banana
switch statements (sees the full landscape and goes directly to the value you're looking for) - you have the banana on a stand
When should you use bracket notation over dot notation with objects?
- name of the property or method contains a special character (like a dash)
- name of the property is a number
- a variable is being used in place of the property name
What is a property in relation to JavaScript objects?
variables.
How do you remove a property from an object?
use the delete keyword followed by object name and property name
ex. delete hotel.name
What is an object in JavaScript?
collection of related/reference data (contains memory type)
primitive data(contains actual value)
How do you create an object literal?
var object = { };
var object2 = new Object( ) ^ shorten syntax for creating a new object (not mainly used)
What is a property in relation to JavaScript objects?
a place where we can store data inside of an object
What is an array in JavaScript?
list (or set of values)
How do you create an array literal?
square brackets
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
(length is usually tied to an array = array.length)
CODE READING: colors[1]
value at the one index in the color array
DO NOT SAY FIRST…
CODE READING: colors[2] = “green”
a string value of green which is being assigned to the value at the 2 index of the color array
CODE READING: var amountOfStudents = students.length
length property of the students array being assigned to the variable amountOfStudents
What are some good use cases for using objects inside arrays?
student data (name, age, grade)
insurance policy (name, plan, cost)
user info (email, password, full name)
What is the primary advantage to storing your selected elements in a variable?
if you need to use the same element more than once
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
add ids and classes
What are the differences between innertext and textContent?
textContent gets the content of all elements, including and <style> elements. In contrast, innerText only shows “human-readable” elements.</style>
What datatype are the values you remove from a text input?
anything you pull out from an input is going to be a string
Why is it so important to be able to dynamically update text?
so the user can interact with the website.
What are some of the drawbacks of HTML Event Handler Attributes?
better to separate the JS from HTML
Why is the Window.event property to be avoided in new code?
This property is not universally supported and even when supported introduces potential fragility to your code
Why is the Window.event property to be avoided in new code?
This property is not universally supported and even when supported introduces potential fragility to your code
changes with every single event and can easily go to a different event than you’re trying to work with
–ex. document.addEventListener(“mouseover”, console.log)
What is the difference between the getElementById() method and the querySelector() method?
The querySelector() method returns the first element that matches the specified css selectors. For example: document.querySelector(“div.target > span”);
The getElementById() method returns the first element that matches the given id in the DOM. For example: document.getElementById(“idOfSpan”);
–
Who passes in the event object into the handleClick callback function?
JavaScript language with automatically do it
Does a callback function require a name?
no (but you should name your functions)
this would be called an anonymous function
What is the purpose of a loop?
to repeat the same, or similar, code a number of times
currentTarget
targets the element that the event is dealing with
Why might there be different kinds of loops?
different situations
What is the purpose of a conditional expression as it relates to loops?
when you can stop
Could a loop potentially go on forever?
yes
Could a loop never start?
yes
How does a for loop differ from a while loop?
while: don’t know how many times you need to do something but do know where you’ll stop (Ex. walking to leasing office.. don’t know how many steps but i do know where to stop)
- -need a stopping place
for: know the number of items (aka arrays) we’re dealing with (ex. checking off boxes on a stack of cards – set number in a deck of cards)
- -need an initialization, condition, and final expression
What potential use cases are there for for loops?
arrays (example: search engine)
Which pieces of information provided in the parentheses for a for loop are mandatory?
none are mandatory
example: for(;;) –> but you could use while loop instead
What is a for in loop?
using a loop when you don’t know how many things there are in an object
How do you target the value of a property in an object.
put the variable of the property in a bracket notation
When should you use a for in loop?
loop over an object
When should you use a for in loop?
loop over an object [and do the same action for each property]
When should you use a for in loop?
loop over an object [and do the same action for each property]
least use type of loop
node
a piece in your document
What is the difference between the parentNode and parentElement properties?
parentNode: document of the parent element
parentElement: parent element of the current node (always an element)
Why is it important to be able to traverse the DOM?
whitespace nodes and allows us to find information on elements around us
What kind of information is useful to store in custom attributes?
use data attributes to store information
example USING DATA SET
What are two ways to target elements on the DOM?
querySelector (selects first element it finds) or getElementbyID or
querySelectorAll (looks for every single element that may have that class or attribute - but will always return a node list)
What is another way to add a text node to an element other than using textContent.
inner text (use when you want to avoid whitespace node)
document.createTextNode
How do you create a HTML element using vanilla Javascript?
create element method of the doc element object
Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?
DRY (do not repeat yourself)
saves you time!!
Why are arrays preferred over objects for the functionality referenced in question 1?
arrays have order and have index
objects do not have order
How would you alter the game to make the choice from 1 - 500?
var randomNumber = Math.floor(Math.random() * 500) + 1
math. random() = function that gives you a decimal between 0 and 1 but not actually 1… gives opportunity for random percentage.
math. floor() method chops off the decimal point; it’ll round it off to an integer.
+1 = if i get 99.999 repeating, after math.floor it’ll be 99 instead of 100. Which is why you add 1.
example: range between 25 - 50
math.floor(math.random() * (50 - 25 + 1)) + 25
[THAT SHOWS MAXIMUM MINUS MINIMUM AND ADDING 1 TO INCLUDE 25]
What are the disadvantages of inline styling via JavaScript?
you do not want to mix up languages
major problems with inline styling
What things do you have to consider when building a reset game function?
generating a new number to guess if replaying
setting everything back to its initial value
Why is it important to be able to retrieve and use data from inputs?
get information from the user and choose what to do with that data
communicating with the user
Why is it dangerous to assume you have the correct data when creating elements?
you should never assume the user is using the correct information
What is jQuery?
jquery is a library added to javascript to perform css
What is the jQuery selector function?
$()
What does the jQuery selector function return?
return the list of elements that was asked
Why would someone use jQuery over vanilla Javascript?
easier to select elements, chain actions, trim syntax (shorter codes), works across all browsers
What are some downsides from using jQuery over vanilla Javascript?
hides the complexity, develop a skill set that’s not permanent
you have to pull in a code from a network
Why do we use the tag at the bottom of the body, instead of putting it inside the tag?
want the page to load first before we add/remove/etc the classes and elements
javascript runs after all the elements exist
How do you get the text out of an HTML element?
using jQuery
using .text()
everything is a method
How do you get the value out of an HTML input field?
val()
.value
What’s the difference between .text() and .html()?
using jQuery
.text() = (similar to .textContent)
.html() = give full DOM tree
What does .on() do?
using jQuery
handles all events
What is event bubbling?
starts at the most specific node and flows outwards to the least specific one (Default type of event flow)
What is the first argument the function setTimeout takes?
function definition
function callback (can be invoked later)
If the second argument is not passed into the setTimeout function, what is the default value?
zero (executed immediately)
What are some scenarios where setTimeout can be useful?
interacting with the user (seeing if the user is still there)
chat box on website
Difference between setInterval and setTimeout
setInterval (function that gets called everytime you set)
setTimeout (function gets executed onc
What argument does the clearInterval function take?
identifier of repeated action that you want to cancel NOT THE FUNCTION
Which elements in a website are useful to create dynamically?
instagram posts
or
google search
Why should you not create all elements dynamically?
The Structure from scratch
What is a modal?
is a graphical control element subordinate to an application’s main window
What are some use cases for modals?
it that they avoid the need to use of conventional window pop-ups or page reloads.
Give two examples of media features that you can query in an @media rule.
max width
min width
What is a method?
function attached to an object
What does a method do?
takes what you ask and gives a response
multiply: function (num1, num2)
there is an anonymous function definition with two parameters (num 1 and num2) being assigned to the property of multiply
return num1 * num2
the variable num1 is being multiplied by variable num2 and the result of that expression is being returned to the function
What is ‘this’ keyword?
refers to one object (usually the object in which the function operates)
What does bind do?
What does bind do?
creates a new function that has ‘this’ keyword set to a provided value
What is the difference between a function and an object literal?
object literal: contains properties with values
functions: performs a task
What is Prototypal Inheritance?
objects inherit properties from another object
What is the Prototypal Chain?
object.create()
it will create a new
In the custom objects we created, I noticed that our prototype object has another __proto__ property, where did that come from?
when we created carInfoPrototype type using curly braces, it will inherit the __proto__ property
Why does JavaScript have Prototypal Inheritance?
to save memory
What does the new keyword do?
creates a new object
new is adding things onto an object for you
new keyword does this:
- makes an empty object
- sets the constructor of the object to another object
- passed the newly created object as the this keyword context
- returns this keyword if the function doesn’t return an objectcreates a new object
new is adding things onto an object for you
new keyword does this:
- makes an empty object
- sets the constructor of the object to another object
- passed the newly created object as the this keyword context
- returns this keyword if the function doesn’t return an object
I could’ve added a method to the constructor function by assigning a method to a property on the this object. Why do we have to add it to the prototype property?
instead of car.prototype.overview(), i could’ve used car.overview()… why use prototype?
inheritance! using memory efficiency.
car.prototype.overview = function() {
there is an anonymous function definition being assigned for the value of the overview property of the object within the prototype object of the car object
var fiat = new Car( 'fiat', '500', '500kg', 200, 'white', 4 )
the car function is being called using the new keyword and the return of that function call is being returned to the variable fiat
What is the first thing that happens in a class when it is instantiated with the new keyword?
calls the constructor function
Since classes are technically functions as well. Can you name a difference between classes and functions?
classes do not hoist (they have to be declared first)
functions can hoist
What is the basic idea of OOP?
we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of
class parent { }
class definition name parent
What is the benefit of instantiating Classes within other classes?
making a class inside another class, you save the class on the parent class
Why are parent - child relationships important in OOP?
avoid spaghetti code (keep everything in it’s own space)
easier to build on
askForFood() { }
askForFood method being defined with no parameters
Why did you have to bind this for the feedChild method in the Parent class?
you would not be able to get the data from the other source
if you do not bind this, then there is no tie to the child class
Why is it important to assign callback methods to properties in the constructor?
functions are destroyed after constructor is done; save it as a property so that we can reference it in the future
Why did the Maker class require all of the Parent class info?
It needs to have the values to respond to it
Why did you have to bind this for the replenishFood method.
needs to be called inside of a specific object
What decides the order in which JS files must be loaded?
The order you put js files
What is JSON?
is a standard text-based format for representing structured data based on JavaScript object syntax.
What are serialization and deserialization and why are they useful?
- 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.
How to you serialize data into a JSON string using JavaScript?
JSON.stringify() method
How do you deserialize a JSON string using JavaScript?
JSON.parse() method
