Beginning with JavaScript
JavaScript is an Object-Oriented Language
(OOL).
Object: A "thing," like the window
or a form or a button (on the screen).
Property: Objects have properties. For
example, the window has a name, the form may have a target
or a textbox.
Method: Methods are what the objects can
do. For example, the window may be open, a button may be clicked.
Parentheses follow methods, so if there's a set of parentheses, the item
to its left has to be a method.
Objects, properties, and methods are separated
by periods (or dots); this is called dot syntax. Here are some examples:
document.image.linkcolor (object and two
properties)
document.write() (object and method)
form.elements.Text.click() (object, 2
properties, and a method)
Objects and properties can be thought of as
nouns, with methods being the verbs.
Event Handlers: onMouseOver is one of JavaScript's
event
handlers. Events are actions by the viewer of an HTML page that includes
JavaScript. "onMouseOver" causes something to happen when the cursor moves
over an object on the screen.
Values: There are six
value types. You're probably most familiar with the number type. 5.48
is a numeric value. But to the computer, a string (text) is another kind
of value.
Variables: Variables contain values. You
can think of it like a small rural Post Office. Mail is stored in boxes
corresponding to addresses. In the computer, a variable name (such as PI)
would be the name of the "box" - that's the location in the memory - where
3.1416 is stored. PI, for example, would be a variable name. 3.1416 is
the value.
Assignment Statements and Operators:
To assign a value to a memory location, the equals sign is used...
A=2; define memory location A and put
the value of 2 in it
B=5; define memory location B and put
the value of 5 in it
product=A*B; define memory location product,
take the values stored in A and B, multiply them, and put them in location
product
word="This is a sentence"; define memory
location word and put the string value "This is a sentence" in it.
Semicolons are part of the syntax which
will be covered later. A, B, product, and word are variable names. Variable
names can't contain spaces or be one of JavaScript's reserved words. But
the value, if it is a string, can contain any characters (even blanks).
The asterisk is one of the operators - it means "multiply."
Comparisons: Every comparison returns a Boolean
value; i.e., True or False (in binary, 1 or 0). For example, A > B (using
the values stored in A and B from above) would return False. Comparisons
are usually used in loops.
Loops: The instructions within a loop are
executed until a condition is satisfied. For example...
Supposing that A has the value of 2 initially,
the for loop sets i to zero, tests it against the condition (i is less
than 3), does the instruction (adds 5 to A, getting 7), increments i by
one (that's the function of the "i++"), and repeats the process. Can you
see that, when the loop is exited, A has 17 stored in it? Here's the
execution of the program. Here's the text file,
since you can't see the JavaScript portion by using View|Source in your
browser. You probably noticed that it's the statement(s) within the curlicues
that gets executed. If there's more than one statement to be executed,
semicolons separate the statements. See this program's
execution for an example (text here). A while
loop can be used to do the same thing as the first
program, but the counter has to be incremented within the body. The
advantage of the while loop is that the incrementation doesn't have to
be limited to one. See the text of this program here.
Creation of JavaScript: Use a text editor
like Notepad or Wordpad. Do not use word processors like Word or WordPerfect
unless you are careful to save the file as "Text Only!" The text is usually
placed in an HTML document in the heading, but it may be placed in the
body. But don't save it as a "txt" document; use an "htm" or "html" extension.
Comments:
one-line comments start with a double
slash
// This is a one-line comment
/* This begins a multi-line comment
*/ This ends a multi-line comment
Here's an illustration
of
this, as well as the use of:
· text as a string variable
· the write method of the document
object
Here's the text form
of the illustration program.
Functions:
A function is a group of statements to
do a particular task. Here's an example (text
is given here) that displays a button (that says
"Hi") which, when clicked (onClick event handler) displays an alert box
which says "hello." Functions are followed by parentheses; the item(s)
in parentheses are the variables being passed to the function. In this
example, the function "sayhello" has no arguments, but the parentheses
are still required. What the function is to do is contained within the
curlicues; in this case, it calls up an alert box. The function definition
is within the HTML document heading.
It is in the body of the HTML document
that the function is called. Usually, event handlers are used to do this,
and in this case, the onClick event handler is being used. HTML coding
is being used to define a button and print "Hi!" on it. The onClick="sayhello()"
portion of the INPUT statement is used to call the function when the button
is clicked.
In this example,
you can see how a different message is passed to "msg". Look at the text
here. There are three buttons and therefore three INPUT statements.
You should notice that single quotes are used in each of the three calling
statements because they occur inside the double quotes.
As a final example, here's an engineering
problem: Find the stress in part of a machine frame.
Here it is in text form.
Good Programming Technique: Your programs
should be readable several months later, to you as well as to others.
Notice the indenting and use of blank lines?
You can find a lot more information at
this
excellent site!
Java vs. JavaScript differences:
-
JavaScript scripts are immediately interpreted in the browser; Java applets
are compiled to class files;
-
JavaScript can define objects but not classes of objects;
-
Object inheritance is not supported in JavaScript;
-
JavaScript does not require strong type declarations;
-
HTML tags and elements may interact with each other when using JavaScript;
-
JavaScript has less overhead.
ASEE Section conference 2000 presentation