CSC 107 Spring 2001

Online Lesson Summaries

[ 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 ]

Lesson 1: HTML and Web Pages

A Web page is a text document that contains additional formatting information in a language called HTML (HyperText Markup Language). A Web browser is a program that displays Web pages, interpreting the HTML text and formatting the page accordingly. A Web server is a computer that runs special software for locating and transmitting pages. A Web address (officially known as a Uniform Resource Locator or URL) identifies where a particular Web page is located.
HTML specifies formatting within a page using tags. Every HTML document must begin with the tag <HTML> and end with the tag </HTML>.
An HTML document has two main sections, the HEAD and the BODY. The HEAD contains the TITLE of the page, which appears at the top of the browser window when that page is displayed. The BODY contains whatever text you want to appear within the page.
Comments can be placed at any point in the page, enclosed by . Comments are included in a page to make the HTML text more readable -- they are ignored by the browser when the page is loaded.
Typically, a browser will format text to fit the window, ignoring blank lines and extra whitespace. You can explicitly break a line by placing a <BR> in the text. Similarly, a <P> tag will result in a new paragraph (preceded by a blank line). The   keyword will always result in a space.
The tags <H1></H1>, <H2></H2>, <H3></H3> can be used to display section heading with decreasing font sizes, while <CENTER></CENTER> can be used to center text on the page.
Numerous other HTML tags can be used to format text, such as <B></B>, <I></I>, <U></U>, and <FONT COLOR='red'></FONT>.
Hyperlinks to other HTML documents can be embedded in a Web page using the Anchor tag, e.g., <A HREF="http://www.creighton.edu">Creighton University</A>.
GIF and JPEG images can be embedded in a Web page using the IMG tag, e.g., <IMG SRC="logo107.gif">.

Lesson 2: Dynamic Web Pages via JavaScript

JavaScript is a simple programming language for making dynamic Web pages, i.e., pages that can interact with the user and vary each time they are loaded.
JavaScript code can be embedded inside the BODY of an HTML document, enclosed by the tags <SCRIPT LANGUAGE="JavaScript"> and </SCRIPT>.
The simplest JavaScript statement is a document.write statement, which displays text in the Web page. The displayed text can be formatted using HTML tags.
The JavaScript function prompt can be used to read a value from the user via a dialog box. The function takes two inputs, a prompt message and a default value, and returns the value entered by the user (or the default value if they don't enter anything).
A variable is a name that is used to represent some unspecified value in an expression.
In JavaScript, a variable name can be any sequence of letters, digits, and underscores starting with a letter. Since JavaScript is case-sensitive, capitalization matters.
Each JavaScript variable has a corresponding memory cell that stores its value. A value is assigned to a variable (and thus stored in the corresponding memory cell) using the assignment operator '='.

Lesson 3: Data Types and Expressions

JavaScript has three basic data types: strings, numbers, and booleans.
The basic arithmetic operators '+' (addition), '-' (subtraction), '*' (multiplication), '/' (division), and '%' (remainder) are provided for numbers.
JavaScript variables can be assigned values of any type, including numbers and numeric expressions. Similarly, write statements can display values of any type.
For readability, JavaScript uses scientific notation to display very small and very large numbers.
Since computers only have a finite amount of memory, there is a limit to the range of numbers that can be represented in JavaScript. Roundoff may occur on numbers with many significant digits.
When an assignment statement is executed, the expression on the right-hand side is evaluated first, and then the resulting value is assigned to the variable on the left-hand side.
In JavaScript, multiplication and division have higher precedence than addition and subtraction. Among operators with the same precedence, expressions are evaluated in a left-to-right order.
When the + operator is applied to a string and a number, the number is automatically converted into a string and then the two are concatenated.
The prompt function always returns a string value, even when a number is entered by the user. A string can be converted to its corresponding numeric value using the predefined parseFloat function.

Lesson 4: Abstraction and Functions

Mathematically speaking, a function is a mapping from some number of inputs to a single output. From a programming perspective, a function is a unit of computational abstraction.
JavaScript provides an extensive library of predefined mathematical functions, including square root (Math.sqrt), absolute value (Math.abs), maximum (Math.max), minimum (Math.min), round down (Math.floor), round up (Math.ceil), round to the nearest integer (Math.round), and raise to a power (Math.pow).
The random number function (Math.random) is an example of a function with no inputs. Each call to random returns a random number from the range [0...1).
Useful function definitions can be stored in separate documents, called libraries, and loaded directly into a Web page by specifying the document name in the SRC attribute of a SCRIPT tag (in the HEAD of the HTML document).
The library prompt.js contains definitions of functions for reading in specific kinds of values: promptNum reads in and returns a number; promptNumInRange reads in and returns a number in some range; promptInt reads in and returns an integer; promptIntInRange reads in and returns an integer in some range; promptOneOf reads in and returns a value from a list of options.
The library random.js contains the definitions of functions for generating random values: randomNum returns a random number in some range; randomInt returns a random integer in some range; randomChar returns a random character from a string; randomOneOf returns a random item from a list of options.

Lesson 5: User-defined Functions

Functions simplify the programmer's task by (1) minimizing the amount of detail the programmer must keep track of, and (2) minimizing the size and complexity of the resulting code.
The general form for function definitions is as follows:
A function parameter is a variable that is automatically assigned a value corresponding to the input in the function call. If a function has multiple parameters, they are matched in order: the first parameter is assigned the first input value, the second parameter is assigned the second input value, and so on.
JavaScript comments are specified by placing a double slash at the beginning of a line.
Variables that are to be used for temporary storage within a function should be declared as local using var. By doing so, the local variables will exist only while the function executes and will not alter global variables that might share the same name.
A return statement specifies the value that should be returned by a function. Return statements are optional, since some functions are defined for displaying text on the page as opposed to computing a value.
In general, the calling sequence for functions is as follows:
1. The arguments in the function call are evaluated.
2. Execution shifts to the function being called.
3. Memory cells are allocated (created) for each parameter in the function, and the values of the corresponding arguments are assigned to these memory cells.
4. Memory cells are allocated (created) for each local variable.
5. The statements in the body of the function are executed in order.
6. When a return statement is encountered, the expression is evaluated.
7. Memory cells associated with the local variables are deallocated (destroyed).
8. Memory cells associated with the parameters are deallocated (destroyed).
9. Upon return, the value of the expression in the return statement replaces the function call in whatever expression it appears in.

Lesson 6: Event-driven Programming

Many Web pages are event-driven, reacting to events such as mouse clicks or keyboard entries. The actions to be taken when events occur are specified using JavaScript.
The simplest event handler is a button, which specifies an action to take place when the mouse is clicked on that button. A button element looks like the following:
Buttons and other event-driven elements must be grouped inside a form element.
Values can be read in from the Web page using text boxes. A text box element looks like the following:
The contents of a text box can be accessed as: document.FORM-NAME.TEXT-BOX-NAME.value
Similarly, values can be displayed in a text box by assigning the value of that text box, e.g., ONCLICK="document.EventForm.userName.value='Dave';"
While a text box is limited to a single line of text, a text area can contain any number of lines. A text area element looks like the following:

Lesson 7: Conditional Execution

Conditional execution refers to the ability to execute a statement or sequence of statements only if some condition holds. In JavaScript, conditional execution is performed using if statements.
The general form of an if statement is as follows, where the else case is optional: If the boolean test evaluates to true, then we say that the test succeeds and so the code immediately below (inside the curly-braces) is executed. If the test evaluates to false and there is an else case, then the code below the else (inside the curly-braces) is executed.
The following relational operators can be used to build boolean expressions: == equal to, != not equal to, < less than, <= less than or equal to, > greater than, and >= greater than or equal to.
Arbitrary numbers of alternative cases can be considered using a cascading if statement, which is really nothing more than nested if statements.
The library verify.js contains the definitions of functions for verifying the contents of a text box: verifyNum for a number; verifyInt for an integer; verifyNumInRange for a number in a specified range; verifyIntInRange for an integer in a specified range; and verifyOneOf for an item from a list of options.

Lesson 8: Dynamic Images

Unlike buttons, text boxes, and text areas, images do not have to be embedded in HTML forms.
An image in a Web page can be modified dynamically via a JavaScript assignment to its src attribute, e.g., document.images.die.src="die1.gif";
A variable that keeps track of the number occurrences of some event is known as a counter.
The conjunction (&&), disjunction (||), and negation (!) operators are known as logical connectives since they build complex logical expressions by connecting simpler logical expressions.
A boolean expression involving conjunction (&&) will evaluate to true if all of its components evaluate to true, e.g., (true && true) ===> true.
A boolean expression involving disjunction (||) will evaluate to true if any of its components evaluate to true, e.g., (false || true) ===> true.

Lesson 9: Conditional Repetition

A while loop is a control statement that allows for conditional repetition.
The general form for a while loop is as follows: If the loop test succeeds (i.e., evaluates to true), then the statements inside the loop body (i.e., inside the curly-braces) are executed. After making a pass through the loop, the loop test is re-evaluated, and the process repeats until the loop test finally fails (i.e., evaluates to false).
Even though they look similar, while loops and if statements are very different control statements -- an if statement will execute its statements either once or not at all, whereas a while loop can execute its statements repeatedly.
Infinite loops (or black hole loops) are while loops that repeat forever.