Last week I talked about CSS (Cascading Style Sheets) and
how it is one of two technologies needed by both Dynamic
HTML and SVG (Scalable Vector Graphics) in order for them
to work effectively. The article is posted at: http://www.imswebtips.com/issue64top1.htm for your review.
The other basic technology that is needed to enable SVG
and DHTML to become truly dynamic is a scripting language.
There are several available but the most appropriate is
JavaScript. JavaScript was developed by Netscape but is
also supported by Internet Explorer so that it is fully
cross browser compatible.
I have written several articles in the past that include
references to JavaScript or to special effects or
functions that can be created with JavaScript. Two
JavaScript functions that you may find useful are:
These two articles illustrate how you can add useful
JavaScript functions to your HTML code. What I have not
done in the past however is attempt to show you how to
create your own JavaScript.
The first thing to know about JavaScript is that it is not
Java. Java is an Object-Orient programming language that
requires compilation. A Java applet works independently of
the Browser. JavaScript uses a far simpler syntax than
Java and is not precompiled. It can be embed within the
HTML code and interpreted directly by the Browser.
Despite the fact that it is not compiled and has a far
simpler syntax (coding language) than Java, JavaScript is
still a true programming language. For this reason a lot
of Web Developers tend to stay away from it. When they do
use JavaScript it is usually only to cut and paste it into
their HTML from another source as in the two examples I
provided.
That is unfortunate. Although JavaScript can be complex,
it can also be very easy to learn and use. You don't need
to be able to write a Shakespearean sonnet in order to be
able to write. Sometimes just a short grocery list will
serve its purpose quite well.
If you currently know any programming or scripting
languages you should have no problem learning JavaScript.
If you don't have any programming experience then
JavaScript is probably the ideal tool to start with. I
will not attempt to teach you everything there is about
JavaScript since it is far too extensive. I can however,
introduce some of the basics. It should be enough to allow
you to write some simple programs or to at least
understand what you are pasting into you Web Site when you
get a script from a 3rd party.
Here is your first program.
<SCRIPT language="JavaScript">
hello();
function hello()
{
document.write("Hello World");
}
</script>
This is the famous Hello World program. It is famous
because it is nearly always the first program you will see
when learning any programming language for the first time.
If you take this simple program and paste it into a HTML
page you should see it do its thing when you display the
page. Its thing is to print "Hello World" to the screen.
Although simple, it is a program and does illustrate the
structure and much of the syntax of any JavaScript
program.
The first thing to note are the <script></script> tags.
These are HTML and simply tell the Browser to stop
processing HTML and to start processing a script. The
Language = "JavaScript" identifies the code as JavaScript.
You could also read VBScript but that is Microsoft
specific and not supported in Netscape.
Between the Script Tags are a series of statements. The
first one is a call to the function "hello". The next line
is a declaration for the function "hello". The code for
this function is between the two curly brackets { and }.
The only statement within this function is to write the
string "Hello World" to the document, which is usually the
viewer's screen, but it could be a printer or a file.
This program is not very complex but if you don't know how
it works, it can be confusing. The first thing to
understand about nearly any programming language, is that
they work by executing a command one after the other like
HTML tags but unlike HTML, the commands do not have to be
executed in sequence. Take a look at this example.
<SCRIPT language="JavaScript">
function hello()
{
document.write("Hello World ");
}
hello();
hello();
hello();
</script>
If you try this example, you will see the string "Hello
World" printed 3 times. Since we are printing to an HTML
document, I have added a break <br> tag so that each line
will appear below the preceding line instead of beside it.
This example illustrates several significant programming
concepts. The first is the function, which is also called
a subroutine in some languages. A function is simply a
piece of code that can be used at any time. When the
Browser (or a compiler) encounters a function statement,
it does not execute it but simply saves it for use at a
later time. Since a function is not immediately executed,
it can be placed anywhere within the script you like
provided you follow the correct syntax.
In this second example, the function hello is executed 3
times by the hello statement. In the first example, the
"hello" statement appeared before the "hello" function was
declared. In the second example, the statement appears 3
times after the declaration, which is why it was executed
3 times. It really does not matter if a function call
appears before or after the function is declared. But what
if the function call is placed inside the function itself?
That does matter.
Can you figure out what this program will do?
<SCRIPT language="JavaScript">
hello();
function hello()
{
document.write("Hello World ");
hello();
}
</script>
is65fig3
As in the first example, the "hello" statement calls the
"hello" function. Unlike the first two examples, the
function now includes a second statement, which is also a
"hello" statement call to itself. This is called recursion
and some programming languages will not let you do it.
JavaScript will.
If you have not figured it out, once this program executes
the "hello" function, the function will start calling
itself in a cycle in theory forever. In practice however,
it will stop either because the Browser will declare an
error or because the Web Page will be closed. In the good
old days (5 or more years ago) many computers would simply
'hang' as they tried to execute a recursive program as
fast as they could forever. The only solution was to
reboot. Even now if your computer appears to hang it could
be a wayward program stuck in an infinite loop like this.
Recursion is sometimes quite useful but you really need to
know why you are doing it.
The other significant thing to note is the difference
between "hello" statement and the "hello" function. A
function is declared with the function statement. You can
name you function almost anything you wish provided you
use standard characters. The function name is always
followed by two round brackets (). In the above examples,
the function is called "hello" and declared as:
function hello(). The round brackets are used to pass
information such as numbers and strings. The "hello"
function does not need any information so the brackets are
empty.
The brackets also help to identify the function statement
call. The statement "hello" by itself is meaningless to
JavaScript but when round brackets are included "hello()"
it tells the JavaScript reader that this is a function
call. The reader will then look for a function called
"hello" and execute it.
If you have not yet noticed it, the statement:
document.write("Hello World"); is also a function call.
The function is called "write" and the preceding
"document" statement identifies it as a predefined system
function that is part of the document. This function
expects to receive a string of characters that it will
print. The string is included between the round brackets
as: "Hello World".
The only other thing to note about functions is that all
the statements must be included between curly brackets {}.
When the closing bracket is found the function is
finished.
Finally you will note that many of the statements are
terminated with a semicolon ";". Terminating a statement
with a semicolon is not required in JavaScript but is
standard practice in other languages such as C++ and Java.
It is a good practice to use semicolons at the end of
statements but take note that a statement does not
necessarily end at the end of a line. A function for
example, is a statement. The line: "function hello()" does
not have a semicolon at the end because it's statement is
not finished until the terminating curly bracket } is
found. If you put a semicolon on the first line it would
terminate the function and you would not get the result
you expected.
For those of you with very little programming experience
this may seem like an awful lot to comprehend. It is
however, probably the hardest part. If you can get through
this the rest will hopefully be a "piece of cake" or at
least a "gateau". Look at the code and do not be afraid of
the syntax. Especially, don't fear words like "syntax",
that is all they are.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
