The third test in CS 120 will be given in class on Wednesday, November 16. It will concentrate on what we have covered since the previous test. The main topics have been: HTML forms and how they interact with server-side programs; JQuery; animating with JQuery; and Web 2.0 and AJAX.
As usual, the test will be a mixture of various kinds of questions, such as: definitions, short essays, longer essays, writing JavaScript and JQuery code, writing and using HTML form elements, and reading JavaScript/HTML/CSS code to say what it does. There will probably be less code-writing on this test than on the first two tests. You can expect the last question to continue the series of long, final essay questions from Test 1 and Test 2.
Here are some terms and ideas that you should be familiar with:
server-side programs and how web pages interact with them
what server-side programs add to web applications
what AJAX adds to web apllications
HTML <form> elements
method and action in an HTML form: <form method="POST" action="prog.php">
submitting a form
submit buttons: <input type="submit">
names for input elements: <input type="text" name="user">
how names are used when submitting data from a form
input types:
<input type="text"...
<input type="password"...
<input type="checkbox"...
<input type="radio" name="groupname" value="thisvalue" ...
how radio groups work with name and value
client-side validation with JavaScript
using onsubmit in a form element: <form onsubmit="return validate()"...
JavaScript libraries
JQuery
basic JQuery selectors:
element by id: $("#mainhead)
elements by tag name: $("p")
elements by class: $(".clickable") or $("div.description")
basic JQuery operations on elements:
$(select).html(newHTMLContent);
$(select).css(cssPropertyName, newCssPropertyValue);
basic JQuery event-handling:
$(select).click( whatToDoWhenClicked );
$(select).mouseover( whatToDoWhenMouseIsOver );
basic JQuery animation functions:
$(select).slideUp( timeInMilliseconds, whatToDoNext );
$(select).slideDown( timeInMilliseconds, whatToDoNext );
$(select).fadeOut( timeInMilliseconds, whatToDoNext );
$(select).fadeIn( timeInMilliseconds, whatToDoNext );
how the "whatToDoNext" function is used to make a chain of "phases"
AJAX
Web 2.0, rich interactive web applications
AJAX uses request/response to communicate with server-side programs
asynchronous
AJAX is asynchronous; response comes back at an unpredictable time
using JQuery for AJAX
the basic JQuery AJAX post operation:
$.post( url, dataToSend, whatToDoNext )
$.post( url, dataToSend ) -- no response function
$.post( url, whatToDoNext ) -- no data to send
handling the response from the server: function whatToDoNext(response)...
object (collection of data, with names for data items)
JSON (JavaScript Object Notation); Eg: {first: "David", last: "Eck"}
creating dataToSend as an object; Eg: var dts = {count: 50, start: 100}
referring to data items in an object; Eg: dts.count and dts.start
protocol
response.status and response.info are part of my protocol, not of AJAX