C01—JavaScript Exercises
(CISC474 Spring 2007)

What I'm looking for here is some labs that can be used in CISC103, which is an introductory programming class taught using JavaScript as the intro programming language. This gives you an opportunity to really learn JavaScript, since you cannot explain something to a beginner well unless you first understand it well yourself.

Each lab you generate, depending on the quality of the lab produced, is worth between 30-50 points. With extra point opportunitites (as listed below), you can increase this to up to 90 points per lab.

My purpose is two fold:

Educational for you: by thinking through a problem in JavaScript and how to solve it, you are learning JavaScript, and demonstrating that learning.
(Full disclosure...) Selfish for me: you are helping me build up a collection of lab assignments that I can use in CISC103 in the fall.

Some background

CISC103 is a intro programming course that should accomplish all of the following goals

Teach students XHTML and CSS skills they can use to build web pages. Other courses (including ART307 and ENGL418) teach web page design, but do so at a "high level", and don't get as much into the technical details of XHTML and CSS.
Teach students JavaScript skills they can use to build web pages
Teach students basic concepts of programming and Computer Science so that, if they want to, they are prepared to move on to CISC181.

Most textbooks on the market either

do (1,2) well but not (3) (if they were written from a "design" standpoint), or
they do (3) well, but do a lousy job of (1,2) (i.e., the web pages that are produced are really dumb---things no one would ever do on a real web page.)

What I'm looking for

If you look at the following example labs from CISC103 (actual labs I used in Fall 2005), you'll get ideas about what I want. Each of these labs has a general pattern to it:

A problem is presented—the problem is "we need a web site that can do X", whatever X is...
A complete solution to that problem is presented—one that uses the concept being taught (e.g. "if/else", or "while loops", or "arrays")
A similar problem is presented (one that is similar to the original), and the student is asked to solve it.

The general idea is if the student understands the concept (e.g. if/else or while or arrays), then the student can follow the model to come up with a solution to the problem.

Example labs:

Semester	Assignment	DIrectory with examples	topics covered
05F	activity03.html	activity03/	window.prompt(), parseInt(), parseFloat(), assignment statements, document.write()
05F	activity04.html	activity04/	using XHTML forms to get values, using a button to run a function (i.e. and event handler), putting values into fields in a form.
05F	activity05.html	activity05/	for loops, using document.write() to produce a table
05F	activity06.html	activity06/	string concatenation, functions and event handlers

What you need to do

Choose some topics. Here are sample topics.

if/else
for loops
while loops
arrays
string manipulation (e.g. searching in a string, concatenating strings, comparing strings, etc)
recursion
switch statements
validating forms
simple application of regular expressions
order of operations (i.e. operator precedence)
defining functions
simple use of dynamic HTML (i.e. filling in a <div> element with getElementById, for example)

There are many other possibilities as well. The idea is to keep the material at a intro programming course level. However,also realize that the students need, at the end of the course, to be ready to move into CISC181, so you also need to challenge the students as well.

For more points

There are two ways you can increase the point value of these JavaScript exercises to you.

Incorporate use of the JavaScript command line interpreter (10-20 extra points)

One thing that you may notice is that there is an awful lot for a beginning programmer to try to deal with all at once—XHTML, the DOM, the event model, event handlers, not to mention the basics of learning programming! So, last Fall, I tried a different approach—using the JavaScript command line interpreter to help students begin to understand basic concepts of JavaScript interactively, separately from a web browser. The following two labs are examples of that approach.

06F	lab09.html	n/a	using the JavaScript command line interpreter to understand JavaScript (without having to also deal with HTML at the same time)
06F	lab10.html	lab10/	Understanding how to combine a function defined in an external JavaScript file with an XHTML form

As you can see, lab09 (from 06F) introduces the JavaScript commmand line, and basic concepts of the language—but then there isn't much for the students to actually _do_. So here are some suggestions for what kinds of new labs you could create:

Create some new labs that are follow ups to the material in lab09 and lab10. Next semester, I plan to use what is currently lab09 in week 2 or 3—much earlier, so that there is much more opportunity to build on these skills.
Separate lab09 into two or three labs, but go into a lot more detail about the various JavaScript topics, and give the students more opportunities to work with what they are learning

Borrow a CISC103 textbook, and reference it (10-20 extra points)

I have a limited number of CISC103 JavaScript textbooks (JavaScript and AJAX, Visual Quickstart Guide, 6th edition) that I can loan out—first come, first served. You will get 10-20 extra points per assignment if you carefully cross reference the content of your assignment with the content of the JavaScript textbook. That might take one of several forms:

listing a reading assignment that is related to the content of the programming assignment
referring students to particular sections or pages in the book to find information they need to complete the assignment, or that might be helpful if they get stuck.

One more thing...

It is ok to duplicate topics that are already covered in the four example labs that I supplied above. However, if you do, please do at least one "new" topic for each one that duplicates a topic already covered.

What to turn in...

You'll turn in a tar file. It should be structured very much like this directory on copland/strauss:

/home/usra/d9/55560/public_html/cisc103/05F/activities

which is also available as:

http://copland.udel.edu/~pconrad/cisc103/05F/activities

except, there will be one more directory for each assignment.

For example, if you do three activities, your tar file will contain

activity01.html	HTML file describing the assignment, similar to activity03.html, activity04.html, activity05.html, etc.
activity01	directory with code for sample solution, similar to activity03, activity04, activity05, etc
activity01.solution	directory containing sample solution (what you would expect the students to do).
activity02.html	same three files/directories for your second activity
activity02
activity02.solution
activity03.html	same three files/directories for your third activity
activity03
activity03.solution
etc...

Follow the submission instructions carefully!

Prepare your submission EXACTLY with this structure, as either a gzipped tar file, or as a zip file. Do NOT use any other compression format, and do not submit your exercises in MS Word, or with some other directory structure. Submission that are not in the proper format may receive significant deductions, or even be rejected without a grade being assigned.