CS 101 Web Construction, Winter
2012, Instructor: Jeffrey
Horn GUIDE TO THE FINAL EXAM
TIME AND
LOCATION
-
Our final exam is on Monday, April 30, 2012,
7pm-8:50pm
-
in NSF 1205.
-
(In other words, our usual class time and place!)
GENERAL
-
SCOPE:
The final exam for CS 101 is
comprehensive.
-
TIME:
I try to design so that it is easily completed within one hour,
leaving students with plenty of time (total time allocated for NMU final
exams is 1 hour and 50 minutes) to go over the test, double-checking,
etc.
-
OPEN BOOK: The
final, like all of our assessments, is open book, open notes, open use of
computers, but you must do your own work! (Don't be tempted to
use your laptop to communicate with others (other humans, that is!). Help from anyone but
the instructor is forbidden and must be punished (pretty darn harshly) if
detected.
-
COMPUTER USE: A laptop
is not absolutely required to complete this test (which for reasons of
reliability will be pencil-and-paper. But it is a good idea to have
a laptop with you. You will be allowed to use it to look things up
and try things out (e.g., by typing in a bit of html, css, or Javascript).
But once again, you must do your own work, so don't be tempted to use your
laptop to communicate with others (other humans, that is!).
-
FORMAT: Mostly
multiple choice and fill-in-the-blank. Maybe a few short answer (one or
two sentences) questions.
TOPICS
(not necessarily complete, but I tried!)
- BASIC HTML
- The basic parts of a web page, including head and body, style
sheets, DTD declaration, and comments.
- Proper nesting of tags.
- No visual content in head, only in body.
- Proper syntax for attributes (e.g., do not forget the closing angle
bracket ">"!)
- Text formatting (bold, italics, quote, etc.)
- MORE HTML
- Inserting local and remote images.
- Hyperlinks to local and remote web pages.
- Making images become hyperlinks.
- BASIC CSS
- Embedding css via the <style> element
- Linking in an external css file (e.g., using the <link> element)
- Basic css syntax: selector {property: value;
property: value; }, for example h1 {color: #450970}/
- Using hex numbers for RGB color specification, including the "#"
character!
- Using css inline: e.g., <p style="text-align: center;">
- FORMS
- What the action attribute specifies.
- How the submit button triggers the action.
- How to NAME datafields in the form so that their values are sent when
the submit button is clicked.
- How the serverside script generates an html web page dynamically, and
sends it back to the browser.
- How the server can do other things with the data that it is sent (e.g.,
email, update a database)
- BASIC JAVASCRIPT
- How to add javascript to a web page via the "onclick" attribute of a
button, image, image map, etc. When will this code run?
This code will only run when the user actually clicks on the html
element that has this javascript as its "onclick" attribute!
- How to add javascript to a web page via the "<script>" element (in the
<head>). When will this code run? This code will
only be run once, when the page is first loaded.
- Javascript syntax (semi-colons at the end of each statement,
case-sensitivity, comment syntax which is "//" and "/*").
- OTHER TOPICS:
- Accessibility: use of "alt" attribute for images, to describe
image in words.
- Know how to use the browser's "view source" to get at web page's source
code".
- Server-side vs. client-side scripts (what are the differences?)
- Server operation: e.g., what gets served up out of the pub
folder (answer: everything!)
HTML
ELEMENTS you should know
(not necessarily complete!)
Document Structure: <html><head><title><body><!--
comment -->
Text Spacing and Formatting: <i><b><sub><sup><big><small><strong><cite><hr
/><br /><quote>
Text Headings:
<h1><h2><h3><h4><h5><h6>
Grouping Text: <p><dif> <span>
Lists: <ul><ol><li>
Tables: <table><tr><td><th><caption>
Forms and Programming:
<form><input type="text"><input
type="radio"><input type="checkbox"><input
type="submit"><textarea><select><script><input
type="hidden"> <input type="button"> <input type="password"><input type="reset">
Others: <img><a><style>
CSS PROPERTIES you should
be aware of (not necessarily complete!)
You should feel comfortable with the css on
this handout
(you can skip the material on the bottom 12 lines). By that I do not
mean that you are expected to memorize these properties; just be able to have some idea what
each does, if you come across them in some code, and be able to look them up if
you need to use them yourself, ever. On the final exam, I might give you
the URL of some external css file, like the one for
this handout,
and ask you what that stylesheet does to your level 2 header (that is, <h2>
element). To answer such a question you might read the css file or
you could link to it in an html file and view it in a browser.
JAVASCRIPT COMMANDS you should know
(not necessarily complete!)
| Javascript Command |
Example |
| alert |
alert("Your age is below the minimum!"); |
| if-then-else |
if( age < 0)
alert("You are too young to enter.");
else alert("You may enter");
|
| var |
var x; |
| assignment |
x = 1; |
| incrementing a variable |
x=x+1; or
x++; |
| assignment to part of a form |
document.forms.myForm.totalPayment.value =
cost_of_items + shipping + tax; // Thji is code using the Document
Object Model (DOM)
document.getElementById("totalPayment").value = cost_of_items + shipping
+ tax; |
| changing any attribute in a web page |
document.images.aardvark.width =
document.images.aardvark.width + 10; // Thji is code using the Document
Object Model (DOM)
document.getElementById("aardvark").width =
// This assumes that the <img> element has id="aardvark".
document.getElementById("aardvark").width + 10;
document.images.barnyardAnimal.src = "horse.gif";
document.getElementById("barnyardAnimal").src = "horse.gif";
// This assumes that the <img> element has id="barnyardAnimal". |
| comment |
// Use double slashes for short,
one line comments
/* This is the syntax for comments that span
more than one line. You can use whole paragraphs for comments,
just by putting the slash-star and star-slash delimiters around the
whole thing! */ |
CS 101 Fall 2008 Final Exam Guide