HTML Flashcards
Where do you put non-visible content about the HTML document?
Head
Where do you put visible content about the HTML document?
Body
Where do the and tags go in a valid HTML document?
between closing and opening html tag element
What is the purpose of a declaration?
let us know that this is an html document
give 5 examples of html element tags
head tag, body tag, p tag, h1 tag, title tag
What is the purpose of HTML attributes?
provide more information for the html element.
Give an example of an HTML entity (escape character).
® = registered trademark
How do block-level elements affect the document flow?
block starts on new line and takes up the whole width.
How do inline elements affect the document flow?
inline continues and takes as much space as needed.
What are the default width and height of a block-level element?
100% width and the height is based on the html element content.
What are the default width and height of an inline element?
width is based on content as well as height
What is the difference between an ordered list and an unordered list in HTML?
ordered list are numbers and unordered are bullets
Is an HTML list a block element or an inline element?
block
How do you indicate the relative link to a parent directory?
../ to indicate the folder above the currentone, then follow it with the file name.
How do you indicate the relative link to a child directory?
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?
../../ indicate that you want to go up two folders rather than one follow it up with the file name.
How do you indicate the relative link to the same directory?
Just use the file name.
What is the purpose of an HTML form element?
To collect information from visitors using different types of form control.
Give five examples of form control elements.
Text input, radio, button, password input, text area,
Checkboxes, drop down boxes, submit buttons.
Give three examples of type attributes for HTML elements.
button, radio
Is an HTML element a block element or an inline element?
INLINE
name 3 different types of values you can use to specify colors in css.
HEX, NAME AND RGB.
what are the names of the individual pieces of a CSS rule?
CSS RULE SET:
SELECTOR {DECLARATION BLOCK
PROPERTY AND VALUE}
In CSS how do you select elements by their class attribute?
using a period followed by the name
In CSS how do you select elements by their type
just the name of the element
In css how do you select an element by its id attribute?
using “hashtag” # followed by the name.
Name three different types of values you can use to specify colors in CSS.
RGB , HEX AND COLOR VALUE NAME
What CSS properties make up the box model?
It consists of: margins, borders, padding, and the actual content.
Which CSS property pushes boxes away from each other?
MARGIN
Which CSS property add space between a box’s content and its border?
PADDING : BORDER-SPACING
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). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.
What are CSS pseudo-classes useful for?
it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently.
Name at least two units of type size in CSS.
REM, PIXEL
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 theevent.target?
- The element that was targeted by the user.
- What is the affect of setting an element todisplay: none?
- it prevents the html from rendering.
- What does theelement.matches()method take as an argument and what does it return?
- argument: css selector string and it returns a boolean if it is a match or not. true or false.
- How can you retrieve the value of an element’s attribute?
- getAttribute()
- At what steps of the solution would it be helpful to log things to the console?
- -every step you’re unsure of not getting results ; everywhere you log it.
- 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 manually set an event listener for each tab. -
- If you didn’t use a loop to conditionally show or hide the views in the
- 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?
- manually find each element and unset the class.
- What is abreakpointin responsive Web design?
- where the content on the page responds depending on what the media feature width was set at . Place where the media query.
- What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?
percentage will correlate with the device width. whereas 300 pixels is a set amount correlate with the container viewport.
f you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
- source order : cascade example. CSS the source order is important. Media query should be on the bottom.
- What is JSON?
JSONis a text-based data format following JavaScript object syntax the data is passed in strings.
- object /array rendered to string
- What are serialization and deserialization?
- serialization is turning object/array to string “stings are characters of byte”
- deserialization is turning strings into object/array.
- send and receive data possible.
Simply speakingSerializationis a process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage.
Deserialization is the exact opposite - Fetch a stream of bytes from network or persistence storage and convert it back to the Objectwith the same state.
- Why are serialization and deserialization useful?
- might be too large, and we can’t transmit data based on memory data
- serialization is easy to transfer.
- deserialization: is easy to access.
- How do you serialize a data structure into a JSON string using JavaScript?
- using JSON.stringify(); method.
- How do you deserialize a JSON string into a data structure using JavaScript?
- using JSON.parse(); method.
reason for JSON
reason why we have JSON so we have a format where we can transmit data.
takeaway: Strings can be used to store data.
- How to you store data inlocalStorage?
- go to applications then local storage.
- What data type canlocalStoragesave in the browser?
- key and values
- When does the’beforeunload’event fire on thewindowobject?
- -before you unload it will notify you.
- right before you leave the website. Notify with a pop up window.
- before the tab unloads.
- What is amethod?
methods areactions that can be performed on objects. A JavaScript method is a property containing a function definition. Methods are functions stored as object properties.
- How can you tell the difference between a methoddefinitionand a methodcall?
- method call you pass in an argument.
- function inside a method’s name and method call is you’re
- parenthesis .
method definition will always include a code block with the function keyword.
method calls : predefined function. starting with the object.method(‘call’);
- Describe methoddefinitionsyntax (structure).
- property : function assigning to a property
- Describe methodcallsyntax (structure).
object.property().
- How is a method different from any other function?
method are functions stored as object properties
- What is thedefining characteristicof Object-Oriented Programming?
Object-oriented methodology relies on three characteristics that define object-oriented languages:encapsulation, polymorphism, and inheritance.
- What are the four “principles” of Object-Oriented Programming?
- Abstraction
- Encapsulation
- Inheritance
- Polymorphism
- What is “abstraction”?
- Taking something complex and making it simple for example light switch. we just turned on and off, but there’s more complex things behind that light switch.
- What does API stand for?
application programing interface
- What is the purpose of an API?
- someone created a set of tools for you to use. “communication between softwares” interaction between multiple softwares.
- What isthisin JavaScript?
- object The JavaScript this keyword refersto the object it belongs to.
- What does it mean to say thatthisis an “implicit parameter”?
it’s animplicitparameter, meaning that it is available in a function’s code block even though it was never included in the function’s parameter list or declared withvar.
- Whenis the value ofthisdetermined in a function;call timeordefinition time?
call time
- What doesthisrefer to in the following code snippet?
- var character = {
- firstName: ‘Mario’,
- greet: function () {
- var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
- console.log(message);
- }
- };
- “undefined : this.firstName was not called. the value is determined at call time. “
- Given the abovecharacterobject, what is the result of the following code snippet? Why?character.greet();
It’s a me “mario!”
- Given the abovecharacterobject, what is the result of the following code snippet? Why?var hello = character.greet;
- hello();
It’s a me , undefined! - the greet property was not called with the function.?
How can you tell what the value ofthiswill be for a particular function or methoddefinition?
-there is no way to know what the value yet .
- How can you tell what the value ofthisis for a particular function or methodcall?
- the object left to the left of the dot.
- What kind of inheritance does the JavaScript programming language use?
-prototype-based inheritance
- What is a prototype in JavaScript?
- a prototype in javascript is a template object that allows objects to inherits methods and properties from.
- 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?
prototype object : inheritance.
- If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
look into the parent object : Prototype object.
a prototype can be under another prototype.
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
Prevent form submission
What does the event.preventDefault() method do?
- prevent default :
What does submitting a form without event.preventDefault() do?
It’ll keep running
What property of a form element object contains all of the form’s controls.
HTMLFormElement property.
What property of a form control object gets and sets its value?
Is the one for form control. Value property.
What is one risk of writing a lot of code without checking to see if it works so far?
The code might’ve broken earlier on.
What is an advantage of having your console open when writing a JavaScript program?
Check the code in real time.
Does the document.createElement() method insert a new element into the page?
no, it’s not part of the Dom tree until it is appended.
How do you add an element as a child to another element
parent.appendchild(child)
What do you pass as the arguments to the element.setAttribute() method?
Element.setAttribute(name, value);
What steps do you need to take in order to insert a new element into the page?
Create the element with createElement()
Create the textNode with createTextNode() ←-optional
Appendchild(); specify which element you want this node added to
parent appendchild child
What is the textContent property of an element object for?
represents the text content of the node
Name two ways to set the class attribute of a DOM element.
Set attribute method
Class Name method.
Class list : add(); remove();
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- Reuse content; in multiple applications.
- update the content .
- return the DOM TREE. at the end.
- take the most external and then return it .
Give two examples of media features that you can query in an @media rule.
@media (max-width: 12450px) { … }
@media (hover: hover) { … }
Min width & max width.
Which HTML meta tag is used in mobile-responsive web pages?
Meta - viewport .
What is the event.target?
the element that was touched/targeted
Why is it possible to listen for events on one element that actually happen its descendent elements?
parent and children
What DOM element property tells you what type of element it is?
typeOF
What does the element.closest() method take as its argument and what does it return?
the closest element
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?
reuse the same function
What is the className property of element objects?
- Property that allows you to get the class attribute of the element or set it.
- the value of the class attribute.
How do you update the CSS class attribute of an element using JavaScript?
Element.classname = with the new class.
What is the textContent property of element objects?
The text content within the node and their child.
How do you update the text within an element using JavaScript?
Node.textContent = ‘string’.
Dom object .textContent =
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?
Won’t be able to track the number of clicks.
Hard to keep track. You want it to keep
Why is storing information about a program in variables better than only storing it in the DOM?
easy access
What does the transform property do?
CSS property lets you rotate, scale, skew, or translate an element.
Give four examples of CSS transform functions.
matrix()
Describes a homogeneous 2D transformation matrix.
matrix3d()
Describes a 3D transformation as a 4×4 homogeneous matrix.
Rotation
rotate()
Rotates an element around a fixed point on the 2D plane.
rotate3d()
Rotates an element around a fixed axis in 3D space.
rotateX()
Rotates an element around the horizontal axis.
rotateY()
Rotates an element around the vertical axis.
rotateZ()
Rotates an element around the z-axis.
*rotate, translate, matrix, skew ;
Why do we log things to the console?
to check your code
What is a “model”?
Our code is just code. When the webpage loads our code that is the model. The physical representation of our code.
Which “document” is being referred to in the phrase Document Object Model?
Document node is the representation of the entire page.
HTML is the document.
What is the word “object” referring to in the phrase Document Object Model?
The nodes. “Each node is an object with methods and properties.
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
“Javascript” it’s an object modeling the javascript model.
What is a DOM Tree?
What is a DOM Tree?
How your code is sorted out. With the document node always on top. Document node is the parent with every other node a descendent of the document node.
Collection of HTML elements that are connected with each other like a family tree.
Give two examples of document methods that retrieve a single element from the DOM.
- getElementByID();
- querySelector();
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName();
getElementByTagName();
querySelectorAll();
Why might you want to assign the return value of a DOM query to a variable?
Method that finds elements in the DOM tree are called DOM queries.
When you need to work with an element more than once you should use a variable to store the result of that query.
“For multiple use you can reuse it”
What console method allows you to inspect the properties of a DOM element object?
The method console.dir();
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
Html reads top to bottom.
What does document.querySelector() take as its argument and what does it return?
querySelector(‘css selector’)
What does document.querySelectorAll() take as its argument and what does it return?
querySelectorAll
Will take all of the querySelectorAll css selector: even if they have multiple css selector.
Uses the css selector syntax to select one or more elements and return all of those that matches.
Why do we log things to the console?
to check our code
What is the purpose of events and event handling?
User interaction. User clicks a function happens. The code responds 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() method
What is a callback function?
A callback function is a function passed into 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? If you weren’t sure, how would you check? Where could you get more information about it?
An object referencing where the event started and occurs.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
First one includes the call back : legitimate eventlistener
Second one includes
-function call : the return of the function call.
It got called before it was
Never call an event handler.
Need one for the event “example” - click
& one return it
What are the four components of “the Cascade”.
Order it is in “where it is”, how specific it is, “how important it is”
Source orders, inheritance, specificity,
What does the term “source order” mean with respect to CSS?
Where you put the selector in the style sheet effects what property is applied
“Preference for css styles is to use the source order” laying out the css.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
-direct children inherit the parent css.
“Relating to fonts: text.
Font family & color property.”
Positioning is not inheritance.
List the three selector types in order of increasing specificity.
Type selector: the element
Class selector
Id selector
Why is using !important considered bad practice?
It breaks the cascading style and is hard for debugging.
why do we log things to the console?
To check your work if it is working correctly.
What is a method?
JavaScript methods are actions that can be performed on objects.
A JavaScript method is a property containing a function definition.
How is a method different from any other function?
method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
How do you remove the last element from an array?
The pop() method
How do you round a number down to the nearest integer?
floor() methd
How do you generate a random number?
random()
How do you delete an element from an array?
Splice () :
How do you append an element to an array?
Push method ();
How do you break a string up into an array?
Split () method
Do string methods change the original string? How would you check if you weren’t sure?
No: , console log
Roughly how many string methods are there according to the MDN Web docs?
30ish.
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?
35
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.
Less than () — returns true if the value on the left is greater than the value on the right, otherwise it returns false. Less than or equal to (<=) — returns true if the value on the left is less than or equal to the value on the right, otherwise it returns false. Greater than or equal to (>=) — returns true if the value on the left is greater than or equal to the value on the right, otherwise it returns false. Equal to (===) — returns true if the value on the left is equal to the value on the right, otherwise it returns false. Not equal to (!==) — returns true if the value on the left is not equal to the value on the right, otherwise it returns false.
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
To make a decision should i do this or not.
Is else required in order to use an if statement?
No not necessary;
Describe the syntax (structure) of an if statement.
if (condition) {
// block of code to be executed if the condition is true
}
If stmt (conditional block)What are the three logical operators?
OR , AND , NOT
How do you compare two different expressions in the same condition?
|| or &&and
What are arrays used for?
To store a list of items or like values. Similar datas.
Describe array literal notation.
Var name of array [square brackets with the values followed by a comma]
How are arrays different from “plain” objects?
Array stores a list of like values
It has an index. “There’s an order.”
Object stores properties : describes the item.
What number represents the first index of an array?
zero
What is the length property of an array?
Calculates the number of items/values in the array.
Name of the array followed by a period and then the length property.
How do you calculate the last index of an array?
Name of the array followed by a period and then length property minus 1
What is a function in JavaScript?
set of task/procedures
Describe the parts of a function definition.
function “name” (parameter) { code block};
Describe the parts of a function call.
function name (argument);
When comparing them side-by-side, what are the differences between a function call and a function definition
function definition = code block; function call = contains argument
What is the difference between a parameter and an argument?
parameter = placeholder; argument = actual value
Why are function parameters useful?
acts as placeholder . allows substitution
What two effects does a return statement have on the behavior of a function?
returns a value
What is the purpose of variables?
-a way for a script to store bits of information it needs to do its job. Variables can be represented by numbers, string, boolean, null, undefined,
How do you declare a variable?
You can declare a variable by using “let, var, const”
Start with the variable keyword and then variable name
Example: var quantity;
var= keyword and quantity = variable name
how to initialize a variable
Variable name = value
Using the assignment operator
Variable name+ “assignment operator =” + value
What characters are allowed in variable names?
Start them with a letter, underscore _, or dollar sign $.
After the first letter, you can use numbers, as well as letters, underscores, or dollar signs.
Don’t use any of JavaScript’s reserved keywords.
What does it mean to say that variable names are “case sensitive”?
Uppercase and lowercase will have an effect on the name
purpose of string
String is used to store text data
What is the purpose of a number?
Store numerical values
Numbers are used for task that involves counting or calculating basically anything for math.
What is the purpose of a boolean?
To store true or false values and comparison::for decision making
What does the = operator mean in JavaScript?
It means that you are saying you are going to assign a value to a variable
Make that variable hold that value or contain that value.
How do you update the value of a variable?
VariableName = whatever the new value is;
What is the difference between null and undefined?
Null is used as a placeholder for a value you do not know yet.
Null and undefined : “ null is intentionally left empty”
Null at some point it has to be assigned a value in order for it to work.
Why is it a good habit to include “labels” when you log values to the browser console?
Let you know what that data is. Good habits to do so when you do console log you know what that data means.
Give five examples of JavaScript primitives.
numbers, string, boolean, null, undefined, array, object
What data type is returned by an arithmetic operation?
NUMBER VALUE DATA TYPE
Arithmetic operators perform basic math
What is string concatenation?
Using the “+ the plus symbol” to join two variables or string.
What purpose(s) does the + plus operator serve in JavaScript?
Addition: adds one value to another
What data type is returned by comparing two values (, ===, etc)?
Boolean , true or false
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 function to create a model of something you would recognize from the real word.
What are object properties?
If variables are part of an object is called a property. Property tells us about the object such as name of hotel or number of rooms it has
Describe object literal notation.
Name of the variable {} curly bracelet
Key and value in the curly brackets and the method.}
How do you remove a property from an object?
Delete objectname followed by a period and then the property name
What are the two ways to get or update the value of a property?
You can get or access the properties using the dot notation
Or the square bracket notation.
What is the default value for the position property of HTML elements?
Position: STATIC;
How does setting position: relative on an element affect document flow?
Moves an element from the position it would be in normal flow, shifting it to top, right, bottom or left or where it would have been placed.
How does setting position: relative on an element affect where it appears on the page?
Moves an element from the position it would be in normal flow, shifting it to top, right, bottom or left or where it would have been placed.
How does setting position: absolute on an element affect document flow?
Positions the element in relation to its containing element. It is taken out of the normal flow meaning that it does not affect the position of any surrounding elements.
Taken out of normal flow and no longer affects the position of other elements on the page
How does setting position: absolute on an element affect where it appears on the page?
Absolutely positioned elements move as users scroll up and down the page.
What are the four box offset properties?
Top, bottom, left and right.
Name three different types of values you can use to specify colors in CSS.
Hex , name ,rgb
