CSC 107 Fall 2001

Online Lesson Summaries

[ 1 | 2 | 3 | 4 | 5 | 6 ]

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 (formally 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 headings of decreasing sizes, while <hr> draws a horizontal line across the page. The <center></center> tags 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 an 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 an image tag, e.g., <img src="logo107.gif" alt="CSC 107 logo">.

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.
A JavaScript statement is a command that tells the browser to perform some specific action, such as prompting the user for a value or displaying text within the page.
JavaScript statements can be embedded inside the BODY of an HTML document, enclosed by the tags <script language="JavaScript"> and </script>. When the Web page is loaded, the statements inside the SCRIPT tags are executed (i.e., the actions specified by those statement are carried out in order) by the browser.
An assignment statement is used to assign a name to a value so that that value can be remembered and referenced throughout the page.
In simple terms, a function is a collection of JavaScript statements that carry out some specific task, and a call to a function specifies that those statements should be executed.
The predefined prompt function can be used to open a dialog box and prompt the user to enter a value. The prompt message and the default value displayed in the dialog box are specified as strings (sequences of characters enclosed in quotes).
A write statement is used to display a message within the Web page. A write statement utilizes the predefined document.write function, which takes a string or a sequence of strings and variables concatenated together using '+', and writes the resulting message into the page.
Since the message displayed by document.write is embedded directly into the HTML document, text within the message can be formatted using HTML tags.
A variable is a name that given to an arbitrary value so that it can be remembered and referred to later.
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) via an assignment statement (using '=').

Lesson 3: Data Types and Expressions

JavaScript has three basic data types: strings, numbers, and booleans.
The basic arithmetic operators '+' (addition), '-' (subtraction), '*' (multiplication), and '/' (division) are provided for numbers.
JavaScript variables can be assigned values of any type, including numbers and mathematical expressions. Similarly, write statements can display values of any type.
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.
For readability, JavaScript uses scientific notation to display very small and very large numbers.
Since numbers are stored in memory cells of fixed size, there is a limit to the range of numbers that can be represented in JavaScript. Roundoff may occur on numbers with many significant digits.
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.
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).

Lesson 4: Abstraction and 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.
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.
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.
A function defines a new environment in which variables can exist. Parameters belong to the function, so it is legal to have parameters with the same name as variables that appear in the BODY.
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 (similar to parameters) and will not alter other variables that might share the same name.
The general form for function definitions is as follows:
Special-purpose functions can be defined directly in the HEAD of a Web page, enclosed in SCRIPT tags. General-purpose function definitions can be placed in separate library files and then loaded into Web pages as needed using SCRIPT tags of the form:
The random.js library defines functions for generating random numbers in a range (randomNum), random integers in a range (randomInt), random characters from a string (randomChar), and random items from a list of options (randomOneOf).

Lesson 5: 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.
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., document.EventForm.userName.value='Dave';
The contents of a text box are treated as a string (similar to the return value of the prompt function), but can be converted to a number when desired using parseFloat.
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 6: 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-else statement, which is really nothing more than nested if statements.
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. In order to function properly, a counter must first be initialized to zero, then incremented each time the desired event occurs.