LFZ Module 1 Flashcards
(179 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
Inside the head tags. It is a container for metadata, which is data about the html document used by browsers, search engines, and other web services.
2
Q
Where do you put visible content about the HTML document?
A
Inside the body tags.
3
Q
Where do the head andbodytags go in a valid HTML document?
A
After the !DOCTYPE tag and inside the html tags. Head on top and then body.
4
Q
What is the purpose of a!DOCTYPE declaration?
A
To tell a browser which version of HTML the page is using. It helps render a page correctly.
5
Q
Give five examples of HTML element tags.
A
body, h1, head, ol, and p.
6
Q
What is the purpose of HTML attributes?
A
Attributes provide additional information about the element’s content. Specified in the start tag. Comes in name and value pairs (name=”value”).
Example: href, src and style.
7
Q
Give an example of an HTML entity (escape character).
A
Characters used in and reserved in HTML code.
Example: Ampersand (&)
8
Q
How do block-level elements affect the document flow?
A
Always starts on a new line in the browser.
Example: h1, p, ul, li
9
Q
How do inline elements affect the document flow?
A
Inline elements always continue on the same line as their neighboring elements.
Example: a, b, em, img
10
Q
What are the default width and height of a block-level element?
A
Takes up the full width available of its parent element (container), and vertical space is the height of its contents.
11
Q
What are the default width and height of an inline element?
A
Only takes up as much width as necessary bounded by the tags defining the element. Even if we set the width and height, it will only take up what is necessary for that content.
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
Ordered Lists (ol) are lists that are numbered in order. Example: Steps for a recipe
Unordered Lists (ul) are lists that begin with a bullet point and not in a particular order. Example: Ingredients for a recipe
13
Q
Is an HTML list a block element or an inline element?
A
Block Element, because each list item starts on a new line.
14
Q
What HTML tag is used to link to another website?
A
The a (anchor) element.
15
Q
What is an absolute URL (Uniform Resource Locator)?
A
It is the URL (web address) of the value for the href attribute when linking to other websites.
16
Q
What is a relative URL (Uniform Resource Locator?
A
A shorthand to link to other pages on the same website. If all the pages are in the same folder, then the href value is the name of the file. No need to include domain name.
Example: href=”index.html”, href=”contact.html”
17
Q
How do you indicate the relative link to a parent directory?
A
../
Example: ../index.html
18
Q
How do you indicate the relative link to a child directory?
A
Name of child folder followed by a forward slash then the file name.
Example: music/listings.html
19
Q
How do you indicate the relative link to a grand parent directory?
A
../ ../ to go up two folders followed by the file name.
Example: ../../index.html
20
Q
How do you indicate the relative link to the same directory?
A
./
OR Just use the file name, nothing else.
Example: review.html
21
Q
What is the purpose of an HTML form element?
A
To collect information/user data from visitors to the site. Also, for searching, registering, shopping online, signing up newsletters or mailing lists.
22
Q
Give five examples of form control elements.
A
”, , , and “
23
Q
Give three examples oftypeattributes for HTML”“elements.
A
type=text, type=password and type=email
24
Q
Is an HTMLelement a block element or an inline element?
A
Inline element, because it continues on the same line.
25
What are the six primary HTML elements for creating tables?
table: used to create a table, tr (table row): indicates the start of each row, td (table data): table cell, th (table heading): use scope attribute row/col, thead and tbody.
26
What purpose do the thead and tbody elements serve
thead: Defines a set of rows defining the head of the columns of the table. The headings of the table go in here.
tbody: Groups a set of table rows inside the body of an html table.
Semantic meaning
Divide the page up
It also helps people who use screen readers and allows you to style these sections in a different manner than the rest of the table.
27
Give two examples of data that would lend itself well to being displayed in a table.
Inventory management and to keep track of home finances.
28
What are the names of the individual pieces of a CSS rule?
Selector: indicates which element the rule applies to
Declaration: indicates how the elements referred to in the selector should be styled. Inside the declaration is the Property and Value.
Example: P {Font-family: Arial;}
29
In CSS, how do you select elements by their class attribute?
Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol.
Example: .title { }
30
In CSS, how do you select elements by their type?
Matches element names.
Example: h2, h3, h3 { }
31
In CSS, how do you select an element by its id attribute?
Matches an element whose id attribute has a value that matches the one specified after the hash symbol.
Example: #introduction { }
32
Name three different types of values you can use to specify colors in CSS.
color - foreground color (text)
background-color
opacity - can specify the opacity of an element and any of its child elements. (value between 0.0-1.0)
33
What CSS properties make up the box model?
margin, padding, border
34
Which CSS property pushes boxes away from each other?
margin
35
Which CSS property add space between a box's content and its border?
padding
36
What is a pseudo-class?
Allows us to change the appearance of elements when a user is interacting with them.
37
What are CSS pseudo-classes useful for?
:hover - When a user has a mouse over a button, you can use the hover pseudo-class to change the color of the button.
:active - Applied when an element is being activated by user. Example: when a link is being clicked, it will change color.
:focus - Applied when an element has focus. Example: when cursor is over a form input, it is ready to accept typing.
**order: :link, :visited, :hover, :focus, :active
38
Name at least two units of type size in CSS.
Pixels (px) , Percentage (%) and ems (em).
39
What CSS property controls the font used for the text inside an element?
font-family
40
What is the default flex-direction of a flex-container?
Row
41
What is the default flex-wrap of a flex container?
No wrap. Items will all try to fit onto one line.
42
Why do two div elements "vertically stack" on one another by default?
Because it is the default behavior of html block elements.
43
What is the default flex-direction of an element with display: flex?
Row
44
What is the default value for the position property of HTML elements?
Static - Appears on a new line one after the other, vertically down the page.
45
How does setting position: relative on an element affect document flow?
Moves element from normal flow position shifting it to the top right bottom or left
46
How does setting position: relative on an element affect where it appears on the page?
They stay in the in the position they would be in normal flow. Can modify its final position. Can make it over lap other elements. This does not effect the position of other elements.
47
How does setting position: absolute on an element affect document flow?
Positions the element in relation to tis containing element. Taken out of the normal flow.
48
How does setting position: absolute on an element affect where it appears on the page?
Does not affect the position of any surrounding elements. The other elements ignore the space it would have taken up.
An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else.
49
How do you constrain an absolutely positioned element to a containing block?
Define the position property of ancestor.
50
What are the four box offset properties?
Top, right, bottom, left
51
What is the purpose of variables?
Where a script temporarily stores information to do its job. Represent values in your scripts that are likely to change
52
How do you declare a variable?
Var - keyword used to create a variable in js.
53
How do you initialize (assign a value to) a variable?
Must give it a name. (Identifier) should describe the kind of data the variable holds.
54
What characters are allowed in variable names?
It can contain letters, numbers, dollar sign ($), or an underscore (_). Note that you must not use a dash(-) or a period (.) in a variable name. Must begin with a letter $ or underscore.
55
What does it mean to say that variable names are "case sensitive”?
Variable add and Add would be different variable names because the case is different.
56
What is the purpose of a string?
Consists of letters / characters. Strings can be used when working with any kind of text. They are frequently used to add new content into a page and they can contain HTML markup.
57
What is the purpose of a number?
The numeric data type handles numbers.
58
What is the purpose of a boolean?
Boolean data types can have one of two values: true or false.
59
What does the = operator mean in JavaScript?
Assigned to
60
How do you update the value of a variable?
Take the variable name and assign it to another value.
61
What is the difference between null and undefined?
Null was made to intentionally be empty like saving a parking spot that will be filled later. Undefined is when there is a variable assigned but no value.
62
Why is it a good habit to include "labels" when you log values to the browser console?
Helps when debugging so you know what data you are dealing with.
63
Give five examples of JavaScript primitives.
Number, string, boolean, null, and undefined.
64
What data type is returned by an arithmetic operation?
Numeric
65
What is string concatenation?
The process of joining together two or more strings to create one new string.
66
What purpose(s) does the + plus operator serve in JavaScript?
Used to join the strings on either side of it.
67
What data type is returned by comparing two values (, ===, etc)?
Boolean
68
What does the += "plus-equals" operator do?
Addition assignment adds the value of the right operand to a variable and assigns the result to the variable.
69
What are objects used for?
To group together a set of variables and functions to create a model of something from the real world.
70
What are object properties?
In an object variables become known as properties. Tells us about the object and attached to the object.
71
Describe object literal notation.
Object is the curly braces and their contents stored in a variable. Properties come in key value pairs. Method is a formula inside of that object. Separate each property and method with a comma except last one.
72
How do you remove a property from an object?
Use the delete operator keyword followed by dot notation of the object name, member operator (.) and property name.
73
What are the two ways to get or update the value of a property?
By using dot notation or brackets.
| hotel.rooms = 40
74
What are arrays used for?
To store a list or a set of values that are related to each other. Helpful when you do not know how many items a list will contain.
75
Describe array literal notation.
Create an array and give it
a name just like you would any other variable (using the var keyword followed by the name of the array). The values are assigned to the array inside a pair of square brackets, and each value is separated by a comma.
76
How are arrays different from "plain" objects?
The key for each value is its index number.
77
What number represents the first index of an array?
0
78
What is the length property of an array?
Tells how many items in the array.
79
How do you calculate the last index of an array? Array name.
arrayname.length - 1
80
What is a function in JavaScript?
It is a group of a series of statements that perform a specific task. It should take an input and return an output. Allows code to be packed up for reuse throughout a program. Block of code that can be reused over and over again.
81
Describe the parts of a function definition.
1. The function keyword begins the creation.
2. Optional name follows it.
3. A comma-separated list of 0 or more parameters inside ( ).
4. { is the start of the function's code block.
5. Optional return statement.
6. } end of function's code block.
82
Describe the parts of a function call.
1. The function's name.
| 2. A comma-separated list of 0 or more arguments inside ( ).
83
When comparing them side-by-side, what are the differences between a function call and a function definition?
Calling the function is shorter and easier to understand.
| We only use the name and in paranthesis the arguments.
84
What is the difference between a parameter and an argument?
We declare parameters when we define a function. Arguments are what we pass in when we call the function.
85
Why are function parameters useful?
No limitations. It is like a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function's code block is run, the parameter will be holding the value of the argument.
86
What two effects does a return statement have on the behavior of a function?
1. Causes the function to produce a value we can use in our program.
2. Prevents any more code in the function's code block from being run.
87
Why do we log things to the console?
It is a good tool for debugging purposes. It gives you the data to what is the data.
88
What is a method?
It is a function which is a property of an object. There are two kinds: 1) instance methods: build in tasks performed by an object instance 2) static method: tasks that are called directly on an object constructor.
89
How is a method different from any other function?
It is attached to or belongs to an object. Uses "this" keyword.
90
How do you remove the last element from an array?
pop()
91
How do you round a number down to the nearest integer?
Math.floor() generates between 0(inclusive)-1 (exclusive)
92
How do you generate a random number?
Math.random()
93
How do you delete an element from an array?
splice( ) first parameter: the index which to start. second parameter: delete count or if you want to add make it 0 followed by a third parameter which is what you want to add in the array.
94
How do you append an element to an array?
.push( )
95
How do you break a string up into an array?
.split( ) indicates the character which you want to split.
96
Do string methods change the original string? How would you check if you weren't sure?
All string methods return a new string. They don't modify the original string.
You can check by console.log( ).
97
Roughly how many string methods are there according to the MDN Web docs?
36ish
98
Is the return value of a function or method useful in every situation?
No, sometimes it is used to perform an outside function. For example, a function that opens up a box on the page.
99
Roughly how many array methods are there according to the MDN Web docs?
38ish
100
What three-letter acronym should you always include in your Google search about a javaScript method or CSS property?
MDN Mozilla Developers Network
101
Give 6 examples of comparison operators.
> greater than, < less than, == equal to, != not equal to, ==== strict equal to, >= greater than or equal to, <= less than or equal to
102
What data type do comparison expressions evaluate to?
Boolean / true or false
103
What is the purpose of an if statement?
To compare two variables or expressions to return true or false
104
Is else required in order to use an if statement?
No, unless you are adding additional conditional statements or if you want something for when a conditional is not met.
105
Describe the syntax (structure) of an if statement.
if (condition) {
code to execute if value is true;
}
if keyword, followed by a condition inside paranthesis(expression), opening curly brace, code to execute if value is true, closing curly brace.
106
What are the three logical operators?
& logical and, || logical or, and ! logical not
107
How do you compare two different expressions in the same condition?
and / or logical operators
108
What are the four components of "the Cascade".
Source Order, Inheritance, Specificity & !Important.
109
What does the term "source order" mean with respect to CSS?
The order that your css rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
110
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
By inheritance. For example: putting font-family on body will apply to most child elements. Borders and background colors are non-inherited properties. (All: revert;)
111
List the three selector types in order of increasing specificity.
Type selectors (h1), class selectors (.example), ID selectors (#example).
112
Why is using !important considered bad practice?
Because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
113
What is the purpose of a loop?
Loops are used to perform repeated tasks based on a condition. It will continue until it returns false.
114
What is the purpose of a condition expression in a loop?
Normally true and false. If value is true, loop statement executes. If it is false, loop terminates.
115
What does "iteration" mean in the context of loops?
The repetition. Each time the computer goes through a loop. Or a set of operations.
116
When does the condition expression of a while loop get evaluated?
First. The condition test occurs before the statement in the loop is executed. If true, statement is executed.
117
When does the initialization expression of a for loop get evaluated?
Is only created the first time the loop is run before first execution.
118
When does the condition expression of a for loop get evaluated?
The first time after initialization and if true after each iteration it will be the first.
119
When does the final expression of a for loop get evaluated?
Expression that is run after every iteration. Usually used to increment a counter. But it can be used to decrement a counter too.
120
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break; terminates loop and goes onto the next statement of code.
121
What does the ++ increment operator do?
Increases counter by one. Reassigns updated number to the variable.
122
How do you iterate through the keys of an object?
For...in (for (var key in object) return key.
123
Why do we log things to the console?
* So you know what specific data you are working with.
124
What is a "model"?
When browser loads web page it creates a model of the page in memory. Dom specifies the way the browser should structure this model. It is a representation of something.
125
Which "document" is being referred to in the phrase Document Object Model?
At the top of the tree is the document node. It represents the entire page.
126
What is the word "object" referring to in the phrase Document Object Model?
The document itself is an object. The nodes do not represent a data structure, they represent objects, which have functions and identity.
127
What is a DOM Tree?
Shows the structure of the document. It is made of objects. Each object represents a different part of the page loaded in the browser stored on DOM node.
128
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(), querySelector()
129
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElememtsByClassName()
130
Why might you want to assign the return value of a DOM query to a variable?
When you will be working with that element more than once. It is really storing the location of the elements with in the DOM tree in a variable. (Stores a reference to the object in the DOM tree.)
131
What console method allows you to inspect the properties of a DOM element object?
console.dir()
132
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
Because the browser needs to parse all of the elements in the HTML page before the javascript can access them.
133
What does document.querySelector() take as its argument and what does it return?
Uses CSS syntax and returns single method on the first of the matching elements.
134
What does document.querySelectorAll() take as its argument and what does it return?
Uses css syntax to select one or more elements and returns all of those that match.
135
Why do we log things to the console?
So we know what specific data we are working with.
136
What is the purpose of events and event handling?
It can be used to trigger a certain function. To interact with users.
137
What do [ ] square brackets mean in function and method syntax documentation?
Parameters (optional)
138
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Event Listeners
139
What is a callback function?
A function passed into another function as an argument, invoked inside the outer function to complete some kind of routine or action.
140
What object is passed into an event listener callback when the event fires?
Event object
141
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
It is the reference to the element that triggered the event.
142
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
element. addEventListener('click', handleClick) - runs when event fired
. passing a function definition so it can call the function when it needs to.
element. addEventListener('click', handleClick()) - runs when page loads
143
What is the className property of element objects?
Gets and sets the value of the class attribute of the specified element.
144
How do you update the CSS class attribute of an element using JavaScript?
element.className === 'currentclassname'
| Then set element.className = 'newclassname'
145
What is the textContent property of element objects?
Grabs just the text in the containing element.
146
How do you update the text within an element using JavaScript?
Elementname.textcontent = ‘new classname’
147
Is the event parameter of an event listener callback always useful?
No, not always.
148
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 especially with the if statements.
149
Why is storing information about a program in variables better than only storing it in the DOM?
So we can reuse without declaring the variable again without querying the Dom again.
We have more control what is going on inside rather than the dom.
150
What does the transform property do?
Rotate, scale, skew or translate an element. Modifies the coordinate space of the css.
151
Give four examples of CSS transform functions.
Matric, translate, scale, rotate, skew, scale.
152
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
153
What event is fired when a user places their cursor in a form control?
Focus event
154
What event is fired when a user's cursor leaves a form control?
Blur event
155
What event is fired as a user changes the value of a form control?
Change event
156
What event is fired when a user clicks the "submit" button within a ?
Submit event
157
What does the event.preventDefault() method do?
prevents the default browser action of the element from occurring.
158
What does submitting a form without event.preventDefault() do?
It doesn’t save the forms values and it automatically reloads. The form is submitted automatically.
159
What property of a form element object contains all of the form's controls.
form.elements
| HTML FORM CONTROLS COLLECTION
160
What property of form a control object gets and sets its value?
Method property
161
What is one risk of writing a lot of code without checking to see if it works so far?
You don't know where the error is in the code.
162
What is an advantage of having your console open when writing a JavaScript program?
To see what data you are working and to catch errors early on.
163
Does the document.createElement() method insert a new element into the page?
No, it is just creating an element node that is not yet part of the dom tree. You need to appendChild() to an element on the dom.
164
How do you add an element as a child to another element?
Parent.appendChild(child).
165
What do you pass as the arguments to the element.setAttribute() method?
(Name, value)
166
What steps do you need to take in order to insert a new element into the page?
createElement(), createTextNode(), att text node to element, appendChild() to dom element
167
What is the textContent property of an element object for?
To get/set text content of an element.
168
Name two ways to set the class attribute of a DOM element.
setAttribute(‘class’, ‘className’) , .className
169
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1. It gets automated, no matter how many objects you pass in
| 2. And can reuse it again on different data sets you pass in
170
What is the event.target?
Returns the element that triggered the event or interacted with. (Current target is the element that is listening).
171
What is the affect of setting an element to display: none?
The element is not visible on the page and does not take up space on page. Property visibility set to none will not display but still take up space on the page.
172
What does the element.matches() method take as an argument and what does it return?
Checks to see if the element is the selector. Takes in a string as a parameter returns a result boolean true or false or syntax-err if the specified selector string is invalid.
173
How can you retrieve the value of an element's attribute?
Element.getAttribute();
174
At what steps of the solution would it be helpful to log things to the console?
All the time.
175
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 put an event listener on each tab.
176
If you didn't use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
You have to check each one individually if it matches manually writing out each conditional statement.
177
What is a breakpoint in responsive Web design?
Breakpoints allow the layout to change at predefined points. It is the point where the website content adjusts according to user screen size. When @medica rules become active.
178
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?
Pixel density can vary, so we use % because they are more flexible and are relative to to the screen or viewport.
179
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?
If two media queries collide with each other the last rule is applied.
