Quiz Questions 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?
Inside the HTML element. head goes first then body .
What is the purpose of a DOCTYPE declaration?
First thing on the HTML doc, it declares which type of HTML the webpage is using.
Give five examples of HTML element tags.
<p>, <a>, <span>, , <div></div></span></a></p>
What is the purpose of HTML attributes?
They provide additional information about the element, either editing it or adding more details.
Give an example of an HTML entity (escape character).
& = & or &, < = < or
How do block-level elements affect the document flow?
They take up the whole width of the page. Must start on new line.
How do inline elements affect the document flow?
They take up as much width as needed, like the span element.
What are the default width and height of a block-level element?
Height is a high as the parent, width is the entire page.
What are the default width and height of an inline element?
both are as much as what the parent element size is.
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists are ordered using numbers, unordered list use bullet points or other characters to list
Is an HTML list a block element or an inline element?
It is a block level element.
What HTML tag is used to link to another website?
The ‘anchor’ tag, <a></a>
What is an absolute URL?
URL that points to a specific system and to a specific part
What is a relative URL?
URL that is within the same site
How do you indicate the relative link to a parent directory?
by using the ‘..’ notation followed by ‘/’, to go out of the current file you are in.
How do you indicate the relative link to a child directory?
by naming the child directory followed by ‘/’.
How do you indicate the relative link to a grand parent directory?
like indicating the parent but with ‘../../’ notations.
How do you indicate the relative link to the same directory?
Simply using the file/directory name.
What is the purpose of an HTML form element?
The form element is the place where form controls should be placed in. The area/place where interactive controls are entered.
Give five examples of form control elements.
input, label, button, select, textarea
Give three examples of type attributes for HTML elements.
‘text’, ‘password’, ‘radio’
Is an HTML element a block element or an inline element?
They are inline elements.
What are the names of the individual pieces of a CSS rule?
The rule set and declaration block
In CSS, how do you select elements by their class attribute?
Using the period or dot notation followed by the name
In CSS, how do you select elements by their type?
Using the name of the tag or type. i.e p, body, h1 etc.
In CSS, how do you select an element by its id attribute?
Using the # before the name of the id
Name three different types of values you can use to specify colors in CSS.
The RGB, Hex code, color name, also there is HSL(hue, saturation, lightness)
What CSS properties make up the box model?
Margin, border, padding, content
Which CSS property pushes boxes away from each other?
The margin
Which CSS property add space between a box’s content and its border?
The padding
What is a pseudo-class?
It is a special keyword we can apply to CSS selectors
What are CSS pseudo-classes useful for?
Gives the selector a certain functionality or certain action depending on the pseudo class.
Name at least two units of type size in CSS.
Pixels (px), em, rem, percentage. 16px is 1rem and is usually default.
What CSS property controls the font used for the text inside an element?
The font-family
What are the four components of “the Cascade”.
Source order, Inheritance, Specificity, !important
What does the term “source order” mean with respect to CSS?
The ruleset or selector put last takes precedence.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance provides that functionality.
List the three selector types in order of increasing specificity.
- Type selectors (h1, body, p, and pseudo elements)
- Class selectors (.example, attribute selectors)
- ID selectors (#example).
Why is using !important considered bad practice?
Makes debugging difficult and overall considered bad practice.
What is the default flex-direction of a flex container?
A row.
What is the default flex-wrap of a flex container?
No wrap which is a row, all in one line
Why do two div elements “vertically stack” on one another by default?
Because they are block level elements
What is the default value for the position property of HTML elements?
Static or normal flow
How does setting position: relative on an element affect document flow?
It does not affect the document flow.
How does setting position: relative on an element affect where it appears on the page?
It does not affect where it appears, unless we use offset properties to move them.
How does setting position: absolute on an element affect document flow?
It removes it from the document flow.
How does setting position: absolute on an element affect where it appears on the page?
Yes, it will move it relative to the closest parent depending on where it was originally.
How do you constrain an absolutely positioned element to a containing block?
By setting the containing block or parent element to position other than static.
What are the four box offset properties?
Top, bottom, right, left.
What is the purpose of variables?
To store data
How do you declare a variable?
Using the assignment operator ‘=’ with ‘var’, ‘const’ and ‘let’
How do you initialize (assign a value to) a variable?
The assignment operator ‘=’.
What characters are allowed in variable names?
$, _ , any character. Can not start with numbers but can use numbers in.
What does it mean to say that variable names are “case sensitive”?
Can have two variables with the same spelling but different, coolname is not the same as coolName.
What is the purpose of a string?
To use text
What is the purpose of a number?
For calculations needed in the program
What is the purpose of a boolean?
Y or N answers or True or False.
What does the = operator mean in JavaScript?
To assign stuff
How do you update the value of a variable?
Use the variable name and assignment operator to a different value.
What is the difference between null and undefined?
Null is an intentional lack of value, undefined is a value that was never assigned.
Why is it a good habit to include “labels” when you log values to the browser console?
To better clarify when debugging.
Give five examples of JavaScript primitives.
Strings, Booleans, Numbers, null, undefined
What data type is returned by an arithmetic operation?
A number
What is string concatenation?
Combines strings together
What purpose(s) does the + plus operator serve in JavaScript?
Addition of number data types and concatenation of strings.
What data type is returned by comparing two values (, ===, etc)?
A boolean.
What does the += “plus-equals” operator do?
Adds the value and updates the variable.
What are objects used for?
Group together variables and functions to create a model. Used to model real world objects as well.
What are object properties?
They are called keys, they are variables attached to an object.
Describe object literal notation.
Listing out the key and value pair inside the curly brace
How do you remove a property from an object?
Using the delete operator and accessing the property in the object
What are the two ways to get or update the value of a property?
Dot notation or bracket notation.
What are arrays used for?
Storing a list of data in order
Describe array literal notation.
Using and listing out each property inside brackets
How are arrays different from “plain” objects?
Arrays are numerically indexed in the order they are listed.
What number represents the first index of an array?
Index of 0.
What is the length property of an array?
The total number of items in the array.
How do you calculate the last index of an array?
Length - 1.
What is a function in JavaScript?
They do things in the program, perform some sort of action or calculation.
Describe the parts of a function definition.
Function keyword, function (optional) name, the (optional) parameters, the code block, end of the code block.
Describe the parts of a function call.
Function name with passing arguments in place of the parameters.
When comparing them side-by-side, what are the differences between a function call and a function definition?
To call a function we simply write out the function name with () and arguments if needed
What is the difference between a parameter and an argument?
Parameters are placeholders when defining the function, arguments are the values we are placing in the parameter to run the function with.
Why are function parameters useful?
It is a variable local to the function. Allows us to pass arguments to it.
What two effects does a return statement have on the behavior of a function?
It outputs a value from the function and also stops the code block from running any further.
Why do we log things to the console?
To check if the code is working.
What is a method?
A function which is attached to an object.
How is a method different from any other function?
Method is just associated to an object.
How do you remove the last element from an array?
Use the .pop() method.
How do you round a number down to the nearest integer?
Using the Math.floor() method.
How do you generate a random number?
Using the Math.random() method.
How do you delete an element from an array?
Using the splice(), shift() or pop() method.
How do you append an element to an array?
Using the push() method.
How do you break a string up into an array?
Using the .split() method.
Do string methods change the original string? How would you check if you weren’t sure?
No, you can check using the console.log.
Roughly how many string methods are there according to the MDN Web docs?
Mid thirties.
Is the return value of a function or method useful in every situation?
No, things like pop or shift arent as useful
Roughly how many array methods are there according to the MDN Web docs?
30 plus
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
What is the purpose of an if statement?
To check if a condition is true or false.
Is else required in order to use an if statement?
No, it is not required.
Describe the syntax (structure) of an if statement.
if (…..) {
}
What are the three logical operators?
&& (and), || (or), ! (not)
How do you compare two different expressions in the same condition?
&& or ||
What is the purpose of a loop?
To run block of code a certain amount of times or until a condition is met.
What is the purpose of a condition expression in a loop?
Checks the condition if it is true whether to run or not
What does “iteration” mean in the context of loops?
The process of the loop looping
When does the condition expression of a while loop get evaluated?
Before the code is run and at the end of each iteration.
When does the initialization expression of a for loop get evaluated?
At the start of the loop.
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’, will not exit the function but will stop the loop from running.
What does the ++ increment operator do?
increases it by 1.
How do you iterate through the keys of an object?
a ‘for in’ loop and looking for the variable.
Why do we log things to the console?
Verify what code is doing, debugging etc
What is a “model”?
a representation of something
Which “document” is being referred to in the phrase Document Object Model?
The document node
What is the word “object” referring to in the phrase Document Object Model?
The collection of objects in javascript
What is a DOM Tree?
The model of the HTML contents on the browser
Give two examples of document methods that retrieve a single element from the DOM.
querySelector(), getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll(), getElementsByClassName()
Why might you want to assign the return value of a DOM query to a variable?
When using it more than once, basically to save time
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
We want everything to load properly first before implementing the JS
What does document.querySelector() take as its argument and what does it return?
HTML elements, CSS selectors and returns the first one it encounters
What does document.querySelectorAll() take as its argument and what does it return?
HTML elements, CSS selectors and returns a node list
Why do we log things to the console?
debugging, and checking what is being output
Are all possible parameters required to use a JavaScript method or function?
false
What method of element objects lets you set up a function to be called when a specific type of event occurs?
the addeventlistener
What is a callback function?
A function definition getting passed inside the argument of another function
What object is passed into an event listener callback when the event fires?
The event object.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The element which triggers the event,
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
1st is the call back function,
2nd we are calling the function as the argument.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
1st is the call back function where we give the event listener the handleClick functionality,
2nd we are calling the return value of the handleClick function as the argument.
What is the className property of element objects?
Allows to access or set the value of the class for that object element.
How do you update the CSS class attribute of an element using JavaScript?
Using the className property. element.className = new name
What is the textContent property of element objects?
Allows to update the text content of the element you are working with.
How do you update the text within an element using JavaScript?
Using the textcontent method. element.textContent = ‘new content’
Is the event parameter of an event listener callback always useful?
No, not always needed function (event)
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated, would make code longer and complicated.
Why is storing information about a program in variables better than only storing it in the DOM?
Want to create continuity and reliability.
What does the transform property do?
Allows to modify an element on the screen.
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, transition-delay.
What event is fired when a user places their cursor in a form control?
The focus event.
What event is fired when a user’s cursor leaves a form control?
The blur event.
What event is fired as a user changes the value of a form control?
The input event.
What event is fired when a user clicks the “submit” button within a ?
The submit event.
What does the event.preventDefault() method do?
It cancels the event if it is cancellable, it is preventing the page from refreshing.
What does submitting a form without event.preventDefault() do?
It dumps the form, reloading the page.
What property of a form element object contains all of the form’s controls.
The elements property
What property of a form control object gets and sets its value?
The value property.
What is one risk of writing a lot of code without checking to see if it works so far?
Just good practice and saves time to check as you go and if the functionality is working.
What is an advantage of having your console open when writing a JavaScript program?
Check your script as you go and checking error messages.
Give two examples of media features that you can query in an @media rule.
Min-width, max-width, height, etc.
Which HTML meta tag is used in mobile-responsive web pages?
Does the document.createElement() method insert a new element into the page?
No it does not, until it appendChild()
How do you add an element as a child to another element?
using the appendChild()
What do you pass as the arguments to the element.setAttribute() method?
the Name and Value
What steps do you need to take in order to insert a new element into the page?
Create element and append, add any values if needed class, content etc.
What is the textContent property of an element object for?
So that we can add text and also get the text content. Getter and setter.
Name two ways to set the class attribute of a DOM element.
setAttribute(‘class’, ‘class name’), or the className property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1 is that, allows to pass in values. 2 it fulfills separation of concerns.
What is the event.target?
The point of interaction, whatever element is being interacted with
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?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
Takes selectors, returns either itself or the matching ancestor, if nothing returns null
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?
Take advantage of bubbling, setting on parent.
What is the event.target?
The point of interaction, whatever element is being interacted with. The element of which the event took place.
What is the affect of setting an element to display: none?
It hides the element from the document. It removes it from the flow of the document.
What does the element.matches() method take as an argument and what does it return?
It takes an selector string and returns a boolean.
How can you retrieve the value of an element’s attribute?
getAttribute() method
At what steps of the solution would it be helpful to log things to the console?
To check the value you are trying to return or change. Do it always basically.
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?
Would be difficult, alot more code. weird question.
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?
Would have to use a bunch of conditional statements.
What is a breakpoint in responsive Web design?
The point at which a media query is introduced.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
Percentages are relatively based on the screen or browser window the user has. Percentages will stay ‘fixed’ with their container whatever the size of the container. Pixels are absolute units that give us less flexibility.
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?
It will ‘win’ because it is the last rule or rule that comes latest. The latest rule is stronger or takes precedence.
