A Balanced Introduction to Computer Science and Programming
David Reed
Creighton University
Programming Chapter Summaries
[
2 |
4 |
5 |
7 |
9 |
11 ]
- 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
<!--
and -->. 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>.
- Text enclosed within HTML tags is known as an element, such as a
<b>bold element</b>.
- 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="reed.gif" alt="Dave Reed">.
- 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 a Web page, embedded
between 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 Web page, text within the message can be formatted using HTML tags.
- A variable is a name that is 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 '=').
- 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 to 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 Math.random returns a random
number from the range [0...1).
- 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 value 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:
<![CDATA[
function FUNCTION_NAME(PARAMETER_1, PARAMETER_2,..., PARAMETER_n)
// Assumes: DESCRIPTION OF ASSUMPTIONS MADE ABOUT PARAMETERS
// Returns: DESCRIPTION OF VALUE RETURNED BY FUNCTION
{
var LOCAL_1, LOCAL_2,..., LOCAL_m;
STATEMENTS
return EXPRESSION_SPECIFYING_FUNCTION_VALUE;
}
]]>
- 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:
<![CDATA[
<script language="JavaScript" src="LIBRARY_FILENAME"></script>
]]>
- 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).
- Debugging is the process of systematically locating and fixing errors (also
known
as bugs) in a program.
- 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:
<![CDATA[
<input type="button" value="BUTTON_LABEL"
onClick="JAVASCRIPT_CODE">
]]>
- Buttons and other event-driven elements must be
grouped inside a form, specified
with the tags
<form name="FORM_NAME"> and
</form>.
- Values can be read in from the Web page using text
boxes. A text box element
looks like the
following:
<![CDATA[
<input type="text" name="TEXTBOX_NAME" size=NUM_CHARS
value="INITIAL_TEXT">
]]>
- The contents of a text box can be accessed as:
document.FORM_NAME.TEXTBOX_NAME.value
Similarly, values can be displayed in a text box by
assigning the value of that text
box, e.g.,
<![CDATA[
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:
<![CDATA[
<textarea name="TEXTAREA_NAME" rows=NUM_ROWS cols=NUM_COLS wrap="virtual">
INITIAL TEXT
</textarea>
]]>
- 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.,
<![CDATA[
document.images.pic.src="reed.gif";
]]>
- 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:
<![CDATA[
if (BOOLEAN_TEST) {
STATEMENTS_EXECUTED_IF_TRUE
}
else {
STATEMENTS_EXECUTED_IF_FALSE
}
]]>
If the Boolean test evaluates to true, then we say that the test succeeds
and
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.
<![CDATA[
if (TEST_1) {
STATEMENTS_EXECUTED_IF_TEST_1_SUCCEEDS
}
else if (TEST_2) {
STATEMENTS_EXECUTED_IF_TEST_2_SUCCEEDS
}
else if (TEST_3) {
STATEMENTS_EXECUTED_IF_TEST_3_SUCCEEDS
}
. . .
else {
STATEMENTS_IF_ELSE
}
]]>
- 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.
- 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., (true || false) ===>
true.