The final exam for CPSC 120 will be given during the official time period scheduled by the registrar: Thursday, December 13, at 1:30 PM. The exam will be held in our regular classroom, Gulick 206A.
The final exam counts for 15% of the course grade, which is the same proportion as the in-class tests. The exam will be five pages long. The entire final page will be a long essay that asks you to show what you've learned about how the web works and the technologies that are used to implement it. The exam covers material from the entire course, with some emphasis on material that was covered since the third test. However, you are not responsible for all the details of older material. This sheet lists the parts of HTML, CSS, JavaScript, canvas graphics, JQuery, and AJAX that you should be able to work with on the exam.
Your web portfolio is due at the same time as the final exam and will be graded sometime after the end of the exam. Remember that you must have a file index.html in your www folder that has links that lead to your other work. You want an index page that looks nice and that gives some indication of what each link will lead to. You might also want to do some work on the appearance of other pages in your portfolio, and you might want to fix problems that you had on those pages. You might want to add some navigation links to other pages, to make it easier for the user to get back to the index page. You do not necessarily have to include every bit of work that you did on the labs. The web portfolio counts for 10% of the total course grade. The basic grade on web portfolios will be 8 out of 10 points, and the grade will be adjusted up or down from there, depending on the quality and amount of work that you've done.
Some things that we have covered since the third test:
review of the client/server model of communication on the web
the idea of server-side programs
the idea of server-side databases
HTML forms
action and method in a form: <form action="...." method="POST">
using a name for a data item in a form; what is done with the name and the data
the difference between a name and an id in an HTML form
HTML form elements:
<input type="text" ...
<input type="password" ...
<input type="radio" ...
<input type="submit" ...
<select> and <option>
<textarea>
JavaScript object literals, such as: { "username": name, "password: pw }
AJAX
the idea of JSON and how it is used in AJAX
using $.getJSON( url, dataToSend, responseFunction ) for AJAX requests
AJAX is asynchronous
how the response function is used to receive and process the response from the server
Here are the most important general ideas from earlier in the semester:
Web servers and web browsers
request/response communication between browsers and servers
content, presentation, and interactivity
HTML, CSS, and JavaScript
HTML elements, tags, and attributes
CSS rules, selectors, and properties
URLs and links
absolute URLs such as: http://math.hws.edu/eck/cs120/index.html
relative URLs such as: page1.html, images/mypic.jpg, or ../index.html
basic programming concepts:
literals, variables, assignment statements, if statements, loops, functions
parameters in functions
basic programming data types: strings, numbers, booleans
events, event-handler functions, and dealing with asynchronous events
programming style: meaningful names, comments, formatting
HTML <canvas> and canvas graphics
the idea of JavaScript libraries
the JQuery JavaScript library
JQuery animations
Here are the details that you need to know about HTML:
The basic outline of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>This Goes in the Titlebar</title>
<style type="text/css">
/* CSS style rules go here */
</style>
<script type="text/javascript">
// JavaScript goes here
</script>
</head>
<body>
<!-- HTML content goes here -->
</body>
</html>
HTML elements (for use in the <body>):
<p>
<h1>, <h2>, and <h3>
<ul> and <li>
<a href="...">
<b>
<i>
<img src="...">
<button onclick="...">
<div>
<span>
<br>
<form action="..." method="POST">
<input type="..."> (where type is text, password, radio, or submit)
<select> and <option>
the attributes id="..." and class="..." for any HTML element
Here are the details that you need to know about CSS:
the syntax of CSS rules, such as:
h1 {
color: red;
background-color: #F0F0D0;
padding: 3px 10px;
border: thin solid #600;
}
CSS selectors
basic selectors, individual tag names such as: h1 or div
id selectors such as: #content or #canvas1
class selectors such as: .intro or .scroll
tag-plus-class selectors such as: p.indented or div.column
selection in context such as: div p or p span.def
multiple selection such as: h1, h2, h3 or #col1, #col1
CSS properties, and some sample values
Property name: Some possible values:
color: red #600 #E067D5
background-color: red #600 #E067D5
font-size: 3px 120%
margin: 2px 5px 1px 10px 0 1cm
margin-left: (etc) 1cm 4%
padding: 2px 5px 1px 10px 0 1cm
padding-left: (etc) 1cm 4%
border: thin solid black 2px dotted #006
display: none block inline
opacity: 1 0.5
position: fixed absolute relative
float: left right
width: 600px 75%
heigth: 600px 75%
top: 0 10px
left: -1cm 10%
Here are the details that you need to know about JavaScript and JQuery:
variable declaration syntax: var name;
var name = value;
assignment statement syntax: name = value;
operators: +, -, *, /, ==, !=, <, >
(including using the + operator with strings)
making random numbers: Math.random()
Math.ceil( N * Math.random() )
dialog box functions: alert("message");
var answer = prompt("question");
if statement syntax: if ( condition ) {
commands
}
if ( condition ) {
commands
}
else {
commands
}
loop syntax: while (true) {
commands
if ( condition ) {
break;
}
commands
}
function definition syntax: function name() {
commands
}
function name(parameters) {
commands
}
using document.getElementById("name"):
for setting content: document.getElementById("name").innerHTML = ...;
for setting style: document.getElementById("name").style.display = "none";
document.getElementById("name").style.color = "red";
for input values: usr = document.getElementById("name").value;
using an initialization function with: <body onload="init()">
using an onclick handler function such as with: <button onclick="doClick()">
using an onchange handler function such as with: <select onchange="doChange()">
HTML canvas graphics: graphics.lineWidth
graphics.strokeStyle
graphics.fillStyle
graphics.fillRect(x,y,width,height)
grpahics.strokeRect(x,y,width,height)
strokeLine(x1,y1,x2,y2)
fillCircle(graphics,x,y,radius)
strokeCircle(grpahics,x,y,radius)
JQuery animations: $(cssSelector).fadeIn(time,phase2);
$(cssSelector).fadeOut(time,phase2);
$(cssSelector).slideUp(time,phase2);
$(cssSelector).slideDown(time,phase2);
JQuery event handling: $(cssSelector).click(doClick);
using $(this) in the event-handling function
JQuery AJAX: $.getJSON(url,dataToSend,responseFunction);
setting up the request data,
for example: var dataToSend = { username: usr, password: pwd };
using the returned data in function responseFunction(data)