The third test in CS 120 will be given in class on Wednesday, November 19. The test will concentrate on material that has been covered since the second test. The main topics for the test include mouse and keyboard event handling, HTML forms and form elements, and CSS positioning and layout. The readings were from Chapter 6 in JavaScript & JQuery and Chapters 7 and 15 in HTML & CSS. Also included are Labs 8 through 11.
Of course, although test questions will be directed to the new material, you are still responsible for older material. In particular, many of the examples that we used for mouse and keyboard events used HTML graphics, and the new work that we did on HTML and CSS requires knowledge of the basics from earlier in the semester.
The format of the test will be similar to the previous tests. It will be four pages long. You can expect some essay questions about definitions and concepts. You will be asked to write some HTML, CSS and/or JavaScript code. You might be given some code and asked what it does.
Here are some important terms and ideas that you should be familiar with:
events, event-handling, and event-handling functions
keyboard events:
installing a keyboard event handler: document.onkeydown = doKey;
event-handler for key events, such as: function doKey(event) { ...
properties of a key event: event.keyCode, event.shiftKey
event.keyCode tells you which key was pressed
event.shiftKey tells you whether the shift key was down
mouse events:
installing a mousedown event handler: element.onmousedown = doMouseDown
event-handler for mousedown events, such as: function doMouseDown(event)
properties of a mouse event: event.clientX, event.clientY, event.shiftKey
using element.getBoundingClientRect() to convert coordinates
HTML form elements
text input box: <input type="text" ...
pasword input box: <input type="password" ...
checkbox: <input type="checkbox" ...
radio button: <input type="radio" ...
file inputs: <input type="file" ...
pop-up menus, made using <select> and <option>
multi-line input boxes, made using <textarea>
the rows and cols attributes for textareas
adding an id on an input element so it can be used in JavaScript
using element.value in JavaScript to get or set the value of an input box or <select>
using element.checked in JavaScript to test if a checkbox or radio button is checked
using the name attribute to make a group of radio buttons
using the onchange event to respond to changes in form elements
HTML forms, for example: <form method="POST" action="login.php"> ... </form>
forms are used to get information from the user and submit it to a server
form data is processed by a server-side program, which produces the returned web page
using name attributes for elements to identify the data to the server
the action attribute of the form is the URL of the server-side program
submit buttons for forms: <input type="submit" ...
the CSS float property, with value left or right
using float to wrap content around an image
using float to create multicolumn layouts
using clear: both to drop an element onto a new line under all floating elements
fixed-width layouts
liquid layouts (setting lengths with percentages
the min-width and max-width CSS properties
the CSS positon property
postion: static -- default, element in its usual position
position: fixed -- position element in the window coordinate system
position: relative -- position element relative to its usual position
position: absolute -- position element in coordinate system of container
the CSS properties top, left, bottom and right
the CSS properties width and height
the CSS z-index property
the CSS opacity property
using fixed positon to place an element on top of page content (logo or pop-in)
animating the position of an element with JavaScript
using :hover in CSS to change style when the mouse is over an element
CSS properties for backgrounds
background-image: url("...");
background-attachment: fixed;
background-repeat: repeat-y; (or repeat-x or no-repeat)