Midterm Review
The following are important topics that will mainly be covered on the midterm taking place October
22nd 2013. Other than the items listed in the Things that won’t be on the test section, everything that
has been discussed/performed in lectures, assigned reading, homework assignments, and quizzes IS
FAIR GAME.
The format of the Midterm will be close to the following:
1.
2.
3.
4.
5.
~10% - True or false
~20% - Multiple Choice
~10% - Short Answer
~40% - Coding
~10% - Design. You will critique the planning or testing phase of a sample UI Design problem.
Obviously the above percentages don’t add up to 100%. There will be variability with each section hence
the tilde.
Markup language
1. Understand the core terminology used by markup languages (root, element, attributes, data,
doctype).
2. Be able to create a tree to represent XML and HTML document.
3. Understand DOM Tree terminology (ancestor, descendant, parent, child, sibling).
HTML
1. Understand the purpose and importance of HTML in web technology.
2. Know how and when to use id and class attributes.
3. Understand the basic HTML elements and their usage.
Forms
1. Know how to implement a well implemented functioning form using the following components:
a. Text input
b. Labels
c. Hidden input
d. Radio Button Groups
e. Checkbox Groups
f. Submit Button
2. When a form is submitted, understand which controls become “successful” and how form data
is bundled up by the processing agent and is sent to be processed for both POST and GET
methods (See HTTP Lecture).
3. Know the action and method attributes of the form element and their usage.
HTTP
1. Know the 4 main HTTP Request Methods we discussed in class and how to use them properly.
CSS Survival Sheet
1. How do I calculate the specificity for a selector?
For example, the specificity for the following selector is 0, 1, 2, 1
#titleBar .special a:hover
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Box Model
Every element is a box.
The width and height css properties only affect the element’s content not the element’s total
box dimension.
Padding cannot have negative values.
Padding provides empty space between the box’s border and content.
You can see the background color of the element’s box beneath the padding.
It is possible to see the background color of the element’s box beneath the border
Margins can have negative values.
It is IMPOSSIBLE to see the background color of the element’s box beneath the margin.
Use margins to center a block element inside its parent
a. Specify width for content
b. Give margin-left and margin-right properties a value of auto
Vertical margins are ignored on inline elements.
Adjoining vertical margins can collapse.
a. Two adjacent elements with positive margins will collapse and share the larger specified
margin.
b. Two adjacent elements with one positive and one negative margin will collapse and
share a margin that is the summation of the two.
c. A parent element with no border or padding, will collapse margins with a child element
and share the larger of the two margins
All display block elements, by default, grow to fill their parent’s width.
The computed dimension of an element is equal to:
a. margin + border + padding + (width | height)
Display
15. What visually happens when you change a display:block element’s display to inline?
16. What visually happens when you change a display:inline element’s display to block?
17. What visually happens when you change an element’s display to none?
18.
19.
20.
21.
22.
23.
24.
25.
Float
Float elements with display:block behave like they are display:inline.
Float elements’ vertical margins will not collapse.
Float elements are considered out of the flow.
Float is different from absolute positioning because float affects the position of its sibling
elements.
Position
What does position:static mean? Is the element’s space that it would normally take filled? Is the
element in or out of the flow?
What does position:relative mean? Is the element’s space that it would normally take filled? Is
the element in or out of the flow?
What does position:absolute mean? Is the element’s space that it would normally take filled? Is
the element in or out of the flow?Absolutely positioned elements are placed in relationship to
what?
An absolutely positioned element with top, left, right, bottom properties set with a value of auto
will appear like they normally would as if they were postion:static. Aka they appear in their
normal position, but may get overlapped by the next sibling.
CSS Selectors
1. Know how to select elements based on the following:
 Anything
 Elements
 Elements with attributes
 ID
 Class
 Attribute ([class*=frog])
 Adjacent Sibling (+)
 Children (>)
 Descendants
 State (:active, :hover, :focused, etc.)
 :first-child
2. Be able to precisely explain what a CSS selector is selecting. Use Selectoracle for practice. For
example,
body > ol > li p
Selects any p element that is a descendant of a li element that is a
child of an ol element that is a child of a body element.
Javascript
1. Know how to do basic javascript programming.
2. Know how to create Objects in javascript.
a. var student = { “name” : “Henry”, “lastname”: “Wiggum”, “age” : 21 }
3. Know how to make a JSON object and how to convert a JSON string to an object.
4. Know everything that we covered in the lecture about DOM and the DOM API.
5. Know how to create DOM 0 and DOM 2 events
 onclick = function(e) { alert(“click”);}
 addEventListener(‘click’, function (e) { alert(‘click’); }, false);
6. Know how to remove DOM 0 and DOM 2 events
 onclick = null;
 removeEventListener(‘click’, function(e) {alert(‘click’);}, false);
7. Know the important event interface variables
 type
 target
8. Know how to use preventDefault()
9. Know how to do XMLHttpRequests
jQuery
1. Know the difference between the javascript window.onload event and the jQuery
$(document).ready() event.
2. Know how to use jQuery to select elements from an HTML document using the selector method
(know all CSS selectors mentioned above) and filter methods.
3. Know how to use jQuery’s css shorthand methods width, height, innerHeight/Width,
outerHeight/Width, etc. that were discussed in lecture.
4. Know how to use the .css() to set and get single and multiple properties.
5. Be able to use jQuery events.
6. Be able to create custom animations.
Design
Understand and be able to perform/create





User Profiles
Task analysis
Finding functionality
Objects/actions analysis
Usability Testing
Things that won’t be on the test





Regular Expressions
10 Principles of Design
Gestalt Principles
CSS3
From the jQuery lecture: data, precanned jQuery animations, ajax, UI